Hexo博客主题pure修改记录

技术杂记 Hexo 评论

配置文件说明

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为站点配置文件， 后者称为主题配置文件。

启用pure主题

安装主题

1
git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

打开站点配置文件，找到theme字段，将其值更改为 pure。

1
theme: next

更新主题

1
2
cd themes/pure
git pull

到此，主题安装完成。然后启动Hexo服务验证主题是否正确启用。

1
hexo s

使用浏览器访问 http://localhost:4000 ，检查主题是否被启用。

主题设定

设置语言

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

1
language: zh-CN

设置个人信息

头像在themes\pure\source\images 目录下替换图片即可，捐献的二维码同理。

个人信息大部分都在 主题配置文件 中设置

设置菜单

右边导航菜单在主题配置文件中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 导航菜单
menu:
  Home: . 
  Archives: archives # 归档
  Categories: categories # 分类
  Tags: tags # 标签
  Repository: repository # github repositories
  Books: books     # 书单
  Links: links # 友链
  About: about # 关于
  
# 导航菜单图标（font awesome）
menu_icons:
  enable: true # 是否启用菜单图标
  home: fa-dashboard
  archives: fa-delicious
  categories: fa-folder
  tags: fa-tags
  repository: fa-code
  books: fa-leanpub
  links: fa-gg
  about: fa-coffee

添加背景动画

背景动画基于canvas，在\themes\pure\layout\layout.ejs的

中面添加

1
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

站点建立时间

这个时间将在站点的底部显示，例如 © 2017。 编辑 主题配置文件，新增字段 since。

配置示例：

1
since: 2017

添加404公益页面

GitHub Pages有提供制作404页面的指引：Custom 404 Pages。

但是自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。

使用方法：新建 404.html 页面，放到主题的 source 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

阅读次数统计

本来想用leancloud来统计，因为不蒜子不能管理相关博文的阅读量，但是配置完leancloud会报错~..~只能选用不蒜子，在主题配置文件 中把busuanzi设置为true即可：

1
2
3
pv:
  busuanzi:
    enable: true  # 不蒜子统计

常用插件及用法

hexo-admin

Github：https://github.com/jaredly/hexo-admin

简介：可以直接在网页端创建、编辑markdown文章内容，并将内容发布到_posts里。最方便的是可以很方便的给文章加标题、分类、打标签。

安装和使用：

安装这个插件需要升级npm，先升级

1
npm install -g npm

然后安装

1
npm install --save hexo-admin

配置：

在站点配置文件 _config.yml中添加

1
2
3
4
admin:
  username: myfavoritename
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something

这个配置可以直接在admin Settings > Setup authentification 页面中输入数据获取，secret是用于产生cookie值的。

hexo-douban

Github：https://github.com/mythsman/hexo-douban

简介：为博客添加豆瓣书单和豆瓣电影。（不支持分页，数据大网络差有可能出现超时错误）

安装：

1
npm install hexo-douban --save

配置：

在站点配置文件 _config.yml中添加

1
2
3
4
5
6
7
8
douban:
  user: 豆瓣个性域名
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'

在主题配置文件 中修改menu

1
2
3
4
5
menu:
  Home: /
  Archives: /archives
  Books: /books     #This is your books page
  Movies: /movies   #This is your movies page

hexo-wordcount

Github：https://github.com/willin/hexo-wordcount

简介：为文章添加文章字数统计、文章预计阅读时间

安装：

1
npm install hexo-wordcount --save

配置：

在主题配置文件 中设置为true：

1
2
3
4
5
# wordcount
postCount:
  enable: true
  wordcount: true  # 文章字数统计
  min2read: true  # 阅读时长预计

hexo-autonofollow

Github：https://github.com/liuzc/hexo-autonofollow

简介：自动为站外链接添加nofollow属性

安装：

1
npm install hexo-autonofollow --save

配置：

在站点配置文件_config.yml中添加

1
2
3
4
5
nofollow:
  enable: true
  exclude:
    - exclude1.com
    - exclude2.com
  • enable - 是否启用
  • exclude - 排除域名

hexo-generator-feed

Github：https://github.com/hexojs/hexo-generator-feed

简介：RSS的生成插件，你可以在配置显示你站点的RSS，文件路径\atom.xml。

安装：

1
npm install hexo-generator-feed --save

配置：

在站点配置文件_config.yml中添加

1
2
3
4
5
6
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  • type - Feed type. (atom/rss2)
  • path - Feed path. (Default: atom.xml/rss2.xml)
  • limit - Maximum number of posts in the feed (Use 0 or false to show all posts)
  • hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it)
  • content - (optional) set to ‘true’ to include the contents of the entire post in the feed.

hexo-generator-sitemap

Github：https://github.com/hexojs/hexo-generator-sitemap

简介：生成博客的sitemap。

安装：

1
npm install hexo-generator-sitemap --save

配置：

在站点配置文件_config.yml中添加

1
2
sitemap:
    path: sitemap.xml

hexo-generator-baidu-sitemap

Github：https://github.com/coneycode/hexo-generator-baidu-sitemap

简介：生成博客的sitemap（针对百度）。

安装：

1
install hexo-generator-baidu-sitemap --save

配置：

在站点配置文件_config.yml中添加

1
2
baidusitemap:
path: baidusitemap.xml

hexo-generator-json-content

Github：https://github.com/alexbruno/hexo-generator-json-content

简介：用于生成静态站点数据，提供搜索功能的数据源。

安装：

1
npm install hexo-generator-json-content --save

配置：

在站点配置文件_config.yml中添加

1
2
3
4
5
6
7
jsonContent:
  ignore:
    - path/to/a/page
    - url/to/one/post
    - an-entire-category
    - specific.file
    - .ext # a file extension

hexo-neat

Github：https://github.com/rozbo/hexo-neat

简介：自动压缩html、css、js代码

安装：

1
npm install hexo-neat --save

配置：

在站点配置文件_config.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
neat_enable: true
neat_html:
  enable: ture
  exclude:
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

参考

http://theme-next.iissnan.com/getting-started.html

https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md

http://blog.cofess.com/2017/08/16/comon-plugins-and-usage-of-hexo-blog.html

Hombin WongJava Developer

人活在世上，就是为了忍受摧残，一直到死。想明了这一点，一切都能泰然处之。