Fork me on GitHub

畅玩Hexo(2):NexT主题

前言

   本篇主要讲解关于Hexo著名的主题NexT的配置,教你个性化自己的博客网站。

NexT是什么?

  上一篇我们介绍了如何从零开始搭建一个Hexo个人博客,这一篇我们的目的很简单,就是教大家怎么让你的网站更装B!装是第一生产力!!!

  Hexo支持自定义网站布局,由此衍生了各种各样的主题,默认的主题就是你在themes里看到的landscape主题,它好不好看不重要,重要的是它是拿来干嘛的?默认的主题当然是拿来换其他主题的啊!这需要解释吗?需要吗?而替换它的就是我们今天的主角——NexT

  NexT主题是Hexo上最受欢迎的主题,它功能强大毋庸置疑,集成大量的第三方服务,然而最终选择他的原因和选择Hexo一样——文档是第一生产力!!!

  NexT的文档虽然很清晰,但是也有一些问题没有讲,你可以再去NexT的github的wiki页面查找。

切换到NexT

  切换主题在Hexo中非常简单,NexT文档说的也很详细。我简单说一下:

  首先你需要下载NexT,找到它的github页面(NexT),复制repo的clone 地址,然后到你的Blog文件夹下打开git bash:

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

  这样NexT就静静地躺在你的themes/next文件夹下了。这样以后更新只需要git pull即可,不过记得把改过的配置文件排除在外啊。

  切换到NexT只需要更改你的网站配置文件即可:

1
theme: next  (名称与文件夹名一致)

使用NexT

  你进去该文件夹里看一看,就可以知道他的大概结构,其中需要你关注的只有_config配置文件。没错,这个配置文件与网站配置文件是同名的,我们把它叫主题配置文件,不要把二者搞混了。另外,还有一个language文件夹偶尔需要更改,主要是一些语言翻译可以自定义一下。

选择主题布局

  NexT提供了四种可选择的主题布局,NexT称之为Scheme,他们之间可以相互兼容,无需任何其他更改。在主题配置文件里搜索scheme既可以找到,上面的注释很清楚,如果不明白看NexT文档。建议打开Hexo本地服务器测试效果,hexo服务器无需重启即可相应这些更改,刷新一下就出来了。

设置语言

  看过上一篇文章的应该知道,语言在网站配置文件里有选项,这里更改语言同样是在网站配置文件里,别搞混了。实际上,对于网站配置文件里语言选项的值,Hexo是到主题文件夹的languages文件夹下寻找的,我们之前配置的zh-CN实际对应themes/landscape/languages/zh-CN.yml。在NexT里,简体中文不叫zh-CN而叫zh-Hans,你去看看就知道了。

  如果你想在语言上更风骚一点,你可以自行更改zh-Hans.yml,里面有网站页面的所有翻译,你甚至可以自创一个语言yml文件。

设置菜单

  菜单就是你在网站看到的首页、归档那些菜单项,在主题配置文件里搜索menu即可找到:

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
commonweal: /404.html || heartbeat

# Enable/Disable menu icons.
menu_icons:
enable: true

  格式为名称: 链接 || Font Awesome图标名,我打开了上面几项,因为暂时还没有建立页面,所以现在还只有主页和归档有用,后面会教大家把每个页面建立起来。注意:名称不是显示的名称,显示的名称是拿这里的名称去语言配置文件里寻找到的翻译。

设置头像

  文档也说得很清楚,唯一要说的就是别把头像文件放错位置了,是主题文件夹的source里面,支持gif动图哦。

  既然说到这了,就顺便提一下,你注意看source/images文件夹,里面放的文件都可以自定义一番。svg是矢量图的格式,你不懂就别动它。favicon是网页缩略图标,用于浏览器收藏栏和浏览器标题栏,placeholder是占位符图标。相应的设置当然也得改,在主题配置文件里搜索一下就OK了,不想改配置文件就直接替换,文件名称相同就行。

添加其他页面

  之前我们打开了菜单项里的分类、标签、关于、公益404等选项,但是还没有页面,现在我们给他们几个加上页面,这就需要用到我在上一篇说的scaffolds/page.md

  page的使用同样是在git bash里:以标签页面为例

