或许是最漂亮的 Jekyll 博客主题: H2O

2017-05-09 23:34:13 +08:00
 Steveliao

View Live Demo →

Github →

使用 Jekyll 半年来一直没找到一个令我满意的主题模板,所以自己用 Sketch 设计了一套

设计之初就明确了极简主义,通过卡片式设计来进行区块分明的布局,参考了 Medium 的 ui 样式和知乎专栏的视觉风格,至少是我认为目前最漂亮的 Jekyll 模板了。

模板主题名叫“ H2O ”,基于 Jekyll 3.0.x,用到的技术栈也很简单:引入 jQuery 类库,使用 Sass 编写样式,使用 Gulp 来编译 Sass、合并压缩 css、js,开源在 Github 上,稍作配置即可用于你的 Jekyll 博客上。

特性

自定义文章封面

头图个性化底纹

在没有图片的情况下单纯显示颜色会不会太无趣了点?于是想到了加入底纹元素,底纹素材是 SVG 格式的(保存在 css 样式里),加载比图片快很多。H2O 有两种(粉、蓝)主题色和六种底纹(电路板、食物、云海、钻石等等)供你选择。

标签索引

TAGS 页面归档了全站标签相关的文章,点击标签即可跳到对应的文章列表。

社交图标

使用阿里的图标管理平台 Iconfont 整理了一套墙内外常用的社交图标,包括微博、知乎、掘金、简书、Github 等十二个网站,稍做配置便能展示在博客的个人简介部分。

适配移动端

采用响应式布局,对手机和平板等移动设备做了很多优化:响应式汉堡菜单,文章页面根据设备分辨率对字体大小、间距和行高做了相应调整等。

标题 SEO 优化

例如文章页面的标题是“ Hello Jekyll ”,优化后“ Hello Jekyll - 廖柯宇的博客”,提升搜索结果的展示体验。

前后文导航

最后

从 0 到 1,设计、开发再到发布大约用了一周时间,也算完成一个小小的开源项目了。

如果你对此主题模板感兴趣并喜欢折腾,欢迎 Star or Fork~

Github:jekyll-theme-H2O

Blog: liaokeyu.com

18516 次点击
所在节点    分享创造
49 条回复
Heinz
2017-05-10 22:37:03 +08:00
demo 挂掉了...
celerysoft
2017-05-11 00:38:07 +08:00
不管怎么说,先支持了,加油
sherblue
2017-05-11 09:18:21 +08:00
不错,尝试一下先。
aikaaa
2017-05-11 10:08:33 +08:00
挺赞的~支持~
530615846
2017-05-28 21:56:38 +08:00
好漂亮,老哥能否加入一个搜索文章的功能?
Steveliao
2017-05-29 10:56:31 +08:00
@530615846 后期会扩展搜索功能的,最近在弄夜间模式和文章打赏,欢迎来 GitHub 关注一波啦~
kehr
2017-06-08 18:50:07 +08:00
很不错的设计,拿来用了。感谢开源!
limers
2017-07-01 22:18:08 +08:00
看起来不错
jicki
2018-10-24 09:42:30 +08:00
很不错呀~~ 文章里面~~如果有~导航到 # ## ### 标题就完美了~~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/360250

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX