0 前言

部署好Hexo后,自然就得想办法把博客变得个性化。虽然这是一件非常繁琐的事情,但是改造完成后看着美美的博客心情不也会舒畅不少吗?可能看着自己辛苦改造好的博客,连博文也愿意多写几篇呢 (并不。在开始之前我先推荐大家阅读这篇博客:打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化(以下简称*超深度优化*),大部分你需要的修改都可以在里面找到。关于NexT主题定制的部分(第四、五部分),请主要参考这篇博客,我仅对其进行一点补充。

1 提示

我们主要需要修改的文件有三个,为了防止混淆我在这里对其进行声明:

名称路径
站点配置文件./_config.yml
主题配置文件./theme/next/_config.yml
自定义样式文件./theme/next/source/css/_custom/custom.styl

2 安装主题

我使用的是广受欢迎的主题NexT,绝大部分信息都可以在其官网GitHub上找到。安装方法很简单,在你本地的博客根目录下打开Git Bash(一般在资源管理里右键就可以看到“Git Bash here”这个选项),然后使用clone即可:

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

clone完成之后在站点配置文件中开启即可:

1
theme: next

3 安装插件

Hexo提供了丰富的插件,所有的插件都可以在这里看到Plugins|Hexo。这里我仅推荐一些我认为有必要使用的插件,点击插件名即可查看它在Github上的README.md,插件的安装及使用方法都可以在上面看到,在此不再赘述。

插件名作用
hexagon管理Hexo的插件、主题等package
hexo-generator-feed提供RSS功能
hexo-generator-searchdb提供本地搜索功能

4 修改站点配置文件

4.1 添加站点信息

站点信息在站点配置文件的前两块,既siteurl部分。

site部分是站点的基本信息,比如站点的标题、副标题、描述、关键字、站点语言和你自己的名字。添加合适的关键字和描述有利于SEO。 {% note info %}关键字可以添加多个,用英文逗号分割。{% endnote %}

{% note warning %}若想把站点设置为简体中文,请将language设置为zh-CN,有些博客中写的zh-Hans可能是以前的写法,亲测无效。{% endnote %}

url部分中,url写你的网站的域名,如果你的网站不在网站根目录,请写上完整的路径,并在root这一条写上你网站所在文件夹的名字(就是url上面那条注释的意思。permalink非常重要,指的是你的网站的博文的网址采取什么样的格式,设置的语法参考这个页面。我建议不要在permalink中包含日期,这不利于SEO;应该在permalink中包含尽量丰富的与文章相关的信息,比如文章的category、tag等。我的permalink是:category/:title.html,仅供参考。

4.2 开启rss与搜索功能

非常简单,在站点配置文件中搜索feed,把feed下的typepath按如下设置:

1
2
type: atom
path: atom.xml

feed下面就是search,修改如下:

1
path: search.xml

这样这两个功能就打开了。

5 修改主题配置文件

5.1 开启tags、categories和about功能

*超深度优化*这部分说的不详细,我做以下补充。

主题配置文件中的menu部分取消tags、categories和about的注释后,需要手动新建三个页面:

1
2
3
hexo new page 'tags'
hexo new page 'categories'
hexo new page 'about'

然后./source/下可以看到三个名字对应的文件夹。对于tags和categories,分别修改对应文件夹下的index.md,在front-matter(就是开头用三条短线上下包围、描述文章信息的部分)添加type属性,并分别写上tags、categories。对于about则不需要添加这一属性,只需要打开index.md写上你想要展示的内容就可以了。

5.2 Google Fonts的问题

这个问题在我用WordPress的时候就给我添过麻烦,现在也是。不过很好解决,在主题配置文件中搜索Font Settings,找到字体设置部分,将host设置为https://fonts.font.im即可(这个网址直接访问是打不开的),发表此文时实测有效。原来的360字体库已经用不了了,中科大的字体库不知道为什么我加载也有问题,换用这个可以解决。

5.3 使用盘古插件

这个插件个人认为很有必要。它是用来干什么的呢?我们可以发现平时阅读的文章中中文和英文之间往往是有个空格的,可以让读者看着更舒服。但是平时我们写文章时如果每次打英文都要至少打两次空格就会觉得很麻烦。不过这个插件解决了这个问题,它可以自动给中英文之间加空格。插件在这里下载:Pangu,照这个页面的指示安装好后,将主题配置文件中的pangu设置为true即可。

5.4 使用valine评论插件

开头说的那个博客用的是Hypercomments,我用的时valine,也很好用,功能简单。设置方法参考这篇CSDN博客:为你的Hexo加上评论系统-Valine

5.5 在文章末尾添加版权声明

主题配置文件中搜索copyright找到如下字段,修改为true即可。

1
2
3
post_copyright:
  enable: true
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

5.6 其他

访问统计我目前还没有开启,经过测试leancloud Visitors效果很差,大概是因为leancloud限制请求数量的缘故,所以不建议使用这个。

SEO部分我有时间另开一篇再说吧,目前我自己也还没有搞定(主要是懒)。

6 修改自定义样式文件

*超深度优化*提供了TA的自定义样式文件,比我的要详细的多(我只设置了我需要的部分),我下面做一点点补充。

6.1 使用自定义特殊字体

不知道你有没有注意我网站标题Vlitter的字体,是不是很好看呀(真不要脸)。我不知道这个字体为什么无法从在线字体库加载,为了能正常显示,着实费了一番功夫。这部分我参考了这篇博文:在网页中插入特殊字体,浅谈@font-face。下面我简述以下我的操作步骤。

首先搜索一个你想要的字体,下载下来,一般可能是ttf文件。然后上传到这里:Create Your own @font-face Kits。选择OPTIMAL,勾选同意Agreementhh后会下载一个压缩包。

下载完成后解压,找到其中的woff文件,和你之前下载的ttf文件一起拷贝到./themes/next/source/fonts/下。

然后需要在自定义样式文件中添加如下字段:

1
2
3
4
@font-face{
    font-family: Ubuntu Light;
    src: url('/fonts/Ubuntu_Light.ttf') format('truetype'), url('/fonts/Ubuntu_Light.woff') format('woff');
}

font-family就是你的字体的名字,src就是刚才那两个文件的路径。ttf和woff主要是为了满足不同设备的显示要求。加入这个以后,你就可以在自定义样式文件中直接使用这个字体了,也就是在其他元素的font-family属性后面写上你的字体的名字。

6.2 终极武器:浏览器开发者模式

毕竟网上的博文不能面面俱到,有些元素样式的修改只能靠自己摸索,而其中的终极武器就是浏览器的开发者模式。打开任意一篇用Hexo写的博文(比如这篇),按F12即可打开调试模式,按下CTRL+SHIFT+C后,鼠标所指的地方就会显示浅蓝色,点击后就可以选中这个元素,在左侧的styles窗口可以看到这个元素的名称、属性等信息。点击这些属性可以修改这些值,修改后的效果会即时显示在浏览器内。修改好后,把这些代码拷入自定义样式文件中即可。修改这些你需要了解css的基础知识,不过比较简单很快就能学会。你可以参考那篇博文提供的TA的自定义样式文件。

此外,调试模式还可以用来看网页加载的时候各元素的加载速度。按F12打开调试模式找到Network标签后刷新网页,就可以看到各元素的加载情况,从而发现是哪些元素拖慢了网页的加载速度。具体用法请另找教程学习,这不是本文的重点故我就不在此赘述了。

7 结语

博客的美化算是完成了。不过好看的界面只是吸引读者的第一步,持续高质量的创作才是维持博客生命力的核心。所以,加油写吧!

更新

我之前叛变到hugo阵营了,哈哈哈。hugo的生成速度比hexo快了不少,但是不得不说NeXT真的是一款非常优秀的主题,我在hugo上还没发现同样功能丰富的主题(也可能是我眼拙,如果你发现了欢迎留言告诉我,非常感谢)。