Fork from kaeyleo/jekyll-theme-H2O主题,参考zhonger/jekyll-theme-H2O-ac主题进行改进。
- archives.html页面
- rss.html页面
- 不蒜子访问量统计
- 百度统计分析
- Markdown代码编辑器支持自定义主题
- Markdown代码编辑器显示行号
- Markdown代码编辑器显示语言
- Markdown代码编辑器复制代码(不添加版权信息)
- 字数统计及阅读时长估算
- 点击放大图片
- 懒加载图片资源
- 升级Ruby,Jekyll,NodeJs,以及Gulp到5.0.0版本
- 添加Toc目录
- 添加回到顶部按钮
Ruby 3.2.5版本,Jekyll 4.3.3版本,NodeJs 20.17.0版本,在命令行输入 jekyll server
开启服务,就能在本地预览主题了。
主题开发使用的技术栈也比较简单:引入jQuery类库、使用Sass代替CSS编写样式,使用Gulp完成Sass的编译、CSS和JavaScript的代码合并压缩等任务。
如果你喜欢折腾,想对模板的代码进行修改,需要使用命令 npm install
安装 package.json
中的依赖,然后 gulp
一下即可开始你的自定义之旅。
在了解H2O主题的目录结构之前,确保你对Jekyll目录结构有所了解。
.
├── _config.yml # 配置文件
├── _includes # 页面组件方便重用
| ├── footer.html # 页脚
| └── head.html # html文档的头部内容
| └── header.html # 顶部菜单栏
| └── pageNav.html # 文章列表分页组件
├── _layouts # 布局模板
| ├── default.html # 默认模板
| └── post.html # 文章页面模板
├── _posts # 这里放文章
| ├── 2017-05-03-elements-of-javascript-style.md # 命名格式:年-月-日-文章标题.md
| └── 2007-02-21-life-on-mars.md
├── _site # Jekyll将源码处理后生成的站点文件,里面的内容可直接发布
├── assets # 存放用于线上环境的静态资源,如需修改css和js文件请到dev文件夹
| ├── css # dev文件夹中sass编译后的样式文件
| └── fonts # 字体文件
| └── icons # 图标文件
| └── img # 图片文件
| └── js # dev文件夹中处理后的脚本文件
├── dev # 开发文件
| ├── js # 存放脚本源码
| └── sass # 样式源码
| └── app.scss # 整合下面的所有样式文件
| └── base.scss # 引入字体、Reset部分样式
| └── common.scss # 模板的主要样式
| └── helper.scss # 工具样式
| └── layouts.scss # 响应式布局
└── gulpfile.js # 自动化任务脚本
└── index.html # 模板首页
└── tags.html # 标签页面
└── 404.html # 404页面
└── package.json # 管理项目的依赖项
值得注意的是,css及js的源码都在 dev
文件夹中,每一次保存 gulp 都会对它们进行处理并保存到 assets
文件夹以供 _site
上线环境使用。