what

Omega 是 hexo 框架下的一个博客主题。

theme-preview

特点

  • 轻量
  • 便于阅读
  • 配置定制化
  • 多语言支持

why

使用过各种各样的工具、框架搭建博客,在去年最终选择使用 hexo 来搭建,主要是不用维护服务器,简单方便,然而始终没有找到称心如意的主题。所以决定动手自己做一个。

正如其名,我希望有一个纯粹的、便于阅读、容易定制化的博客主题。现在有很多 hexo 的主题框架,但是都不如我意,这也就是我为什么要做这个主题的初衷。主题参考了 Hux 的博客整体布局,我也比较喜欢这种布局。

纯粹

主题是基于 hexo 框架的,首先我希望博客不需要太多复杂、混乱、无用的功能。我理想的博客就是一个记录生活、提供与志同道合的网友的交流平台。

便于阅读

博客最主要的功能就是提供阅读了,所以一个良好的阅读体验是最重要的。

容易定制化

如果博客和别人的完全一致,那也不好,不够独特,容易审美疲劳。所以主题具有定制化的功能是必须的。

但是定制化如果过于复杂,又会增加时间成本,就变得如同开发一个主题了,所以简化定制化成本也是必须的。

how

替换主题

将主题文件放置在 themes 目录,修改根目录下的配置文件 _config.yml 的 theme 为 omega

安装依赖

主题有以下依赖,尽量保持一致,否则可能会出现未知问题。

"dependencies": {
    "cheerio": "^1.0.0-rc.6",
    "hexo": "^4.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^2.2.0",
    "hexo-generator-index-pin-top": "^0.2.2",
    "hexo-generator-searchdb": "^1.3.3",
    "hexo-generator-seo-friendly-sitemap": "0.0.25",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-less": "^2.0.2",
    "hexo-renderer-markdown-it": "^3.4.1",
    "hexo-server": "^1.0.0",
    "hexo-tag-cloud": "^2.1.2",
    "hexo-translate-title": "^1.0.11",
    "hexo-wordcount": "^6.0.1"
  }

修改配置

根目录下的 _config.yml 配置可参考我的博客,主题下的配置变量主要有以下内容:

# omega setting start

# ----------------------------------------------------------
# Site settings
beian: 赣ICP备17009879号
SEOTitle: kavience | Blog

# ----------------------------------------------------------
# Banner settings
banner: true # close all header banner if false
header_img: /img/header_img/home.jpg
article_img: /img/header_img/article-bg.jpg
archives_img: /img/header_img/archive.jpg
archive_tag_img: /img/header_img/archive-tag.jpg
archive_category_img: /img/header_img/archive-category.jpg
404_img: /img/header_img/404.jpg

# ----------------------------------------------------------
# Contact settings
email: kavience@gmail.com
zhihu_username: kavience-xiaofan
github_username: kavience
twitter_username: Mr_Kavience
# weibo_username: xxx
# facebook_username:  xxx
# linkedin_username:  xxx
sitemapIcon: true
RSS: true

# ----------------------------------------------------------
# Comment settings
comment_method: gitalk # gitalk or disqus
## Method 1: gitalk https://github.com/gitalk/gitalk
gitalk:
  clientID: 'd25cda615a572205be1e'
  clientSecret: 'faa4cf10f1daea3d4701f8be90d80feb88c818ac'
  repo: 'blog'
  owner: 'kavience'
  admin: ['kavience']
  distractionFreeMode: false
## Method 2: disqus
# disqus_username: kavience

# ----------------------------------------------------------
# Analytics settings
## Baidu Analytics
# ba_track_id: xxx
## Google Analytics
ga_track_id: "UA-171834825-2"
ga_domain: www.kavience.com

# ----------------------------------------------------------
# Reward settings
reward: true
reward_comment: 赞赏一下
wechatpay: /img/reward/wechat.png
alipay: /img/reward/alipay.png

