HEXO下的锚点标题与Emoji表情

文章首发:https://vxiaozhe1998.gitee.io/

在博客中我们希望使用锚点标题以及渲染Emoji表情同时我们还希望多选框能够使用，但是HEXO默认的Markdown渲染器无法达到我们的要求，因此我们需要安装几个插件使我们的需求得到满足。

1. 定位到博客根目录卸载原始渲染器hexo-renderer-marked

npm un hexo-renderer-marked --save

我们通常可以在博客根目录右键点击git bash here并在窗口中输入指令，如下图所示:

输入指令

1. 安装hexo-renderer-markdown-it渲染器

npm i hexo-renderer-markdown-it --save

2. 设置新渲染器功能，在站点配置文件_config.yml文件中添加如下代码（建议配置）：

# 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
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSide: 'left'
    permalinkSymbol: ¶

对于每一项的说明如下:
注意：如果您在该配置项中配置如下任何一项将阻止所有该插件所附加的所有插件，如果需要大量标记和插件该配置项留空即可。

markdown

markdown: 'zero':渲染器仅渲染斜体和粗体
markdown: 'default':渲染器仅渲染符合符合GitHub-Flavored标准的标记
markdown: 'commonmark': 渲染器仅渲染符合commonmark标准的标记

---

HTML

该配置项定义是否渲染文档中的HTML内容
html: true:渲染HTML
html: false:不渲染HTML显示原始内容，例如<a>这是a标签</a>

---

xhtmlOut

该设置定义解析器是否将导出完全 XHTML 兼容的标记。这只需要完全 [共同标记] 支持。
xhtmlOut: true:分析器生成完全符合 XHTML 的代码。例如，换行符将为<br />
xhtmlOut: false:分析器不会生成完全符合 XHTML 的代码。例如，换行符将为<br>

---

breaks

源文件中进行换行将解析为标记。因此，每次按下键时，都会创建换行符。
breaks: true:每次源文档中出现换行符时，分析器都会生成<br>标记。
breaks: false:分析程序将忽略源文档中的换行符,不过双换行创建段落仍然受支持。

---

linkify

解析器能够直接粘贴到文本中的内联链接。如果您编写的文本看起来像一个链接，它将呈现为 <a src="http://example.com">http://example.com</a>
linkify: true:假如文章中出现类似于网址的文本，分析器将将其渲染为一个可点击的链接。
linkify: false:渲染器不会对类网址的文本进行任何处理。

---

typographer

允许替换常见的排版元素，如©、卷曲引号、破折号等。
typographer: true:替换常见的排版元素
typographer: false:不替换常见的排版元素

---

quotes

如果typographer设置为true本选项可替换单引号和双引号样式，例如:
quotes: '«»“”':双引号将被替换为«»,单引号将被替换为“”

---

- markdown-it-abbr

允许<abbr></abbr>/*[]标签,例如：

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specificationis maintained by the W3C.

源代码：

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specificationis maintained by the W3C.

<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>

源代码：

<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>

什么是<abbr>标签？

---

- markdown-it-footnote

脚注:我们可以通过更改路径node_modules\markdown-it-footnote\index.js下的return ' <a href="#fnref' + id + '" class="footnote-backref">\u21a9\uFE0E</a>';中的\u21a9\uFE0E来更改脚注后的返回样式

用法：这是一段示例文字^[1]，我们可以使用任意字符^[2]进行标注，但是需要在脚注部分进行对应^[3]

源代码:

这是一段示例文字[^1]，我们可以使用任意字符[^test]进行标注，但是需要在脚注部分进行对应[^-]
[^1]: 这是示例文字的脚注
[^test]: 这是test的脚注
[^-]: 这是特殊字符的脚注

---

- markdown-it-ins

支持插入标签<del></del><ins></ins>/~~~~++++
我不是++是++插入标签

源代码：

我~~不是~~++是++插入标签

我<del>不是</del><ins>是</ins>插入标签

源代码：

我<del>不是</del><ins>是</ins>插入标签

什么是<del><ins>标签？

---

- markdown-it-sub

支持下标~~
示例:H₂+O₂->H₂O
源代码:H~2~+O~2~->H~2~O

---

- markdown-it-sup

支持上标^^
示例：二次方程表达式为y=x²
源代码：二次方程表达式为y=x^2^

---

以上插件为默认插件，如果需要安装其他插件请参考下文。

什么是锚点？
对于锚点我们可以这样理解，锚点就好比一个定位，他会生成一个特定的链接，例如：http://example.com/#标题1我们点击这个链接将跳转至http://example.com站点的标题1位置。

level

将从设置的数值开始添加锚点
level: 3:如果这样设置，则只有三级标题<h3></h3>/###至六级标题<h6></h6>/######有锚点。

---

collisionSuffix

如果出现重复ID如何处理。
collisionSuffix: 'v':如果这样设置假设markdown文档中有两个#### 1则对应的锚点为http://example.com/#1和http://example.com/#1-v2

---

permalink

是否创建锚点标识
permalink: true:如果这样设置将在标题处创建用户自定义符号的标识

---

permalinkClass

锚点样式
permalinkClass: header-anchor:
如果开启了NEXT主题数据文件功能建议直接在blog/_data/文件夹新建styles.styl并添加代码：

/*锚点样式*/
  h1, h2, h3, h4, h5, h6 {
    padding-top: 10px;

    .header-anchor {
      float: none!important;
      margin-left: -20px;
      visibility: visible!important;

      &:hover {
        color: inherit;
      }
    }

    &:hover .header-anchor {
      visibility: visible;
    }
  }

如果没有则header-anchor类通常位于..\blog\themes\next\source\css\_common\components\post\post-expand.styl文件中，建议注释掉float: right，这样就可以让锚点正常使用了，如果不进行注释，则permalinkSide如何设置锚点都会位于标题右侧。如果希望锚点不影响标题对齐则可设置margin-left: -20px但是最好将visibility: hidden注释掉。

---

permalinkSide

permalinkSide: 'left':设置为left则锚点符号将出现在标题前，而如果设置为right则锚点符号将出现与文章后。

---

permalinkSymbol

permalinkSymbol: ¶:设置锚点符号为 ¶

最终效果如下:

2.png

---

case

假如我们文中定义一个标题#### AbcD
case: 0:则对应的标题链接为http://example.com/#AbcD
case: 1:则对应的标题链接为http://example.com/#abcd——锚点小写
case: 2:则对应的标题链接为http://example.com/#ABCD——锚点大写

---

separator

替换锚点中的空格，假如我们文中定义一个标题#### A B
separator: '-':则对应的标题链接为http://example.com/#A-B——空格替换为-

---

3. 安装markdown-it-checkbox插件

npm install markdown-it-checkbox --save

4. 在{% label info@站点配置文件 %}_config.yml文件中的markdown.plugins添加- markdown-it-checkbox,即:

  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-checkbox # 本行启用了checkbox插件

示例:
[ ] 这是未勾选的checkbox
[x] 这是已勾选的checkbox
语法:

[ ]  这是未勾选的checkbox
[x]  这是已勾选的checkbox

5. 安装Emoji插件markdown-it-emoji

npm install markdown-it-emoji --save

6. 在{% label info@站点配置文件 %}_config.yml文件中的markdown.plugins添加- markdown-it-emoji,即:

  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-checkbox # 本行启用了checkbox插件
    - markdown-it-emoji # 本行启用了emoji插件

步骤7,8,9为可选步骤，注意在进行完7,8,9步骤之后Emoji表情将以图片的形式<img>嵌入，我们所定义的图片样式会对表情产生影响。

7. 优化Emoji样式安装twemoji

npm install twemoji

8. 在node_modules\markdown-it-emoji\index.js目录下添加代码:

var twemoji           = require('twemoji')  //添加twemoji
//使用twemoji渲染
  md.renderer.rules.emoji = function(token, idx) {
    return twemoji.parse(token[idx].content);
  };

完整代码为:

'use strict';


var emojies_defs      = require('./lib/data/full.json');
var emojies_shortcuts = require('./lib/data/shortcuts');
var emoji_html        = require('./lib/render');
var emoji_replace     = require('./lib/replace');
var normalize_opts    = require('./lib/normalize_opts');
var twemoji           = require('twemoji')  //添加twemoji

module.exports = function emoji_plugin(md, options) {
  var defaults = {
    defs: emojies_defs,
    shortcuts: emojies_shortcuts,
    enabled: []
  };

  var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));

  md.renderer.rules.emoji = emoji_html;
  
  //使用twemoji渲染
  md.renderer.rules.emoji = function(token, idx) {
    return twemoji.parse(token[idx].content);
  };
  
  md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE));
};

9. 在个人的自定义样式styles.styl中添加Emoji样式：

/*emoji样式*/
.emoji {  height: 1.2em;}
img.emoji{
    margin: 0 .05em 0 .1em !important;
    vertical-align: -0.1em;
    //override theme default style
    padding:0px !important;
    border:none !important;
    display:inline !important;
}

插件地址：

• hexo-renderer-markdown-it
• markdown-it-checkbox
• markdown-it-emoji
• twemoji

Emoji表情检索：

• Emoji
• Emoji(快)

---

1. 这是示例文字的脚注 ↩

2. 这是test的脚注 ↩

3. 这是特殊字符的脚注 ↩