Style Reference

Info

This documentation is AI-generated. You can help improve it by submitting an Issue.

This documentation demonstrates the theme's basic styles, extended styles, and their syntax.

提示

The displayed styles are theme defaults; some styles can be adjusted according to actual needs.

Style Application Scope

详细信息

Related Documentation: 模板文件 and 访问路径映射

General Style Applicable template file scope: Every page。
Content Style Applicable template file scope: archives.html, category.html, links.html, moments.html, moment.html, page.html, photos.html, post.html, tag.html. 5xx.html, 404.html。CSS selector is .content。
Post Style Applicable template file scope: author.html, links.html, moment.html, moments.html, page.html, photos.html, post.html, qrcode.html, 5xx.html, 404.html。CSS selector is article .content。

How to Use HTML Syntax in the Editor

详细信息

Usage in the default editor:
1. Need to enable Markdown / HTML 内容块插件(应用市场页面)。
2. Type in the default editor /html and select to insert an HTML code block.
Usage in Vditor editor:
1. Need to enable Vditor 编辑器插件(应用市场页面)，and enter the post edit page, set the post editor to Vditor editor.
2. Vditor editor natively supports HTML tags, just write directly.

Quick Reference for Extended Styles Extended Style

This section lists the extended styles implemented by this theme.

缩写
响应式视频嵌入
引用块脚注
拉引用块
水平分割线（特殊样式）
隐藏/剧透
明暗模式显隐块

Italic/Emphasis General Style

Markdown Syntax

markdown

*This is emphasized text*
_This is emphasized text_

HTML Tag Syntax

html

<em>This is emphasized text</em>

Rendering Effect

Bold General Style

Markdown Syntax

markdown

**This is bold text**
__This is bold text__

HTML Tag Syntax

html

<strong>This is bold text</strong>

Rendering Effect

Inline Code General Style

Markdown Syntax

markdown

`print("世界，你好！")`

HTML Tag Syntax

html

<code>print("世界，你好！")</code>

Rendering Effect

Multi-line Code Block General Style

Markdown Syntax

markdown

```python
print("世界，你好！")
```

~~~python
print("世界，你好！")
~~~

````markdown
_嵌套 code 块示例_

```python
print("嵌套 code 块")
```
````

Rendering Effect

渲染效果随实际渲染器（如 shiki，highlight.js）变化，故不做渲染展示。

Paragraph General Style

Markdown Syntax

markdown

This is a regular paragraph, testing text alignment and line height.This paragraph contains some common formatting like**bold**、*italic*和 `code`。According to your CSS, this text should have appropriate line height and alignment.

This is another paragraph, this is a\
line break.

and this is not a
line break.

在这一行末尾空两格  
也可以产生一个 line break.

Empty lines are not displayed by default. If you enable `文章页样式 - 文章页样式 - 优化文章段落空行显示`, empty lines will be displayed.

HTML Tag Syntax

html

<p>This is a regular paragraph, testing text alignment and line height.This paragraph contains some common formatting like<strong>bold</strong>、<em>italic</em>和 <code>code</code>。According to your CSS, this text should have appropriate line height and alignment.</p>

Rendering Effect

Citation Source General Style

HTML Tag Syntax

html

From<cite>"Documentation Writing Guide"</cite>

From <cite>Documentation Writing Guide</cite>

Rendering Effect

Superscript and Subscript General Style

HTML Tag Syntax

html

Normal text<sup>superscript<sup>上 superscript<sup>上上 superscript<sup>上上上 superscript</sup></sup></sup></sup>
Normal text<sub>subscript<sub>下 subscript<sub>下下 subscript<sub>下下下 subscript</sub></sub></sub></sub>

Normal text<sup>superscript</sup>and<sub>subscript</sub>

Rendering Effect

Small Text General Style

HTML Tag Syntax

html

这是 Normal text <small>This is small text</small> 这是 Normal text

This is normal text <small>This is small text</small> This is normal text

Rendering Effect

Abbreviation General Style Extended Style

HTML Tag Syntax

html

This text contains an abbreviation, hover over it on devices that support hovering to see the tooltip:<abbr title="Hypertext Markup Language">HTML</abbr>

When <strong>device does not support hovering</strong> or in <strong>print mode</strong>, the full term will be displayed as `(全称)` after the abbreviation.
For example, on touch devices, the above "HTML" will automatically display as "HTML(Hypertext Markup Language)".

<abbr title="Hypertext Markup Language"><a href="https://example.com">HTML - This line will apply both a tag styles in posts, so there are two layers of underline</a></abbr>

