Hexo 主题pure使用及修改记录

主题效果

具体效果请到我的博客查看

配置说明

在 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

设置个人信息

1
2
3
头像在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公益页面

新建 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>

阅读次数统计

不蒜子,在主题配置文件 中把busuanzi设置为true即可:

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

常用插件及用法

hexo-wordcount

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

1
npm install hexo-wordcount --save

配置:

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

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

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'

主题已经默认添加了豆瓣书单,豆瓣电影自己配置

hexo-autonofollow

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

1
npm install hexo-autonofollow --save

配置:

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

1
2
3
4
5
nofollow:
enable: true
exclude:
- exclude1.com
- exclude2.com

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:

hexo-generator-sitemap

简介:生成博客的sitemap

1
npm install hexo-generator-sitemap --save

配置:

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

1
2
sitemap:
path: sitemap.xml

hexo-generator-baidu-sitemap

简介:生成博客的sitemap(针对百度)。

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

配置:

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

1
2
baidusitemap:
path: baidusitemap.xml

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

简介:自动压缩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://www.wanghongbin.top
http://blog.cofess.com/2017/11/01/hexo-blog-theme-pure-usage-description.html

总结

Blog 主题更替了好几次,最终选择这款主题,简洁明了,让人喜欢!