「建站」05 Hexo中的Markdown特殊用法

Greetings! ¶

Yaho~ ふちゃんです！(> ▽ <) /~

在上一节中，我们已经将我们的博客网站部署到了Github Page上。

那么现在，我们需要做的事就是编写一些博客文章了。

Hexo支持使用Markdown来编写博客文章，关于Markdown的基本用法在此就不多赘述。

这一节关键要看一些Hexo中的Markdown特殊用法。

1. 图片 ¶

Hexo中的图片引用与Markdown中的图片引用一样，都是使用![]()。

不过Hexo中本地引用的引用规则与Markdown中的引用规则有所不同。

1.1 从source/img文件夹中引用图片 ¶

一般来讲，我们会在markdown文件的同级目录下创建一个img文件夹，然后将图片放在img文件夹中，然后在markdown文件中使用![]()来引用图片。

├── blog01.md
└── img
    └── pic01.jpg

如果我想在blog01.md中引用img文件夹中的pic01.jpg，那么我可以这样写：

![my picture](img/pic01.jpg)

或者

![my picture](./img/pic01.jpg)

但是，很可惜，这种写法在Hexo中是无效的。

我们需要把路径改写为绝对路径：（加上一个/）

![my picture](/img/pic01.jpg)

这是因为hexo在部署到Github Page时，会将source以及public文件夹中的内容都按原来的格式放在同一目录下，那个目录就是我们的博客网站的根目录。

也就是说public/img会被放在/img目录下，因此我们需要使用绝对路径来引用图片。

1.2 「替代方案1」开启post_asset_folder功能 - 复杂 ¶

Hexo配置文件中有一个默认关闭的功能post_asset_folder，它允许我们在markdown文件的同级目录下创建一个同名文件夹，然后将图片放在同名文件夹中，然后在markdown文件中使用![]()来引用图片。

然而，图片路径的写法与之前的不同，我们只能写图片的文件名。

├── blog01.md
└── blog01
    └── pic01.jpg

![my picture](pic01.jpg)

虽然终于可以显示图片了，但是如果我们为每一个博客都创建一个同名文件夹，那么我们的source文件夹会变得非常的杂乱（虽然我一开始也一直在用这种方法😅）。

1.3 「替代方案2」使用public/img文件夹中的图片 - 推荐 ¶

但是！就在刚刚（没错，就是为了写这一篇文章，我刚刚去测试了许多种图片引用方法），我发现我们的可以直接引用public文件夹中的图片！

这使用的是一种绝对引用，我们可以这样写：

![my picture](/img/pic01.jpg)

这样的话我们只需要将图片放在public/img文件夹中，就可以方便地引用了。

注意：public文件夹会被hexo clean清空。我的解决方案是创建一个脚本用于将复制我存储图片的文件夹到public文件夹中。
我把hexo g和这个脚本作为一个alias放在了.zshrc中，这样我每次hexo g的时候，图片就会自动复制到public文件夹中了。

（事实上我会先把文章写在博客文件夹的外面，然后用另一个脚本用于同步所有文章到source文件夹中。我还有一个用于同步config设置的脚本。当然，这些都不是完全必要的，我只是觉得这样更方便一些。）

• zsh是一种类似于Linux默认终端bash的终端，而.zshrc即zsh的配置文件。
• alias是Linux中的一种特有的命令，它允许你在你使用的终端中创建一个自定义的命令（修改配置文件），让你更方便地使用你的命令（组合）。

1.4 弊端 ¶

无论使用以上哪一种方法，都有一个弊端，那就是我们无法在markdown文件中预览图片。

不过既然我们最终都要将博客发布，那么我们完全可以使用hexo s预览其本地效果，这也方便我们检查博客在网页上的显示效果。

1.5 非markdown语法的图片引用 ¶

Hexo还有一种以{% asset_img [图片名] [图片描述] %}的方式来引用图片的方法，但是这种方法在markdown文件中是无效的，只能在html文件中使用，所以我不喜欢这种方法。

{% asset_img pic01.jpg my picture %}

2. 如何使用emoji ¶

我平时使用VSCode来编写markdown文件，有时也会在里面加一些emoji。😄

平时在逛Github的时候，你也能在一些README.md文件中看到一些emoji。📚

我本以为既然我们使用了Github Page，那么我们也可以在我们的博客中使用emoji，但是我发现并不是这样的。😓

我在网上搜索了一下，给出的解决方案是：

1. 卸载原有的hexo-renderer-marked插件
2. 安装markdown-it-emoji和hexo-renderer-markdown-it插件

2.1 卸载与安装插件 ¶

在你的博客根目录下，使用npm进行卸载与安装。

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it markdown-it-emoji --save

2.2 修改_config.yml文件 ¶

在_config.yml文件中，添加关于markdown-it-emoji的配置。（可以直接粘贴在最下方）

下面是我自己的配置，具体设置请参考官方文档

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji
    
  anchors:
    level: 1
    collisionSuffix: 'v'
    # If `true`, creates an anchor tag with a permalink besides the heading.
    permalink: true
    permalinkClass: header-anchor
    permalinkSide: 'right'
    permalinkSymbol: '  ~'

配置好这些之后，我们就可以愉快地在博客中使用emoji了。🎉

• 如果你重新hexo g && hexo s仍然无法预览emoji，那么请尝试重启浏览器或者对你要预览的文件进行修改。

Summary ¶

现在，我们可以愉快地在博客中使用emoji了。🎉

在Hexo中使用emoji，为你的博客增添更多乐趣吧！😃❤️

下一节，更换主题，让我们的博客更加美观吧！😎

Have fun! 😉

上一节： 「建站」04 将Hexo部署到Github Page