官网教程：https://theme-next.iissnan.com/getting-started.html
说明
1
2
| 在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件
|
一 下载主题
1
2
| $ cd your-hexo-site
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
|
二 启用主题
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next
三 编辑菜单
启用需要的菜单
1
2
3
4
5
6
7
8
9
10
| //----|| 前面是路径,后面是图标ico
menu:
home: / || home
categories: / categories/|| th
tags: /tags/ || tags
archives: /archives/ || archive
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
|
手动创建对应页面
1
2
3
| hexo new page 'categories'
hexo new page 'tags'
hexo new page 'about'
|
\source路径下对应名称的index.md增加type属性
1
2
3
4
5
| ---
title: categories
date: 2018-07-30 16:28:33
type: categories
---
|
1
2
3
4
5
| ---
title: tags
date: 2018-07-30 16:28:54
type: tags
---
|
1
2
3
4
5
| ---
title: about
date: 2018-07-30 16:29:13
type: about
---
|
新建一篇文章
编辑 \source_posts\test.md 文件
1
2
3
4
5
6
7
8
| ---
title: one
date: 2020-07-01 16:01:33
tags: [标签1,标签2]
categories:
- Java分类
- Java分类的二级菜单
---
|
刷新浏览器，就可以看到效果了
六 主题设置
默认针对主题配置文件
1. 页面样式
1
2
| scheme: Muse
scheme: Pisces
|
2. 设置语言
1
2
| //站点配置文件
language: zh-CN
|
3. 头像
1
2
3
4
| avatar:
url: /images/ico.jpg #图片路径
rounded: true # 圆角
rotated: true # 旋转
|
4. 友情链接
1
2
3
4
5
6
7
8
| links:
Github: https://github.com/Lrxc
Weibo: http://example.com/
WeChat: http://example.com/
social_icons:
enable: true # 显示社交图标
icons_only: false # 只显示图标，不显示文字
|
5. 底部
1
2
3
4
5
6
7
8
9
10
11
12
13
| footer:
since: 2018 # 建站开始时间
icon:
name: user # 设置 建站初始时间和至今时间中间的图标，默认是一个'小人像'，更改user为heart可以变成一个心
animated: true
color: "#808080" # 更改图标的颜色，红色为'#ff0000'
powered:
enable: true # 开启hexo驱动
version: true # 开启hexo版本号
theme:
enable: true # 开启主题驱动
version: true # 开启主题版本号
custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> # 这里的底部标识是为了添加coding page服务时的版权声明 打开注释就可以看到底部有一个 hosted by coding pages
|
6. 文章自动折叠
1
2
3
| auto_excerpt:
enable: true #自动折叠文章
length: 150 #显示行数
|
7. 首页显示几篇文章
站点配置文件
1
2
| index_generator:
per_page: 6 #一页显示几条文章
|
8. 页面统计人数
1
2
3
4
5
6
7
8
| busuanzi_count:
enable: false # 设true 开启
total_visitors: true # 总阅读人数（uv数）
total_visitors_icon: user # 阅读总人数的图标
total_views: true # 总阅读次数（pv数）
total_views_icon: eye # 阅读总次数的图标
post_views: true # 开启内容阅读次数
post_views_icon: eye # 内容页阅读数的图标
|
9. 本地搜索功能
安装搜索插件： hexo-generator-searchdb，根目录下执行以下命令
1
| $ npm install hexo-generator-searchdb --save
|
站点配置文件_config.yml
1
2
3
4
5
| search:
path: search.xml
field: post
format: html
limit: 10000
|
主题配置文件_config.yml
1
2
| local_search:
enable: true
|
10. 字数统计，阅读时长
安装插件
1
| npm install hexo-symbols-count-time --save
|
主题配置文件_config.yml 修改如下
1
2
3
4
5
6
| symbols_count_time:
separated_meta: true # false会显示一行
item_text_post: true # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
item_text_total: true # 底部footer是否显示字数统计属性文字
awl: 4 # 计算字数的一个设置,没设置过
wpm: 275 # 一分钟阅读的字数
|
站点配置文件_config.yml 新增如下
1
2
3
4
5
6
7
| symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true
|
11. 内容页里的代码块新增复制按钮
1
2
3
4
| codeblock:
copy_button:
enable: false # 增加复制按钮的开关
show_result: false # 点击复制完后是否显示 复制成功 结果提示
|
12. 配置微信，支付宝打赏
1
2
3
4
5
| # Reward
reward_comment: # 打赏描述
wechatpay: /images/wechatpay.png # 微信支付的二维码图片地址
alipay: /images/alipay.png # 支付宝的地址
#bitcoin: /images/bitcoin.png # 比特币地址
|
13. 声明文章原创
1
2
3
4
5
| creative_commons:
license: by-nc-sa
sidebar: false
post: true # 默认显示版权信息
language:
|
14. 相关文章推荐
安装推荐文章的插件
1
| npm install hexo-related-popular-posts --save
|
主题配置
1
2
3
4
5
6
7
8
9
10
| related_posts:
enable: true
title: 相关文章推荐 # 属性的命名
display_in_home: false # false代表首页不显示
params:
maxCount: 5 # 最多5条
#PPMixingRate: 0.0 # 相关度
#isDate: true # 是否显示日期
#isImage: false # 是否显示配图
isExcerpt: false # 是否显示摘要
|
15. 背景动画设置
Canvas-nest 风格
进入 theme/next 目录，执行命令：
1
| git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
|
实际上就是将一个显示动效的 js 文件 clone 到对应目录。
这时将配置文件_config.yml 中的 canvas_nest: false 改为 canvas_nest: true 才能真正生效。