自定义 Hexo 博客

换到了新的工具 Hexo 怎么能不折腾一下呢。

最主要的当然是十几天的时间自己写了一个主题。作为前端新手半抄半查的拼出来了至少能看的页面,好多 CSS 感觉蛮混乱的。不过用自己的主题有一点好的就是哪里出 bug 了看的不顺眼了很方便就知道是哪里的问题,可以随手改。

当然为了让博客符合自己的习惯,还是做了不少的自定义。

hexo-theme-hai

名字可以算是乱起的啦 =_=

还没完工,比如评论以及顶上的导航栏点进去的页面可以算是都还没弄。只是开学了想扔一段时间再说。。

更换渲染引擎

因为要写 Latex 数学公式所以用了 Mathjax 渲染,但是默认的 markdown 渲染引擎会与数学公式所用到的下划线星号等有冲突,所以我是选择了 markdown 的扩展语法 Pandoc 进行渲染。首先要在自己的系统上 安装 Pandoc,然后是更换 hexo 的渲染引擎。

brew install pandoc
npm install hexo-renderer-pandoc --save

SEO 优化

分别是生成 sitemap、RSS、给外站链接添加 nofollow 属性。

npm install hexo-generator-sitemap --save
npm install hexo-generator-feed --save
npm install hexo-autonofollow --save

开启日归档

因为主题用到了日历 widget 所以开启了日归档,修改 node_modules/hexo-generator-archive/index.js 中的 daily 参数。

hexo.config.archive_generator = assign({
  per_page: per_page,
  yearly: true,
  monthly: true,
  daily: true
}, hexo.config.archive_generator);

添加置顶功能

修改原生的首页生成方法 node_modules/hexo-generator-index/lib/generator.jsreturn pagination 前添加

    posts.data = posts.data.sort(function (a, b) {
        if (a.top && b.top) {
            if (a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if (a.top && !b.top) {
            return -1;
        }
        else if (!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date;
    });

中英文间添加空格

官方的插件许久不更新了,反正都是调用的 pang.js,于是干脆自己写了个调用的最新版的 hexo-pangu-spacing,虽然好像时而会有莫名其妙的 bug 出现 1。。。

npm install hexo-pangu-spacing --save

使用 Prettify 高亮代码

查了下这算是目前见到的唯一一款支持代码因网页宽度自适应换行后还能正确显示行号的 代码高亮插件,所以用到了自己的主题里,然后在配置文件_config.yml` 中关闭自带的代码高亮。

highlight:
  enable: false

修改永久链接格式

不是很喜欢链接中加日期以及希望能自己选择 url,所以配置文件 _config.yml 中修改了文章链接的格式。

permalink: post/:url/

修改默认 Front-matter

修改生成文章的模板 scaffolds/post.md,在 Front-matter 部分添加

tags:
  - null
categories:
  - uncategorized
mathjax: false
top: 0
url: 

使用 rsync 同步

因为不知道什么的缘故我的 VPS 生成不了网页总是会在 hexo g 的时候卡住 2,所以只能选择在本地生成好后复制到服务器上。

npm install hexo-deployer-rsync --save

配置文件 _config.yml 中修改为

deploy:
  type: rsync
  host: #服务器地址
  user: root
  port: 22
  root: #服务器上的目录

  1. 有的时候英文链接和中文之间不会加空格。。

  2. 大概是阿里云的 CPU 太差了?