使用 Jekyll 半年来一直没找到一个令我满意的主题模板,所以自己用 Sketch 设计了一套
设计之初就明确了极简主义,通过卡片式设计来进行区块分明的布局,参考了 Medium 的 ui 样式和知乎专栏的视觉风格,至少是我认为目前最漂亮的 Jekyll 模板了。
模板主题名叫“ H2O ”,基于 Jekyll 3.0.x,用到的技术栈也很简单:引入 jQuery 类库,使用 Sass 编写样式,使用 Gulp 来编译 Sass、合并压缩 css、js,开源在 Github 上,稍作配置即可用于你的 Jekyll 博客上。
在没有图片的情况下单纯显示颜色会不会太无趣了点?于是想到了加入底纹元素,底纹素材是 SVG 格式的(保存在 css 样式里),加载比图片快很多。H2O 有两种(粉、蓝)主题色和六种底纹(电路板、食物、云海、钻石等等)供你选择。
TAGS 页面归档了全站标签相关的文章,点击标签即可跳到对应的文章列表。
使用阿里的图标管理平台 Iconfont 整理了一套墙内外常用的社交图标,包括微博、知乎、掘金、简书、Github 等十二个网站,稍做配置便能展示在博客的个人简介部分。
采用响应式布局,对手机和平板等移动设备做了很多优化:响应式汉堡菜单,文章页面根据设备分辨率对字体大小、间距和行高做了相应调整等。
例如文章页面的标题是“ Hello Jekyll ”,优化后“ Hello Jekyll - 廖柯宇的博客”,提升搜索结果的展示体验。
从 0 到 1,设计、开发再到发布大约用了一周时间,也算完成一个小小的开源项目了。
如果你对此主题模板感兴趣并喜欢折腾,欢迎 Star or Fork~
Github:jekyll-theme-H2O
Blog: liaokeyu.com
1
designer 2017-05-09 23:38:27 +08:00 1
这个挺棒的。支持一下。
可以的话加个友链哦。 |
2
seewhy 2017-05-09 23:42:20 +08:00
挺好看的
|
3
xiubin 2017-05-09 23:52:33 +08:00
确实挺不错,希望能完善更多功能~
|
4
neoz 2017-05-09 23:54:21 +08:00 via iPhone
很赞!
|
5
oh 2017-05-10 00:08:51 +08:00 1
然而博客最主要的不是壳,而是内容,以 http://liaokeyu.com/%E6%8A%80%E6%9C%AF/2017/03/20/Gulp%E5%92%8CWebpack%E6%98%AF%E4%B8%80%E5%9B%9E%E4%BA%8B%E5%90%97.html 这篇文章为例,内容的排版,尤其是段落距离 / 行距 / 标题行间距 这些之间的比例关系,简直糟糕……
|
6
lengjingxu 2017-05-10 00:18:19 +08:00 via Android 1
没有楼上说的那么糟糕啦。 中文的排版样式可以加上一个针对中文的排版 CSS 库优化一下。
|
7
Steveliao OP @oh 感谢吐槽!关于阅读体验,我认为在内容质量相同的情况下,出色的沉浸式阅读体验是博客的核心。在这方面确实还有很多需要完善的地方,但我不认为 H2O 的排版是糟糕的,目前文章样式使用的是 github-markdown.css, 针对你说的问题我会继续完善和优化的。
|
8
x86 2017-05-10 00:36:23 +08:00
右栏个人信息去掉,直接改成 960px 的单栏更好看
|
9
Benisme 2017-05-10 00:57:35 +08:00
ie10 用户表示首页的 footer 跑到了上面去。
|
10
morethansean 2017-05-10 01:01:43 +08:00 via Android
你这实际效果跟设计稿不太一样啊...博客链接点进去英文字体就让我觉得很奇怪...设计稿里也不是这样的英文字体啊...
|
12
Steveliao OP @morethansean 模板样式和设计稿几乎一致,我博客是在模板的基础上改了一部分:首页大标题的字体、背景图片都提供了配置选项的,同时还支持蓝色或粉色两种主题色。
|
13
sunjourney 2017-05-10 03:01:21 +08:00 via iPhone
如果能分享 sketch 的资源就棒了
|
14
panda1001 2017-05-10 06:21:22 +08:00 via Android
不错
|
15
justicelove 2017-05-10 09:22:59 +08:00
主题很不错
|
16
buckyRRRR 2017-05-10 09:29:23 +08:00
很烦这种喜欢配无关图片的
|
17
zwpaper 2017-05-10 09:59:50 +08:00 via iPhone
在手机上看了一下,感觉挺不错的,不知道有没有计划移植一个 hexo 版😄
|
18
yhxx 2017-05-10 10:01:32 +08:00
字体不太喜欢
|
19
licht114 2017-05-10 10:06:07 +08:00
感觉还不错,看着挺舒服
|
20
BearD01001 2017-05-10 10:13:41 +08:00
偷图底纹这个 idea 很不错,赞~
|
21
poorbug 2017-05-10 10:20:51 +08:00
或许这个词毕竟被别人玩到恶心了,千万别用了
|
22
ccming 2017-05-10 11:57:42 +08:00 via iPhone
你的博客不能留言
|
23
mritd 2017-05-10 12:47:26 +08:00
差两个重要的,一个是评论,一个是 搜索(简单地 js 数据搜索).....我一直不愿意换其他主题就是这个原因
|
24
chuanqirenwu 2017-05-10 15:09:53 +08:00
没有评论哦
|
25
cai314494687 2017-05-10 16:50:17 +08:00
支持 Octopress 吗?
|
26
twm 2017-05-10 16:58:19 +08:00
👍
|
27
fsengine 2017-05-10 18:00:58 +08:00
支持。已经做得很好了,比我以前找的 Jekyll 主题漂亮多了。
|
28
fsengine 2017-05-10 18:01:27 +08:00
这个主体能商用不?
|
29
kruler 2017-05-10 18:07:58 +08:00 via iPhone
能到 WordPress 就好了~
|
30
Steveliao OP |
31
Steveliao OP |
33
evlos 2017-05-10 20:34:28 +08:00
现在好像都流行这种大头图的设计,很多主题总让我感觉头重脚轻,对比那些主题,你文章页的设计不错,底下两个大块看着挺平衡的,赞!
|
34
avrillavigne 2017-05-10 20:45:09 +08:00
刷新两下,顶部的头图会跳?
chrome 48.0.2564.116 m |
35
avrillavigne 2017-05-10 20:46:24 +08:00
|
36
avrillavigne 2017-05-10 20:48:07 +08:00
想偷去其他博客 |
37
freestyle 2017-05-10 21:00:20 +08:00
漂亮 可以弄个 hexo 同款的吗
|
38
Marfal 2017-05-10 21:34:28 +08:00
Boom
|
39
virusdefender 2017-05-10 22:24:28 +08:00
现在好像 demo 挂了?
|
40
codehz 2017-05-10 22:28:04 +08:00
|
41
Heinz 2017-05-10 22:37:03 +08:00
demo 挂掉了...
|
42
celerysoft 2017-05-11 00:38:07 +08:00 1
不管怎么说,先支持了,加油
|
43
sherblue 2017-05-11 09:18:21 +08:00
不错,尝试一下先。
|
44
aikaaa 2017-05-11 10:08:33 +08:00
挺赞的~支持~
|
45
530615846 2017-05-28 21:56:38 +08:00
好漂亮,老哥能否加入一个搜索文章的功能?
|
46
Steveliao OP @530615846 后期会扩展搜索功能的,最近在弄夜间模式和文章打赏,欢迎来 GitHub 关注一波啦~
|
47
kehr 2017-06-08 18:50:07 +08:00
很不错的设计,拿来用了。感谢开源!
|
48
limers 2017-07-01 22:18:08 +08:00
看起来不错
|
49
jicki 2018-10-24 09:42:30 +08:00
很不错呀~~ 文章里面~~如果有~导航到 # ## ### 标题就完美了~~
|