# 关于本博客

其实很久之前即有搭建博客的想法了，之前也使用过 Hugo 进行尝试，也配置了一些主题，但是往往搭建好之后都没有时间去写博文，因此网站搭建完成之后便不再问津了。这次想着捡起来，是因自己这一年经历了比较多的事情，感觉有很多内容想要记录下来，但是又不太想在其他社交平台上发表，于是最终选择了博客这种形式来记录自己的想法。

本博客的内容可能各种各样，包括但不限于计算机相关的技术类文章、历史类相关的读书笔记等，基本上就是 “随心所欲”，有什么想记录下来的内容便写上几笔。若能对到访寒舍的看官有所裨益，当是最好不过的了。由于自己略带一点强迫症，可能各篇文章的创建时间和修改时间会相差很大，这点读者如有发现还勿见怪。

# 关于本文

本文大概是本博客的第一篇正式文章，主要用于记录本博客主题相关的内容，随时有可能发生更改，不过现在基本上博客主题已经搭建成型，中途遇见的问题和 bug 也都基本解决，后续的变动应当不大。顺便也会记录使用的主题之外的其他插件的使用。喜欢这个主题或者某些插件功能的读者可以作为参考。

# 关于使用的主题

本博客使用的主题是 shoka ，是我在寻找 Hexo 主题的时候无意间发现的，第一眼就喜欢上了。不过，目前的样式比较偏向少女风格，之后可能会视情况进行自定义修改 （不过目前这样感觉也还行，反正基本上都是自己看，问题不大）。

这个主题的作者应该是一个小姐姐，想更详细了解本主题的相关内容，可以访问作者的主页。

# 功能测试

下文内容主要用于主题提供的功能进行测试，对于遇到的一些 bug 也会提及。

# Bug

本主题提供的功能主要依赖于 hexo-markdown-render-it 插件，而我在使用过程中也碰到了许多问题，花了几天才基本上解决，着实是费了一番功夫。

# _config.shoka.yml 配置文件无法生效

第一个大的问题是 _config.shoka.yml 配置文件中和插件相关的 markdown 选项设置无法生效。主要原因是在 Hexo 进行渲染时，读取到的配置变量 hexo.config 中没有 markdown 相关的内容，该部分配置的内容在另一个变量 hexo.config.theme_config.markdown 中，因而在生成静态文件的过程中无法读取到正确的配置，从而一直使用默认的配置，使得无法对插件的功能进行自定义 （这怎么能忍！）。

我一开始的解决方法是找到相关的代码，将 hexo.config.theme_config.markdown 的内容也添加到 hexo.config 中去。但是在调试过程中，发现了一个非常 “骇人” 的 bug ，尽管 hexo.config 的内容已经添加了和 markdown 相关的配置内容，插件的脚本中读取到的配置也是自定义的，但是生成的网页内容依然使用的默认配置 （差点要吐血）。

在网上搜索解决方法的过程中，发现直接修改 npm 安装的插件内容可能无法生效，因此只得暂时作罢。

# 自定义插件相关脚本

上述 bug 困扰了我很久，最后找到了另一种解决方式。我将插件相关的代码移动到了主题文件夹中 scripts 文件夹下的 renderer 文件夹，其余依赖的 markdown-it 相关插件则依旧通过正常方式安装，通过自己编写 js 代码的方式注册相关的渲染器，调用相关插件的功能。目前基本上解决了上述 bug 。

其他和功能相关的 bug 则放在各个功能说明中，这里不再赘述。

# 图片

# 插入本地图片

插入图片的方式的格式为：

![alt_name](path/to/img img_name)

其中的 alt_name 是图片无法显示的时候展示的文字内容， path/to/img 是图片资源的路径，也可以是网络地址， img_name 则是显示在图片下方的图片名称。图片资源的路径主要有两种方式，下文会详细说明。

通过相对路径访问

![本人常用头像](/images/my_small_avatar.jpg "本人常用头像")

需要特别注意路径问题：必须是 /images/xx.jpg 而不是 images/xx.jpg ，否则图片会加载异常

本人常用的头像：

还有一种方式是利用 CDN 加速对本地资源的访问。将图片的地址更换成 CDN 开头的网址，达到加速资源访问的效果。因为 CDN 会对 github 的资源进行处理，因此这里可以直接将地址换成自己的仓库对应的 CDN ，地址的格式为 https://cdn.jsdelivr.net/gh/[github_username]/[repository_name]@[tag]/path/to/resource ，其中 github_username 和 repository_name 可以参照自己的 github 地址中的内容， [tag] 为资源所在的分支，一般直接用 latest 即可，最后即所需资源的具体路径。

