【博客】3-hexo主题博客魔改日志

本文用于展示博客 Markdown 渲染的全部 UI 样式，方便检验各级标题、代码块、表格、公式等元素的渲染效果，也可作为写作时的样式速查手册。

1. 一、文本样式
2. 二、标题层级

一级标题 Heading 1

1. 二级标题 Heading 2
   1. 三级标题 Heading 3
      1. 四级标题 Heading 4
         1. 五级标题 Heading 5
            1. 六级标题 Heading 6
2. 三、列表样式
   1. 无序列表
   2. 有序列表
3. 四、引用块
4. 五、代码块
5. 六、表格
6. 七、图片
7. 八、数学公式
8. 九、分隔线
9. 十、脚注与综合段落

一、文本样式

普通正文段落：Hexo 是一个快速、简洁且高效的博客框架，能够将 Markdown 格式的文档渲染成漂亮的网页。

粗体文本、斜体文本、粗斜体文本、删除线文本、下划线文本、行内代码、快捷键 Ctrl + C。

行内数学公式：质能方程，化学方程式。

链接样式：Hexo 官方文档、3-hexo 主题

二、标题层级

以下依次展示 h1 ~ h6 六级标题的实际渲染效果。

一级标题 Heading 1

二级标题 Heading 2

三级标题 Heading 3

四级标题 Heading 4

五级标题 Heading 5

六级标题 Heading 6

三、列表样式

无序列表

• 第一层列表项 A
  • 第二层列表项 A-1
  • 第二层列表项 A-2
    • 第三层列表项 A-2-a
• 第一层列表项 B
• 第一层列表项 C

有序列表

1. 安装 Node.js 和 Git
2. 安装 Hexo 脚手架
   1. 全局安装 hexo-cli
   2. 初始化博客目录
3. 本地预览 hexo server

四、引用块

单层引用：

添加了主题未带的运行时间，记录魔改过程。

嵌套引用：

第一层引用：喜欢写Blog的人，会经历三个阶段。

第二层引用：刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。

第三层引用：发现免费空间限制太多，就自己购买域名和空间。

引用中也可以包含粗体、代码 和链接。

五、代码块

JavaScript 代码：

function siteTime() {
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;

    var today = new Date();
    var t1 = Date.UTC(2024, 7, 17, 0, 0, 0);
    var t2 = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
    var diff = t2 - t1;

    var diffDays = Math.floor(diff / days);
    console.log('本站已运行 ' + diffDays + ' 天');
}

Python 代码：

def fib(n):
    """输出斐波那契数列"""
    a, b = 0, 1
    while a < n:
        print(a, end=' ')
        a, b = b, a + b

fib(100)  # 0 1 1 2 3 5 8 13 21 34 55 89

HTML 代码：

<li>
  本站运行时间：<code id="sitetime-days"></code>天
  <code id="sitetime-hours"></code>时
  <code id="sitetime-minutes"></code>分
  <code id="sitetime-seconds"></code>秒
</li>

Bash 命令：

npm config set registry https://registry.npmmirror.com
hexo clean && hexo generate && hexo deploy

JSON 数据：

{
  "name": "hexo-site",
  "theme": "3-hexo",
  "deploy": "vercel",
  "plugins": ["hexo-abbrlink", "hexo-filter-mathjax"]
}

无语言标注的代码块：

这是一段没有指定语言的纯文本代码块，
用于测试默认渲染效果。

六、表格

普通表格：

语法	效果	说明
**粗体**	粗体	双星号包裹
*斜体*	斜体	单星号包裹
~~删除~~	删除	双波浪线包裹
`代码`	代码	反引号包裹

带对齐方式的表格：

左对齐	居中	右对齐
单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

七、图片

八、数学公式

行内公式：欧拉公式。

块级公式：

化学方程式：

九、分隔线

下方是一条水平分隔线：

---

分隔线之上是第九节，之上还有第八节。

十、脚注与综合段落

这里有一个脚注标记¹，页面底部会生成对应的注释内容。

最后用一个综合段落收尾：静态博客的优势在于纯静态、加载快、托管免费；配合 Markdown 写作可以专注于内容本身。正如官方文档所说，强烈建议大家阅读官方文档来了解 Hexo —— 祝大家写作愉快！

¹. 这是一个脚注的具体内容，点击正文中的标记可以跳转到这里。 ↩

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 3415226167@qq.com