Hexo 推荐插件-工具盒子

Hexo 插件说明
如果应用官网的主题你会发现，有可能出现打不开的情况，这是由于有些主题使用的插件，本地并没有安装导致的报错。（没有问题的可以跳过）

代码高亮（建议安装） {#代码高亮（建议安装）}

由于 Hexo 自带的代码高亮主题显示不好看，可以使用 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

|-----------|------------------------------------| | 1 | npm i -S hexo-prism-plugin |

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

|---------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | highlight: enable: false line_number: true auto_detect: false tab_replace: false wrap: true hljs: false prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css: |

搜索（建议安装） {#搜索（建议安装）}

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

|-----------|--------------------------------------------------| | 1 | npm install hexo-generator-search --save |

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

|-------------|------------------------------------------------| | 1 2 | search: path: search.xml; field: post; |

文章字数统计插件（建议安装）（使用了 halo 主题则必须安装） {#文章字数统计插件（建议安装）（使用了-halo-主题则必须安装）}

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。安装命令如下：

|-----------|-------------------------------------| | 1 | npm i --save hexo-wordcount |

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | post_wordcount: date: true # 发布日期 update: true # 更新日期 wordCount: true # 文章字数统计 totalCount: true # 站点总文章字数 min2read: true # 文章阅读时长 readCount: true # 文章阅读次数 |

添加代码压缩（建议安装） {#添加代码压缩（建议安装）}

hexo-neat插件实现压缩代码，底层是通过 gulp 来实现的。但是这个插件是有 Bug 的：

压缩 md 文件会使 markdown 语法的代码块消失，会删除全角空格
在博客站点根目录执行安装代码：

|-----------|--------------------------------------| | 1 | npm install hexo-neat --save |

紧接着在站点根目录下的配置文件添加如下代码：

|---------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | neat_enable: true neat_html: enable: true exclude: neat_css: enable: true exclude: - '*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '*.min.js' |

然后直接输入 hexo cl && hexo g 就可以了，会自动压缩文件。

补充：为了解决以上 Bug，对于halo主题（其他主题自行解决）需要将以上默认配置修改为：

|---------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #hexo-neat 优化提速插件（去掉HTML、css、js的blank字符） neat_enable: true neat_html: enable: true exclude: - '**/*.md' neat_css: enable: true exclude: - '**/*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/**/instantpage.js' - '**/matery.js' |

外链跳转插件 hexo-external-link（可选安装）（使用了 halo 主题则必须安装） {#外链跳转插件-hexo-external-link（可选安装）（使用了-halo-主题则必须安装）}

hexo-external-link是一个跳转外链相关插件。自动为所有 html 文件中外链的 a 标签生成对应的属性。比如设置target='_blank', rel='external nofollow noopener noreferrer'告诉搜索引擎这是外部链接，不要将该链接计入权重。同时自动生成外链跳转页面，默认在根目录下 go.html。

安装:

|-----------|-----------------------------------------------| | 1 | npm install hexo-external-link --save |

配置插件在 Hexo 根目录的_config.yml 文件中添加如下配置：

|---------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | hexo_external_link: enable: true enable_base64_encode: true url_param_name: 'u' html_file_name: 'go.html' target_blank: true link_rel: 'external nofollow noopener noreferrer' domain: 'your_domain' # 如果开启了防盗链 safety_chain: true |

enable：是否开启 hexo_external_link 插件 - 默认 false
enable_base64_encode：是否对跳转 url 使用 base64 编码 - 默认 fasle
url_param_name：url 参数名,在跳转到外链传递给 html_file_name 的参数名 - 默认 'u'
html_file_name：跳转到外链的页面文件路径 - 默认 'go.html'
target_blank：是否为外链的 a 标签添加 target='_blank' - 默认 true
link_rel：设置外链的 a 标签的 rel 属性 - 默认 'external nofollow noopener noreferrer'
domain：如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
safety_chain：go.html 为了防止外链盗用对域名进行的判断 - 默认 false 即关闭防盗链

添加 RSS 订阅支持（可选安装）（使用了 halo 主题则必须安装） {#添加-RSS-订阅支持（可选安装）（使用了-halo-主题则必须安装）}

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

|-----------|------------------------------------------------| | 1 | npm install hexo-generator-feed --save |

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

|---------------------|-----------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | feed: type: atom; path: atom.xml; limit: 20; hub: content: content_limit: 140; content_limit_delim: " "; order_by: -date; |

添加 sitemap 站点地图（可选安装）（使用了 halo 主题则必须安装） {#添加-sitemap-站点地图（可选安装）（使用了-halo-主题则必须安装）}

本主题中还使用到了 hexo-generator-sitemap 的 Hexo 插件来做 Sitemap，安装命令如下：

|-----------|---------------------------------------------------| | 1 | npm install hexo-generator-sitemap --save |

访问地址：/sitemap.xml

中文链接转拼音（可选安装） {#中文链接转拼音（可选安装）}

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
这里为可选安装，因为我希望使用urlname进行连接访问，中文链接转拼音由一个缺点就是当文章名字过长会显示十分臃肿。

安装命令如下：

|-----------|--------------------------------------------| | 1 | npm i hexo-permalink-pinyin --save |

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

|---------------|----------------------------------------------------------------------| | 1 2 3 | permalink_pinyin: enable: true separator: '-' # default: '-' |

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

添加 emoji 表情支持（可选安装） {#添加-emoji-表情支持（可选安装）}

本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

|-----------|------------------------------------------------------| | 1 | npm install hexo-filter-github-emojis --save |

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

|---------------------|-----------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis: |

deploy 发布插件（可选安装）（部署到 github 需要安装） {#deploy-发布插件（可选安装）（部署到-github-需要安装）}

如果你想通过deploy的方式进行推送public文件夹到托管网站，你需要安装

|-----------|----------------------------------------------| | 1 | npm install hexo-deployer-git --save |

当然你也可以选择不装，使用 Github Actions、docker 等方式
执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

添加 DaoVoice 在线聊天功能（可选的） {#添加-DaoVoice-在线聊天功能（可选的）}

前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。

添加 Tidio 在线聊天功能（可选的） {#添加-Tidio-在线聊天功能（可选的）}

前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。

修改页脚 {#修改页脚}

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

修改社交链接 {#修改社交链接}

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | <% if (theme.socialLink.github) { %> <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"> <i class="fab fa-github"></i> </a> <% } %> |

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：