示例：

![本人常用头像](https://cdn.jsdelivr.net/gh/YangLinzhuo/yanglinzhuo.github.io@latest/images/my_small_avatar.jpg "本人常用头像")

# 插入网络图片

直接将资源路径替换成网络地址即可。

![主题默认头像](https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg "主题默认头像")

本主题的默认头像：

# 表格

本主题使用了表格插件 markdown-it-multimd-table ，在原来表格的基础上，扩展了表格的展示形式。详细内容可以点击前方插件名称查看。下文主要介绍几种我可能使用到的功能。

# 基本功能

|             |          Grouping           ||

First Header  | Second Header | Third Header |

 ------------ | :-----------: | -----------: |

Content       |          *Long Cell*        ||

Content       |   **Cell**    |         Cell |

New section   |     More      |         Data |

And more      | With an escaped '\\|'       ||

[Prototype table]

# Multiline (optional)

多行内容可以在表格中的一个 cell 中显示，对同一个 cell 中的多行内容，除最后一行外，其余每一行的结尾需要添加 \ ，使得多行的内容能够合并到一个 cell 中。

|   Markdown   | Rendered HTML |

|--------------|---------------|

|    *Italic*  | *Italic*      | \

|              |               |

|    - Item 1  | - Item 1      | \

|    - Item 2  | - Item 2      |

|    ```python | ```python       \

|    .1 + .2   | .1 + .2         \

|    ```       | ```           |

[Multiline table]

*Italic*

- Item 1
- Item 2

```python
.1 + .2
```

.1 + .2

# Rowspan (optional)

使得一个 cell 占据多行，使用 ^^ 表示当前 cell 和上一行的 cell 合并。

Stage | Direct Products | ATP Yields

----: | --------------: | ---------:

Glycolysis | 2 ATP ||

^^ | 2 NADH | 3--5 ATP |

Pyruvaye oxidation | 2 NADH | 5 ATP |

Citric acid cycle | 2 ATP ||

^^ | 6 NADH | 15 ATP |

^^ | 2 FADH2 | 3 ATP |

**30--32** ATP |||

[Rowspan table]

# Headerless (optional)

省略表头 cell 。

|--|--|--|--|--|--|--|--|

|♜|  |♝|♛|♚|♝|♞|♜|

|  |♟|♟|♟|  |♟|♟|♟|

|♟|  |♞|  |  |  |  |  |

|  |♗|  |  |♟|  |  |  |

|  |  |  |  |♙|  |  |  |

|  |  |  |  |  |♘|  |  |

|♙|♙|♙|♙|  |♙|♙|♙|

|♖|♘|♗|♕|♔|  |  |♖|

[Headerless table]

# 列表

# Ordered list

1. first
2. second
3. third

# Unordered list

• first
• second
• third

# Definition list

使用 markdown-it-deflist 插件，基于 pandoc 的语法格式，而 pandoc 使用的则是 PHP Markdown Extra 的语法。

示例如下：

Term 1

:   Definition 1

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

Term 1

Definition 1

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

每个 Term 必须单独成行，和 definition 之间可以添加空行。每个 Term 之下至少包含一个 definition ，每个 definition 之前以分号 : 或者波浪号 ~ 开头，可以添加一个或者两个空格的缩进。

一个 Term 可能包含多个 definition ，每个 definition 可能由一个或多个 block 元素构成（如 paragraph ， code block ， list 等等），这些 block 元素需要添加四个空格或者一个 tab 的缩进。正常情况下，这些元素都需要添加缩进。不过，我们也可以偷懒省略 paragraph 或者其他 block 元素的第一行之外其他行的缩进：

Term 1

:   Definition
with lazy continuation.

    Second paragraph of the definition.

Term 1

Definition
with lazy continuation.

Second paragraph of the definition.

如果在 definition 之前添加了空格，那么 definition 的文本会被当成一个新的 paragraph 。在某些格式下， Term 和 definition 之间的间隙可能会更大。如果需要更紧凑的显示，那么需要省略掉 definition 之前的空格：

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

Term 1

Definition 1

Term 2

Definition 2a

Definition 2b

# 链接块

链接块功能基于 Hexo 提供的 tag 以 {% links %}` 开头，以 `{% endlinks %} 结尾，内部格式为：

- site: 网站名称

  owner: 网站作者

  url: 网站地址

  desc: 网站描述，若为空，则会显示网站地址

  image: 显示图像

  color: 名称显示的颜色

例如：

- site: 優萌初華

  owner: 霜月琉璃

  url: https://shoka.lostyu.me

  desc: 琉璃的医学 & 编程笔记

  image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg

  color: "#e9546b"

- site: 優萌初華

  owner: 霜月琉璃

  url: https://shoka.lostyu.me

  image: images/avatar.jpg

- site: 優萌初華

  url: https://shoka.lostyu.me

  desc: 琉璃的医学 & 编程笔记

  color: "#9d5b8b"

- site: Linn's Blog

  owner: Linn

  desc: 我的博客

  url: https://yanglinzhuo.github.io/

  image: https://yanglinzhuo.github.io/images/my_small_avatar.jpg

# 代码块

代码块使用插件 markdown-it-prism 进行高亮，这个插件放在了 themes/shoka/scripts/renderer/ 下，需要注意的是，要把 _config.yml 中的 highlight 和 prismjs 的 enable 选项都设置为 false ，否则 Hexo 会进行预处理，导致后续 markdown-it 渲染时，代码块的内容乱码，使得插件无法正常识别代码块，渲染失败。

代码块头部格式如下：

[language] [title] [url] [link text] [mark] [command]

需要按照原始方式显示内容，可以使用：

  {% raw %}
    content
  {% endraw %}

import java.util.Scanner;

...

Scanner in = new Scanner (System.in);

// 输入 Scan 之后，按下键盘 Alt + “/” 键，Eclipse 下自动补全。

System.out.println (in.nextLine ());

System.out.println ("Hello" + "world.");

pwd

/usr/home/chris/bin

ls -la

total 2

drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .

drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..

-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup

-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy

git add -A

git commit -m "update"

git push

def function():

    return 0

# 练习题与答案

这个功能用于显示练习题。需要在 Front Matter 中添加 quiz: true ，以正确显示题型标签。

本功能基于 markdown-it-bracketed-spans 和 markdown-it-attrs 插件，以下是一些标签及其对应含义：

该功能或许可以用于复习面试题。

---

title: 练习题与答案

quiz: true

---

1. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。 {.quiz .true}

2. 有基类 `SHAPE`，派生类 `CIRCLE`，声明如下变量：  {.quiz .multi}

    ```cpp

    SHAPE shape1,*p1;

    CIRCLE circle1,*q1;

    ```

    下列哪些项是 “派生类对象替换基类对象”。

    - `p1=&circle1;` {.correct}

    - `q1=&shape1;`

    - `shape1=circle1;` {.correct}

    - `circle1=shape1;`

{.options}

    > - :heavy_check_mark: 令基类对象的指针指向派生类对象

    > - :x: 派生类指针指向基类的引用

    > - :heavy_check_mark: 派生类对象给基类对象赋值

    > - :x: 基类对象给派生类对象赋值

    > {.options}

3. 下列叙述正确的是 []{.gap} 。 {.quiz}

    - 虚函数只能定义成无参函数

    - 虚函数不能有返回值

    - 能定义虚构造函数

    - A、B、C 都不对 {.correct}

{.options}

10. 如果定义 `int e=8; double f=6.4, g=8.9;`，则表达式 `f+int (e/3*int (f+g)/2)%4` 的值为 [9.4]{.gap}。 {.quiz .fill}

    > 注意运算顺序和数据类型

    > [8.4]{.mistake}

1. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。

2. 有基类 SHAPE ，派生类 CIRCLE ，声明如下变量：

   	SHAPE shape1,*p1;
   	CIRCLE circle1,*q1;

   下列哪些项是 “派生类对象替换基类对象”。

   • p1=&circle1;
   • q1=&shape1;
   • shape1=circle1;
   • circle1=shape1;

   • ✔️ 令基类对象的指针指向派生类对象
   • ❌ 派生类指针指向基类的引用
   • ✔️ 派生类对象给基类对象赋值
   • ❌ 基类对象给派生类对象赋值

3. 下列叙述正确的是 。

   • 虚函数只能定义成无参函数
   • 虚函数不能有返回值
   • 能定义虚构造函数
   • A、B、C 都不对

4. 如果定义 int e=8; double f=6.4, g=8.9; ，则表达式 f+int (e/3*int (f+g)/2)%4 的值为 9.4。

   注意运算顺序和数据类型
   8.4

# emoji

本功能基于 markdown-it-emoji ，想要查看其他表情的对应代码可以点击此处。

看了下，大概最常用的还是 “流汗黄豆” 吧。

:sweat_smile:  # 流汗黄豆

:kissing_heart: 

:ring:

:notes:

😅
😘
💍
🎶

# 文字特效

本功能基于 markdown-it-ins 、 markdown-it-bracketed-spans 和 markdown-it-attrs

本主题风格颜色通用样式： default 、 primary 、 success 、 info 、 warning 、 danger

++下划线++

++波浪线++{.wavy}

++着重点++{.dot}

++紫色下划线++{.primary}

++绿色波浪线++{.wavy .success}

++黄色着重点++{.dot .warning}

~~删除线~~

~~红色删除线~~{.danger}

==荧光高亮==

[赤橙黄绿青蓝紫]{.rainbow}

[红色]{.red}

[粉色]{.pink}

[橙色]{.orange}

[红色]{.yellow}

[绿色]{.green}

[靛青]{.aqua}

[蓝色]{.blue}

[紫色]{.purple}

[灰色]{.grey}

快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}

