从零开始建立个人博客III：Hexo配置

Posted on In , Views: Waline:

主要内容参考自Hexo的用户文档、Tranquilpeak用户文档及NexT使用文档

注：Hexo的配置文件(整个网站的)直接位于网站目录下，而主题的配置文件则位于主题目录下，文件名都是_config.yml

站点配置

  • 基本信息：站点(Site)、语言(en/zh-cn)、网址(url)及永久链接格式(permalink)
  • 更换主题：下载Tranquilpeak主题(注意改文件名)，放到themes目录下，同时在设置中将主题换为tranquilpeak
    更多主题：NexT、React、Cactus、fexo Hexo主题
  • 连接Github：安装hexo-deployer-git，并deploy下写入Github Pages仓库信息
  • 开启RSS订阅：安装hexo-generator-feed，并在_config.yml中添加feed项 
    1
    2
    3
    4
    5
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
  • 关于资源文件夹(asset folders)
    资源文件是指source目录下不发表的文件，如图片、CSS、JavaScript等。例如可在source目录下新建一个images目录用于存放文章中用到的图片，之后便可用相对路径在文章中进行引用。
    此外，还可在设置中开启post_asset_folder，开启后使用命令hexo new [layout] "post-title"创建文章(md文件)时会自动创建同名的文件夹，用于存放图片等资源文件。对于我这种文章多、单篇文章资源文件不多的不适合。

Tranquilpeak配置

  • 侧边栏(Sidear)：添加Weibo图标及链接，内部链接只需给出相对路径

  • 头像链接(Header)：默认即可，展示作者信息

  • 作者信息(Author)：地址、头像；个人简介及工作信息要到Languages中设置

  • 页面调整(Customization)：侧边栏样式、阅读模式、目录页缩略图、封面图片、站点图标、分类/标签/存档页样式

  • 集成的服务(Integrated Services)：评论(disqus, duoshuo)、搜索(Swiftype)、统计(google、baidu)、Gravatar

    • 评论：在disqus官网注册，并设置Add Disqus to Site，之后在 _config.yml 中填写disqus_shortname即可
    • 站内搜索：在swiftype官网注册、创建并安装搜索引擎，之后在 _config.yml 中填写swiftype_install_key即可
    • 数据统计：在Google Analytics上设置要统计的站点，之后在 _config.yml 中填写得到的Tracking ID即可

      使用Algolia，需要安装额外模块npm install hexo-algoliasearch，且需要每次发布(deploy)前手动索引hexo algolia

      除了使用第三方搜索服务，还可以借助模块hexo-generator-searchdb或hexo-generator-search实现本地搜索，Tranquilpeak主题目前不支持。

  • 开启页面(Enable Pages)：分类、标签、存档三个页面需要手动建立

    1
    2
    3
    hexo new page "all-categories"
    hexo new page "all-tags"
    hexo new page "all-archives"

    上述命令会新建分类、标签、存档三个页面(即在source目录下新建all-categories、all-tags、all-archives三个目录)

  • 调整字体字号(Fonts)：修改source/_css/utils/_variables.scss，修改后需要自行编译整个主题(需要安装先安装编译所需的所有依赖)

  • 404页面个性化(404.md)：在source目录下创建404.md文件，并在Front-Matter(后面会介绍)指定permalink: /404.html，之后根据需要自定义该文件即可。

  • 相关图片资源放在/source/assets/images下

写作

Front matter

Front matter是指md文件最开始几行，与正文以---分割，用于设置文章标题、发布时间、及标签分类等。
Hexo标准的Front matter有：

1
2
布局layout、标题title、创建日期date、标签tags、分类categories
更新日期updated、开启或关闭评论comments、链接permalink

Hexo默认会处理全部md及html文件，如果不想让Hexo处理，可以在 Front-Matter 中将layout: 设为 false
分类及标签的格式为：放在[]内，以逗号或空格分割。两者区别为分类具有层次，先后顺序不可变；标签则没有要求。

Tranquilpeak主题提供了额外的Front matter用于调整界面，主要的有：

  • keywords：为搜索引擎定义关键字
  • thumbnailImage : 在索引页展示的缩略图，默认会自动使用coverImage或gallery的第一个图片。
  • coverImage : 在文章开头展示的大幅图片
  • gallery : 在文章最后图册(fancybox)中展示的图片，格式为：源文件路径 [缩略图路径] [标题]

关于摘要

Tranquilpeak从1.40版本开始，取消了自动摘录功能，要在索引页显示摘要必须在文章中添加标记，否则将会全文展示在索引页。Tranquilpeak提供了<!-- more -->及<!-- excerpt -->两种标记来分割摘要与全文，前者的摘要内容会在文章中显示，而后者的摘要内容不会在文章正文中显示。

1
2
3
文章开始部分 / 文章摘要
<!--more--> /   <!--excerpt-->
剩余部分    /    文章正文

展示目录

将<!-- toc-->放在文章中要展示文章目录的位置即可

Tag Plugins

Hexo提供了很多标签插件，用于实现引用blockquote、代码高亮codeblock、音视频嵌入iframe、图片调整img等。具体参考标签插件|Hexo
需要注意的是，对于图片等资源文件，使用正常的Markdown语法![](/example.jpg) 插入时，图片可以在文章中正常显示，但在索引页面可能不能显示。正确的处理方式是使用asset_img标签插件{%asset_img "example.jpg"　"title" %}具体参考Asset Folder|Hexo

Tranquilpeak主题同样提供了额外的标签插件：

  • 警告 alert，用于显示Tips或Warning 
    1
    {% alert [class_name] %}   content  {% endalert %}
  • 文本高亮 hl_text： 
    1
    2
    3
        {% hl_text [color_name] %}   content   {% endhl_text %}
        ````
    - 图片 image：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    - 分页的代码块  tabbed_codeblock：在一个代码框中以选项卡的方式包含多段相关代码，如比较不同语言对同一算法的实现



    - - - -
    `2017.8.18更新`
    ## NexT配置
    NexT的中文文档非常清晰，具体配置请参考官方文档，这里主要记录几个关键点：
    * 文章分类、标签页面的名字与Tranquilpeak不同，且需要指定的是`type`，而不是Tranquilpeak的`layout`
    * 站内搜索需使用额外模块：使用algolia需`npm install hexo-algolia`；本地搜索需`npm install hexo-generator-searchdb`
    * 为显示文章阅读数，可以使用不蒜子统计或者需要使用LeanCloud的服务，后者需注册获取API
    * 关于公式：NexT内置MathJax支持，需手动开启，且依赖额外的Hexo插件。此外还可设置只对用到公式的页面加载`per_page: ture`，此时需在插入公式的文章Front Matter中指定`mathjax:true`
    * 关于摘要：NexT只支持`<!--more-->`，不支持`<!--excerpt-->`
    * 关于目录：NexT会自动生成目录，无需单独插入`<!-- toc-->`
    * 404页面：NexT支持自定义404页面，且提供有公益404代码
    * 关于置顶：NexT曾经支持过文章置顶，后来又移除了，所以不要想了，改时间是最简单的方法。
    * 访问统计：NexT主题集成了两种统计访问量的方式，不蒜子和Leancloud。前者的优点是不需要外部服务，直接用脚本实现；而较大的缺点则是本地预览时的访问也计入统计，对于我这种写文章时需要多次预览修改的人，统计结果就不准了。
    * 此外NexT还支持版权声明、添加友链、开启打赏、微信公众号推荐及动画效果设置、字体设置等众多功能
    * 可使用代码`<img src="/image-url" class="full-image" />`使图片突破容器宽度限制，增强视觉效果
    * Hexo提供对文章修改日期的支持，设置updated_at为true开启，之后便可在文章Front Matter中设置修改日期，如`updated: 2018-01-01 15:00:00`

    NexT主题同样提供了额外的标签插件：

    * 文本引用居中 centerquote或cq

    blah blah blah

    1
    2
    3
    文本引用居中还可以直接通过HTML代码实现：
    ```html
    <blockquote class="blockquote-center">blah blah blah</blockquote>
  • 信息提示 note，用于显示Tips或Warning 
    1
    {% note [class_name] %} content {% endnote %}
    class_name为颜色样式，可选default, primary, success, info, warning, danger，不写class_name时似乎跟default的还不同😂

提示信息和警告信息显示效果分别为：

Tips： 提示信息

Warning： 警告信息

问题及解决

运行Hexo Server没有任何反应，也没有报错
最终发现是图片文件中有一个指向其他文件夹的链接，而由于我改动过文件名导致上述链接失效了。
虽然Hexo Server并没有报错，但如果从零开始一点点重建博客，就会发现添加到有问题的文件夹链接时会报错：Unhandled rejection TypeError: expecting an array or an iterable object but got [object Null]

文章标题中的坑
title:和标题之间必须有空格；
不能出现[],:等几个字符，解决办法是换用其他字符，如-或整个标题加引号。

域名绑定

在source下创建名为CNAME的文件，写入要绑定的域名：yelf.me(只能写一个)，发布一下(推送到Github Pages仓库)。
之后到域名解析管理页面：创建CNAME记录，将指向Github Pages地址。
注1：A记录，将域名指向一个IPv4地址；CNAME记录，将域名指向一个域名。根据Github的帮助文档，如果设置顶级域名(.me就是)必须使用A记录指向Github的服务器(192.30.252.153)，但经测试似乎CNAME记录也是可以的。之后，启用HTTPS时发现CNAME与所需的TXT记录冲突，还是换了A记录。
注2：也可以使用次级域名，如blog.yelf.me，需要同时修改source下CNAME文件中的域名及域名管理下CNAME记录中重定向的域名。其中CNAME记录中重定向的域名不需要写全，只写前缀即可，如blog或www，不使用二级域名时为@。
注３：我在阿里万网注册的域名，直接使用了阿里云免费的DNS解析
https://help.github.com/articles/quick-start-setting-up-a-custom-domain/
https://kyle.xlau.org/posts/github-cname.html

其他

更多插件/挂件：hexo-renderer-mathjax…
遇到中文乱码问题，请检查文件编码，保证是UTF-8格式
Hexo你的博客 https://ibruce.info/2013/11/22/hexo-your-blog/
使用GitHub和Hexo搭建免费静态Blog https://wsgzao.github.io/post/hexo-guide/
使用Hexo搭建个人博客 http://mayiwei.com/2014/01/19/hexo-setup/