Hexo博客主题配置与美化

NexT主题支持MathJax渲染，只需要做一些简单的安装和配置。

Hexo的配置

npm install hexo-math --save

开启数学公式支持

第一种方法：在next主题的文件夹下的_config.yml（不是hexo文件夹下的_config.yml）找到如下语句：

# Math Equations Render Support
math:
  enable: true

将enable修改为true

第二种方法：在加入了LaTeX数学公式的文章开头加入声明 mathjax: true

数学公式使用方法：在两个双dollar符中输入latex数学公式

优化

国内网络访问mathjax的CDN比较慢，可以去github下载源码，将unpacked文件夹拷贝到js本地目录

Markdown与MathJax冲突问题解决

网上有些做法是在写LaTeX的时候加入逃逸字符，但是这样做使得LaTeX只能在Markdown上渲染，在tex文件中还是要改回正常的状态，这样不具备拓展性。可以通过更改渲染引擎达到解决冲突的目的。

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

hexo-renderer-marked是Hexo自带的默认渲染引擎（注意，如果使用了其他的渲染插件，请卸载对应的插件），没有针对MathJax的改进。而hexo-renderer-kramed这个渲染插件针对MathJax支持进行了改进，对于Markdown和MathJax会分别渲染。尽管如此，对于行内公式有时还是会出现误将下划线识别为 Markdown 语法的情况。这时需要参考官方文档修改 escape 字符：https://hexo-guide.readthedocs.io/zh_CN/latest/theme/[NexT]%E9%85%8D%E7%BD%AEMathJax.html

两种配置文件的区分

站点配置文件：Hexo博客根目录下的 _config.yml
主题配置文件：./themes/主题名/_config.yml

首页置顶文章功能

npm install hexo-generator-topindex --save
npm uninstall hexo-generator-index --save

通过在文章中添加 top: 数值 来设置优先值，默认优先值为0。
本人使用minos主题不支持新插件，因此只能安装新版的hexo-generator-index，通过设置sticky:数值来实现同样功能。

NexT主题的配置

修改字体大小 / 修改文章页面宽度

在next主题文件夹下, 进入 source/css/_variables/base.styl, 找到

// Font size
$font-size-base           = 14px

将 14px 的大小修改为16或者18px.

修改文章页面宽度

$content-desktop                = 700px

to 800 px or larger.

图片居中显示

Hexo中使用的markdown渲染引擎为 marked. 想让图片居中显示, 可以修改主题渲染文件.

修改底部#标签为图标

网站根目录下 themes\next\layout_macro\post.swig 文件.
搜索 rel="tag">#, 将 # 替换成图标 <i class="fa fa-tag"></i>.

将阅读次数修改为热度

进入 /themes/next/layout/_macro/post.swig 文件, 搜索 LeanCloud, 在 <span class="leancloud-visitors-count"></span> 后添加 <span>℃</span>, 然后再将 /themes/next/languages/zh-CN.yml 文件中post:框下views:阅读次数 修改为 views:热度.

添加字数统计

安装字数统计插件

npm install hexo-symbols-count-time --save

在主题配置文件中设置:

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 2
  wpm: 275

在站点配置文件中设置:

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

If you want to add the word after the counting numbers like the following:

open this file your blog dir/themes/next/layout/_macro/post.swig and find

<span title="{{ __('symbols_count_time.count') }}">{#
#}{{ symbolsCount(post.content) }}{#
#} 字</span>

like this.

在 Github Pages 中添加 gitalk 评论功能

在 Github 中新建一个 OAuth Applications, 记住 client_id, client_secret. 然后在 next 主题配置文件中添加

# Gitalk
# Demo: https://gitalk.github.io
gitalk:
  enable: true
  github_id: BillyStudio # GitHub repo owner
  repo: Blog-de-Shane # Repository name to store issues
  client_id: 你的client_id # GitHub Application Client ID
  client_secret: 你的client_secret # GitHub Application Client Secret
  admin_user: BillyStudio # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

这样默认评论框就开启了，如果想关闭它，则在文章标签中设置：

comments: false

就可以了。

取消toc栏的自动编号

https://blog.guaoxiaohei.com/posts/Hexo-Level/

Minos主题的配置

配置Minos主题的目的是为了写双语博客。（目前支持的 Hexo 版本为 v3.6.0）

1.在themes文件夹下：

git clone https://github.com/ppoffice/hexo-theme-minos.git minos

2.修改语言配置，在minos文件夹下

cp _config.yml.example _config.yml

编辑_config.yml文件下menu项，保留自己想要的部分：

# Navigation bar menu links.
menu:
  Categories: /categories
  Tags: /tags
  About: /about

cp _config.yml _config.en.yml
cp _config.yml _config.zh-cn.yml

在_config.zh-cn.yml中修改中文菜单栏：

# Navigation bar menu links.
menu:
  分类: /zh-cn/categories
  标记: /zh-cn/tags
  关于: /zh-cn/about

在minos/commons文件夹中，将languages.ejs中的<%- partial('common/languages') %>剪切，放到navbar.ejs的对应位置

3.修改文件布局
在_post文件夹下新建zh-cn文件夹，将原md文件和文件夹拷贝过去；在source文件夹下新建zh-cn文件夹，将about、categories、tags等文件夹拷贝过去

4.hexo s尝试启动

ERROR Package hexo-generator-index is not installed.
ERROR Package hexo-renderer-marked is not installed.
ERROR Package hexo-renderer-sass is not installed.
ERROR Please install the missing dependencies in the root directory of your Hexo site.

安装所需依赖：

npm install hexo-generator-index
npm install hexo-renderer-marked
npm install hexo-renderer-sass

与Typora的配合

原先一直使用VS Code编写博客Markdown文件，换新电脑的时候发现VS Code占用的磁盘空间真尼玛的多，而且还散落各处。于是试用了Typora，相比VS Code先进了不少。主要是插入图片的功能要修改一下：

插入图片

打开Typora设置插入图片到指定路径。macOS下设置：

windows下设置

此时粘贴一张图片到typora中就可以自动显示了，但是由于路径中包含了文件名，而Hexo在generate的时候自动加上文件名，会导致没有办法在网页中预览，这是需要在Hexo博客目录下安装新的插件：

npm install --save-dev hexo-typora-image

1. 对于已经生成的文档中如果想要插入图片并且能显示，在顶栏添加

   typora-copy-images-to: 当前文档图片文件夹路径

2. 新的文档生成，在scaffolds/post.md中添加

   typora-copy-images-to: {{ title }}