1.我所知的首个具有「夜晚模式」的HEXO主题
- 对IE浏览器的检测和警告
- 不支持多说评论系统(废话,它都已经关张了),支持disqus评论系统
- 以相对时间显示文章的发布时间
- 文章页的阅读时间统计
- 版权信息的可配置
- 分享功能支持微信、微博、推特,在文章左侧
- 文章的打赏功能(目前支持支付宝)
- 针对文章较多,标签较多的情况,只显示前十个标签展示
- 可配置的谷歌分析,用于分析网站数据
- 夜晚模式
- 移动端的简洁设计
- 博客首页文章中图片缩略图展示
- 用户离开本博客页面后的标题彩蛋
- 安卓Chrome 系浏览器的状态栏主题颜色设置
- Add to home screen 添加网站到桌面
直接访问我的个人博客去看喽: http://hktkdy.com
移动端可复制网站或扫描下方二维码
需要注意的是:由于博客搭建在Github Pages上面,如果您的访问速度不理想,可能并非是博客主题系统本身的问题,而是服务器的问题。
好了,前面简单罗列了这个主题的特色和功能点。现在问题来了,如果你正在使用hexo博客系统书写博客,可能正在用一个其他的主题,那么凭什么要花时间,换一个其他的的主题呢?
我认为除了以上的特色和功能点之外,还是看个人的喜好和风格。
对我来讲,我个人是喜好偏向知乎专栏风格的文章页面的,我认为这样的设计让我更专注于阅读,然而其他的主题,很少有在这一点上有令我满意的,如果你喜欢这样的风格,或许你会喜欢这个主题。
对我来讲,有点朋友圈的文章的味道。甭管你喜不喜欢朋友圈里那些被转发的10万+,你都应该对朋友圈很是熟悉。据我了解,这个主题,有那么点味道,当然,并不浓厚。我自己也不会写那种「标题党」的文章。如果你喜欢这样的风格,或许你会喜欢这个主题。
对我来讲,我喜欢淡色系,但是淡色系在夜晚的时候又会很让人头疼。因此,这个主题又加入了「夜晚模式」,据我所知,这也是首个Hexo主题里含有夜晚模式的。如果你认为夜晚模式是必不可少的,或许你会喜欢这个主题。
当然,如果以上所说所有如果都不能成为一个你选择它的理由的话。那么我要说,就因为他够小众,你觉得跟别人撞衫尴尬吗?如果尴尬,跟别人用同一个博客主题为什么就不尴尬呢,选择它,或许会让你撞衫的几率更小。哈哈。
然而,让人不喜欢的理由也很多,这个主题在细节之处的打磨还不够,有些地方还比较粗糙。
$ git clone https://github.com/zhangolve/hexo-theme-olive.git themes/olive 配置
修改hexo根目录下的 _config.yml : theme: yilia
需要注意的是,我自己的运行环境是:
$ hexo version
hexo: 3.1.1
os: Windows_NT 10.0.14393 win32 ia32
http_parser: 2.6.0
node: 5.5.0
v8: 4.6.85.31
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 47
openssl: 1.0.2e
没有对其他运行环境进行测试,如果此主题不能正常使用,请向我反馈,不胜感激。
cd themes/olive
git pull
主题配置文件在主目录下的_config.yml,请根据自己需要修改使用。
请安装好之后,手动打开_config.yml 文件,里面针对每一项配置都有较为详细的说明.
- 掘金 ,本博客首页的最初设计思路很多借(chao)鉴(xi)于此
- medium ,非常好的文章页设计,我最初的很多思路同样借(chao)鉴(xi)于此
- HEXO.IO ,Hexo 官方文档,给我提供了很多参考
- 写一个自己的Hexo主题 ,这篇16年7月份的文章,对我最初写这个主题很有参考价值
- hexo-theme-landscape ,hexo的官方主题,虽然本身很丑,但是代码逻辑很清晰,给了我很大的参考
- hexo-theme-next wiki ,我在编写本主题代码的时候,并没有参考这个主题,但是当我想要写一下本主题的配置的时候,发现这个主题的wiki已经说得很详细了。表示感谢。
这几年玩hexo博客系统,也写了很多相关的文章,从写过的这些文字也能够看出来个人的进步。 如果你第一次使用hexo搭建博客,无论是技术人,还是文艺青年,可以参考阅读下面的文章
- 用github结合hexo建立个人博客的几点注意及参考资料
- 在hexo博客中添加其他项目主页
- 【hexo】博文引用块(blockquote)改进 ,这篇是当年没有系统学习前端之前写的了,如今看来,雕虫小技,小菜一碟了。
- hexo博客主题更换为kael
- 【Hexo】文章末尾添加微信公众号二维码
当然,前面是我个人的总结,我认为值得推荐的教程:
│ LICENSE
│ readme.md
│ _config.yml
│
├─languages
│ default.yml
│ fr.yml
│ nl.yml
│ no.yml
│ ru.yml
│ zh-CN.yml
│ zh-TW.yml
│
layout
│ archive.ejs
│ category.ejs
│ index.ejs 首页
│ layout.ejs
│ page.ejs
│ post.ejs
│ tag.ejs
│
├─_partial
│ │ after-footer.ejs
│ │ archive-post.ejs
│ │ archive.ejs
│ │ article.ejs
│ │ footer.ejs footer模板
│ │ friends.ejs 右侧友情链接模板
│ │ google-analytics.ejs 谷歌分析模板
│ │ head.ejs 网站头部引用模板
│ │ header.ejs 网站头部导航栏模板
│ │ iewarn.esj 低版本ie浏览器警告信息模板
│ │ share.ejs 文章分享模板
│ │ social.ejs 右侧社交网路信息模板
│ │
│ └─post
│ --- category.ejs 分类
│ --- copyright.ejs 文章版权声明
│ --- date.ejs 日期
│ --- disqus.ejs 第三方评论disqus
│ --- money.ejs 打赏
│ --- nav.ejs 导航
│ --- tags.ejs 标签
│ --- title.ejs 文章题目
│
└─_widget
--- archive.ejs
--- category.ejs
--- recent_posts.ejs
source 资源文件夹
│ favicon.png 网站标题栏上的图标
│
├─css
│ │ night.styl 夜晚模式样式
│ │ style.styl 主样式
│ │ _variables.styl styl变量
│ │
│ ├─fonts 本地字体文件夹
│ │ fontawesome-webfont.
│ │ fontawesome-webfont.
│ │ fontawesome-webfont.
│ │ fontawesome-webfont.
│ │ FontAwesome.otf
│ │
│ └─_partial
│ archive.styl 首页样式
│ article.styl 文章页面样式
│ copyright.styl 版权说明样式
│ footer.styl 底部footer样式
│ header.styl 头部导航样式
│ highlight.styl 代码高亮样式
│ iewarn.styl 低版本ie浏览器警告样式
│ money.styl 打赏功能样式
│ share.styl 分享功能样式
│
├─img
│ --- bottom.png 文章页面分割线图片
│ --- logo.jpg 网站logo图片
│
└─js
--- iewarn.js 低版本ie浏览器检测脚本
--- lightmode.js 灯光模式切换脚本
--- qrcode.js 网站链接二维码生成脚本
--- script.js 网站主js脚本