H2O theme for Jekyll
正如我在微博上所说的,使用Jekyll半年以来一直没有令我满意的主题模板,所以开始计划自己写一套好看又好用的主题模板。设计之初就明确了极简主义,风格采用扁平化了,通过卡片式设计来进行区块分明的布局,参考了Medium的ui样式和知乎专栏的视觉风格。
H2O
新主题名叫”H2O”,基于Jekyll 3.0.x(使用gem update jekyll
升级Jekyll),Markdown的代码高亮不再支持pygments转而使用rouge,咱已经默认配置了 highlighter: rouge
。用到的技术栈也很简单:引入jQuery类库,使用Sass编写样式,使用Gulp来编译Sass、合并压缩css、js,开源在Github上,稍作配置即可用于你的Jekyll博客上。
使用Sketch完成H2O主题的原型设计
比之前漂亮不少吧,下面聊聊H2O的新特性。
新特性
主题配色
支持两种主题配色——蓝色和粉色。
侧边栏
相比自己上一个版本的博客主题,首页增加了侧边栏,方便展示博主的个人信息和文章标签。
社交图标
使用阿里的图标管理平台Iconfont整理了一套墙内外常用的社交图标,包括微博、知乎、掘金、简书、Github等十多个网站,鼠标悬停会显示该站的主题色。
前后文导航
自定义文章封面
在Markdown的文章头信息里添加cover参数来配置文章的封面图片,如果没有配置封面,则默认【主题色+底纹】的组合作为文章封面。值得一提的是,H2O有两种(粉、蓝)主题色和六种底纹(电路板、食物、云海、钻石等等)供你选择。
头图个性化底纹
在没有图片的情况下单纯显示颜色会不会太无趣了点?于是想到了加入 大专栏 H2O theme for Jekyll底纹元素,底纹素材是SVG格式的(保存在css样式里),加载比图片快很多。
代码高亮
模板引入了Prism.js,一款轻量、可扩展的代码语法高亮库。
很多知名网站如MDN、css-tricks也在用它,JavaScript 之父 Brendan Eich 也在个人博客上使用。
遵循 HTML5 标准,Prism 使用语义化的 <pre>
元素和 <code>
元素来标记代码区块:
<pre><code class="language-css">p { color: red }</code></pre>
在Markdown中你可以这样写:
```css
p { color: red }
```
支持语言:
- HTML
- CSS
- Sass
- JavaScript
- CoffeeScript
- Java
- C-like
- Swift
- PHP
- Go
- Python
第三方评论
由于多说关闭,又对国内其他第三方评论插件无感,所以将Disqus列为首选(目前模板也只提供了这个),请自备梯子。
移动端优化
响应式设计,对手机和平板等移动设备做了优化。
关于阅读体验
我认为在内容质量相同的情况下,出色的沉浸式阅读体验是博客的核心。
H2O在这方面还有很多需要完善的地方,比如:代码高亮、夜间模式、查看大图…
其他特性:
- 网页标题SEO优化
- 标签索引,点击标签跳转到标签目录,即可查看对应的全部文章
- 漂亮
- 好看
- 美
最后
本想趁这次机会将整站https化的,但折腾了半天发现弹性web托管并不支持,所以暂时搁置https的想法。另外,博客统计工具一直使用的是百度统计,这次新增了Google Analytics。
这次从0到1,独自设计、开发再到发布大约用了一周时间,也算完成一个小小的开源项目了,后续也将持续完善和更新,欢迎Star。
最新文章
- Azure SQL Database (21) 将整张表都迁移到Azure Stretch Database里
- VR的国内研究现状及发展趋势
- jQuery中animate的height的自适应
- echo &#39;.SUFFIXES: .cpp&#39; >;>; ${OUTPUT_FILE}
- 【iCore2双核心板视频教程】 AD模块(iM_AD_GP和iM_AD_SYNC)介绍及数据采集实验三
- 字符串和数字的全排列问题、前i位被i整除问题
- 八、Join 连接查询
- Java注解Retention、Documented、Target的含义
- 一张图让你懂Python安装第三方库
- form组件
- 222. Getter与Setter
- how to tell gcc with c99 enable
- Source Insight 查找的选择项
- Oracle存储过程基础
- svn搭建相关
- git连接通过ssh连接github
- Codeforces Round #416 (Div. 2)A B C 水 暴力 dp
- Tensorflow模型变量保存
- iOS开发时间控件怎么强制24小时制(小技巧)
- 何为 “元组”(Tuple)?
热门文章
- CodeForces 993B Open Communication(STL 模拟)
- 3.windows-oracle实战第三课 -表的管理
- reactor-core
- ubuntu19.10——snap错误has install-snap change in progress
- MFC修改系统托盘的图标
- 我的 xelatex 模板
- iMX6Q/PLUS开发板烧写设备树内核的Ubuntu系统
- 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
- 有几张高度不一样的小图片,如何用html+css实现在同一行垂直居中对齐?
- Python的lambda学习