据说 NexT 是使用最多的Hexo主题,原因当然是比较漂亮啦!这个项目托管于github上,你可以fork一下,贡献代码。NexT官网上面给出了详细的主题配置过程,这里只是我的博客使用的一些配置以及NexT网站上配置中需要补充的部分。如果你是从头开始配置,请参考NexT官网。这篇文章介绍NexT主题的主题配置、第三方服务、内建标签、个性化设置等,通过这篇文章你就可以让你的博客个性十足奥!
- 站点配置文件:
.config.yml
位置:站点根目录下(主要用于Hexo相关 配置的选项) - 主题配置文件:
.config.yml
位置:主题目录下 (主要用于配置主题相关的选项)
主题配置
显示RSS
NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改主题配置文件,设定 rss
字段的值:
false
:禁用 RSS,不在页面上显示RSS连接。- 留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装
hexo-generator-feed
插件。 - 具体的链接地址:适用于已经烧制过 Feed 的情形。
我们这里选择使用 Hexo 生成的 Feed 链接,进入博客所在文件夹,执行以下命令安装该插件:
npm install hexo-generator-feed --save
可能别的博客与我写的不一样,需要配置一些文件。但是我做过实验,只要安装好该插件,重新生成和部署,就可以显示RSS。
侧边栏社交图标设置
NexT网站已经告诉我们如何为博客添加社交链接并设定链接图标,但是我们国内一些常用的社交网站如知乎、豆瓣等在 Font Awesome 图标库中没有对应的图标,结果就是我们添加的这些社交链接图标都是默认的。在主题配置文件中,设定链接图标对应的字段是 social_icons
, 其键值格式是 匹配键名: 图标名称
, 图标名称
就是对应的 Font Awesome 图标的名字(不必带 fa-
前缀)。实现方法:到 Font Awesome 图标库中找寻找喜爱的图标,复制图标的名字替换下面代码箭头处的默认图标名字即可。如下所示:
social:
GitHub: https://github.com/username
知乎: https://www.zhihu.com/people/feng-di-54-18/activities
social_icons:
enable: true
icons_only: false
transition: false
# Icon Mappings.
# KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
GitHub: github <---
知乎: heart-o <---
更改内容区域宽度
浏览文章时发现页面两侧的空白太多,导致文章的宽度比较窄,一行代码如果显示不完整的话,就需要左右拖动才能查看整行代码,对于代码比较多的文章看起来就会比较累。因此可以改变内容区域的宽度,NexT 对于内容的宽度的设定如下:
- 700px,当屏幕宽度 < 1600px
- 900px,当屏幕宽度 >= 1600px
- 移动设备下,宽度自适应
如果你需要修改内容的宽度,需要编辑样式文件。 编辑主题的 source/css/_variables/custom.styl
文件,新增变量:
// 修改成你期望的宽度
$content-desktop = 700px // 我的为800px,自己调整测试即可
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px
注意:此方法不适用于 Pisces Scheme,关于如何修改 Pisces Scheme 的宽度请参看 Issue。
第三方服务
评论系统
NexT支持多款评论系统,其网站给了五个评论系统,除此之外还支持多说、畅言等评论系统。就网站给出的五个评论系统来说,推荐使用DISQUS或者来必力,设置都比较简单。网易云跟帖相当好用,而且在国内,加载速度较快,但是八月一日被官方关闭。
DISQUS
支持DISQUS
、Google
、twitter
、Facebook
等账户登录评论,也可设置匿名评论,只需要输入名字和邮箱即可。
-
登录 DISQUS ,网站会引导你添加一个站点进行配置,在其
Settings
中的General
选项中,找到shortname
。 -
编辑主题配置文件, 将
disqus
下的enable
设定为true
,同时提供您的shortname
。count
用于指定是否显示评论数量。disqus: enable: false shortname: count: true
来比力
韩国产品,支持QQ、微信、百度、微博、Github、Google、Facebook、twitter等多个国内外账户登录,无导入评论功能。
-
登陆 来比力 ,选择安装 LiveRe City 版,添加站点,在其
管理页面
的代码管理
中获取你的 LiveRe UID 。 -
编辑主题配置文件, 编辑
livere_uid
字段,设置如下:livere_uid: #your livere_uid
数据统计分析
NexT提供多种数据统计与分析系统,可以实现对网站的访客、流量、文章评论数及浏览量进行统计,推荐使用百度统计与LeanCloud。
百度统计
百度统计是百度推出的一款免费的专业网站流量分析工具,可以帮助用户改善访客在用户的网站上的使用体验,不断提升网站的投资回报率。目前百度统计提供的功能包括:趋势分析、来源分析、页面分析、访客分析、定制分析等多种统计分析服务。实现方法:
- 登录 百度统计,定位到站点的代码获取页面
- 复制
hm.js?
后面那串统计脚本 id - 编辑主题配置文件,修改字段
baidu_analytics
,值设置成百度统计脚本 id
LeanCloud
通过 LeanCloud提供的JavaScript SDK 功能实现文章阅读量统计。
实现方法:请查看 为NexT主题添加文章阅读量统计功能
内容分享服务
推荐JiaThis,可以将文章分享到很多平台。
JiaThis
编辑主题配置文件,添加/修改字段 jiathis
,值为 true
。
# JiaThis 分享服务
jiathis: true
搜索服务
Local Search
添加百度/谷歌/本地 自定义站点内容搜索,PC段表现正常,在手机端搜索框显示正常,点击无反应。
-
安装
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
内建标签
文本居中的引用
此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。
使用方式:
- HTML方式:使用这种方式时,给
img
添加属性class="blockquote-center"
即可。 - 标签方式:使用
centerquote
或者 简写cq
。
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah