Hexo的那些小事

发表于 | 分类于

前言

半年前搭建起自己的博客的时候还是一个小萌新，那时候只是单纯的想要有一个自己的博客，对于这个博客的许多细节都没有详细的考虑。这次趁着每年大扫除的时候也把自己的博客整理了一下，希望以后博客可以更整洁，尽管没什么人会看到，也希望有缘能看到我博客的朋友能有个好心情。

博客资源管理

资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。

在使用hexo init blog的时候blog文件夹下有一个source文件夹，source下初始只有一个_post文件夹用以保存用户的文章。对于普通用户来说这应该是最重要的一个文件夹，用户自己的资源都应该存放在该文件夹。

文章资源文件夹

当然对于大部分人来说文章图片资源是主要的资源，Hexo提供了更组织化的方式来帮助用户更有规律地提供图片和更组织化地管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件

当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中后，便可以通过使用下列的标签插件引用图片：

1
{% asset_img example.jpg This is an example image %}

该标签插件的形式如下：

1
{% asset_img slug [title] %}

使用这种方式可以使得文章的资源管理和使用更有组织和方便，但是这些标签插件是 Hexo 提供的，也就意味着离开了 Hexo ，你的文章资源加载将会出现问题。因此 Hexo 标签的使用还是需要自己考虑得失后使用。

NexT主题个性化配置

在博客搭建之初就很喜欢 NexT 这个主题，当时因为使用 NexT 的人很多，大概是年轻人的所谓个性，最后选择了 yilia 。事实证明有时候标新立异并不是好事， Next 因为有着众多的使用者，官方文档相当完善，同时网上的相关文章也很多。这意味着使用中的大部分问题都可以方便的解决。yilia 虽然也是一个不错的主题，但毕竟使用者少，存在着不少小瑕疵，如代码块的显示问题等。这次把主题换到了 Next，选用其中的 Pisces 并做了一些个性化配置。以下是官方文档中没有的一些主要配置。主要参考了文章 https://zhuanlan.zhihu.com/p/30836436

添加背景图

在themes/next/source/css/_custom/custom.styl中添加下面代码：

1
2
3
4
5
6
7
body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

各板块不透明度修改

内容板块

博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .content-wrap 标签下 background: white修改为：

1
background: rgba(255,255,255,0.8); //0.8是不透明度

菜单栏背景

博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .header-inner 标签下 background: white修改为：

1
background: rgba(255,255,255,0.8); //0.8是不透明度

站点概况背景

博客根目录 themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为：

1
background: rgba(255,255,255,0.8); //0.8是不透明度

然后修改博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件 .sidebar 标签下 background: $body-bg-color修改为：

1
background: rgba(255,255,255,0); //0是透明度(即完全透明)

因为站点概况分为sidebar-inner和sidebar两层重叠，sidebar-inner在sidebar上面，所以需要把sidebar的不透明度设为 0 才能看出透明的效果。

但是，我们一般不主张这样修改源码的，在next/source/css/_custom目录下面专门提供了custom.styl供我们自定义样式的，因此也可以在custom.styl里面添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Custom styles.

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

.content-wrap {
  background: rgba(255,255,255,0.8);
}

.header-inner {
  background: rgba(255,255,255,0.8);
}

.sidebar-inner {
  background: rgba(255,255,255,0.8);
}

.sidebar {
  background: rgba(255,255,255,0);
}

修改文章底部的#标签

打开 themes/next/layout/_macro/post.swig 文件,搜索 rel="tag"># ,将 # 换成 <i class="fa fa-tag"></i>。

1
2
3
4
5
<div class="post-tags">
    {% for tag in post.tags %}
       <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
    {% endfor %}
</div>

修改后效果：

小结

博客建立的这半年里也水了有十来篇文章，虽然大多是对一些小问题的记录，希望今后也能继续坚持更新，当然也希望能写出有更高水平的文章。同时这次整理也再次提醒了自己官方文档的重要性，在使用 Hexo 的这半年里其实遇到了不少问题，例如文章资源的管理问题。这些问题只要认真看一下官方文档就能找到很好的解决方法，甚至一开始就不会出现这些问题。说明文档很重要！说明文档很重要！说明文档很重要！重要的事情说三遍。