仿Trapecho制作的Hexo主题HexOne

日期: 2017-12-24 分类: geeks

放弃使用Next主题后,一直在尝试自己制作一个主题。尤其是实现项目展示以及心情展示的功能。奋斗了两个月左右,这款主题HexOne终于诞生了!

HexOne

简约的Hexo主题HexOne(仿Trapecho

预览图

安装

依赖

  • css预处理器less
  • rss订阅生成
  • json内容生成
1
2
3
npm install hexo-renderer-less --save
npm install hexo-generator-feed --save
npm install hexo-generator-json-content --save

注意

  • hexo-renderer-less涉及到样式文件的生成,必须安装
  • hexo-generator-feed与rss订阅相关,不安装不能生成atom.xml文件
  • hexo-generator-json-content与文章搜索功能相关,不安装不能搜索文章

文件

复制source/_pages以及source/_data整个目录到文章源码目录source/下(该目录下有_posts),并把_pages改名为pages,否则该目录下的文章将不会被渲染。

注意

  • 如果这几个页面的permalink与已有页面重复,需要修改对应的permalink以及菜单内容
  • 如果不执行该操作,将无法使用项目展示、心情等功能

特色

导航条置顶

滚动页面后导航条置顶

导航条置顶

文章搜索

站内搜索

站内搜索使用了hexo-generator-json-content插件来生成文章内容的json文件。相比于搜索引擎搜索,这个方案能够搜索到站内的所有文章和单页,但是会消耗一定的带宽。生成文章时,该插件会一定程度上增加处理的时间,目前看来影响并不大。

站内搜索

开源项目展示

只支持码云开源项目的展示。如果要支持Github等,可修改source/js/main.js文件中的相关代码。

开源项目展示

心情

有时候只是想三言两语说说自己的心情,不想每次都创建一篇文章,但是又想有个好的展示效果。于是便有了这个功能——心情,类似于说说/微博的功能。修改对应的数据(source/_data/moods.yml),按照yaml格式添加即可。

心情

备注

该主题仅仅是为了满足我自己的需求,会及时修复漏洞、进行优化,但是不会做更多功能的开发。