目录

  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

如未特殊注明,本站文章均为原创

转载请注明:转载自quericy的博客(https://quericy.me)

本文链接地址: WordPress迁移Hexo之主题安装与修改