Windows 系统使用 Hexo 搭建博客(三):博客配置和主题配置

这是 Windows 系统使用 Hexo 搭建博客系列文章:

  1. 配置本地环境;
  2. 连接网络;
  3. 博客配置和主题配置;
  4. 博客写作;

这是第三篇:博客配置和主题配置。

1. 博客配置和写作

1.1 修改博客名称

/blog/_config.yml 中的 #Site 修改:

  • title
  • subtitle
  • description
  • language: zh-CN
  • timezone

注意:若使用 NexT 主题,language 的简体中文必须设置为 zh-CN

1.2 生成 Category, Tags, About 页面

  • 输入:
    1
    2
    3
    hexo new page tags
    hexo new page categories
    hexo new page about

然后在 source 文件夹下会出现 tags, categories, about 文件夹,分别在里面的 index 文件加入语句:

1
2
3
type: "tags"
type: "categories"
type: "about"

在 about 文件夹里面的 index.md 写个人的简介。

1.3 添加搜索和 RSS Feed

注意,必须首先安装了 Hexo 的 feed 和 searchdb 插件,在 /blog/_config.yml 中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
search:
path: search.xml
field: post
format: html
limit: 10000

feed:
type: rss2
path: rss2.xml
limit: 10
hub:
content: 'true'

注意,search 还必须在 NexT 主题配置文件中把 local_search 设为 true.

1.4 为项目主页添加 README 文件

每次 Hexo 重新部署的时候项目主页的 README 文件都会被删除。因此用如下方法:

  1. \blog\source 文件夹内新建文件 README.mdown
  2. 在这个 README.mdown 里面写 readme 的内容。

2. NexT 主题配置

主要使用和参考了:

2.1 基础设置

首先修改主题:在博客配置文件 /blog/_config.yml 里面修改主题为:theme: next
接下来操作都在主题配置文件 /blog/themes/next/_config.yml 中进行。

  • 网页设置
    • 网站小图标(# Site Information Settings):把图标的 png 文件放在 themes/next/source/images/ 文件夹里面,把文件夹的链接加到 favicon: 中即可。我只设置了 small, medium 两个;
    • creative_commons:post: true,在文末添加版权声明;
    • 网页底部 footnote 暂不作设置。
  • 设置导航栏(# Menu Settings):添加 about, tags 和 categories;
  • 设置模板( # Scheme Settings):可选择喜欢的样式,我采用了 Gemini
  • 设置侧边栏(# Sidebar Settings),我的修改如下:
    • 设置社交账号链接(social):设置了 Github,知乎,豆瓣和邮箱四个;
    • 设置 back2top 中的值都为 true;
    • 增加头像(avatar):把头像放在 themes/next/source/images/ 文件夹里面,把文件夹的链接加到 url: 中即可;
    • 修改 toc 设置,把自动添加目录序号设为 number: false
  • 设置文章(# Post Settings):可设置文后添加微信订阅、相似文章等,但现暂时不设置;
  • 添加数学公式支持(# Math Equations Render Support
    1. 设置 mathenable: true
    2. 卸载原来的 renderer:npm un hexo-renderer-marked --save
    3. 安装可以支持 mathjax 的 renderer:npm install hexo-renderer-pandoc --save
    4. 每次写作,如果需要使用公式(mathjax)时,就在声明区加入声明:mathjax: true

2.2 高级设置

  • 添加评论支持:
    使用来必力评论系统(LiveRe),先注册。然后点击安装,选择免费版,填入网站链接和名称,获得代码,找到 uid。最后在主题配置文件中找到 livere_uid: 并加入即可;
  • 添加阅读次数统计功能:
    使用 Leecloud,用 Github 账号注册之后,创建新应用(自定应用名)→ 进入应用,创建 class,名字为 Counter → 设置,应用 key → 复制 App ID 和 App Key → 修改主题配置文件中的 leancloud_visitors。最后需要安装插件 npm install hexo-leancloud-counter-security --save
  • 添加顶部加载进度条:
    进入 \themes\next 文件夹,输入:git clone https://github.com/theme-next/theme-next-pace source/lib/pace 下载插件。在主题配置文件中把 pace 设为 true 即可;
  • 添加背景动态效果:
    主题配置文件定位到 # Canvas-nest,看情况是否需要。并且要安装插件;
  • 修改文章底部的 # 号标签
    修改模板 /themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将其中的 # 换成 <i class="fa fa-tag"></i>