next主题在Hexo主题中为GitHub star排行榜榜首,不仅说明文档很齐全,而且contributors较多,issues也活跃。这里可参考知乎推荐https://www.zhihu.com/question/24422335
基本设定next
在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。
在终端窗口下,定位到 Hexo 站点目录下。
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
打开站点配置文件,启用 NexT 主题theme: next
。选择简体中文language: zh-Hans
。
打开主题配置文件
- 选择 Scheme切换外观
scheme: Muse
(默认的)。 - 设置菜单。Hexo 在生成的时候将使用名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml ({language} 为你所使用的语言)。
menu:
home: /
archives: /archives/
about: /about/
categories: /categories/
tags: /tags/
#sitemap: /sitemap.xml
#commonweal: /404/
菜单图标通过menu_icons
元素设定,默认即可。
- 设定头像。
avatar: http://example.com/avatar.png
oravatar: /images/avatar.png
oravatar: /uploads/avatar.png
进阶设定next
添加「标签tags、分类categories」页面
- 在对应文章'---'标记上面添加
categories: Testing
tags:
- one
- two
- 定位到 Hexo 站点目录下,使用命令新建页面
hexo new page tags/categories
- 打开source/tags|categories/index.md
---
title: tags
date: 2017-08-22 22:13:13
type: "tags/categories" #添加tags/categories
---
- 打开主题配置文件 themes/next/_config.yml
menu:
home: /
categories: /categories/ #确认不是注释状态
about: /about/
archives: /archives/
tags: /tags/ #确认不是注释状态
#sitemap: /sitemap.xml
#commonweal: /404/
添加「关于about」页面
hexo new page about
- 打开source/about/index.md
---
title: about
date: 2017-08-22 22:23:44
type: "about"
---
我是谁,来自哪儿,到哪里去
- menu元素下
about: /about/
侧边栏社交链接
开启social
元素,social_icons
保持默认。
# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
微博: http://weibo.com/your-user-name
豆瓣: http://douban.com/people/your-user-name
知乎: http://www.zhihu.com/people/your-user-name
# 等等
打赏功能
开启reward_comment
元素,图片放在themes\next\source\images下
reward_comment: 赏
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
订阅微信公众号
- 把二维码存放于博客source/uploads/目录下(没有手动建立目录)
- 开启
wechat_subscriber
元素
# Wechat Subscriber
wechat_subscriber:
enabled: true
qcode: /uploads/wechat-qcode.jpg
description: 欢迎您扫一扫上面的微信公众号,订阅我的博客!
建站时间,开启since: 2015
元素
第三方服务
评论系统
America:Disqus、Facebook Comments、HyperComments、GitHub Issues
Korea: livere来必力
China: 畅言、友言
优缺点:在天朝国外即使没有被墙,访问也相对较慢,网络不稳定;国内随着多说和网易云跟帖相继关闭停止服务,个人隐性感觉企业生存率低,国内服务不稳定,随时可能倒闭。
以国外著名评论系统Disqus为例。开启disqus
元素。
disqus:
enable: false
shortname: your-disqus-username
count: true
如果你的文章没访问到Disqus,你应该是创建账号后还没有建立站点,选择Create a new site,填写站点Profile。
数据统计
不蒜子统计。统计并在页面显示站点UV(Unique Visitor,独立访客数)、站点和文章的PV(Page View,网站浏览量)。启用busuanzi_count
元素
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
# custom pv span for the whole site
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次
# custom pv span for one page only
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次
PS: 此特性在版本 5.0.1 中引入,要使用此功能请确保所使用的 NexT 版本在此之后(在主题配置文件最下面查找version元素可查看当前NexT版本)
LeanCloud。用于在站点首页显示每篇文章的阅读次数PV。
不蒜子也可以统计单篇博文的阅读量,但是有两个缺点:
- 在首页不能查看博文的阅读量。
- 不能管理相关博文的阅读量。
- 创建新应用。进入应用-存储-数据,创建Class,名称必须为Counter。
- 进入应用-设置-应用Key,开启主题配置文件的leancloud_visitors元素,复制 App ID和App Key。
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: #your App ID
app_key: #your App Key
- Web安全。因为AppID以及AppKey是暴露在外的,因此如果一些别用用心之人知道了之后用于其它目的是得不偿失的,为了确保只用于我们自己的博客,建议开启Web安全选项,这样就只能通过我们自己的域名才有权访问后台的数据了,可以进一步提升安全性。
进入应用-设置-安全中心,在Web安全域名中填入我们自己的博客域名,来确保数据调用的安全。
请求域名不在填写的安全域名内,LC服务器会拒绝数据交互的请求,博客文章访问量就会显示不正常。
内容分享
-
JiaThis。开启jiathis元素,设置为true。
jiathis: true
-
百度分享。
baidushare: true
-
AddThis。注册,获得 AddThis id:
More.. --> General --> ID
,在主题配置中设置add_this_id: put_your_add_this_id_here
站内搜索
- Swiftype。很遗憾现在已经不支持注册个人账户,不再免费了。
- Local Search。
- 安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:
$ npm install hexo-generator-searchdb --save
- 编辑 站点配置文件,新增以下内容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
- 编辑 主题配置文件,启用本地搜索功能:
# Local search
local_search:
enable: true
- Algolia。参考NexT主题文档。
个性化配置
- 设置「阅读全文]
在文章中使用<
!-- more -->手动进行截断,除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。 - 设置Favicon
将你的 favicon 放置到 站点 的 source 目录下,与站点的配置文件同级。 若你发现设置的 Favicon 并未生效,请先清除浏览器的缓存后直接访问 Favicon 的地址,这个地址通常是http://your-domain.com/favicon.ico
。
如果你的站点是放在子目录下,请设置为:favicon: favicon.ico
- 设置「动画效果」
NexT 默认开启动画效果,编辑 主题配置文件,搜索 use_motion,根据您的需求设置值为 true 或者 false 即可:use_motion: true
。
然后设置「背景动画」,NexT 自带五种背景动画效果,只能同时开启一种背景动画效果。
# Canvas-nest
canvas_nest: true
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false
我的网站示例www.guodongdong.com.cn和GitHub博客代码gordon0518.github.io