1
$ hexo new page "tags"

  这样hexo会在source文件夹里生成tags文件夹,打开后发现里面有index.md。之前讲得hexo生成html的过程我们知道,hexo会把tags文件夹解析到public文件夹里,名称不变还是tags文件夹,这个public里面的tags文件夹就可以对应我们标签页面的链接。于是,在主题配置文件里这样写:

1
2
3
4
5
6
7
8
9
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
commonweal: /404.html || heartbeat

  注意:链接后面的/不能掉,至于为什么我在上一篇关于文章永久链接的配置时已经解释过了。

  分类和about页面同样的操作,这样建立的是一个空页面,你在index.md里写上相应的内容即可。这样做适用于about页面,但是我们知道分类和标签页面不是你在index.md里写几个字能搞定的。实际上hexo有办法对分类和标签页面进行处理,hexo会把标签页面设置成标签云,分类页面设置为目录结构,要实现这样的效果,只需要你在index.md的Front-matter里加上:

1
2
type: "tags"  //或者categories
comments: false //分类和标签页面也可以评论

  效果我就不展示了,截图挺麻烦的,自己去看吧。

腾讯公益404

  NexT官网上的关于404公益的说明已经过时了,文档的写法依旧能用,但是由于里面有个js会请求http资源,你知道Github Pages是使用https的,这样做会直接被浏览器封杀,结果是404页面的样式是乱的。这里给我坑了半天才明白怎么回事,我找到了最新的腾讯公益404官网,上面的说明已经更新,使用了相对协议,http与https皆可访问。404.html如下:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到博客主页"></script>
</body>
</html>

其他操作

  文档和NexT的github wiki上面还有许多操作,都比较简单,我在赘述毫无意义,这里我就整理一些值得做的,仅供参考。

  • 订阅微信公众号

  • 设置背景动画效果(炫酷得很哦)

  • 设置友情链接

  • 设置侧边栏社交链接

  • 开启打赏(万一有人施舍呢)

  • 文章截断(阅读全文)功能

没有最骚,只有更骚

  hexo可以个性化的地方很多,我还有一些NexT文档上的没有操作拿出来给大家分享。

Github绸带

  Github Ribbons是一个在左右上角给别人展示自己github页面的绸带型按钮,我们已经在友情链接中添加了github,但是友情链接不够骚啊,现在我们整个显眼的。

  在项目主页上挑一个自己喜欢的样式,复制代码,然后粘贴刚才复制的代码到主题文件夹的layout/_layout.swig文件中,放在<div class="headband"></div>下面(注意是下面不是里面),并把href改为你的github地址 。

  效果展示:

修改文章内链接样式

  说实话,NexT默认的文章内链接样式一点都不显眼,读者都不知道这里是个链接。改,必须改!

  修改主题文件夹 \source\css\_custom\custom.styl,添加如下css样式:

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

  我想你应该注意到了,这个custom.styl里面刚开始是空的,注释写的是Custom styles,意思是定制样式,也就是说这个文件本来就是给你用来定制自己的网站样式的,以后可以在这里面尽情驰骋咯,前提是你得懂html与css(我也不怎么懂啊,哭晕)。

修改文章底部的带#号的标签

  就是这个:

  你是不是也觉得丑,改改改。

  修改/layout/_macro/post.swig,搜索 rel="tag">#,将 #换成<i class="fa fa-tag"></i>

  最后变成了:

修改代码块样式

  NexT的代码块样式太浅了,一点都不明显,接着改。

  打开\source\css\_custom\custom.styl,向里面加入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
color: #404040;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

  效果:

主页文章添加阴影效果

  又要吐槽一下NexT了,主页的每篇文章一点阴影都没有,根本不好区分两边文章,再改。

  打开source\css\_custom\custom.styl,向里面加入:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(100, 100, 100, 1);
-moz-box-shadow: 0 0 5px rgba(100, 100, 100, 1);
}

  效果:

字数统计

  干这个不为别的,就为了骚,当然要是没点分量就变成了”献丑“(我已哭晕在厕所)。

  这里需要一个hexo插件,切换到git bash下:

1
$ npm install hexo-wordcount --save

  然后在网站配置文件里搜索wordcount:

1
2
3
4
5
6
post_wordcount:
item_text: true //底部是否显示“总字数”字样
wordcount: true //文章字数统计
min2read: true //文章预计阅读时长(分钟)
totalcount: true //网站总字数,位于底部
separated_meta: false //是否将文章的统计信息换行显示

  这些文章统计信息是显示在文章标题栏下面的副栏中的,想要更加灵活使用的,具体查看hexo-wordcount的github。不同的html模板引擎对应不同的html代码,NexT使用的是Swig。

