站点配置文件:
.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
。
<blockquote class="blockquote-center">blah blah blah</blockquote>
{% centerquote %}blah blah blah{% endcenterquote %}
{% cq %} blah blah blah {% endcq %}
Bootstrap Callout
这些样式出现在 Bootstrap 的官方文档中,效果很好看。使用方式:
{% note class_name %} Content (md partial supported) {% endnote %}
其中,class_name
可以是以下列表中的一个值:
default
primary
success
info
warning
danger
设置阅读全文
在文章中使用 手动进行截断,实现设置阅读全文功能。还有其他方法可以实现设置阅读全文功能,详情参考 NexT 。
建议使用 这种方式,除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。
个性化设置
上面关于NexT主题有关的配置,都是NexT网站上有的配置,我只是总结了几个常用的而已,下面我们给大家几个NexT网站上没有的个性化配置,而且效果相当好。
添加热度
NexT主题集成leanCloud
,打开/themes/next/layout/_macro/post.swig
, 搜索leancloud-visitors-count
, 添加以下内容:
<span class="leancloud-visitors-count"></span> // 在此处后面添加
<span>℃</span>
打开/themes/next/languages/zh-Hans.yml
, 将visitors
的内容改为热度
即可。
文章加密访问
打开/themes/next/layout/_partials/head.swig
, 在meta标签后面插入这样一段代码:
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>
然后文章中添加:password: 00000
如下图:
如果password
后面为空,则表示不用密码。
添加顶部加载条
打开/themes/next/layout/_partials/head.swig
文件,搜索maximum-scale=1
, 在该行下面添加如下内容:
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
默认的是粉色的,要改变颜色可以接着上面添加如下代码:
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 2px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>
修改文章底部标签图标
NexT主题中所有图标来源于Font Awesome图标,因此和更改侧边栏社交链接图标同样,不再赘述。
修改模板/themes/next/layout/_macro/post.swig
,搜索 rel="tag">#
,将 # 换成<i class="fa fa-tag"></i>
即可。
修改文章内链接样式
将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
打开文件/themes/next/source/css/_custom/custom.styl
,添加如下 css 样式:
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
实现点击出现桃心效果
这个是我最喜欢的功能,不信你配置完成看一下。
打开/themes/next/source/js/src
, 新建love.js
文件,复制此处的代码到love.js
里面。打开/themes/next/layout/_layout.swig
文件, 在head
标签内最后位置添加以下代码:
<script type="text/javascript" src="/js/src/love.js"></script>
文章底部添加版权信息
打开next\layout/_macro/
, 删除post-copyright.swig
,新建my-copyright.swig
:
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 HH:MM:ss") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a></p>
<p><span>版权声明:</span>本博客所有文章除特别声明外,均采用 <i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank" title="Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)"> BY-NC-SA 3.0 许可协议</a>,转载请注明出处!</p>
</div>
{% endif %}
打开/next/source/css/_common/components/post/
, 删除post-copyright.styl
, 添加my-post-copyright.styl
:
.my_post_copyright {
width: 96%;
max-width: 65em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border-left: 3px solid #FF0000;
font-size: 0.85rem;
line-height: 1.6em;
word-break: break-all;
background: rgb(246,246,246);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #000000;
font-weight: normal;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
修改next/layout/_macro/post.swig
,在代码
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
之前添加增加如下代码:
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
修改 next/source/css/_common/components/post/post.styl
文件,在最后一行增加代码:
@import "my-post-copyright"
如果要在该博文下面增加版权信息的显示,需要在文章头部中增加copyright: true
的设置,类似:
---
title:
date:
tags:
categories:
copyright: true
---
如果你感觉每次新建文章都要添加比较麻烦,可以直接更改文章的模板文件,这样新建文章时就会自动添加copyright: true
。 打开根目录/scaffolds/post.md
, 做类似设置:
title: {{ title }}
date: {{ date }}
tags:
categories:
comments:
password:
copyright: true
上面内容对v5.1.1版本NexT主题适用,其他版本未测试过。因为主题版本的原因,参考文章中的部分配置与我的不同,请仔细阅读。
参考文章:
Hexo搭建博客教程
hexo的next主题个性化教程: 打造炫酷网站
注意:所有文章除特别说明外均属原创,转载请注明出处!