Hello, Hexo world!

程序设计

个人博客这个东西，真的很需要打理。这年头信息量太大，事情太多，让人很难静下心来好好地写些什么。偶然打开博客，发现界面太丑了，而我用的 Gitblog 也很久没更新了（官网都没了）。于是认真地考虑了一下要不要做博客迁移。

之前用过 WordPress 和 Typecho，后来觉得太臃肿，而且依赖性高，都弃用了。之后用上了 Gitblog，于是再也不想用需要数据库或不支持 Markdown 的博客了。这次找了很久，各种比较，最后在 Gasby 和 Hexo 里选用了后者。

这篇文章，就是记录我博客迁移的路程……

安装 Hexo

首先要配置好 Node.js 环境和 git，然后安装 Hexo。

1
2
3
4
$ npm install -g hexo-cli
$ hexo init gltjk-blog
$ cd gltjk-blog
$ npm install

安装主题

在 Hexo 官方的主题页面物色了许久，最后相中了 Material X 这个主题。安装起来也是很简单的：

1
2
$ git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x
$ npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts

然后把 themes/material-x/_config.yml 里的内容附加到 _config.yml 末尾。

基本设置

基本设置全部在 _config.yml 这个文件里完成：

  1. 修改站点信息。
  2. 修改永久链接格式。
  3. 配置分类的中英文映射。
  4. 修改主题名称。
  5. 配置主题的导航栏、小插件、社交信息。
  6. 配置主题使用的评论模块 Valine。

设置的时候，顺便物色了以下几个插件：

调整样式

装好主题以后，就要个性化了。我先把主题颜色由浅红色调成了浅绿色，具体方法为：把 themes/material-x/source/less/_defines.less 里的 @theme_base_tint: @color_ax_light_red; 改成了 @theme_base_tint: @color_light_green。

其次，当然是增加我专属的红磷分割线，编辑 themes/material-x/source/less/_article.less 文件，在其中的 .article 里最前面加入以下代码：

1
2
3
4
5
6
7
phr::before {
    content: "-<|>-<|>-<|>-<|>-<|>-<|>-<|>-<|>-<|>-";
    color: red;
}
phr + p {
    margin-top: 1.5em;
}

之所以要放在最前面，是因为如果放在最后的话，优先级会低于原有的 p {margin-top: .5em;} 这条样式。

博文迁移

由于 Hexo 与 Gitblog 都使用 Markdown + YAML，二者间的迁移几乎无缝。最主要需要改动的，就是每个 md 文件的页头部分（front-matter）了，比如二者的 tags 格式就不同。

此外，还有一些细节要改动。「关于」页面里的引用，我替换成了标签插件，主要是因为标签插件表示的图片支持相对路径，而标签插件的引用对作者和出处的显示效果比较好。

最后，我在大部分博文的适当位置加入了 <!--more--> 标签。

在迁移的过程中，遇到了一些小小问题，自力更生解决掉了，具体方法我记录在附录里了。未来遇到 Hexo 方面的小问题，我也会更新在里面。

线上部署

博文在本地预览没有问题后，就要考虑线上部署了。因为 Hexo 是静态页面，所以基本上任何空间都能满足。

我一如既往地选择了 CODING，支持 git，速度快。（不过貌似最近被腾讯云收了？不知道之后会怎么发展）

Github 也不是没考虑过，只不过……似乎在国内访问起来速度不佳？

以上，就是我折腾 Hexo 的过程。

（完）

附录：问题解决

主界面里图片过宽

问题：在主界面里，博文中的小图片会被拉伸至宽度占满整个博文预览目录。

定位： themes/material-x/source/less/_main.less

1
2
3
4
5
6
7
8
9
10
11
img,
.highlight {
    width:~"calc(100% + 2 * @{gap})";
    // margin-left: -@gap;
    // margin-right: -@gap;
    // max-width: none;
    // @media(max-width:@on_phone) {
    //   padding-left:  @gap;
    //   padding-right: @gap;
    // }
}

解决方案：删掉这一段代码。

斜体样式出错

问题：文章中用 Markdown 的 *XXX* 添加的斜体样式，显示出错，下面增加了着重号。

定位： themes/material-x/source/less/_article.less

1
2
3
4
5
6
7
8
9
10
11
12
em {
    position: relative;
    &:before {
        position: absolute;
        top: 0.65em;
        left: 0;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
    }
}

解决方案：删掉这一段代码。

 上一篇