Hexo博客搭建(2)——主题配置

发布于 更新于 Hexo 评论
温馨提示：点击页面下方以展开或折叠目录

摘要：博客搭建完成后，对其进行个性化配置，由于pure主题教程偏少且文档过于简洁，因此详细记录下来。

Hexo博客搭建
博客系列：Hexo博客搭建(1)——建站及部署，环境搭建并部署至Github。
博客系列：Hexo博客搭建(2)——主题配置，针对pure主题进行个性化配置。
博客系列：Hexo博客搭建(3)——优化评论系统，主要对Valine评论系统进行优化。
博客系列：Hexo博客搭建(4)——常见问题，修复了pure主题的系列小bug。
文章作者：鴻塵

一、前言

1.背景

本博客使用的hexo-pure主题——hexo-theme-pure，由于该主题较为小众，使用人数不多，难以找到靠谱的参考文章，且不论是中文文档、英文文档，还是Hexo博客主题pure使用说明，都不够详细，实际动手过程中仍有许多问题。
因此，将该主题的配置过程详细地记录下来。
说明：主题配置大部分仍然是参考上述文档。

2.配置说明

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为站点配置文件（./_config.yml）， 后者称为主题配置文件（./themes/pure/_config.yml）。

二、安装启用主题

首先在博客根目录下运行以下命令：

1
2
3
git clone https://github.com/cofess/hexo-theme-pure.git themes/pure
cd ./themes/pure
git pull

然后打开站点配置文件，找到theme字段，将其值更改为pure即可。
到此，主题安装完成。然后启动Hexo服务验证主题是否正确启用。

1
hexo s

三、主题配置

1.设置语言

打开站点配置文件, 将language设置成你所需要的语言。建议明确设置你所需要的语言,可选值对应themes\pure\languages目录下语言文件，简体中文配置如下：

1
language: zh-CN

2.导航菜单

menu和menu_icons默认即可，其中menu为页面左侧导航菜单，menu_icons为导航菜单图标，若需更改，参考这里。
rss订阅用不上直接设置false即可~

3.站点信息

此部分只需要关注网站logo头像favicon的图片路径，将需要使用的logo图片放在./themes/pure/source/favicon.png，然后设置为favicon: /favicon.png即可。
站点公告可用HTML格式，例如<br>换行、<a href="xxx" styly="xxx">标签等进行配置。

4.主题个性配置

  • config：此部分对照注释配置即可。
  • pagination：分页设置，默认即可。
  • sidebar：右侧，默认即可。
  • widgets：右侧边栏小部件，根据需要展示，不需要注释掉即可。
  • index_widgets：默认注释掉，不知道是什么，取消注释也没反应。

  • fancybox：实现点击图片放大的部件，默认关闭，打开后会导致友链打不开（解决办法参考后文Hexo博客搭建(4)——常见问题之如何实现点击图片放大）。

  • search：分为站内搜索insight和百度搜索baidu，两者至多开启一个。站内搜索需要先安装hexo-generator-json-content插件，百度搜索则需要先被百度收录。

  • donate：打赏功能只需要将./themes/pure/source/images/donate/xxx.jpg替换为自己的。
  • share：*sites属性值为英文逗号分隔且无空格。
  • github：填写Github用户名，以正确获取仓库信息及Github主页。

5.评论系统

博客采用Valine评论系统，此部分配置较为繁琐，此处配置仅针对主题配置文件的配置项，详细配置及源码修改分布详见后文Hexo博客搭建(3)——优化评论系统。
以下配置中的enableQQ和requiredFields设置了也不会生效，因为评论样式文件./themes/pure/layout/_script/_comment/valine.js并没有包含这两个部分，所以需要修改源码。
相关说明：

  • valine：需要先将type设置为valine，表示启用Valine评论系统
    • appid和appkey：leancloud应用的专属appid和appkey，leancloud应用如图：leancloud应用
    • notify和verify：该选项已被弃用
    • placeholder：评论框占位符，可自定义，换行符为\n
    • avatar：评论头像，参考valine配置项之avatar和valine头像配置
    • meta：评论框表头，默认显示「昵称」、「邮箱」、「网址」
    • pageSize：评论区分页
    • visitor：leancloud自带的文章阅读量统计（站长可随意修改），若开启则需关闭「不蒜子」，否则会显示两个阅读量，如图所示：
      文章阅读量显示问题
    • enableQQ：是否启用昵称框自动获取QQ昵称和QQ头像, 默认关闭，需站长主动启用，启用后还需要修改源码
    • recordIP：是否记录访问者IP
    • requiredFields：设置必填项，需要修改源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
