目录

  1. 添加主题Tranquilpeak
    1. 主题添加说明
    2. 主题添加方法
  2. 定制主题
    1. 主题定制流程
    2. 主题定制内容
  3. 解决主题报错
    1. 修复TypeError: Cannot read property ‘compile’ of undefined
    2. 解决 ENOSPC Error

添加主题Tranquilpeak

主题添加说明

  • 本次迁移到Hexo博客，采用的主题是LouisBarranqueiro的Tranquilpeak，同时参考了Themia主题 的多处调整，进行了一系列修改，并发布在Github上：https://github.com/quericy/tranquilpeak 。

  • 本文叙述的Hexo主题安装和调整的方法均基于Tranquilpeak主题的，其他主题若有不同之处，请自行甄别与修改。

  • 本文具有时效性，编写时使用的hexo版本为3.2.0，Tranquilpeak主题版本为1.7.1，以后的版本可能会与本文描述的内容有所出入。

主题添加方法

  • 在Hexo项目的themes主题文件夹下clone项目：

    1
    git clone https://github.com/quericy/tranquilpeak.git

  • 修改Hexo项目根目录的_config.yml文件的theme部分，将主题名称修改为tranquilpeak；

  • 将themes/tranquilpeak/_config.yml.bak重名为themes/tranquilpeak/_config.yml（如果主题和博客分开版本控制，为了安全考虑，也可以将themes/tranquilpeak/_config.yml排除出公开仓库，并做软链接映射到目录内）；

  • 参考配置文件中的说明，修改主题配置文件themes/tranquilpeak/_config.yml。注意：配置文件中的归档、分类、Tags、搜索、关于等页面，是需要自行创建Hexo page的，否则渲染生成静态文件的时候也会有相应的报错提示。例如，需要添加展示所有tag的一个tags页面，则需要以下步骤（其他以此类推）：

    • 使用命令创建一个hexo page:

      1
      hexo new page "tags" #创建名为tags的页面

    • 此时会在hexo项目的source文件夹中创建tags文件夹。在source/tags/中创建index.md文件,并编写Front-matter区域：

      1
      2
      3
      title: tags
      layout: "all-tags"
      ---

    • 上一步的layout的值需要对应主题的某一个布局,如layout: "all-tags"对应themes/tranquilpeak/layout/all-tags.ejs 的文件名。

    • 修改themes/tranquilpeak/_config.yml中侧边栏的tags一节,url对应为新建的hexo page名称：

      1
      2
      3
      4
      tags:
          title: global.tags
          url: /tags/
          icon: tags

  • 重新渲染Hexo生成静态文件，即可看到效果了:

    1
    hexo g -d

定制主题

主题定制流程

定制主题修改.ejs布局文件后只需要执行hexo g -d即可重新生成文件，但是如果要修改样式,则需要按照以下流程：

  • 进入主题文件夹内：

    1
    cd themes/tranquilpeak/

  • 安装npm依赖（需要root权限）,如hexo在特定用户组运行，执行完成后还需再用chown修改回所属用户组：

    1
    sudo npm install

  • 安装bower依赖：

    1
    bower install

  • 每次修改js和css和资源文件以后，均需要在themes/tranquilpeak/目录下使用以下指令重新编译主题，该指令会生成编译且压缩过的文件并输出到themes/tranquilpeak/source/assets/目录中，以供Hexo生成静态文件时使用：

    1
    grunt buildProd

  • 重新生成静态文件：

    1
    hexo g -d

主题定制内容

本主题Fork自Tranquilpeak的1.7.1版本，定制调整的内容如下：

  • 修改首页截断(自动截断,原作者的每篇文章打标记实在不适合我)

  • 重命名layout解决TypeError错误

  • 文章最大宽度从 750px 调整为 80%(更适合国内主流分辨率)

  • 侧边栏添加rel nofollow配置(需要依赖hexo-autonofollow扩展),可通过配置文件中添加rel: external nofollow设置不输出权重给sidebar的链接

  • 修改文章列表页面的布局,包括无图片时以及MarkDown文件Front-matter区域未指定布局时使用的默认布局和配图位置

  • 每篇文章内容的末尾加上著作说明提示

  • 修改代码高亮区域的最大宽度在小屏幕上的体验效果

  • 自制多说js文件并使用cdn加速(如需使用请修改cdn链接)

  • 修改鼠标悬停链接样式,去除下划线

  • 关于页面头像和姓名可点击跳转到主页

  • 修改文章title的标题和关键字分隔符，利于SEO

  • 添加背景半透明

  • 文章Meta信息中添加最后更新时间

  • 多说评论逻辑优化。注意:为了方便迁移时划分多说评论到每篇需要评论的文章,需要在Front-matter区域指定id:duoshuo thread-key ,如多说文章的thread key为699时,需要指定id: 699 ，字符串也可以。不带id的文章将不开启多说评论，不使用多说评论则无影响。

  • 抛弃Swiftype搜索(这货收费实在是太贵了)，添加自定义的站内搜索(需要依赖hexo-generator-search扩展)，效果其实还不错。

详情可见 https://github.com/quericy/tranquilpeak/，修改更新记录可见Github提交记录。

解决主题报错

修复TypeError: Cannot read property ‘compile’ of undefined

这是tranquilpeak 1.7.1的一个bug，编译时会提示类似如下错误信息：

1
2
3
4
5
6
7
8
9
10
ERROR Process failed: source/_css/layout/_about.scss
ERROR Process failed: source/_css/layout/_blog.scss
ERROR Process failed: source/_css/layout/_bottom-bar.scss
ERROR Process failed: source/_css/layout/_cover.scss
ERROR Process failed: source/_css/layout/_footer.scss
ERROR Process failed: source/_css/layout/_header.scss
ERROR Process failed: source/_css/layout/_main.scss
ERROR Process failed: source/_css/layout/_sidebar.scss
TypeError: Cannot read property 'compile' of undefined
...

~修复方法如下~（tranquilpeak的后续版本和我的定制版本已经修复此问题）：

  • 将 source/_css/layout 目录重命名为 source/_css/layouts

  • 修改source/_css/tranquilpeak.scss文件中的以下部分：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @import
    'layouts/about',
    'layouts/blog',
    'layouts/bottom-bar',
    'layouts/cover',
    'layouts/footer',
    'layouts/header',
    'layouts/main',
    'layouts/sidebar';

解决 ENOSPC Error

在npm install后运行hexo server报错ENOSPC Error，在Hexo官方文档中找到了答案，以作备忘：

  • 尝试使用npm dedupe修复(未成功)；

  • 执行以下语句(成功)：

    1
    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p