H~2~0

29^th^

下划线

波浪线

着重点

紫色下划线

绿色波浪线

黄色着重点

删除线

红色删除线

荧光高亮

赤橙黄绿青蓝紫

红色

粉色

橙色

黄色

绿色

靛青

蓝色

紫色

灰色

快捷键 Ctrl + C

下标 H₂0

上标 29^th

# 隐藏文字

本功能基于 markdownt-it-spoiler ，使用语法是

!!balabala!! 鼠标放置时显示内容。

!!balabala!!{.bulr} 鼠标选中时显示内容

注意这里的感叹号均为英文半角，左边的感叹号不要和前面的正文连接到一起。

balabala 鼠标放置时显示内容。

balabala 鼠标选中时显示内容

# 标签块

语法格式如下：

[:icon:text]{.style}

:icon 表示添加某个 icon 图标， text 为该标签的文本， .style 为该标签的样式，示例如下：

[default]{.label}

[primary]{.label .primary}

[info]{.label .info}

[:heavy_check_mark:success]{.label .success}

[warning]{.label .warning}

[:broken_heart:danger]{.label .danger}

default
primary
info
✔️success
warning
💔danger

# 提醒块

语法格式为

::: type [no-icon]

:::

type 表示使用的提醒块样式， no-icon 表示不显示 icon 图标，为可选项，示例如下：

