前言

本文是 Halo CMS 主题 higan-hz 的样式展示与使用指导。

项目首页：HowieHz/halo-theme-higan-hz: 适用于 Halo 2.0 的 higan-hz 主题

由于本文要展示标题样式，目录暂时是不可用的状态。

本文分为三部分：

• 第一部分 – 基础样式测试
• 第二部分 – content 类样式测试
• 第三部分 – article .content 样式测试

如果你想快速寻找可能仅在本主题，而不能在其他 Halo CMS 主题生效的样式（作使用指导）。请使用 CTRL+F 快捷键搜索关键字：halo-theme-higan-hz 式

本文使用编辑器插件为：justice2001/halo-plugin-vditor: 适用于Halo2.0的Vditor编辑器

模板文件对应页面路径请看：文档

特别鸣谢：probberechts/hexo-theme-cactus、guqing/halo-theme-higan

以下是一个说明样例，本文所展示样式均将以此形式说明。

&0 可折叠的内容块 {我是说明文字，说明接下来测试的是什么样式}

<details>
    <summary>点击查看详细内容</summary>

    这里是详细内容，点击黑色三角形或者标题“点击查看详细内容”都可以展开或折叠这个区域。
</details>

&0 渲染效果 {接下来会跟着渲染结果}

点击查看详细内容

这里是详细内容，点击黑色三角形或者标题“点击查看详细内容”都可以展开或折叠这个区域。

第一部分 – 基础样式测试

适用模板文件范围：每一页

&1-1 标题样式 – Markdown 写法
此处展示内容均在文章内， 因此受文章样式影响。
未受文章样式影响的 h2 标签请看归档页的年份，为白色。

# 一级标题 (h1)
## 二级标题 (h2)
### 三级标题 (h3)
#### 四级标题 (h4)
##### 五级标题 (h5)
###### 六级标题 (h6)

&1-1 渲染效果

一级标题 (h1)

二级标题 (h2)

三级标题 (h3)

四级标题 (h4)

五级标题 (h5)

六级标题 (h6)

&1-2 标题样式 – HTML 标签写法

<h1>一级标题 (h1)</h1>
<h2>一级标题 (h2)</h2>
<h3>一级标题 (h3)</h3>
<h4>一级标题 (h4)</h4>
<h5>一级标题 (h5)</h5>
<h6>一级标题 (h6)</h6>

&1-2 渲染效果

一级标题 (h1)

一级标题 (h2)

一级标题 (h3)

一级标题 (h4)

一级标题 (h5)

一级标题 (h6)

&1-3 标题样式 – HTML 类写法

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

&1-3 渲染效果

&1-4 标题中的链接样式 – Markdown 写法

# [一级标题中的链接](
## [二级标题中的链接](
### [三级标题中的链接](
#### [四级标题中的链接](
##### [五级标题中的链接](
###### [六级标题中的链接](

&1-4 渲染效果

一级标题中的链接

二级标题中的链接

三级标题中的链接

四级标题中的链接

五级标题中的链接

六级标题中的链接

&1-5 标题中的链接样式 – HTML 标签写法

<h1><a href="
<h2><a href="
<h3><a href="
<h4><a href="
<h5><a href="
<h6><a href="

&1-5 渲染效果

一级标题中的链接

二级标题中的链接

三级标题中的链接

四级标题中的链接

五级标题中的链接

六级标题中的链接

&1-6 标题中的链接样式 – HTML 类写法

<div class="h1"><a href="
<div class="h2"><a href="

&1-6 渲染效果

&2-1 水平分割线 – Markdown 写法

---

&2-1 渲染效果

---

&2-2 水平分割线 – HTML 标签写法

<hr>

&2-2 渲染效果

---

&2-3 halo-theme-higan-hz 式 – divide 类水平分割线 – HTML 类写法

<hr class="divide"></div>

&2-3 渲染效果

---

&3-1 文本格式 – 粗体 – Markdown 写法

**这是粗体文本**

&3-1 渲染效果

这是粗体文本

&3-2 文本格式 – 粗体 – HTML 写法

<strong>这是粗体文本</strong>

&3-2 渲染效果

这是粗体文本

&4-1 斜体/强调 – Markdown 写法

*这是斜体/强调文本*
_这是强调/强调文本_

&4-1 渲染效果

这是斜体/强调文本
这是强调/强调文本

&4-2 斜体/强调 – HTML 写法

<em>这是强调文本</em>

&4-2 渲染效果