# ----------------------------------------------------------
# Sidebar settings
sidebar_about_description: "种一棵树最好的时间是十年前,其次是现在。"
sidebar_avatar: /img/avatar/my-avatar.jpg
widgets:
  - short-about
  - recent-posts
  - category
  - archive
  - featured-tags
  - copyright

# ----------------------------------------------------------
# less vars
less:
  options:
    globalVars:
      bg-color: '#f1e5c9'
      main-bg-color: '#f6f8fa'
      text-main-color: '#404046'
      text-secondary-color: '#a3a3a3'
      text-threed-color: '#808080'
      hover-color: '#0085a1'
      border-color: gray
      ## highlight vars
      # highlight-background: "#f6f8fa"
      # highlight-current-line: "#efefef"
      # highlight-selection: "#d6d6d6"
      # highlight-foreground: "#24292e"
      # highlight-comment: "#8e908c"
      # highlight-red: "#c82829"
      # highlight-orange: "#f5871f"
      # highlight-yellow: "#eab700"
      # highlight-green: "#718c00"
      # highlight-aqua: "#3e999f"
      # highlight-blue: "#4271ae"
      # highlight-purple: "#8959a8"

      highlight-background: "#002451"
      highlight-current-line: "#00346e"
      highlight-selection: "#003f8e"
      highlight-foreground: "#ffffff"
      highlight-comment: "#7285b7"
      highlight-red: "#ff9da4"
      highlight-orange: "#ffc58f"
      highlight-yellow: "#ffeead"
      highlight-green: "#d1f1a9"
      highlight-aqua: "#99ffff"
      highlight-blue: "#bbdaff"
      highlight-purple: "#ebbbff"

总结

在主题开发的过程中,踩了很多坑,一方面是因为 hexo 官方的文档实在是太简陋了,感觉很多重要的信息都是一笔带过,反复看了几遍。这里把几个重要的知识点记录一下。

css 预处理器

hexo 支持多种 css 预处理器,例如 sass、less、stylus 等,需要安装对应的渲染插件,例如 hexo-renderer-less 、hexo-renderer-stylus 。

在引入的过程,使用 css 辅助函数像这样引入就可以了。

<%- css('css/omega')%>

会自动引入主题下的 source 下的 css 目录下的 omega.css 文件,hexo-renderer-less 在打包的时候,会自动编译 omega.less 成 omega.css。
这里还有个坑,在 stylus 中可以使用 hexo-config 辅助函数获取 hexo 的配置变量,在 less 中,hexo-config 辅助函数是不存在的,只能把变量定义在 less 下面的配置,例如这样:

less:
  options:
    globalVars:
      bg-color: '#f1e5c9'

归档

在开发归档的页面过程中,发现生成的 tag、category 都归属于 archive ,也就是说例如你想访问一个分类下的所有文章,像这样 https://www.kavience.com/categories/front-end/, 最终生成的这个页面采用的是 archive 模板。官网文档是这样描述的:

模板决定了网站内容的呈现方式,每个主题至少都应包含一个 index 模板,以下是各页面相对应的模板名称:

模板 用途 回退
index 首页
post 文章 index
page 分页 index
archive 归档 index
category 分类归档 archive
tag 标签归档 archive

所以必须在 archive 模板中处理这三个页面渲染的方式,可以通过 page 变量下的 category 、tag 来判断到底是属于何种归档。

注意

博客采用的一些插件可能会导致一些奇奇怪怪的问题出现,所以请仔细看下面的说明。

  • 文章名字不能带 + 号等特殊文字,否则可能造成翻译无法通过
  • 文章名字不能带 ‘,’ 且不能超过 50 个字符,因为 GitHub 标签不允许,否则无法生成评论 issue
  • 文章名字不能与文章内各级标题同名,否则无法生成评论 issue
  • 文章不能无标题,否则生成 searchdb 有问题

(完)


作者: Kavience 本文链接: http://www.kavience.com/tools/hexo-theme-omega-development-history.html 转载请注明:《Hexo主题omega开发历程》转自 http://www.kavience.com/tools/hexo-theme-omega-development-history.html,原作者:Kavience 版权声明: 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)