V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Steveliao
V2EX  ›  分享创造

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

  •  7
     
  •   Steveliao ·
    kaeyleo · 2017-05-09 23:34:13 +08:00 · 18716 次点击
    这是一个创建于 2739 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    第 1 条附言  ·  2017-05-12 13:50:39 +08:00

    现在已经支持Disqus,并引入了Share.js实现文章分享,新增了Prism来支持代码的语法高亮...

    模板的使用文档也基本完成了,欢迎使用~

    谢谢各位盖楼咯,周末愉快 ;P

    49 条回复    2018-10-24 09:42:30 +08:00
    designer
        1
    designer  
       2017-05-09 23:38:27 +08:00   ❤️ 1
    这个挺棒的。支持一下。
    可以的话加个友链哦。
    seewhy
        2
    seewhy  
       2017-05-09 23:42:20 +08:00
    挺好看的
    xiubin
        3
    xiubin  
       2017-05-09 23:52:33 +08:00
    确实挺不错,希望能完善更多功能~
    neoz
        4
    neoz  
       2017-05-09 23:54:21 +08:00 via iPhone
    很赞!
    oh
        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 这篇文章为例,内容的排版,尤其是段落距离 / 行距 / 标题行间距 这些之间的比例关系,简直糟糕……
    lengjingxu
        6
    lengjingxu  
       2017-05-10 00:18:19 +08:00 via Android   ❤️ 1
    没有楼上说的那么糟糕啦。 中文的排版样式可以加上一个针对中文的排版 CSS 库优化一下。
    Steveliao
        7
    Steveliao  
    OP
       2017-05-10 00:34:23 +08:00
    @oh 感谢吐槽!关于阅读体验,我认为在内容质量相同的情况下,出色的沉浸式阅读体验是博客的核心。在这方面确实还有很多需要完善的地方,但我不认为 H2O 的排版是糟糕的,目前文章样式使用的是 github-markdown.css, 针对你说的问题我会继续完善和优化的。
    x86
        8
    x86  
       2017-05-10 00:36:23 +08:00
    右栏个人信息去掉,直接改成 960px 的单栏更好看
    Benisme
        9
    Benisme  
       2017-05-10 00:57:35 +08:00
    ie10 用户表示首页的 footer 跑到了上面去。
    morethansean
        10
    morethansean  
       2017-05-10 01:01:43 +08:00 via Android
    你这实际效果跟设计稿不太一样啊...博客链接点进去英文字体就让我觉得很奇怪...设计稿里也不是这样的英文字体啊...
    Steveliao
        11
    Steveliao  
    OP
       2017-05-10 01:13:36 +08:00
    @Benisme 放学别走,升级完浏览器再说 :P
    Steveliao
        12
    Steveliao  
    OP
       2017-05-10 01:20:14 +08:00
    @morethansean 模板样式和设计稿几乎一致,我博客是在模板的基础上改了一部分:首页大标题的字体、背景图片都提供了配置选项的,同时还支持蓝色或粉色两种主题色。
    sunjourney
        13
    sunjourney  
       2017-05-10 03:01:21 +08:00 via iPhone
    如果能分享 sketch 的资源就棒了
    panda1001
        14
    panda1001  
       2017-05-10 06:21:22 +08:00 via Android
    不错
    justicelove
        15
    justicelove  
       2017-05-10 09:22:59 +08:00
    主题很不错
    buckyRRRR
        16
    buckyRRRR  
       2017-05-10 09:29:23 +08:00
    很烦这种喜欢配无关图片的
    zwpaper
        17
    zwpaper  
       2017-05-10 09:59:50 +08:00 via iPhone
    在手机上看了一下,感觉挺不错的,不知道有没有计划移植一个 hexo 版😄
    yhxx
        18
    yhxx  
       2017-05-10 10:01:32 +08:00
    字体不太喜欢
    licht114
        19
    licht114  
       2017-05-10 10:06:07 +08:00
    感觉还不错,看着挺舒服
    BearD01001
        20
    BearD01001  
       2017-05-10 10:13:41 +08:00
    偷图底纹这个 idea 很不错,赞~
    poorbug
        21
    poorbug  
       2017-05-10 10:20:51 +08:00
    或许这个词毕竟被别人玩到恶心了,千万别用了
    ccming
        22
    ccming  
       2017-05-10 11:57:42 +08:00 via iPhone
    你的博客不能留言
    mritd
        23
    mritd  
       2017-05-10 12:47:26 +08:00
    差两个重要的,一个是评论,一个是 搜索(简单地 js 数据搜索).....我一直不愿意换其他主题就是这个原因
    chuanqirenwu
        24
    chuanqirenwu  
       2017-05-10 15:09:53 +08:00
    没有评论哦
    cai314494687
        25
    cai314494687  
       2017-05-10 16:50:17 +08:00
    支持 Octopress 吗?
    twm
        26
    twm  
       2017-05-10 16:58:19 +08:00
    👍
    fsengine
        27
    fsengine  
       2017-05-10 18:00:58 +08:00
    支持。已经做得很好了,比我以前找的 Jekyll 主题漂亮多了。
    fsengine
        28
    fsengine  
       2017-05-10 18:01:27 +08:00
    这个主体能商用不?
    kruler
        29
    kruler  
       2017-05-10 18:07:58 +08:00 via iPhone
    能到 WordPress 就好了~
    Steveliao
        30
    Steveliao  
    OP
       2017-05-10 19:42:21 +08:00
    @ccming @chuanqirenwu @mritd 可以配置 Disqus,但我博客不打算开放留言功能哦
    Steveliao
        31
    Steveliao  
    OP
       2017-05-10 19:45:07 +08:00
    mritd
        32
    mritd  
       2017-05-10 20:23:07 +08:00 via iPhone
    @Steveliao 加个本地 js 搜索就完美了
    evlos
        33
    evlos  
       2017-05-10 20:34:28 +08:00
    现在好像都流行这种大头图的设计,很多主题总让我感觉头重脚轻,对比那些主题,你文章页的设计不错,底下两个大块看着挺平衡的,赞!
    avrillavigne
        34
    avrillavigne  
       2017-05-10 20:45:09 +08:00
    刷新两下,顶部的头图会跳?
    chrome 48.0.2564.116 m
    avrillavigne
        35
    avrillavigne  
       2017-05-10 20:46:24 +08:00

    avrillavigne
        36
    avrillavigne  
       2017-05-10 20:48:07 +08:00


    想偷去其他博客
    freestyle
        37
    freestyle  
       2017-05-10 21:00:20 +08:00
    漂亮 可以弄个 hexo 同款的吗
    Marfal
        38
    Marfal  
       2017-05-10 21:34:28 +08:00
    Boom
    virusdefender
        39
    virusdefender  
       2017-05-10 22:24:28 +08:00
    现在好像 demo 挂了?
    codehz
        40
    codehz  
       2017-05-10 22:28:04 +08:00
    23333
    Heinz
        41
    Heinz  
       2017-05-10 22:37:03 +08:00
    demo 挂掉了...
    celerysoft
        42
    celerysoft  
       2017-05-11 00:38:07 +08:00   ❤️ 1
    不管怎么说,先支持了,加油
    sherblue
        43
    sherblue  
       2017-05-11 09:18:21 +08:00
    不错,尝试一下先。
    aikaaa
        44
    aikaaa  
       2017-05-11 10:08:33 +08:00
    挺赞的~支持~
    530615846
        45
    530615846  
       2017-05-28 21:56:38 +08:00
    好漂亮,老哥能否加入一个搜索文章的功能?
    Steveliao
        46
    Steveliao  
    OP
       2017-05-29 10:56:31 +08:00 via iPhone
    @530615846 后期会扩展搜索功能的,最近在弄夜间模式和文章打赏,欢迎来 GitHub 关注一波啦~
    kehr
        47
    kehr  
       2017-06-08 18:50:07 +08:00
    很不错的设计,拿来用了。感谢开源!
    limers
        48
    limers  
       2017-07-01 22:18:08 +08:00
    看起来不错
    jicki
        49
    jicki  
       2018-10-24 09:42:30 +08:00
    很不错呀~~ 文章里面~~如果有~导航到 # ## ### 标题就完美了~~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1476 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:26 · PVG 01:26 · LAX 09:26 · JFK 12:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.