Hexo主题pure使用指南

hexo 主题 pure 项目相关信息:

预览地址: https://blog.cofess.com
项目地址: https://github.com/cofess/hexo-theme-pure
中文使用文档: https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md

使用前请操作

使用该主题前, 请先复制 theme/pure/_source/ 目录下的所有内容到 blog path/source/ 目录下
原因在于该目录下有建好的菜单 categories(分类)、tags(标签)、repository(项目)、books(书单)、links(友链)、about(关于)页面

当你使用自动生成分类、标签,展示github项目时

文章目录索引

在文章详情页, 展示一个文章目录

  1. 主题配置文件中开启配置:

    1
    2
    config
    toc: true # 是否开启文章章节目录导航
  2. 在文章顶部将该文章开启索引, 如:

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hexo主题pure使用指南
date: 2019-11-05 14:34:15
tags:
- hexo主题

categories:
- hexo

toc: true # 是否启用内容索引
sidebar: none # 是否启用sidebar侧边栏,none:不启用
---

侧边栏

主题配置项中, 侧边栏可以如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 侧边栏
sidebar: right
# 侧边栏启用哪些模块
widgets:
- board # 公告
- category # 分类
- tag # 标签
- tagcloud # 标签云
- archive # 归档
- recent_posts # 最近文章

# 归档列表的展示方式
archive_type: 'monthly' # 归档方式: yearly | monthly
show_count: true # 显示每个归档的文章总数

图集

在文章详情页中, 涉及的图片可以使用图集功能, 在点击一张图片时, 放大图片.
主题的图册公告是使用fancybox实现, 可以参照github

1
2
3
# Fancybox
# 图集功能
fancybox: true

展示github项目

在左侧菜单项目中, 点击展示自己的github项目

  1. 在主题配置文件中 _config.yml 修改, 请配置自己github用户名
1
2
github: 
username: caoruiy # github用户名
  1. 新建repository页面:
1
> hexo new repository

你也可以直接复制 theme/pure/_source/ 目录下 repository文件夹博客根目录/source/ 目录下

  1. 将文件内容修改为:
1
2
3
4
5
6
---
title: Repositories
layout: repository
comments: false
sidebar: none
---

关键内容为 layout: repository, 包含该属性才可以展示github项目

评论功能

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

你可以在主题配置文件中修改评论工具

1
2
comment:
type: valine # 启用哪种评论系统

Valine

一个无后端的评论框工具, 其依赖于 Leancloud 开发, 所以使用前需要先注册 Leancloud 账号

如何开始? 你可以从 Valine-快速开始 教程开始, 教程包含了一步一步的指引教程.

Valine配置项

主题valine评论框提供了以下配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
valine: # Valine官方地址: https://valine.js.org
appid: # 你的 leancloud 应用 appid
appkey: # 你的 leancloud 应用 appkey
notify: true # 是否开始评论邮件提醒, 教程: https://github.com/xCss/Valine/wiki
verify: false # 是否开始验证码功能, 开始邮件提醒会自动开启验证码功能
placeholder: 说点什么... # 输入框默认内容
avatar: mm # 头像展示方式, 具体设置项教程: https://valine.js.org/configuration.html#avatar
meta: nick,mail,link # 自定义评论信息
pageSize: 10 # 评论列表分页
lang: zh-cn, # 多语言支持 zh-cn | en
visitor: true # 文章阅读量统计: https://valine.js.org/visitor.html
highlight: true # 代码高亮
recordIP: true # 记录评论者的IP

关于邮件提醒: 只有在回复评论时, 并且填写了邮箱的评论才会收到回复提醒
关于文章阅读量统计: 开启阅读量统计, 会在详情页标题下展示阅读量数据

搜索功能

主题提供内置的搜索功能百度搜索, 百度搜索就是使用百度的SEO搜索, 个人觉得不是很实用, 不建议开启.

在主题配置文件 _config.yml 中配置:

1
2
3
4
# Search
search:
insight: true # 在使用搜索功能前, 你需要安装 `hexo-generator-json-content`
baidu: false # 使用百度搜索前, 你必须禁用其他所有的搜索功能

内置搜索

使用搜索功能前需要先安装:

1
npm i -S hexo-generator-json-content

项目地址: https://github.com/alexbruno/hexo-generator-json-content

在你运行 hexo g 或者 hexo s 时生效,在 hexo g 生成站点时, 会在根目录下生成 content.json 该文件内容即为搜索内容。

你可以对搜索内容进行自定义的配置, 只要在 _config.yml 中配置 jsonContent即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 示例: 隐藏分类和标签的搜索
jsonContent:
dateFormat: DD/MM/YYYY
posts:
title: true
date: true
path: true
text: true
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: false
author: false

文章阅读数量统计

主题提供 不蒜子 和 基于 leancloud 的统计

但是经过验证, 发现基于leancloud的统计不生效, 不知原因, 实现等效的方法就是:

评论框使用valine评论框(主题已经内置), 同时开启 visitor: true 配置项项即可

字数统计&阅读时长

主题内置了该功能, 使用前需要先安装插件:

1
npm i -S hexo-wordcount

主题配置文件中, 开启设置即可:

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

友情链接

复制 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: "这是一个描述"

添加多个友情链接,我们只需要根据上面的格式重复填写即可。