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

温馨提示:点击页面下方以展开或折叠目录

摘要:博客搭建完成后,对其进行个性化配置,由于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.导航菜单

menumenu_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)——优化评论系统
以下配置中的enableQQrequiredFields设置了也不会生效,因为评论样式文件./themes/pure/layout/_script/_comment/valine.js并没有包含这两个部分,所以需要修改源码。
相关说明:

  • valine:需要先将type设置为valine,表示启用Valine评论系统
    • appidappkey:leancloud应用的专属appidappkey,leancloud应用如图:leancloud应用
    • notifyverify:该选项已被弃用
    • placeholder:评论框占位符,可自定义,换行符为\n
    • avatar:评论头像,参考valine配置项之avatarvaline头像配置
    • 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评论自带有阅读量统计,故此处busuanzileancloud直接设置为false禁用
  • postCount:文章字数及阅读时长统计,需要安装``插件
    • enable:启用postCount,设置为true
    • wordcount:启用文章字数统计,设置为true
    • min2read:启用阅读时长预计,设置为true
  • plugins:插件,暂不需要,可根据自身实际配置
  • Miscellaneous:杂项(包括twitter,Google+,Facebook),暂不需要,可根据自身实际配置

7.个人信息profile

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

  • 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对应,如果站点位于子目录,则urlhttp://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的默认值为uncategorizedpure主题已改为categories,其他默认即可。
  • Metadata elementsmeta_generator不知道是什么,默认即可。
  • Date / Time format:日期时间格式默认即可。

6.归档分页

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

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

7.扩展