Skip to content →

Hexo博客配置

Published 2016-04-11 by liwz11

上一篇文章学习搭建Hexo博客并将其部署到Github上，本文将按照自己的喜好和习惯来对博客的主题和细节进行配置。为了方便叙述，我们依旧假设Hexo目录为D:\Hexo。

1. 修改主题

生成博客系统时默认的博客主题是landscape，但萝卜青菜各有所爱，每个人都可以定义自己的主题，hexo主题列表的链接为Hexo Themes，如果想预览主题可以到https://hexo.io/themes/。选中自己喜欢的主题，进入其Github下载页面，根据README.md进行下载安装。例如我的主题是cyanstyle，进入其仓库页面https://github.com/wizardforcel/hexo-theme-cyanstyle，根据安装说明，在目录D:\Hexo执行以下命令：

git clone https://github.com/wizardforcel/hexo-theme-cyanstyle.git themes/cyanstyle

并修改D:\Hexo\_config.yml文件中theme的值，即theme: cyanstyle。博客的主题保存在D:\Hexo\themes目录下。

2. 修改背景

一般来说，主题的默认背景格式都不太合我们口味，因此可对找到主题的样式表进行适当调整，例如我的主题样式表是目录D:\Hexo\themes\cyanstyle\source\css中的style.css文件，找到背景设置部分：

/* Backgroud */
#bg {
  background-image: url("images/body.jpg");
  background-color: #F1F1F1;
  ...
}

上面列出了背景图片和背景颜色的样式设置，其中图片所在目录为D:\Hexo\themes\cyanstyle\source\css\images。

3. 返回顶部

如果一篇博文太长，就有必要支持返回顶部的功能，我想到的方法有两种，一种是通过锚点实现，一种是通过javascript实现，前者比较简单。

  • 锚点方法

在主题目录中的模板文件head.ejs或header.ejs中添加如下代码：

<a name="top" id="top">&nbsp;</a>

然后在主题目录中的任何一个全局ejs模本中添加如下代码：

<!--返回顶部开始-->
<div id="full" style="width:0px; height:0px; position:fixed; right:8%; bottom:100px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
  <a href="#top">
    <img src="/css/images/top.png" border=0 alt="返回顶部">
  </a>
</div>
<!--返回顶部结束-->

返回顶部图标top.png可以根据自己的喜好自己去下载一张，并放到相应目录即可。

  • javascript方法

是在主题的javascript目录（或js目录）下添加top.js文件，文件中的代码为：

function goTop(acceleration, time) {
    acceleration = acceleration || 0.1;
    time = time || 16;

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 0;
    var x3 = 0;
    var y3 = 0;

    if(document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }
    var x3 = window.scrollX || 0;
    var y3 = window.scrollY || 0;

    var x = Math.max(x1, Math.max(x2, x3));
    var y = Math.max(y1, Math.max(y2, y3));

    var speed = 1 + acceleration;
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

    if(x > 0 || y > 0) {
        var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
        window.setTimeout(invokeFunction, time);
    }
}

然后在任何一个全局的ejs模本中添加如下代码：

<script src="/js/top.js" type="text/javascript"></script>
<!--返回顶部开始-->
<div id="full" style="width:0px; height:0px; position:fixed; right:8%; bottom:100px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
  <a href="#" onclick="goTop();return false;">
    <img src="/css/images/top.png" border=0 alt="返回顶部">
  </a>
</div>
<!--返回顶部结束-->

我习惯把这种额外添加的全局代码放在footer.ejs文件中，需要注意的是，第1行的js路径要根据实际情况设置正确，然后不要忘了图标top.png。

4. 主页文章数目

设置主页中每个页面要显示的文章数目，这个很简单，修改D:\Hexo\_config.yml文件中的Pagination部分，例如我的配置：

# Pagination
## Set per_page to 0 to disable pagination
per_page: 7
pagination_dir: page

5. 首页文章摘要

每一篇博文（即.md文件）中，在需要显示摘要的地方添加如下代码：

<!--more-->

上述代码之前的内容为文章摘要，会在主页显示，上述代码之后的内容需要点击链接阅读更多才会转到文章页面显示。

6. 永久链接

首先要先介绍一下文章的前置申明，顾名思义，就是写在文章前面的一块内容，为了对文章进行某些设置。它有两种书写方式：

  • YAML方式，以三短线结束
---
title: Hello World
date: 2016/4/10 20:46:25
tags: 教程
id: 1001
---
  • JSON方式，以三分号结束
;;;
"title": "Hello World",
"date": "2016/4/10 20:46:25"
;;;

其中title、date、tags、categories等都是默认支持的变量，id是我自己添加的。

我们可以通过D:\Hexo\_config.yml文件或者文章的前置申明来设置文章的永久链接，这里只介绍第一种方法。在D:\Hexo\_config.yml文件中找到URL部分如下：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/
root: /
permalink: :year/:id-:month:day/
permalink_defaults:

这里permalink的值就是文章永久链接的全局格式，默认一般都是:year/:month/:day/title/，也就是说用日期变量和标题变量来定义，由于文章标题可能是中文，所以我增加了一个id变量并用其定义永久链接，当然实际的链接需要加上博客域名作为前缀，例如http://liwz11.github.io/2016/1002-0411。

7. 评论功能

假设你注册多说后在基本设置里获得的多说二级域名为test.duoshuo.com，则在文件D:\Hexo\_config.yml或文件D:\Hexo\themes\_config.yml中设置duoshuo_shortname: test，然后在目录D:\Hexo\themes\cyanstyle\layout\_partial下新建模板文件comment.ejs，文件中的代码为：

<% if (!index && post.comments && theme.duoshuo_shortname){ %>
<section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.year %><%= post.id %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
        var duoshuoQuery = {short_name:'<%= theme.duoshuo_shortname %>'};
        (function() {
            var ds = document.createElement('script');
            ds.type = 'text/javascript';ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
         })();
    </script>
    <!-- 多说公共JS代码 end -->
</section>
<% } %>

其中data-thread-key可以根据自己文章的实际情况设置，但是必须能够唯一标识该文章。上述操作完成之后，只需要在模板文件D:\Hexo\themes\cyanstyle\layout\_partial\article.ejs尾部增加以下代码：

<%- partial('comment') %>

重要说明：模板文件comment.ejs中的data-thread-key相当于是识别码，必须能够唯一标识文章，因为每篇文章的评论只能通过data-thread-key识别获取，一旦文章的data-thread-key改变，意味着只要你更新Hexo，文章的评论就全部没有了，切记！。根据我自己的定义，也就是说，每篇文章只要发布并有人评论，其post.year和post.id都不能改变，除非评论不想要了。

根据模板文件comment.ejs中的代码逻辑post.comments && theme.duoshuo_shortname，可知，如果要关闭所有文章的评论，可以在文件D:\Hexo\_config.yml或文件D:\Hexo\themes\_config.yml中设置duoshuo_shortname: false，如果要关闭某篇文章的评论，只需在文章的前置申明中加上变量comments的定义。

据说多说评论会抓取网站的所有文章和用户信息，所以我没有使用评论功能，有时间可以考虑自己搞个原生评论框。

8. 文章照片

例如D:\Hexo\source\_posts目录中的一篇名为1002.md的文章，在该目录下手动创建文件夹1002，将文章中要引用的照片test.png放入该文件夹，此时在D:\Hexo\source\_posts目录下的结构为：

1002.md
1002
└── test.png

若该文章的permalink为2016/1002-0410/，因此使用命令 hexo g 生成网页之后的结构为：

D:\Hexo\public\2016\1002-0410
├── index.html
└── test.png

图床法

在hexo 2.x之前，使用照片的相对路径会出现问题，因为文章里通过MarkDown语法引用照片：

![test](1002/test.png)

而生成index.html时，该代码会变成：

<img src="1002/test.png" alt="test">

似乎一切正常，但是，此时博客系统中test.png的相对路径已经变成了2016/1002-0410/test.png，也就是说网页index.html中的照片路径是错误的。

如果是网络照片，链接部分直接填写照片的http链接，就不会出现这种问题，因此，很多人使用一种叫图床的方法来嵌入照片。大体思路是在主题目录下的js文件夹中创建一个img.js文件，内容为：

hexo.extend.tag.register('images', function(args, content){
    var id = args[0];
    return 'http://xxx.yyyy.com';
});

然后，以后写文章插入图片时不再使用MarkDown的语法，而是使用：

<img src="{% images %}/test.png" alt="">test</img>

生成index.html时，该照片代码会变成：

<img src="http://xxx.yyyy.com/test.png" alt="">test</img>

当然前提是你要把照片test.png上传到网络存储http://xxx.yyyy.com上，虽然麻烦些，倒也不失为一个好方法。不过我没用过，大家可以自己找找有什么比较好用的图床。

插件法

貌似hexo 2.x之后，上述图床的方法就不好用了，新的插件hexo-asset-image很好地解决本地图片的相对路径问题，其安装方法是在安装目录D:\Hexo下执行以下命令：

npm install hexo-asset-image --save

在文件D:\Hexo\_config.yml中，找到Wrting部分，设置post_asset_folder: true，则每次用命令行创建新文章时都会创建同名文件夹。仍以本文为例，文件夹1002是生成文章时自动创建的，我们只需把照片test.png放在该文件夹中，然后正常使用MarkDown语法将照片嵌入文章，则生成index.html时，照片的路径就会是正确的：

<img src="2016/1002-0410/test.png" alt="">test</img>

这种方法很方便，唯一的缺点就是每次更新博客都需要把所有文章的所有照片重新同步到Github。我用的方法比较土，就是在Github上新建一个仓库专门存放图片，需要的时候直接引用图片的网络路径，例如：

结束

暂时就这些东西，已经能够把博客弄得简洁而不至于简陋，最重要的是能够符合我们自己的使用习惯。但是讲真，静态博客还是不太好用啊。

Published in 未分类

Tagged in