这是强调文本

&5 引用 – HTML 写法

<cite>这是引用文本</cite>

&5 渲染效果

这是引用文本

&6 上标和下标 – HTML 写法

正常文本<sup>上标</sup>与<sub>下标</sub>

正常文本<sup>上标<sup>上上标<sup>上上上标<sup>上上上上标</sup></sup></sup></sup>
正常文本<sub>下标<sub>下下标<sub>下下下标<sub>下下下下标</sub></sub></sub></sub>

&6 渲染效果

正常文本^上标与_下标

正常文本^{上标上上标上上上标上上上上标}
正常文本_{下标下下标下下下标下下下下标}

&7 小号文本 – HTML 写法

这是正常文本 <small>这是小号文本</small> 这是正常文本

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

&7 渲染效果

这是正常文本 这是小号文本 这是正常文本

This is normal text This is small text This is normal text

&8 halo-theme-higan-hz 式 – 缩写 – HTML 标签写法

右边是一个缩写，鼠标放上去可以看到一些信息：<abbr title="Hypertext Markup Language">HTML</abbr>

<abbr title="Hypertext Markup Language"><a href=" - 此行在文章内会同时应用 a 标签的样式，因此有两层下划线</a></abbr>

<abbr title="我是提示">这个标签写了 title 属性，所以鼠标放上去会有提示。</abbr>

<abbr>实际上 <abbr>title</abbr> 是可选项</abbr>

<abbr>一层 <abbr>二层 <abbr>三层 <abbr>四层 abbr 标签嵌套测试 </abbr></abbr></abbr></abbr>

&8 渲染效果

右边是一个缩写，鼠标放上去可以看到一些信息：HTML

HTML – 此行在文章内会同时应用 a 标签的样式，因此有两层下划线

这个标签写了 title 属性，所以鼠标放上去会有提示。

实际上 title 是可选项

一层 二层 三层 四层 abbr 标签嵌套测试

&9-1 列表 – 无序列表 – Markdown 写法

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

&9-1 渲染效果

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

&9-2 列表 – 无序列表 – HTML 写法

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

&9-2 渲染效果

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

&10-1 列表 – 有序列表 – Markdown 写法

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

&10-1 渲染效果

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

&10-2 列表 – 有序列表 – HTML 写法

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

&10-2 渲染效果

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

&11 列表 – 定义列表 – HTML 写法

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

&11 渲染效果

术语一

术语一的定义说明

术语二

术语二的定义说明

&12-1 表格 – Markdown 写法

| 表头一 | 表头二 | 表头三 |
|--------|--------|--------|
| 内容一 | 内容二 | 内容三 |
| 内容四 | 内容五 | 内容六 |

&12-1 渲染效果

表头一	表头二	表头三
内容一	内容二	内容三
内容四	内容五	内容六

&12-2 表格 – HTML 写法

<table>
    <thead>
        <tr>
            <th><p>名称</p></th>
            <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>
            <td><p>×</p></td>
        </tr>
        <tr>
            <td><p>冒泡排序</p></td>
            <td><p>O(n^2)</p></td>
            <td><p>O(1)</p></td>
            <td><p>√</p></td>
        </tr>
        <tr>
            <td><p>插入排序</p></td>
            <td><p>O(n^2)</p></td>
            <td><p>O(1)</p></td>
            <td><p>√</p></td>
        </tr>
        <tr>
            <td><p>归并排序</p></td>
            <td><p>O(n\log n)</p></td>
            <td><p>O(n)</p></td>
            <td><p>√</p></td>
        </tr>
        <tr>
            <td><p>快速排序</p></td>
            <td><p>O(n\log n)</p></td>
            <td><p>O(\log n)</p></td>
            <td><p>×</p></td>
        </tr>
    </tbody>
</table>

&12-2 渲染效果

名称	平均时间复杂度	空间复杂度	稳定性
选择排序	O(n^2)	O(1)	×
冒泡排序	O(n^2)	O(1)	√
插入排序	O(n^2)	O(1)	√
归并排序	O(n\log n)	O(n)	√
快速排序	O(n\log n)	O(\log n)	×

&13-1 段落 – Markdown 写法

这是一个普通段落，测试文本对齐和行高。这个段落包含一些常用格式如**粗体**、*斜体*和`代码`。根据你的 CSS，这段文字应该有适当的行高和对齐方式。

&13-1 渲染效果