<abbr title="我是提示">This tag has a title attribute, so hovering over it will show a tooltip.</abbr>

<abbr>Actually <abbr>title</abbr> is optional</abbr>

<abbr>One layer <abbr>Two layers <abbr>Three layers <abbr>Four layers abbr tag nesting test </abbr></abbr></abbr></abbr>

Rendering Effect

标题 General Style

Markdown Syntax

markdown

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

HTML Tag Syntax

html

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

HTML Class Syntax

html

<div class="h1">使用 h1 类的文本</div>
<div class="h2">使用 h2 类的文本</div>

Rendering Effect

文章二级标题样式 Post Style

Markdown Syntax

markdown

## 在此处 h2 标题前应有一个 `#` 字符

HTML Tag Syntax

html

<h2>在此处 h2 标题前应有一个 <code>#</code> 字符</h2>

Rendering Effect

标题中的链接 General Style

Markdown Syntax

markdown

# [一级标题中的链接](https://howiehz.top)
## [二级标题中的链接](https://howiehz.top)
### [三级标题中的链接](https://howiehz.top)
#### [四级标题中的链接](https://howiehz.top)
##### [五级标题中的链接](https://howiehz.top)
###### [六级标题中的链接](https://howiehz.top)

HTML Tag Syntax

html

<h1><a href="https://howiehz.top">一级标题中的链接</a></h1>
<h2><a href="https://howiehz.top">二级标题中的链接</a></h2>
<h3><a href="https://howiehz.top">三级标题中的链接</a></h3>
<h4><a href="https://howiehz.top">四级标题中的链接</a></h4>
<h5><a href="https://howiehz.top">五级标题中的链接</a></h5>
<h6><a href="https://howiehz.top">六级标题中的链接</a></h6>

HTML Class Syntax

html

<div class="h1"><a href="https://example.com">h1 类中的链接</a></div>
<div class="h2"><a href="https://example.com">h2 类中的链接</a></div>

Rendering Effect

链接 Content Style

Markdown Syntax

markdown

