hexo 个人博客工具使用教程（3）-- pure主题个性化配置

个人博客搭建系列 hexo 评论

npm命令行工具学习笔记（1）– 我的第一个命令
前两篇文章我们简要描述了hexo的使用方法，并简单介绍了hexo主题pure的部署方式，本文针对pure进行详细讲解，因pure官方文档对配置信息描述的不是很清楚，所以博主在这里也研究了很久，基本完成了搭建个人博客的需求。本文将从整个页面来主次顺序来一步步配置

国际化

hexo默认是英文的，需要改成中文模式，在/{项目目录}/-config.yml修改

1
language: zh-CN

个人信息

左边顶部个人简介–这部分区域的配置在主题目录的_config.yml里面配置 /{项目目录}/themes/pure/-config.yml

1
2
3
4
5
6
7
8
enabled: true # 是否开启个人简介
avatar: images/avatar_jason.jpg # 个人头像
gravatar: # 谷歌邮箱，如果设置了这个，将默认显示谷歌头像
author: Jason # 姓名
author_title: Web Developer & Designer # 简介
author_description: 个人简介。
location: 南京, 中国 # 地区
follow: https://github.com/jason-live

菜单列表

个人信息下面的菜单列表，默认的只有首页和归档可以点击，其余点击均为404页面，博主在这里卡壳了很久才找到配置的方法

  1. 找到/{项目目录}/themes/pure 下的_source文件夹
  2. 拷贝_source下的所有文件到/{项目目录}/source文件夹下
  3. 重启项目，菜单列表下的所有链接就可以点击了

快速链接

菜单列表下面的部分，这部分配置需要/{项目目录}/themes/pure/-config.yml和/{项目目录}/-config.yml两个文件同时配置

  • /{项目目录}/-config.yml
1
author: JasonLive
  • /{项目目录}/themes/pure/-config.yml
1
2
3
4
5
social:
  links:
    github: https://github.com/jason-live # 你的github地址
    rss: atom.xml
  link_tooltip: true # 是否显示链接的tooltip

打赏

页面底部赏字的配置，有兴趣的同学可以配置，也可自行关闭，/{项目目录}/themes/pure/-config.yml

1
2
3
4
5
6
7
8
9
10
donate:
  enable: true # 关闭打赏
  weipay:
    image: images/donate/weipay.jpg
    qrcode: images/donate/mywechatpay.jpg
    title: 微信支付
  alipay:
    image: images/donate/alipay.jpg
    qrcode: images/donate/myalipay.jpg
    title: 支付宝

分享

文章底部的分享配置，分别可以配置PC和移动端不同的分享，/{项目目录}/themes/pure/-config.yml

1
2
3
4
5
# weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
share:
  enable: true  # 是否启用分享
  sites: weibo,qq,wechat,facebook,twitter  # PC端显示的分享图标
  mobile_sites: weibo,qq,wechat,facebook,twitter  # 移动端显示的分享图标

评论

评论系统需要自行启用，博主选择的为livere，首先需要去livere官网注册，拿到注册的id后，/{项目目录}/themes/pure/-config.yml 配置以下信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Comment
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
comment:
  type: livere  # 启用哪种评论系统
  disqus:  # enter disqus shortname here
  youyan:
    uid: 1783844 # enter youyan uid
  livere:
    uid: MTAyMC8zMjczOC85Mjk5 # enter youyan uid
  gitment:
    githubID:
    repo:
    ClientID:
    ClientSecret:
    lazy: false

其他配置

  • 豆瓣书单
1
2
3
4
5
6
7
8
9
# douban 豆瓣书单
Api:
  https://developers.douban.com/wiki/?title=book_v2 图书
books:
  https://api.douban.com/v2/book/user/jason-live/collections?start=0&count=100 个人书单列表
douban:
  user: jason-live # 豆瓣用户名
  start: 0 # 从哪一条记录开始
  count: 100 # 获取豆瓣书单数据条数
  • 开启文章统计
1
2
3
4
postCount:
  enable: true
  wordcount: true  # 文章字数统计
  min2read: true  # 阅读时长预计
  • 个人知识技能
1
2
3
4
5
6
skills:
  Git: ★★★★☆
  webpack、rullup: ★★★★★
  Javascript: ★★★★☆
  HTML+CSS: ★★★★☆
  Javs: ★★★☆☆
  • 个人标签
1
2
3
4
5
6
labels:
  - 前端开发
  - 前端架构
  - Web前端
  - java开发者
  - 强迫症患者

写作

之所以把写作放在这里，是因为每个主题都有各种自己的配置方式，配合hexo官方给出的命令，一并说明

1
hexo new [layout] <title>
  • layout说明
布局 路径 备注
post source/_posts 标准模式
page source
draft source/_drafts 草稿模式
  • 生成静态文件
1
hexo generate // hexo g
  • 部署
1
hexo deploy // hexo d
  • 发表草稿

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

1
hexo publish [layout] <title>

JasonWeb Developer & Designer

个人简介。