飞天揽月
0%

Hexo 主题pure使用说明

发表于 更新于 分类于
本文字数： 12k 阅读时长 ≈ 21 分钟

概述

在网上可能有写博客的工具很多，选择一个喜欢的就行， 这里不做过多的推荐 Hexo，如果想用的化本文可以作为一个简单的入门说明，方便想要使用 Hexo 的同学可以快速入门，并且可以有一个还不错的主题，那么下面进入正题。

hexo 安装

1
安装 Hexo 只需几分钟时间，若您在安装过程中遇到问题或无法找到解决方式，请提交问题，我会尽力解决您的问题。

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

  • Node.js
  • Git

安装 Hexo

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

1
$ npm install -g hexo-cli

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
4
mkdir blog 
cd blog
hexo init
npm install

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

1
2
3
4
5
6
7
├── _config.yml 网站的配置信息
├── package.json 应用程序的信息
├── scaffolds 模版文件夹
├── source 资源文件夹是存放用户资源的地方
|   ├── _drafts
|   └── _posts
└── themes 主题文件夹

配置

网站
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
网站存在子目录

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

目录
参数 描述 默认值
source_dir 资源文件夹，这个文件夹用来存放内容。 source
public_dir 公共文件夹，这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 downloads/code
i18n_dir 国际化（i18n）文件夹 :lang
skip_render 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。
文章
参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置

相对地址
默认情况下，Hexo生成的超链接都是绝对地址。例如，如果您的网站域名为example.com,您有一篇文章名为hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类和标签
参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名
日期和时间
参数 描述 默认值
date_format 日期格式 YYYY-MM-DD
time_format 时间格式 H:mm:ss
分页
参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page
拓展
参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置
创建代码上传GitHub仓库

注册并登陆GitHub账号后，新建仓库，名称必须为 user.github.io，如 xxxx.github.io。

配置远程github仓库

简介：安装Hexo 上传文件到 git仓库， 若未关联GitHub，执行hexo d时会提示输入GitHub账号用户名和密码

1
npm install hexo-deployer-git --save

配置：

1
2
3
4
deploy:
  type: git
  repository: git地址（git@github.com:xxxx/xxxx.github.io.git）
  branch: master

上传到服务器。

1
hexo deploy

hexo deploy 执行成功后便可通过 https://xxxx.github.io 访问博客，看到的内容和 http://localhost:4000 相同。

快速开始

创建新的文章
1
$ hexo new "My New Post"

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

More info: Writing

运行 hexo 服务
1
$ hexo server  或者  hexo s

启动服务器。默认情况下，访问网址为： http://localhost:4000/。
| 选项 | 描述 |
| :— | :— |
| -p, –port | 重设端口 |
| -s, –static | 只使用静态文件 |
| -l, –log | 启动日记记录，使用覆盖记录格式 |

More info: Server

生成html静态文件
1
$ hexo generate  或者  hexo g
选项 描述
-d, –deploy 文件生成后立即部署网站
-w, –watch 监视文件变动

More info: Generating

提交到远程github仓库

1
$ hexo deploy  或者  hexo d

More info: Deployment

Pure主题

配置说明

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

1
2
站点配置：<blog>目录下的 _config.yml 文件
主题配置：<blog>/themes/pure/_config.yml

下载主题

1
2
cd <blog目录>
git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

打开站点配置文件，找到theme字段，将其值更改为 pure， hexo/_config.yml 文件 theme: pure

更新主题

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
搜索

主题内置三种站内搜索方式：insight、swiftype、baidu

1
2
3
4
5
# Search
search:
  insight: true # you need to install `hexo-generator-json-content` before using Insight Search
  swiftype: # enter swiftype install key here
  baidu: false # you need to disable other search engines to use Baidu search
分享

支持weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin

1
2
3
4
5
6
# Share
# 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,qzone  # 移动端显示的分享图标
评论

主题集成了disqus、友言、来必力、gitment评论系统，选择其中一种即可

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: *** # enter youyan uid 
  livere:
    uid: *** # enter livere uid
  gitment:
    githubID: username
    repo: username.github.io
    ClientID: ***
    ClientSecret: ***
    lazy: false
Github respostory

复制 theme/pure/_source/ 目录下 repository 文件夹到blog path/source/ 目录下

