功能测试页面

 
English 中文

这是中文内容。

这是一个双语博客的测试。你应该能在标题下方看到语言切换按钮。

如果在主页列表看到这篇文章,应该能看到 EN/CN 的标志。


本文档用于展示博客主题支持的各种自定义内容块及其使用方法。每种样式都提供了源码示例和实际渲染效果。

1. 基础提示块 (Basic Blocks)

支持四种基础状态颜色:Standard, Success, Info, Warning, Error。

HTML 语法

使用 <div class="*-block" markdown="1"> (注意 markdown="1" 对于处理内部 MD 内容是必须的)。

源码示例:

<!-- 常规/默认 -->
<div class="neutral-block" markdown="1">
<div class="block-title">Neutral Block</div>
这是一个默认样式的块。
</div>

<!-- 成功/绿色 -->
<div class="success-block" markdown="1">
<div class="block-title">Success Block</div>
操作成功提示。
</div>

<!-- 信息/蓝色 -->
<div class="info-block" markdown="1">
<div class="block-title">Info Block</div>
一般信息提示。
</div>

<!-- 警告/黄色 -->
<div class="warning-block" markdown="1">
<div class="block-title">Warning Block</div>
警告信息提示。
</div>

<!-- 错误/红色 -->
<div class="error-block" markdown="1">
<div class="block-title">Error Block</div>
错误或危险操作提示。
</div>

渲染效果:

Neutral Block

这是一个默认样式的块。

Success Block

操作成功提示。

Info Block

一般信息提示。

Warning Block

警告信息提示。

Error Block

错误或危险操作提示。

Liquid 标签语法

使用 {% plain type title="..." %}

源码示例:


{% plain success title="Liquid Success" %}
这是使用 Liquid 标签生成的块。
{% endplain %}

{% plain error title="Liquid Error" %}
这是使用 Liquid 标签生成的错误块。
{% endplain %}

渲染效果:

这是使用 Liquid 标签生成的块。

这是使用 Liquid 标签生成的错误块。


2. 学术与数学块 (Academic Blocks)

支持常见的学术环境定义:proof, theorem, lemma, proposition, definition, example, remark, note, solution

基础用法 (默认换行标题)

HTML 源码:

<div class="theorem" markdown="1">
这是一个定理。
</div>

<div class="proof" markdown="1">
这是一个证明。
</div>

Liquid 源码:


{% theorem %}
这是一个定理 (Liquid)。
{% endtheorem %}

渲染效果:

这是一个定理。

这是一个证明。

行内标题样式 (Inline)

添加 inline 类或参数。

源码:

<div class="proof inline" markdown="1">
标题与内容在同一行。
</div>


{% note inline %}
注意:这是一个行内标题的 Note。
{% endnote %}

渲染效果:

标题与内容在同一行。

注意:这是一个行内标题的 Note。

自定义标题

使用 data-title 属性或 title 参数。

源码:

<div class="lemma" data-title="Zorn's Lemma" markdown="1">
每个非空偏序集都有一个最大元...
</div>


{% proposition title="My Proposition" %}
这是一个自定义标题的命题。
{% endproposition %}

渲染效果:

每个非空偏序集都有一个最大元…

这是一个自定义标题的命题。


3. 可折叠块 (Collapsible Blocks)

HTML 语法 (details & summary)

源码:

<details class="info" markdown="1">
<summary data-title="点击展开详情"></summary>
这里是隐藏的详细内容。
</details>

渲染效果:

这里是隐藏的详细内容。

Liquid 语法 (fold 参数)

源码:


{% example fold title="查看代码示例" %}
```python
print("Hidden Code")
```
{% endexample %}

渲染效果:

print("Hidden Code")

4. 代码块增强 (Code Block Enhancements)

支持给代码块添加标题、默认折叠状态以及特殊样式。

带标题的代码块

在代码块下方添加 {: title="..." }

源码:

```python
def main():
    pass
```
{: title="main.py" }

渲染效果:

def main():
    pass

默认折叠的代码块

使用 fold="true" (默认折叠) 或 fold="open" (默认展开)。

源码:

```javascript
// 长代码折叠
const bigFile = "...";
```
{: title="config.js" fold="true" }

渲染效果:

// 长代码折叠
const bigFile = "...";

特殊语义颜色代码块

使用 type="..." 参数。支持 example (绿), exploit (蓝), error (红)。

源码:

```bash
# 这是一个正确示例
npm install
```
{: type="example" }

```c
// 这是一个漏洞利用代码
char buf[10];
strcpy(buf, input);
```
{: type="exploit" title="vulnerable.c" }

```bash
# 这是一个错误操作
rm -rf /
```
{: type="error" }

渲染效果:

# 这是一个正确示例
npm install
// 这是一个漏洞利用代码
char buf[10];
strcpy(buf, input);
# 这是一个错误操作
rm -rf /

Liquid 代码块包装

源码:


{% code_block success fold title="Wrapped Code" %}
```python
print("Wrapped in Liquid")
```
{% endcode_block %}

渲染效果:

print("Wrapped in Liquid")