这是一个普通段落，测试文本对齐和行高。这个段落包含一些常用格式如粗体、斜体和代码。根据你的 CSS，这段文字应该有适当的行高和对齐方式。

&13-2 段落 – HTML 写法

<p>这是一个普通段落，测试文本对齐和行高。这个段落包含一些常用格式如<strong>粗体</strong>、<em>斜体</em>和<code>代码</code>。根据你的 CSS，这段文字应该有适当的行高和对齐方式。</p>

&13-2 渲染效果

这是一个普通段落，测试文本对齐和行高。这个段落包含一些常用格式如粗体、斜体和代码。根据你的 CSS，这段文字应该有适当的行高和对齐方式。

第二部分 – content 类样式测试

适用模板文件范围：archives.html, category.html, links.html, moments.html, moment.html, page.html, photos.html, post.html, tag.html. 5xx.html, 404.html

&14-1 长单词测试 – Markdown 写法

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

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

&14-1 渲染结果

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

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

&14-2 长单词测试 – HTML 写法

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

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

&14-2 渲染结果

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

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

&15-1 链接样式测试 – Markdown 写法

[这是普通链接](，有下划线效果。鼠标悬停时下划线颜色会变化。

&15-1 渲染效果

这是普通链接，有下划线效果。鼠标悬停时下划线颜色会变化。

&15-2 链接样式测试 – HTML 写法

<a href="

&15-2 渲染效果

这是普通链接，有下划线效果。鼠标悬停时下划线颜色会变化。

&16 图标链接样式测试

<a class="icon" href=" `class="icon"` 的超链接标签：用于图标链接，没有下划线，鼠标悬停时颜色会变化</a>

&16 渲染效果

这里有一个带有 `class=”icon”` 的超链接标签：用于图标链接，没有下划线，鼠标悬停时颜色会变化

第三部分 – article .content 样式测试

适用模板文件范围：author.html, links.html, moment.html, moments.html, page.html, photos.html, post.html, qrcode.html, 5xx.html, 404.html

article 是语义化标签，专门用于表示文章内容，通常内部嵌套一个 .content 类

&17 h2 标签样式测试

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

&17 渲染效果

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

&18-1 图片测试 – Markdown 写法

![Alt text - 图片未加载则显示](

![Alt text - 图片未加载则显示]( "Optional title - 可选的 title 值")

![cat](

&18-1 渲染效果

&18-2 图片测试 – HTML 写法

<img src=" alt="Alt text - 图片未加载则显示" />

<img src="" alt="Alt text - 图片未加载则显示" title="Optional title - 可选的 title 值" />

<img src=" alt="cat" />

&18-2 渲染效果

&19 说明文字测试

<img src=" alt="cat" />
<div class="caption">我是图片说明文字 上面有一只猫</div>
<div class="caption">我也是图片说明文字 <a href=" one-link-mark="yes">我是超链接</a></div>

&19 渲染效果

&20 halo-theme-higan-hz 式 – 视频嵌入 – HTML 写法
注：包裹在 <div class="video-container"> 使得嵌入的视频宽度能随着页面宽度减小，方法来自 CSS: Elastic Videos – Web Designer Wall

<div class="video-container">
    <iframe src="
        allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>

&20 渲染效果

&21 halo-theme-higan-hz 式 – 引用块测试 – Markdown 写法

> 引用内容

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

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

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

> 引用内容
> 
> <footer><a href="

> 这是一个引用块。它应用了特定的颜色和字体粗细。
> 
> <footer><a href="

&21 渲染效果

引用内容

这是引用内容

这是嵌套引用内容

这层引用内容回到了第一层

引用内容

引用内容

引用内容

这是一个引用块。它应用了特定的颜色和字体粗细。

&22 halo-theme-higan-hz 式 – 拉引用样式测试
注：hexo-theme-cactus 和 halo-theme-higan 均未能出现文字围绕效果，本分支已添加。

<div style="clear: both">

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

<blockquote class="pullquote">

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

</blockquote>

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

<blockquote class="pullquote left">

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

</blockquote>

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

<blockquote class="pullquote right">

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

</blockquote>

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

</div>

&22 渲染效果

&23 halo-theme-higan-hz 式 – 明暗模式块测试

<div class="light">

这段内容只在亮色模式/自动模式(亮色)下显示。

</div>

<div class="dark">

这段内容只在暗色模式/自动模式(暗色)下显示。

</div>

&23 渲染效果

结语

如有疑问，欢迎加入主题 QQ 交流群！

主题 QQ 交流群：694413711