[这是普通链接](https://example.com)，有下划线效果。鼠标悬停时下划线颜色会变化。

HTML Tag Syntax

html

<a href="https://example.com">这是普通链接</a>，有下划线效果。鼠标悬停时下划线颜色会变化。

Rendering Effect

图标链接 Content Style

html

<a class="icon" href="javascript:void(0);">这里有一个带有 `class="icon"` 的超链接标签：用于图标链接，没有下划线，鼠标悬停时颜色会变化</a>

Rendering Effect

图片嵌入 Post Style

Markdown Syntax

markdown

![Alt text - 图片未加载则显示](https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-2311325.jpg)

![Alt text - 图片未加载则显示](https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-878514.jpg "Optional title - 可选的 title 值")

![cat](https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-2572384.jpg)

HTML Tag Syntax

html

<p>
  <img
    src="https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-2311325.jpg"
    alt="Alt text - 图片未加载则显示"
  />
</p>

<p>
  <img
    src="https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-878514.jpg"
    alt="Alt text - 图片未加载则显示"
    title="Optional title - 可选的 title 值"
  />
</p>

<p>
  <img
    src="https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-2572384.jpg"
    alt="cat"
  />
</p>

Rendering Effect

说明文字 Post Style

HTML Tag Syntax

html

<p><img src="https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-878514.jpg" alt="cat" /></p>

<div class="caption">我是图片说明文字 上面是城市夜景</div>
<figcaption>我是图片说明文字 上面是城市夜景</figcaption>
<div class="caption">我也是图片说明文字 <a href="https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-2572384.jpg">我是超链接</a></div>
<figcaption>我也是图片说明文字 <a href="https://probberechts.github.io/hexo-theme-cactus/cactus-dark/public/assets/wallpaper-2572384.jpg">我是超链接</a></figcaption>

Rendering Effect

响应式视频嵌入 Post Style Extended Style

HTML Tag Syntax

提示

包裹在 <div class="video-container"></div> 内使得嵌入的视频宽度能随着页面宽度减小，方法 From CSS: Elastic Videos - Web Designer Wall。

html

<div class="video-container">
  <iframe
    src="https://player.bilibili.com/player.html?bvid=BV1A7QWY3EkW&autoplay=0&poster=1&muted=1&danmaku=0"
    width="100%"
    height="500"
    scrolling="no"
    frameborder="0"
    framespacing="0"
    allowfullscreen="true"
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
  ></iframe>
</div>

Rendering Effect

引用块 Post Style

Markdown Syntax

markdown

> 引用内容

> 这是引用内容
>
> > 这是嵌套引用内容
>
> 这层引用内容回到了第 One layer

Rendering Effect

引用块脚注 Post Style Extended Style

Markdown Syntax

markdown

> 引用内容
>
> <footer>脚注信息</footer>

> 引用内容
>
> <footer><cite>作者名</cite></footer>

> 引用内容
>
> <footer><a href="https://example.com">作者主页</a></footer>

> 这是一个引用块。它应用了特定的颜色和字体粗细。
>
> <footer><a href="https://example.com">作者链接</a><cite>作者名</cite></footer>

Rendering Effect

拉引用块 Post Style Extended Style

HTML Tag Syntax

html

<div style="clear: both">

这是一段测试文本，正如你所想的，只是一段测试文本。这是一段测试文本，正如你所想的，只是一段测试文本。这是一段测试文本，正如你所想的，只是一段测试文本。这是一段测试文本，正如你所想的，只是一段测试文本。

<blockquote class="pullquote">

这是拉引用样式。这是拉引用样式。这是拉引用样式。这是拉引用样式。这是拉引用样式。这是拉引用样式。这是拉引用样式。

</blockquote>

这还是一段测试文本，正如你所想的，只是一段测试文本。这还是一段测试文本，正如你所想的，只是一段测试文本。这还是一段测试文本，正如你所想的，只是一段测试文本。这还是一段测试文本，正如你所想的，只是一段测试文本。

<blockquote class="pullquote left">

这是左侧的拉引用样式。这是左侧的拉引用样式。这是左侧的拉引用样式。这是左侧的拉引用样式。这是左侧的拉引用样式。这是左侧的拉引用样式。这是左侧的拉引用样式。

</blockquote>

这是主文本内容，可以围绕左侧的拉引用。这段文本足够长，可以测试文本如何环绕左侧拉引用。可以看到引用只占据了 45% 的宽度，文本会自动填充剩余空间。这是主文本内容，可以围绕左侧的拉引用。这段文本足够长，可以测试文本如何环绕左侧拉引用。可以看到引用只占据了 45% 的宽度，文本会自动填充剩余空间。这是主文本内容，可以围绕左侧的拉引用。这段文本足够长，可以测试文本如何环绕左侧拉引用。可以看到引用只占据了 45% 的宽度，文本会自动填充剩余空间。这是主文本内容，可以围绕左侧的拉引用。这段文本足够长，可以测试文本如何环绕左侧拉引用。可以看到引用只占据了 45% 的宽度，文本会自动填充剩余空间。

<blockquote class="pullquote right">

这是右侧的拉引用样式。这是右侧的拉引用样式。这是右侧的拉引用样式。这是右侧的拉引用样式。这是右侧的拉引用样式。这是右侧的拉引用样式。这是右侧的拉引用样式。

</blockquote>

这是另一段文本，围绕右侧拉引用。同样地，这段文字需要足够长，才能看出环绕效果。右侧拉引用也有特定的边距设置。这是另一段文本，围绕右侧拉引用。同样地，这段文字需要足够长，才能看出环绕效果。右侧拉引用也有特定的边距设置。这是另一段文本，围绕右侧引用。这是另一段文本，围绕右侧拉引用。同样地，这段文字需要足够长，才能看出环绕效果。右侧拉引用也有特定的边距设置。这是另一段文本，围绕右侧引用。这是另一段文本，围绕右侧拉引用。同样地，这段文字需要足够长，才能看出环绕效果。右侧拉引用也有特定的边距设置。这是另一段文本，围绕右侧引用。这是另一段文本，围绕右侧拉引用。同样地，这段文字需要足够长，才能看出环绕效果。右侧拉引用也有特定的边距设置。这是另一段文本，围绕右侧引用。

</div>

Rendering Effect

无序列表 General Style

Markdown Syntax

markdown

- 列表项一
- 列表项二
  - 嵌套列表项
  - 另一嵌套列表项
- 列表项三

HTML Tag Syntax

html

<ul>
  <li>列表项一</li>
  <li>
    列表项二
    <ul>
      <li>嵌套列表项</li>
      <li>另一嵌套列表项</li>
    </ul>
  </li>
  <li>列表项三</li>
</ul>

Rendering Effect

有序列表 General Style

Markdown Syntax

markdown

1. 第一项
2. 第二项
   1. 嵌套有序项
   2. 嵌套有序项
3. 第三项

HTML Tag Syntax

html

<ol>
  <li>第一项</li>
  <li>
    第二项
    <ol>
      <li>嵌套有序项</li>
      <li>嵌套有序项</li>
    </ol>
  </li>
  <li>第三项</li>
</ol>

Rendering Effect

定义列表 General Style

HTML Tag Syntax

html

<dl>
  <dt>术语一</dt>
  <dd>术语一的定义说明</dd>
  <dt>术语二</dt>
  <dd>术语二的定义说明</dd>
</dl>

Rendering Effect

表格 General Style

Markdown Syntax

markdown

| 名称     | 平均时间复杂度 | 空间复杂度 |
| -------- | -------------- | ---------- |
| 冒泡排序 | O(n^2)         | O(1)       |
| 归并排序 | O(n log n)     | O(n)       |
| 快速排序 | O(n log n)     | O(log n)   |

HTML Tag Syntax

html

<table>
  <thead>
    <tr>
      <th><p>名称</p></th>
      <th><p>平均时间复杂度</p></th>
      <th><p>空间复杂度</p></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>冒泡排序</p></td>
      <td><p>O(n^2)</p></td>
      <td><p>O(1)</p></td>
    </tr>
    <tr>
      <td><p>归并排序</p></td>
      <td><p>O(n\log n)</p></td>
      <td><p>O(n)</p></td>
    </tr>
    <tr>
      <td><p>快速排序</p></td>
      <td><p>O(n\log n)</p></td>
      <td><p>O(\log n)</p></td>
    </tr>
  </tbody>
</table>

Rendering Effect

水平分割线 General Style

Markdown Syntax

markdown

---

HTML Tag Syntax

html

<hr />

Rendering Effect

水平分割线（特殊样式） General Style Extended Style

HTML Class Syntax

html

<hr class="divide" />

Rendering Effect

隐藏/剧透 General Style Extended Style

HTML Tag Syntax

html

我不是隐藏内容。<hide class="blur">我是隐藏内容。应该是模糊样式。</hide>我也不是隐藏内容。
我不是隐藏内容。<spoiler class="blur">我是隐藏内容。应该是模糊样式。</spoiler>我也不是隐藏内容。

我不是隐藏内容。<hide class="black">我是隐藏内容。应该是黑块样式。</hide>我也不是隐藏内容。
我不是隐藏内容。<spoiler class="black">我是隐藏内容。应该是黑块样式。</spoiler>我也不是隐藏内容。

我不是隐藏内容。<hide>我是隐藏内容。鼠标悬停、聚焦或文字选中时自动显示。</hide>我也不是隐藏内容。
我不是隐藏内容。<spoiler>我是隐藏内容。鼠标悬停、聚焦或文字选中时自动显示。</spoiler>我也不是隐藏内容。

Rendering Effect

长单词测试 Content Style

HTML Tag Syntax

html

<p>这段文本使用了 hyphens: auto，显示自动断词效果。Supercalifragilisticexpialidocious 是一个非常长的英文单词，在窄容器中会自动添加连字符。Pneumonoultramicroscopicsilicovolcanoconiosis 是另一个超长单词示例。An extremely long English word</p>

<code>这段文本使用了 hyphens: manual，无自动断词。Supercalifragilisticexpialidocious 是一个非常长的英文单词，不会自动添加连字符。Pneumonoultramicroscopicsilicovolcanoconiosis 是另一个超长单词示例。An extremely long English word</code>

Rendering Result

明暗模式显隐块 Post Style Extended Style

html

<div class="light">这段内容只在亮色模式/自动模式 (亮色) 下显示。试试切换页面主题。</div>
<div class="dark">这段内容只在暗色模式/自动模式 (暗色) 下显示。试试切换页面主题。</div>

Rendering Effect

Mermaid 适配明暗主题切换

以下方法均为 HTML 标签写法。
相关链接：How to Use HTML Syntax in the Editor

方法一默认编辑器可用 Vditor 编辑器可用

Need to enable Mermaid 支持。
图表只写一遍，自动生成浅色/深色模式下两种图表。
缺点：不兼容 Vditor 编辑器的实时预览。

html

<div class="mermaid auto">
[[图表正文]]
</div>

方法二默认编辑器可用

Need to enable Mermaid 支持。
手动管理浅色/深色模式下的图表。

html

<div class="mermaid dark">
%%{init: { "theme": "dark" } }%%
[[图表正文]]
</div>

<div class="mermaid light">
%%{init: { "theme": "light" } }%%
[[图表正文]]
</div>

方法三 Vditor 编辑器可用

Need to enable Mermaid 支持。
原理：由于主题的 Mermaid 初始化先加载，可在 Vditor 自带的 Mermaid 渲染前抢先渲染生成。
缺点：一张图会多被渲染一遍（被 Vditor 自带的 Mermaid 多渲染一遍）。
优点：兼容 Vditor 编辑器的实时预览。注意：出现的空行不可省略，没出现空行的也不能多添加空行。建议使用分屏预览模式编辑。

html

<div class="mermaid auto">

```mermaid
[[图表正文]]
```

</div>

方法四 Vditor 编辑器可用

需关闭 Mermaid 支持。
缺点：同样内容要复制粘贴一遍。由于是完全使用 Vditor 自带的渲染，所以主题设置中有关 Mermaid 的设置会失效。会继承上游的 bug，如 mermaid-js/mermaid@5741。
优点：兼容 Vditor 编辑器的实时预览，兼容性最好。完全使用 Vditor 自带的渲染，和预览表现一致。

html

<div class="light">

```mermaid
---
title: [[图表标题]]
---
%%{init: { "theme": "light" } }%%
[[图表正文]]
```

</div>

<div class="dark">

```mermaid
---
title: [[图表标题]]
---
%%{init: { "theme": "dark" } }%%
[[图表正文]]
```

</div>

Style Reference ​

Style Application Scope ​

How to Use HTML Syntax in the Editor ​

Quick Reference for Extended Styles Extended Style ​

Italic/Emphasis General Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

Bold General Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

Inline Code General Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

Multi-line Code Block General Style ​

Markdown Syntax ​

Rendering Effect ​

Paragraph General Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

Citation Source General Style ​

HTML Tag Syntax ​

Rendering Effect ​

Superscript and Subscript General Style ​

HTML Tag Syntax ​

Rendering Effect ​

Small Text General Style ​

HTML Tag Syntax ​

Rendering Effect ​

Abbreviation General Style Extended Style ​

HTML Tag Syntax ​

Rendering Effect ​

标题 General Style ​

Markdown Syntax ​

HTML Tag Syntax ​

HTML Class Syntax ​

Rendering Effect ​

文章二级标题样式 Post Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

标题中的链接 General Style ​

Markdown Syntax ​

HTML Tag Syntax ​

HTML Class Syntax ​

Rendering Effect ​

链接 Content Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

图标链接 Content Style ​

Rendering Effect ​

图片嵌入 Post Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

说明文字 Post Style ​

HTML Tag Syntax ​

Rendering Effect ​

响应式视频嵌入 Post Style Extended Style ​

HTML Tag Syntax ​

Rendering Effect ​

引用块 Post Style ​

Markdown Syntax ​

Rendering Effect ​

引用块脚注 Post Style Extended Style ​

Markdown Syntax ​

Rendering Effect ​

拉引用块 Post Style Extended Style ​

HTML Tag Syntax ​

Rendering Effect ​

无序列表 General Style ​

Markdown Syntax ​

HTML Tag Syntax ​

Rendering Effect ​

有序列表 General Style ​

Markdown Syntax ​

Style Reference

Style Application Scope

How to Use HTML Syntax in the Editor

Quick Reference for Extended Styles Extended Style

Italic/Emphasis General Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

Bold General Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

Inline Code General Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

Multi-line Code Block General Style

Markdown Syntax

Rendering Effect

Paragraph General Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

Citation Source General Style

HTML Tag Syntax

Rendering Effect

Superscript and Subscript General Style

HTML Tag Syntax

Rendering Effect

Small Text General Style

HTML Tag Syntax

Rendering Effect

Abbreviation General Style Extended Style

HTML Tag Syntax

Rendering Effect

标题 General Style

Markdown Syntax

HTML Tag Syntax

HTML Class Syntax

Rendering Effect

文章二级标题样式 Post Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

标题中的链接 General Style

Markdown Syntax

HTML Tag Syntax

HTML Class Syntax

Rendering Effect

链接 Content Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

图标链接 Content Style

Rendering Effect

图片嵌入 Post Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

说明文字 Post Style

HTML Tag Syntax

Rendering Effect

响应式视频嵌入 Post Style Extended Style

HTML Tag Syntax

Rendering Effect

引用块 Post Style

Markdown Syntax

Rendering Effect

引用块脚注 Post Style Extended Style

Markdown Syntax

Rendering Effect

拉引用块 Post Style Extended Style

HTML Tag Syntax

Rendering Effect

无序列表 General Style

Markdown Syntax

HTML Tag Syntax

Rendering Effect

有序列表 General Style

Markdown Syntax