:::default

默认默认

:::

:::primary

基本基本

:::

:::info

提示提示

:::

:::success

成功成功

:::

:::warning

警告警告

:::

:::danger

危险危险

:::

:::danger no-icon

危险危险

:::

# 标签卡

标签卡片的语法如下：

;;;[id] [text]

content

;;;

;;;[id] [text]

content

;;;

id 用于识别各个标签所属的卡片，有相同 id 的标签会被放在一张卡片中，读者可以点击卡片上的 text 切换对应的标签。 content 可以编写复合 markdown 语法的内容。示例如下：

;;;id1 卡片 1

这里是卡片 1 的内容

**加粗**

[success]{.label .success}

;;;

;;;id1 卡片 2

这里是卡片 2 的内容

:::danger

危险危险

:::

- 第一行

- 第二行

;;;

;;;id2 ②号标签卡片 1

这里是卡片 1 的内容

;;;

;;;id2 ②号标签卡片 2

这里是卡片 2 的内容

;;;

我经常用到的应该是下面这种展示不同语言代码的标签卡：

int func() {

  return 0;

}

def func():

  return 0;

# 折叠块

折叠块语法如下：

+++[style] [title]

content

+++

style 表示折叠块的样式，为空则使用默认样式。 title 为折叠块上的文本内容。 content 中可以添加符合 markdown 语法的内容。

+++ 默认默认 这里是一段文字

++下划线++

+++

+++primary 紫色

:::info

参考信息

:::

- 第一行

- 第二行

+++

+++info  蓝色

;;;id3 卡片 1

这里是卡片 1 的内容

;;;

;;;id3 卡片 2

这里是卡片 2 的内容

;;;

+++

+++success 绿色

+++

+++warning 黄色

!! 警告警告警告警告警告！！{.bulr}

[label]{.label .success}

+++

+++danger 红色

[danger]{.label .danger}

+++

# 待办事项

本功能语法如下：

- [mark]  text

- [mark]  text 

{.style}

mark 为可选项，使用 x 填充，表示该项完成， style 表示显示的样式，为空则使用默认样式。注意 {.style} 和上一个选项之间需要插入一个空行。

示例如下：

- [ ] 这是一个小叉叉

- [x] 这是一个红色勾勾 

{.danger}

- [ ] 未完成

- [x] 完成 

{.primary}

- [ ] 未完成

- [x] 默认颜色

• 这是一个小叉叉
• 这是一个红色勾勾

• 未完成
• 完成

• 未完成
• 默认颜色

# 文字注音

