同“在 Hugo 博客中实现多语言代码片段的选项卡切换”一致，该功能实现主要基于 Shortcode。以下是名为 two-columns.html 的 Shortcode:
<div class="two-columns-container">
<div class="column column-left">
{{ with .Inner }}
{{ $parts := split . "###" }}
{{ if ge (len $parts) 1 }}
{{ $left := index $parts 0 }}
{{ $left | $.Page.RenderString }}
{{ end }}
{{ end }}
</div>
<div class="column column-right">
{{ with .Inner }}
{{ $parts := split . "###" }}
{{ if ge (len $parts) 2 }}
{{ $right := index $parts 1 }}
{{ $right | $.Page.RenderString }}
{{ end }}
{{ end }}
</div>
</div>
.two-columns-container {
display: flex;
gap: 10px; /* 调整列之间的间距 */
margin: 20px 0; /* 添加上下外边距以与其他内容区分 */
}
.column {
flex: 1; /* 每列占据相等的空间 */
padding: 10px; /* 内边距 */
background-color: transparent; /* 透明背景 */
border: 1px solid rgba(255, 255, 255, 0.6); /* 半透明边框 */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 添加适配小屏幕的响应式设计 */
@media (max-width: 768px) {
.two-columns-container {
flex-direction: column;
}
}
在 markdown 中可以使用如下格式：
呈现在页面中的样式如下：
int test();
int main()
{
for (int a = 0; a < 10; a++)
cout << test() << " ";
return 0;
}
int test()
{
int a = 0;
a++;
return a;
}
int test();
int main()
{
for (int a = 0; a < 10; a++)
cout << test() << " ";
return 0;
}
int test()
{
static int a = 0;
a++;
return a;
}