添加README.md

  这个主要是因为博客是部署在github上的,github上的repo添加README.md是个良好的习惯。

  将README.md放在网站的source下,我们知道Hexo会解析md为html,所以需要配置README.md跳过解析。在网站配置文件中:

1
skip_render: README.md

关闭打赏字体的抖动

  不知道你们注意了没,默认的打赏方式下面的字体在鼠标移上后疯狂抖动,你们觉得怎么样,我个人认为:“什么乱七八糟的,关掉不解释”。

  修改文件/source/css/_common/components/post/post-reward.styl,然后注释其中的函数wechat:hoveralipay:hover,如下:

1
2
3
4
5
6
7
8
9
10
11
12
/* 注释文字闪动函数
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/

文章加密访问

  博客难道不应该秉承分享精神吗?为什么要加密?这可不好说,万一你想在里面“开车”呢,手动滑稽。

  打开\layout\_partials\head\custom-head.swig文件,在其中插入这样一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
{% if page.password %}
<script>
(function(){
if('{{ page.password }}'){
if (prompt('上车请刷卡') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>
{% endif %}

  要加密的话,在文章的Front-matter中加入password选项即可。

  我想你应该也明白了,这个文件也是定制文件,其作用是定制生成html的head部分。NexT里面还有一些定制文件,有兴趣自己探索一番。

  更新:

  上面的加密手法太拙劣,没用到任何加密算法,就是一个弹窗验证,忽悠一些小白还行,我们换点真功夫的。本人大学密码学学的一般,好没那本事自己编算法,直接拿别人造好的轮子——hexo-blog-encrypt插件。安装我就不讲了,能看到了这里小白也应该会安装了,文档也很详细而且有中文,文档你也看了这么多了,我复制粘贴没意义。

  需要注意的是:

  • 文章Front_matter中的abstract不需要加</br> ,但是网站配置文件的default_abstract需要在最后加</br>
  • 加密文章后hexo g 是不会马上生效的,需要重启本地服务器,实际上加密工作由本地服务器完成,你可以在git bash中看到加密的输出。
  • 加密的文章会使得hexo无法自动生成它的目录,文章目录栏会消失,解密后并不会再次生成,如果你顾忌这个可以使用文章toc(hexo-toc)。
  • 文档中隐藏toc的代码是基于默认主题的,而且是ejs的渲染引擎,注意哦。

给网站加一个背景图

  NexT默认没有背景图啊,这样不够骚,自己整一个。

  同样是source\css\_custom\custom.styl

1
2
3
4
5
6
7
//背景图
body {
background-image:url(/images/background.jpg); //路径
background-repeat: no-repeat; //背景平铺模式
background-attachment:fixed; //背景如何固定
background-position:50% 50%; //背景如何定位
}

  这样添加背景后,会导致一系列的不美观问题,使用不同的Scheme问题也不一样,这里我只对我使用的Mist Scheme矫正一下,其他的大家去研究一下html与css。

  主要问题其实都差不多,就是背景覆盖的地方太多导致很多东西看着不方便:

1
2
3
4
5
6
7
8
9
10
11
12
//添加白底避免被背景图遮挡
.content-wrap {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
background:rgba(255,255,255,0.7);
}

//分类页面的计数颜色太浅,改深
.category-all-page .category-list-count {
color: #000000;
}

  还有就是标签页面的标签连接看的太不清楚了,修改layout/page.swig中的开始和结束颜色:

1
2
3
<div class="tag-cloud-tags">
{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#606060', end_color: '#000000'}) }}
</div>

尾言

  Hexo有很多好看的主题,NexT只是其中之一,更何况NexT还有好多好多你可以挖掘的定制内容。同时Hexo的插件也提供了许许多多的你想不到的功能,这些都有待你去探索。有兴趣可以学习一下前端三剑客——html、css、javascript,然后就可以去啃一下Hexo的主题以及插件编写(这又是一个大坑)。

  下一篇我们来整更高大上的内容——集成第三方服务。最后放一张成果图。

本文出处: https://www.zypnet.cn/7d6b/ ,欢迎转载!!!

土豪请随意
0%