前些天把博客从WordPress改为了Hexo, 本来用了开源社区上发布的一款Light主题 Apollo , 初衷是简单在其基础上做些改动。但大家都知道的事实是,程序员往往喜欢把事情弄复杂。于是变成了在其基础上开发出了一款新的主题。

这款主题取名 Prontera(普隆德拉) ,纪念我曾经热爱的一个游戏。之前没有Hexo主题的开发经验,几乎是赶鸭子上架,不过目前的完成度也算满意。模板使用Jade开发(我只学习了10分钟),于是就直接操刀改起了代码,过程还挺顺利的。至于这个样式,是之前跟小伙伴开了一个叫做FOG的开源项目,我在Sketch设计的。不过碎碎之前曾经实现了导航,所以我也很无耻地把他的CSS直接拷贝过来。

Github:https://github.com/AngryPowman/hexo-theme-prontera

插件依赖

  • hexo-generator-archive

安装步骤

从Github把代码clone到Hexo博客的主题目录中:
git clone https://github.com/AngryPowman/hexo-theme-prontera themes/prontera

修改Hexo根目录的_config.yml中应用的主题为 prontera:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: prontera

增加hexo-generator-archive的配置:

1
2
3
4
5
6
# Show all articles on archive page
archive_generator:
per_page: 0
yearly: false
monthly: true
daily: false

主题特性

  • 自定义导航菜单
  • 自定义快捷图标
  • 首页关于信息
  • 支持多说评论以及disqus
  • 支持Google Analytics以及腾讯统计

主题配置(范例)

themes/prontera/_config.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# Nav Menus
menu:
主页: /
归档: /archives/
关于我: /about.html

# Nav Shortcut Icons
nav_icons:
- ['/images/github.svg', 'https://github.com/AngryPowman']
- ['/images/rss.svg', '/atom.xml']

favicon: /favicon.ico

# About
about_info:
name: "愤怒的泡面"
bio: "十年饮冰·难凉热血"
avatar: "/images/avatar.png"

# Comment
# e.g disqus: seansun
disqus:
duoshuo: angrypowman

# Analytics
# google_analytics: UA-65933410-1
tencent_analytics: 27319631

# Copyright Infomation
startyear: 2017

关于二次开发

如果你希望修改这个主题,可以直接通过修改主题目录下的scss文件进行样式调整。

如果你对配色不满意,可以简单地通过更改主色调。方法如下:
找到 themes/prontera/source/scss/_partial/base.scss ,修改 $MAIN_COLOR 常量即可。

因为使用了sass预处理, 在修改scss文件之后,需要在 themes/prontera 目录下执行 gulp.

后续开发计划

  • 友情链接
  • Tags聚合
  • 留言板
  • 适配移动设备

使用过程中有问题可以在这里留言,也可以到Github给我提ISSUE或PR.