comment:
  type: valine
  valine:
    appid: *********************************
    appkey: ************************
    notify: true # mail notifier , https://github.com/xCss/Valine/wiki
    verify: false # Verification code（notify和verify已废弃）
    placeholder: 留下邮箱才可以收到新消息提醒哦~
    avatar: robohash # gravatar style https://valine.js.org/configuration.html#avatar
    meta: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
    visitor: true # Article reading statistic https://valine.js.org/visitor.html
    enableQQ: true
    recordIP: false
    requiredFields: ['mail',] # Nick必填则需3+字符

6.其他

  • 豆瓣书单：因为没有豆瓣的账号，此页面拟改为「相册」，因此此处关于「豆瓣」的全部注释掉了
  • pv：文章阅读量统计，由于Valine评论自带有阅读量统计，故此处busuanzi和leancloud直接设置为false禁用
  • postCount：文章字数及阅读时长统计，需要安装``插件
    • enable：启用postCount，设置为true
    • wordcount：启用文章字数统计，设置为true
    • min2read：启用阅读时长预计，设置为true
  • plugins：插件，暂不需要，可根据自身实际配置
  • Miscellaneous：杂项（包括twitter，Google+，Facebook），暂不需要，可根据自身实际配置

7.个人信息profile

此处配置主要是在页面左侧个人信息，以及「关于」页面右侧边栏的展示。labels、skills、links、works和projects显示在「关于」页面右侧边栏，配置格式为键值对形式，参考模板即可。

  • enabled：是否启用
  • avatar：个人头像，替换./themes/pure/source/images/avatar.jpg即可，路径设置为images/avatar.jpg
  • gravatar：gravatar头像，属性值为Gravatar账户邮箱地址，将会覆盖上面的avatar配置
  • author：昵称
  • author_title：略（当做职业描述了…）
  • author_description：个人简介
  • location：位置
  • follow：关注我的主页
  • social：社交平台链接，以图标形式显示在各页面的左下方
    • links：各个社交平台的连接可选值参考IconFont图标，一般有「Github」、「微博」、「twitter」、「facebook」、「知乎」、「领英」、「花瓣」、「思否」、「码云」、「QQ/空间」、「邮箱」、「掘金」、「微信」、「stackoverflow」、「支付宝」等，一般展示以4~6个为宜，参考后文Hexo博客搭建(4)——常见问题之如何更改左侧IconFont 图标
    • link_tooltip：建议设置为true
  • labels：个人标签，显示在「关于」页面右侧边栏
  • skills：技能，显示在「关于」页面右侧边栏
  • links：个人链接，显示在「关于」页面右侧边栏
  • works：个人作品，显示在「关于」页面右侧边栏
  • projects：个人项目，显示在「关于」页面右侧边栏

四、站点配置

站点配置参考：官方文档配置

1.网站

  • title：网站标题
  • subtitle：网站副标题
  • description：描述
  • keywords：关键字
  • author：作者
  • language：站点语言，第三步已配置
  • timezone：时区，默认即可

2.网址

  • url：主页URL，例如https://hwame.top
  • root：网站根路径，需与url对应，如果站点位于子目录，则url为http://yoursite.com/child且同时设置root为/child
  • permalink：文章链接，个人认为以日期为路由分隔即可：:year:month:day/:title.html，此项默认值为:year/:month/:day/:title/
  • permalink_defaults：各部分的默认值，留空即可
  • pretty_urls：如果设置为false则会去掉尾部的index.html或.html

3.目录/文章

默认即可，或者参考官方文档配置

4.首页分页

首页分页index_generator有一个小bug，即当最后一页只有一篇文章时，会直接打开那篇文章（如果设置了Read More，则显示到「摘要」），这个问题还未解决。

  • path：主页的路径，默认为''
  • per_page：每页展示数量，设置为0则禁用分页
  • order_by：默认按时间倒序排序

5.其他

  • Category & Tag：默认分类default_category的默认值为uncategorized，pure主题已改为categories，其他默认即可。
  • Metadata elements：meta_generator不知道是什么，默认即可。
  • Date / Time format：日期时间格式默认即可。

6.归档分页

此处配置为「归档」的分页，不同于「首页」的分页

  • per_page：每页显示的文章数量 ，默认值为10，设置为0则表示关闭分页功能
  • pagination_dir：分页目录，保持为默认值page即可

7.扩展

鴻塵Pythoner, Data Analyst

个人简介：处女座不适合做码农。