1
2
3
# Github
github: 
  username: ***  # github username
豆瓣书单

复制 theme/pure/_source/ 目录下books文件夹到blog path/source/ 目录下

1
2
3
4
5
# douban 豆瓣书单
douban:
  user: *** # 豆瓣用户名
  start: 0 # 从哪一条记录开始
  count: 100 # 获取豆瓣书单数据条数
友情链接

复制 theme/pure/_source/ 目录下links文件夹到blog path/source/ 目录下在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。然后在文件内创建一个名为 links.yml 的文件,在其中添加相关数据即可。单个友情链接的格式为：

1
2
3
4
Name:
  link: http://example.com
  avatar: http://example.com/avatar.png
  desc: "这是一个描述"
文章启用目录索引 (写文章的 .md 文件头部添加)
1
2
3
4
5
6
7
8
9
10
\---
title: 文章标题
date: 2019-03-05 16:00:05
categories:
  - 文章分类
tags:
  - 文章标签
toc: true # 是否启用内容索引
mathjax: true # 浏览器中的开源的数学符号渲染引擎是否启用
\---
添加背景动画

背景动画基于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>
站点建立时间

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

1
since: 2019
添加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
3
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'
hexo-translate-title

简介：使用Google翻译，百度翻译和有道翻译将Hexo中的汉字标题转成英文标题

1
npm install hexo-translate-title --save

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

1
2
3
4
5
6
translate_title:
  translate_way: google    #google | baidu | youdao
  youdao_api_key: XXX
  youdao_keyfrom: XXX
  is_need_proxy: true     #true | false
  proxy_url: http://localhost:8123

注意：判断是否需要配置google本地代理，因为我在本地是开启时才能访问google翻译的，如果没有被墙，请将_config.yml 下的is_need_proxy: true改为false。如果设置为true,请设置本地代理地址

数学公式

Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签
更换Hexo的markdown渲染引擎，hexo-renderer-markdown-it-plus引擎替换默认的渲染引擎hexo-renderer-marked即可。
安装hexo-renderer-markdown-it-plus插件

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

配置：安装插件后，如果未正常渲染LaTeX数学公式，在 站点配置 文件_config.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  plugins:
    - plugin:
        name: markdown-it-katex
        enable: true
    - plugin:
        name: markdown-it-mark
        enable: false
文章启用 mathjax
1
mathjax: true
报错解决

问题一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$ hexo clean && hexo g
INFO  Deleted database.
INFO  Start processing
config.translate_title==> undefined
config.url==> http://yoursite.com
config.translate_title==> undefined
config.url==> http://yoursite.com
INFO  neat the html: /Users/jiangjunjie/jieay/data/jblog/source/_posts/hello-world.md [ 0.67% saved]
INFO  neat the html: /Users/jiangjunjie/jieay/data/jblog/source/_posts/my-first.md [ 0.47% saved]
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
TypeError: Cannot read property 'count' of undefined
    at Hexo.module.exports (/Users/jiangjunjie/jieay/data/jblog/node_modules/hexo-baidu-url-submit/lib/generator.js:4:41)
    at Hexo.tryCatcher (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/method.js:15:34)
    at Promise.map.key (/Users/jiangjunjie/jieay/data/jblog/node_modules/hexo/lib/hexo/index.js:344:26)
    at tryCatcher (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/util.js:16:23)
    at MappingPromiseArray._promiseFulfilled (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/map.js:61:38)
    at MappingPromiseArray.PromiseArray._iterate (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/promise_array.js:114:31)
    at MappingPromiseArray.init (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/promise_array.js:78:10)
    at MappingPromiseArray._asyncInit (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/map.js:30:10)
    at _drainQueueStep (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/async.js:142:12)
    at _drainQueue (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/jiangjunjie/jieay/data/jblog/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)

解决：
参考链接：https://github.com/hexojs/hexo/issues/2402

1
2
3
4
5
6
$ npm remove hexo-baidu-url-submit
npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.

removed 2 packages and audited 21504 packages in 5.388s
found 11 vulnerabilities (10 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

参考文档

官网文档： https://hexo.io/zh-cn/docs
Hexo博客主题pure使用说明： https://blog.cofess.com/2017/11/01/hexo-blog-theme-pure-usage-description.html)