该功能主要用于日语汉字假名注音，或者标示振假名（振り仮名），也就是常说的写作 “xx”，读作 “YY”，比如说 紳士 (へんたい)。理论上也可以用于别的注音。

作者为了兼容性，在 markdown-it-ruby 的基础上采用 {文字^注音} 的格式进行注音，为了兼容表格，将分隔符由 | 换成了 ^ 。

注音分隔基于 furigana-markdown-it ，显示说明可以点击此链接

语法：

示例：

# 多媒体

多媒体内容，作者使用了 Hexo 的 tag 功能，语法如下：

  {% media [audio|video]%}
  {% endmedia %}

详细示例见下，标签中包含一段 yml 格式的内容，格式与背景音乐的配置类似。亦可以直接使用网易云、虾米、QQ 音乐的播放列表、单曲。

{% media audio %}

- title: 列表 1
  list:
  - https://music.163.com/#/playlist?id=2943811283
  - https://music.163.com/#/playlist?id=2297706586
- title: 列表 2
  list:
  - https://music.163.com/#/playlist?id=2031842656
{% endmedia %}

音乐播放列表效果如下：

原本作者提供的功能是支持视频的，但是我经常看的视频网站 bilibili 的视频如果直接使用视频的 url 来获取会得到 ERR_DECODED_FAILED 错误。经过查找发现 bilibili 的视频需要通过 bilibili 提供的视频分享链接来嵌入到网页中，因此我使用了另一个插件来插入视频。而关于其他网站的视频，目前我只测试过腾讯视频一个，也是需要嵌入网页中的方式来插入视频。理论上，如果将视频也传输到 github 上，通过本地路径应该是能够访问成功的，但是一般的视频文件都很大，加上 github 经常网络感人，因此几乎不太可能用到这种方法。 除非自己搭建一个服务器

我目前使用的插件是 mmedia ，详细使用方式可以查看其文档。该插件支持插入很多类型的多媒体，这里我主要使用 bilibili 相关的功能。其插入 bilibili 视频的语法如下：

  {% mmedia "bilibili" "bvid:1G64y1t7G9" "danmaku:false" %}

bvid 填写视频的 BV 号， danmaku 控制视频是否显示弹幕。

效果如下：

# 数学公式

本功能基于 markdown-it-katex ，需要在 Front Matter 中添加 math: true 以支持 KaTex。从搜索的结果来看， KaTex 不完全支持 LaTex 的语法，不过目前暂时没发现大的问题，而且目前支持 MathJax 的 hexo-math 插件好像也有些许 bug 。后续如果有功能无法满足的时候再考虑更换 MathJax ，姑且先使用 KaTex 。

行内公式：$\sqrt {3x-1}+(1+x)^2$

独立块显示：

$$\begin {array}{c} \nabla \times \vec {\mathbf {B}} -\, \frac1c\, \frac {\partial\vec {\mathbf {E}}}{\partial t} & = \frac {4\pi}{c}\vec {\mathbf {j}} \nabla \cdot \vec {\mathbf {E}} & = 4 \pi \rho \\ \nabla \times \vec {\mathbf {E}}\, +\, \frac1c\, \frac {\partial\vec {\mathbf {B}}}{\partial t} & = \vec {\mathbf {0}} \\ \nabla \cdot \vec {\mathbf {B}} & = 0 \end {array}$$

# 流程图

本功能基于 markdown-it-mermaid ，在 Front Matter 中添加 mermaid: true 以支持 Mermaid。

graph LR

    A[Square Rect] -- Link text --> B((Circle))

    A --> C(Round Rect)

    B --> D{Rhombus}

    C --> D

sequenceDiagram

    loop Daily query

        Alice->>Bob: Hello Bob, how are you?

        alt is sick

            Bob->>Alice: Not so good :(

        else is well

            Bob->>Alice: Feeling fresh like a daisy

        end

        opt Extra response

            Bob->>Alice: Thanks for asking

        end

    end

# 脚注

脚注功能基于 markdown-it-footnote 插件。使用格式为 [^note] ，然后在末尾添加对应的 [^note]: note content ，注意这里的冒号 : 不可省略，否则脚注不能正常解析。

这是一个脚注 ^[1] 这是另一个 footnote ^[2]。

脚注的标识符中尽量不要使用纯数字，我在测试中发现显示的时候会多出一个序号，影响美观，不知道其他使用者是否出现了该情况。

# 其他功能

markdown-it-graphviz 插件基于 Graphviz， markdown-it-chart 插件基于 Frappe Charts。这两个插件主要用于绘图，我应该大概率用不到这个插件。故这里不去详细了解，后续有需求再考虑。

markdownt-it-excert 插件暂时还不了解有什么作用。😅