{"id":13693766,"url":"https://github.com/kaeyleo/jekyll-theme-H2O","last_synced_at":"2025-05-02T22:30:39.906Z","repository":{"id":40636990,"uuid":"88632325","full_name":"kaeyleo/jekyll-theme-H2O","owner":"kaeyleo","description":" 🎉 A clean and delicate Jekyll theme. Jekyll博客主题","archived":false,"fork":false,"pushed_at":"2023-02-27T21:40:45.000Z","size":4573,"stargazers_count":941,"open_issues_count":28,"forks_count":536,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-08T13:06:41.319Z","etag":null,"topics":["blog","blog-theme","jekyll-themes"],"latest_commit_sha":null,"homepage":"http://liaokeyu.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaeyleo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-18T14:06:59.000Z","updated_at":"2025-03-22T16:52:53.000Z","dependencies_parsed_at":"2024-01-14T18:59:33.403Z","dependency_job_id":"dc16d62f-f278-426b-95ab-cbec923277a2","html_url":"https://github.com/kaeyleo/jekyll-theme-H2O","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaeyleo%2Fjekyll-theme-H2O","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaeyleo%2Fjekyll-theme-H2O/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaeyleo%2Fjekyll-theme-H2O/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaeyleo%2Fjekyll-theme-H2O/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaeyleo","download_url":"https://codeload.github.com/kaeyleo/jekyll-theme-H2O/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252115887,"owners_count":21697262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","blog-theme","jekyll-themes"],"created_at":"2024-08-02T17:01:17.127Z","updated_at":"2025-05-02T22:30:34.890Z","avatar_url":"https://github.com/kaeyleo.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"## jekyll-theme-H2O\n\n基于Jekyll的博客主题模板，简洁轻量。\n\n另外，还有此主题的[Ghost版本](https://github.com/eastpiger/ghost-theme-H2O) by [eastpiger](https://github.com/eastpiger)\n\n### Preview\n\n#### [在线预览 Live Demo →](http://liaokeyu.com/)\n\n![](screenshot/jekyll-theme-h2o-realhome.jpg)\n\n![](screenshot/jekyll-theme-h2o-realm.png)\n\n如果你喜欢这个博客模板，请在右上角star一下，非常感谢～\n\nIf you like this theme or using it, please give a ⭐️ for motivation ;)\n\n如果想体验手机浏览效果，可以扫一下二维码：\n\n![](screenshot/1494404591.png)\n\nUsing your smartphone to scan the QR Code\n\n### Features 特性\n\n#### CN\n\n- 代码高亮\n- 夜间模式\n- Disqus评论系统\n- 粉蓝两种主题色\n- 头图个性化底纹\n- 响应式设计\n- 社交图标\n- SEO标题优化\n- 文章标签索引\n- 博客文章搜索\n- 复制文章内容自动添加版权\n\n#### EN\n\n- Code highlight\n- Night mode\n- Disqus Comment System\n- Theme color: Blue \u0026 Pink\n- Hero Patterns\n- Responsive design\n- SNS Icon\n- Title SEO\n- Tags system\n- Search\n- Copyright text on copy event\n\n### Usage 快速开始\n\n首先你需要安装Jekyll，请查看文档: [快速指南](http://jekyll.com.cn/docs/quickstart/)\n\n如果你已经安装了Jekyll，请检查版本是否为3.0.x，你可以使用 ```gem update jekyll``` 命令进行升级。\n\n使用 ```gem install jekyll-paginate``` 或 ```sudo gem install jekyll-paginate``` 安装Jekyll的分页插件。\n\n\u003e H2O主题基于Jekyll 3.2.1版本，不同版本之间可能存在部分差异，具体请参考[官方更新文档](https://jekyllrb.com/news/)\n\n点击右上角Fork按钮在你的Github上创建分支，或者```clone```到本地。\n\n``` git clone https://github.com/kaeyleo/jekyll-theme-H2O.git ```\n\n最后，在命令行输入 ```jekyll server``` 开启服务，就能在本地预览主题了。\n\n如果需要部署到线上环境，请参照配置文档的 **开始** 章节进行操作。\n\n### Document 配置文档\n\n#### CN\n\n- 开始\n\t- [站点信息](#站点信息)\n\t- [写一篇文章](#写一篇文章)\n- 组件\n\t- [导航](#导航)\n\t- [侧边栏](#侧边栏)\n\t- [社交图标](#社交图标)\n\t- [个人简介](#个人简介)\n\t- [标签](#标签)\n\t- [文章搜索](#文章搜索)\n\t- [代码高亮](#代码高亮)\n\t- [夜间模式](#夜间模式)\n- 个性化\n\t- [博客封面、主题皮肤](#主题皮肤)\n\t- [头图底纹](#头图底纹)\n- 高级部分\n\t- [自定义](#自定义)\n- 集成服务\n\t- [Disqus](#disqus)\n\t- [Share.js](#sharejs)\n\n#### EN\n\n- Get Started\n\t- [Site Settings](#站点信息)\n\t- [Write Posts](#写一篇文章)\n- Components\n\t- [Navigation Menu](#导航)\n\t- [Sidebar](#侧边栏)\n\t- [SNS Icons](#社交图标)\n\t- [Personal Information](#个人简介)\n\t- [Tags](#标签)\n\t- [Search](#文章搜索)\n\t- [Syntax Highlight](#代码高亮)\n\t- [Night Mode](#夜间模式)\n- Style\n\t- [Theme Color](#主题皮肤)\n\t- [Hero Background Patterns](#头图底纹)\n- Advanced\n\t- [Customization](#自定义)\n- Plugins\n\t- [Disqus](#Disqus)\n\t- [Share.js](#Share.js)\n\n\nYou can easily get started by modifying _config.yml\n\n#### 站点信息\n\n你可以通用修改 `_config.yml` 文件来轻松的开始搭建自己的博客\n\n```\n# Site settings\ntitle: '廖柯宇的独立博客' # 你的博客网站标题\ndescription: '很高兴能在这里与你分享我对技术和生活的思考。' # 站点描述\nkeyword: '廖柯宇, 廖柯宇的独立博客, 前端, 设计' # 网站关键词\nurl: 'http://liaokeyu.com' # 站点url\nbaseurl: ''\n\n# Build settings\npaginate: 6 # 一页放几篇文章\npaginate_path: 'page:num'\n```\n\n其实大部分参数已经默认配置好了，你只需要通过文档了解它们，然后根据自己的需求去`_config.yml`文件里修改即可。\n\n#### 写一篇文章\n\n文章一般都放在`_posts`文件夹里，每篇文章的开头都需要设置一些头信息：\n\n```\n---\nlayout: post\ntitle: 'H2O theme for Jekyll'\nsubtitle: '或许是最漂亮的Jekyll主题'\ndate: 2017-04-18\ncategories: 技术\ncover: 'http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-postcover.jpg'\ntags: jekyll 前端开发 设计\n---\n```\n\n#### 导航\n\n博客顶部的导航栏信息需要以下面的格式进行配置：\n\n```\n# Navigation links\nnav:\n  home: '/'\n  tags: '/tags.html'\n```\n\n导航链接需要写上完整的html文件名，它们都是放于根目录下的，如果自建文件夹，请务必在`exclude` 参数中增加自建文件夹的文件名:\n\n```\n# Build settings\nexclude: ['node_modules', 'dev', 'package.json', '自定义的文件夹名字']\n```\n\n这样做是为了在Jekyll运行时排除某些文件被复制到运行文件`_site`里去。\n\n#### 侧边栏\n\n![](screenshot/jekyll-theme-h2o-sideBar.png)\n\n侧边栏分为两个部分：【个人简介】和【推荐标签】。当屏幕宽度小于960px时，侧边栏会被隐藏。\n\n#### 社交图标\n\n使用阿里的图标管理平台Iconfont整理了一套常用的社交图标用于博客的个人简介上，包括微博、知乎、掘金、简书、Github等十三个网站，并且对鼠标悬停时的样式颜色进行了优化。\n\n配置格式如下：\n\n```\n# SNS settings 配置社交网站url\nsns:\n  weibo: '//weibo.com/lovecolcol'\n  juejin: '//juejin.im/user/57a6f434165abd006159b4cc'\n  instagram: '//www.instagram.com/steveliaocn'\n  github: '//github.com/kaeyleo'\n```\n\nsns属性可选参数：\n\n社交网站 | 参数\n--------|----\n微博 | `weibo`\n推特 | `twitter`\nGithub | `github`\n知乎 | `zhihu`\n掘金 | `juejin`\n豆瓣 | `douban`\n简书 | `jianshu`\nUI中国 | `uicn`\n领英 | `linkedin`\nFacebook | `facebook`\nYoutube | `youtube`\nInstagram | `instagram`\nDribbble | `dribbble`\nBehance | `behance`\nMedium | `medium`\nVK | `vk`\n\n#### 个人简介\n\n首页侧边栏和文章页面底部都会显示你的个人简介\n\n```\n# Author 配置博主信息\nauthor: 'Jack'\nnickname: 'xx'\nbio: '程序员'\navatar: 'assets/img/avatar.jpg'\n```\n\n#### 标签\n\n对侧边栏的标签模块进行相应配置：\n\n```\n# Tags\nrecommend-tags: true\nrecommend-condition-size: 12\n\n```\n\nTags配置说明：\n\n 属性 | 参数 | 描述\n-----|-----|-------\n`recommend-tags` | `true`, `false` | 是否显示推荐标签\n`recommend-condition-size` | `12` 或其他数字 | 推荐标签个数限制\n\n#### 文章搜索\n\n![](screenshot/jekyll-theme-h2o-search.png)\n\n基于Jekyll服务器生成文章索引文件 `search.json` 为博客提供搜索服务。输入文章标题或与文章标签相关的关键字即可。\n\n搜索功能默认是开启的，以卡片的样式显示在侧边栏底部。如需关闭请将配置文件 `_config.yml` 中 `search ` 属性的值改为 `false` 。\n\n```\n# Search\nsearch: true\n```\n\n说明 | 参数\n----|-----\n开启搜索功能 | `true`\n关闭搜索功能 | `false`\n\n#### 代码高亮\n\n模板引入了[Prism.js](http://prismjs.com)，一款轻量、可扩展的代码语法高亮库。\n\n很多知名网站如[MDN](https://developer.mozilla.org/)、[css-tricks](https://css-tricks.com/)也在用它，就连 JavaScript 之父 [Brendan Eich](https://brendaneich.com/) 也在个人博客上使用。\n\n![代码高亮](http://on2171g4d.bkt.clouddn.com/jekyll-theme-h2o-highlight.png)\n\n遵循 [HTML5](https://www.w3.org/TR/html5/grouping-content.html#the-pre-element) 标准，Prism 使用语义化的 `\u003cpre\u003e` 元素和 `\u003ccode\u003e` 元素来标记代码区块：\n\n```\n\u003cpre\u003e\u003ccode class=\"language-css\"\u003ep { color: red }\u003c/code\u003e\u003c/pre\u003e\n```\n\n在Markdown中你可以这样写：\n\n\n\t ```css\n\t\tp { color: red }\n\t ```\n\n支持语言：\n\n- HTML\n- CSS\n- Sass\n- JavaScript\n- CoffeeScript\n- Java\n- C-like\n- Swift\n- PHP\n- Go\n- Python\n\n#### 夜间模式\n\n晚11点至次日凌晨6点自动开启夜间模式。如果不需要，则将配置文件 `_config.yml` 中 `nightMode ` 属性的值改为 `false` 即可。\n\n```\n# Night mode\nnightMode: true\n```\n\n说明 | 参数\n----|-----\n开启夜间模式 | `true`\n关闭夜间模式 | `false`\n\n#### 主题皮肤\n\n![](screenshot/jekyll-theme-h2o-themecolor.jpg)\n\n支持两种主题颜色蓝色（默认）和粉色\n\n主要效果体现在首页博客封面、顶部导航栏的logo以及鼠标悬停时文字显示的颜色效果。\n\n```\n# theme color\ntheme-color: 'default' # pink or default\n```\n\n颜色 | 参数\n----|-----\n蓝色 | `default`\n粉色 | `pink`\n\n如果你希望在博客封面显示图片，需要去index.html文件中的头信息中添加 `header-img` 配置：\n\n```\n---\nlayout: default\nhome-title: Steven的博客\ndescription: 开发者，创造者\nheader-img: assets/img/banner.jpg\n---\n```\n\n#### 头图底纹\n\n![](screenshot/jekyll-theme-h2o-heroPatterns.png)\n\n在没有图片的情况下单纯显示颜色会不会太无趣了点？于是想到了加入底纹元素，底纹素材是SVG格式的（保存在css样式里），加载比图片快很多。六种底纹（电路、食物、云海、钻石等等）供你选择，配置如下：\n\n```\n# Hero background patterns\npostPatterns: 'circuitBoard'\n```\n\n`postPatterns` 属性参数配置：\n\n底纹描述  |  参数\n------|------\n电路 | `circuitBoard`\n圆环 | `overlappingCircles`\n吃货日常：啃打鸡 | `food`\n土豪必备：钻石| `glamorous`\n圈圈叉叉 | `ticTacToe`\n中国风：云海 | `seaOfClouds`\n\n#### 自定义\n\n主题开发使用的技术栈也比较简单：引入jQuery类库、使用Sass代替CSS编写样式，使用Gulp完成Sass的编译、CSS和JavaScript的代码合并压缩等任务。\n\n如果你喜欢折腾，想对模板的代码进行修改，需要使用命令 `npm install` 安装 `package.json` 中的依赖，然后 `gulp` 一下即可开始你的自定义之旅。\n\n在了解H2O主题的目录结构之前，确保你对[Jekyll目录结构](http://jekyll.com.cn/docs/structure/)有所了解。\n\n```\n\t.\n\t├── _config.yml # 配置文件\n\t├── _includes # 页面组件方便重用\n\t|   ├── footer.html # 页脚\n\t|   └── head.html # html文档的头部内容\n\t|   └── header.html # 顶部菜单栏\n\t|   └── pageNav.html # 文章列表分页组件\n\t├── _layouts # 布局模板\n\t|   ├── default.html # 默认模板\n\t|   └── post.html # 文章页面模板\n\t├── _posts # 这里放文章\n\t|   ├── 2017-05-03-elements-of-javascript-style.md # 命名格式：年-月-日-文章标题.md\n\t|   └── 2007-02-21-life-on-mars.md\n\t├── _site # Jekyll将源码处理后生成的站点文件，里面的内容可直接发布\n\t├── assets # 存放用于线上环境的静态资源，如需修改css和js文件请到dev文件夹\n\t|   ├── css # dev文件夹中sass编译后的样式文件\n\t|   └── fonts # 字体文件\n\t|   └── icons # 图标文件\n\t|   └── img #  图片文件\n\t|   └── js # dev文件夹中处理后的脚本文件\n\t├── dev # 开发文件\n\t|   ├── js # 存放脚本源码\n\t|   └── sass # 样式源码\n\t|       └── app.scss # 整合下面的所有样式文件\n\t|       └── base.scss # 引入字体、Reset部分样式\n\t|       └── common.scss # 模板的主要样式\n\t|       └── helper.scss # 工具样式\n\t|       └── layouts.scss # 响应式布局\n\t└── gulpfile.js # 自动化任务脚本\n\t└── index.html # 模板首页\n\t└── tags.html # 标签页面\n\t└── 404.html # 404页面\n\t└── package.json # 管理项目的依赖项\n```\n\n值得注意的是，css及js的源码都在 `dev` 文件夹中，每一次保存 gulp 都会对它们进行处理并保存到 `assets` 文件夹以供 `_site` 上线环境使用。\n\n#### Disqus\n\n[Disqus](https://disqus.com/)是一个第三方社交评论插件，体验相当不错。\n\n在配置文件 `_config.yml` 中找到comments的相关配置，设置 `disqus` 参数为 `true` 打开评论功能（ `false` 为关闭），并且设置 `disqus_url`。\n\n```\n# Comments\ncomments:\n\tdisqus: true\n\tdisqus_url: 'https://your-disqus-username.disqus.com/embed.js'\n```\n\n注：`disqus` 默认值为 `false`\n\n#### Share.js\n\n为了让文章更方便地分享，使用了第三方分享插件[Share.js](https://github.com/overtrue/share.js)，支持一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。\n\n```\n# Share\nsocial-share: true # 开启或者关闭分享功能\nsocial-share-items: ['wechat', 'weibo', 'douban','twitter']\n```\n\n### Contribution 贡献\n\nAny types of contribution are welcome. Thanks.\n\n接受各种形式的贡献，包括不限于提交问题与需求，修复代码。等待您的 ```Pull Request```\n\n#### 感谢参与代码贡献的伙伴\n\n- [Ray-Eldath](https://github.com/Ray-Eldath)\n- [sctop](https://github.com/sctop)\n- [bananaappletw](https://github.com/bananaappletw)\n- [moycat](https://github.com/moycat)\n\n### License 许可证\n\nJekyll-Theme-H2O is licensed under [MIT](https://github.com/kaeyleo/jekyll-theme-H2O/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaeyleo%2Fjekyll-theme-H2O","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaeyleo%2Fjekyll-theme-H2O","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaeyleo%2Fjekyll-theme-H2O/lists"}