# jekyll-theme-WuK **Repository Path**: aarondjc/jekyll-theme-WuK ## Basic Information - **Project Name**: jekyll-theme-WuK - **Description**: A content-first, sliding sidebar theme for Jekyll. - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-01-31 - **Last Updated**: 2021-01-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README --- title: Home --- ## Quick Start 感谢使用我的博客主题，下面跟随一些简单操作快速生成你的站点/文档/展示页面吧~无需命令行~ [在 Github 上阅读此页](https://github.com/wu-kan/jekyll-theme-WuK) ![License](https://img.shields.io/github/license/wu-kan/jekyll-theme-WuK)![commit-activity](https://img.shields.io/github/commit-activity/m/wu-kan/jekyll-theme-WuK)![last-commit](https://img.shields.io/github/last-commit/wu-kan/jekyll-theme-WuK)![CountLanguage](https://img.shields.io/github/languages/count/wu-kan/jekyll-theme-WuK)![TopLanguage](https://img.shields.io/github/languages/top/wu-kan/jekyll-theme-WuK)![CodeSize](https://img.shields.io/github/languages/code-size/wu-kan/jekyll-theme-WuK)![RepoSize](https://img.shields.io/github/repo-size/wu-kan/jekyll-theme-WuK)![Downloads](https://img.shields.io/github/downloads/wu-kan/jekyll-theme-WuK/total)![Watchers](https://img.shields.io/github/watchers/wu-kan/jekyll-theme-WuK)![contributors](https://img.shields.io/github/contributors-anon/wu-kan/jekyll-theme-WuK)![Release](https://img.shields.io/github/v/release/wu-kan/jekyll-theme-WuK)![release-date](https://img.shields.io/github/release-date/wu-kan/jekyll-theme-WuK) ### 第一步 点这个链接，把[示例站点](https://wu-kan.cn) fork 到你的仓库。注意，fork 的是示例站点，fork 主题仓库是不完整的！ ### 第二步 在你 Fork 之后的仓库里，选择 Setting，将仓库名改成`your-name.github.io`。 例如这里我用来示例的 GitHub 小号是 @Mizuno-Ai ，改的名字就是`Mizuno-Ai.github.io`。 ![step.2](./step.2.webp) ### 第三步 把 Setting 拉到下面找到 Github Pages 相关选项，将 Source 从改成 None 改到 master branch，再将 Custom domain 改成你的网址。 ![step.3.4](./step.3.4.webp) ![step.3.5](./step.3.5.webp) 稍等一下，应该会提示你的博客地址可以访问了！你已经成功大半啦~ ### 第四步 回到仓库根目录下，自行配置`_config.yml`，能看懂多少就改多少。大部分配置项我都加了注释。 ![step.4.1](./step.4.1.webp) ![step.4.2](./step.4.2.webp) ![step.4.3](./step.4.3.webp) 要注意 yaml 格式中缩进是很重要的，不要破坏本来的缩进。 ### 第五步 回到仓库根目录下，点开`/_posts/`文件夹，这个目录存放博客文章。点 Create new file 就可以写你自己的博客了。这些文章使用的格式是 [Markdown](https://www.runoob.com/markdown/md-tutorial.html)，这是一种非常简单易用的有格式文本标记语言，文件后缀名是 `md`。 ![step.5.1](./step.5.1.webp) 文件命名方式需要是`日期-标题.md`；文件内容前最好要有一个`title: 标题`的 yaml 头，以防止显示错乱。 ![step.5.2](./step.5.2.webp) 写好之后和改配置的操作类似，点 Commit 提交。现在再访问你的博客，可以发现你的博文已经出现在归档页的最上面了！Enjoy~ 欢迎[![Star](https://img.shields.io/github/stars/wu-kan/wu-kan.github.io)](https://github.com/wu-kan/wu-kan.github.io)、[![Fork](https://img.shields.io/github/forks/wu-kan/wu-kan.github.io)](https://github.com/wu-kan/wu-kan.github.io/fork)、[![Issue](https://img.shields.io/github/issues/wu-kan/wu-kan.github.io)](https://github.com/wu-kan/wu-kan.github.io/issues)！ ## 进一步定制 以上所有操作均可直接在 github 网页上进行。如果你在本地运行博客的测试，或是对博客进行更高级别的定制，推荐先阅读以下几篇博文： - [基于 Jekyll 搭建个人博客](https://wu-kan.cn/_posts/2019-01-18-%E5%9F%BA%E4%BA%8EJekyll%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/) - [个人网站优化之旅](https://wu-kan.cn/_posts/2020-02-06-%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%E4%BC%98%E5%8C%96%E4%B9%8B%E6%97%85/) 统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质，推荐阅读： - [中文文案排版指北](https://github.com/sparanoid/chinese-copywriting-guidelines/blob/master/README.zh-CN.md) - [Markdown 写作心得](https://wu-kan.cn/_posts/2020-01-18-Markdown%E5%86%99%E4%BD%9C%E5%BF%83%E5%BE%97/) ## Demo ![Demo](./screenshot.png) ## 文件结构 我的主题主要实现了如下几种渲染页面的样式供选择。 ### `layout: default` 基于[poole/lanyon](https://github.com/poole/lanyon)的页面，提供一个侧边栏和可随侧边栏移动的 warp。 ### `layout: page` 基于`layout: default`，提供了一个标题栏`.masthead`和文本框的`.content`。 ### `layout: archive` 基于`layout: page`的归档页。 示例： 当前我对它不是很满意，可能会在以后的版本中修改。 ### `layout: tags` 基于`layout: page`的标签页。 示例： 当前我对它不是很满意，可能会在以后的版本中修改。 ### `layout: comments` 基于`layout: page`的留言页，留言插件使用了[Valine](https://valine.js.org/)。 示例： ### `layout: post` 基于`layout: comments`的博文页，为每篇博文增加描述信息。 示例：[基于 Jekyll 搭建个人博客](https://wu-kan.cn/_posts/2019-01-18-%E5%9F%BA%E4%BA%8EJekyll%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/) ### `layout: page404` 基于[腾讯志愿者](http://e.t.qq.com/Tencent-Volunteers)的公益 404 页。 示例： ### `layout: merger` 基于 merger 的打赏页。 示例： ### `layout: home` 从`v3.1.0`版本开始，`layout: home`被我重写，基于[hakimel/reveal.js](https://github.com/hakimel/reveal.js)实现了一个简洁的展示页面，既可以作为博客的封面，也可以用作 presentation！ 示例：[我的数图期末展示页](https://wu-kan.cn/_posts/2019-12-10-%E6%95%B0%E5%9B%BE%E6%9C%9F%E6%9C%ABProject/) 向你的 markdown 文件中插入水平页面分隔符和垂直页面分隔符（可自定义），即可快速开始使用啦！可以以[本篇文档](https://github.com/wu-kan/jekyll-theme-WuK/blob/master/README.md)作为使用示例。 推荐的分隔符是![垂直标签](data:image/webp;base64,UklGRswEAABXRUJQVlA4IMAEAABQHwCdASrAASAAPsVQo0unpKMhtJMt+PAYiWkAFsxLa9e8Eh/E96cqAGmyaFhk0Q5inYLCsACybyvNmNBBvQcWVFDythsQZJBVxehBlMwh1yaCph3TT2mmXBYK4xTe1NQkAXYTUqlqw5axNWj96M5T+rkKO1ITOC/HXVhXDuBiZLLWebQVjzeuOZZbVNTlj1mUAthhmVBOEZyvWrJ8MacmBcu/R1nhZXOFxgJcjRk0JUNUxVxkcJKLugO7TzsHe/ypmIXUjZkQM2B75gv0R2Il+croGEtWa9KC3jCQ50RDOiQz2gtg3d5JDES2HqfZoVXHDcmj31oyYgLAMsrs0kRz6oAAAP73mKTfMOCm35/b4Qk9coZRWF/gzyQ+AyJOWBfAGDv3SBErqzWPv1hFXtlNoLceJgqLqnLzOSUx7DiuK2wiJ4rUObsqOE+MT6+pGZhCQhIjAq7hVZOjFtXUAuXEvG0pwJn3iedUv/j455TijyrJJcdJMR4aqihWqaBMTcB4E2CcjQ1YdITOt7BzvuJ+ujCFC5gybqIFrv+7SeNt4xux7nEqq6ajkJwkXg4GutsosueU/0lBwh3UW/kFoOKFTWouPwbLGWdYI4WaIWshXeDv549gTc0PKD/FFeqPHd9aU++Hqu7JbmEMpa7CLPsaxQRgDGAHDfjva0DqroXr7gD7SHbIHeEEfGneh7wgYLGcN1wO6XpUnmZQSYhqvKZ3V9qh180B9n7/7ViGnOjPnLZHiR0DDUPN3WgNvLfdTtXrzTIIe4clZR4QBCJ98wGdOZEo3vv0y+I7HVPXcDzibfxpuyfoPCnOgMFmVLKMvwqIHgIWH4Yxzhv6efYiKAyOVNnQIosoOKsI/6mG1uzH9RjgDcJA7gTJvwpTq5ST0FKUdrVtY0F62jai3eqcWhQEg3Lp11W2z8+pOjpU/ALrHDFQB8eATgid4+lu9cquOn6D5jfkHAIOVSWNgW55QB3drAhCEqTZ2BCjIxzQeTTD50rZxGTSSv51QbMbOG6+OQp6X6mOuYlBPctjkYbTYITDV0ANyT/bH1ZYw0QN+qV9Z0FvgDMuixTGgm/WwRDroKqik4JL9Toro+xMQKUlbaftdxfIjkrmVDAALBD/bF26A3vTRtGP+KMgNDj2mqd9w3znrM/WQnqrtp2Dm7vLVmURPpLzofnbviwFz7LHSPwT7dz1tfOPPeJMunAM7Hl2bLMPJ53KZy9M0+ns7ylPJ5sYLNsrstwdy5/KgZi9nqhQ9rDGETCv9Jm01GiMBemXJa4EPD7VB1MCG2Ep+ibTIRNjQ/j3Q/HyNfUpwNQSJ4DEiG3ZKplHKFRdjwWz2jsVBl+S6T98wMG7WJKoOAv6UDHM1GJ814ICZRXKX8COWPCKvFJgPT+ohqrUYy2YxQvr/UUJoIRbX3xCmyL/Co484h4ADGRJ+pl9Dkv72GvAxR9Q9/lZzSNgkiess0mfv2ctlFaKnfQGhsE2g39w37DIR26xJi0rMtkey9YiaTl62hSm3uqrKSpidim0eDZJvLvHLTxHxoBOytnf9sZaUuEAC5/OAGcD86/cByTlWvPbvbnRPygoLSl8xEmg9IWpHnD/ETK2dClPiRsF+hfETqEtSAAA)和![水平标签](data:image/webp;base64,UklGRlwCAABXRUJQVlA4IFACAACQDwCdASrgACAAPpE8m0elo6KhLbVcALASCWkAEWHcpexmUsD6ZOiu5sdWJqej30kHAWtWgzm1NokVrmXtBduqdjf69Ky/YrEfEk+DW1QmKbH58l6EwOTfIUdlpA9FItaZ+aXOqRi7Lf8XoMSwIPubKewvVC8kbFKgsiWQMmHqL7KMBE8AAP79uypAcc+TWCg0wbbnBWWODDTzqFgLrrobgfk6sOqETmoC8PIIDAt2Si73oax5KbX3SwCtGFRuRBn1uMwQStgw0dWqf5biuBby+hCRVXsg1usfCXyC2TOzsYDX89EEII6pcuI+jyvREioCmAhUHo5uHUEi05r1rckaSHFG9jYaTLNpOSC2AFItW/sUZIgBsYz1EnDk0oPG0eaWfTD3p1pwNOapL3JUK52Kqqdpwi5L/UxF+qUPS+XVX5BA2AI2FjTkJXaN75DUdEQ04xq+fCz1hDcc9po5h4AJCmNGDJ+hBKvSAKeRvRzbAi/OgVFg4ZpozCToVa+MMYslTrUGCJC3goF1f379lpSUD12xat2I4lTC3UrAkcbYE8kvpy817kSb+lg4cD80TdS06oTGhQR5jhlw9m3Shctwj5MyQ9e4dnKfbvZGsjBiB/C4OS/yJT4yN6vSFq/P3DmpiG5pQYwGVZud0Sp4fQ/hK84KYIxfEfeZSTRvrrNcS83XqziGfuD2xXXkulIjKF2Wdo9SDsZ2v2owdj9PN6xprlnXo/lEUwI/dRpY0JscfYWYrWtPdn4aznDTfsXina6MeJvfZyJ+dktjvrCfSAAA)，这样可以和[vscode-markdown-preview-enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/presentation)的标记兼容，方便本地预览。 如果你希望使用它来渲染主页之外的页面，可以在你的 markdown 的 yaml 头中设置`layout: home`即可！当然，如果你不希望使用它来渲染主页，你也可以将主页的 layout 设置成其他的。 想针对特定页面默认开启侧边栏？在 yaml 头中设置`jekyll-theme-WuK: sidebar_open: true`即可！ 想针对特定页面隐藏侧边栏？在 yaml 头中设置`jekyll-theme-WuK: sidebar_disable: true`即可！会覆盖`sidebar_open`的设置。 这是一个仍在开发的特性（主要是找不到美观精致的[展示主题](https://github.com/hakimel/reveal.js/tree/master/css/theme)），如果有建议/需求欢迎 issue！ 更多的功能，请尽情探索[hakimel/reveal.js](https://github.com/hakimel/reveal.js)！~~例如，按 Esc 可以生成一个 ppt 大纲~~ ## 初心 我曾做什么？ 我正做什么？ 我想做什么？ 我该做什么？ > 章北海感到父亲的灵魂从冥冥中降落到飞船上，与他融为一体，他按动了操作界面上那个最后的按钮，心中默念出那个他用尽一生的努力所追求的指令： > > “‘自然选择’，前进四！” 目标是打造一个尽可能简洁，而可定制内容又尽可能丰富的博客。如果有更好的建议，欢迎给我提 Issue！ ## 声明 除特别声明或转载外，所有博文采用[署名-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-sa/4.0/deed.zh)协议进行许可。 博客基于[MIT License](https://github.com/wu-kan/jekyll-theme-WuK/blob/master/LICENSE)开源于[GitHub](https://github.com/wu-kan/jekyll-theme-WuK)。 ## 致谢 托管于[Github Pages](https://pages.github.com/)，感谢。 博客引擎来自于[jekyll/jekyll](https://github.com/jekyll/jekyll)，感谢。 CDN 加速服务来自于和，感谢。 博客主题基于[poole/lanyon](https://github.com/poole/lanyon)，感谢。 图标库来自于[fontawesome-free](https://fontawesome.com/)，感谢。 展示页基于[hakimel/reveal.js](https://github.com/hakimel/reveal.js)，感谢。 捐赠页来自[hifocus/merger](https://github.com/hifocus/merger)，感谢。 页面压缩来自于[penibelst/jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html)，感谢。 留言和阅读量系统来自于[Valine](https://valine.js.org/)和[LeanCloud](https://leancloud.cn/)，感谢。 页面统计来自于[不蒜子](http://busuanzi.ibruce.info/)，感谢。 博客搜索插件来自于[christian-fei/Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)，感谢。 博文目录插件来自于[allejo/jekyll-toc](https://github.com/allejo/jekyll-toc)，感谢。 代码高亮及插件来自于[PrismJS](https://prismjs.com/)，感谢。 Live2D 前端插件来自于[Dreamer-Paul/Pio](https://github.com/Dreamer-Paul/Pio)，感谢。 Live2D Model 来自于[imuncle/live2d](https://github.com/imuncle/live2d)和[xiaoski/live2d_models_collection](https://github.com/xiaoski/live2d_models_collection)，感谢。 头像、壁纸来自于、和，感谢（侵权必删）。 头像翻转效果受启发自[leopardpan/leopardpan.github.io](https://github.com/leopardpan/leopardpan.github.io)，感谢。 ## 历程 ### 2020-05-29 v3.2.1 - 使用 [penibelst/jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) 压缩生成页面大小 - 优化 archive 、tags 页面生成速度 - 新增 archive 自定义分组规则 ### 2020-05-21 v3.2.0 - 修复 reveal.js 自动更新到 4.0 版本后渲染错误的问题！ - document 页回归，现在可以生成 github readme 风格的可打印文档 - 修复当博文没有标签时仍然显示标签图标的 bug - 配置项中的 alert 命名不规范，全部换成 append/prepend - 博客目录插件更换成 [allejo/jekyll-toc](https://github.com/allejo/jekyll-toc)，纯 Liquid ！ - 下一步将按同样思路优化 katex、mermaid、prism 三个插件的渲染速度 ### 2020-04-28 v3.1.5 - 修复博文字数统计忽略中文的问题 - 修复 valine 阅读量统计失效的问题 ### 2020-04-20 v3.1.4 - 修复归档页年份博文数量统计错误的问题 ### 2020-04-20 v3.1.3 - 归档页、标签页增加一个饼状统计图 - 好丑啊，可以关掉 - 归档页现在按照年份归档 ### 2020-04-12 v3.1.2 - [poole/lanyon](https://github.com/poole/lanyon) 更新至 v1.1.0 - Live2D 增加变换主题按钮 - page 中用到的变量移动到`jekyll-theme-WuK`命名空间下 ### 2020-03-28 v3.1.1 - 删去壁纸，加快本地测试速度 - 修复 `layout: home` 中代码块渲染可能存在的一些问题 ### 2020-02-29 v3.1.0 - 使用 bundle 管理版本和运行依赖 - 使用 Remote_theme 将博客主题和博文分离 - 部署 gitlab 镜像站，解决百度爬虫爬不到的问题 - 基于[hakimel/reveal.js](https://github.com/hakimel/reveal.js)重写`layout: home` - 更换 live2d 插件为[Dreamer-Paul/Pio](https://github.com/Dreamer-Paul/Pio) - 更换 live2d 模型 - 定制 live2d 提示语 - css 样式更新 - 彩虹滚动条 - 页面加载动画 - 更换竖屏下壁纸 这么大的更新感觉版本号改成“4.0.0”也不为过嘛。 不过实际上这个版本保持了和前一个版本的兼容，因此是“3.1.0”。 ### 2020-02-14 v3.0.0 - 插件引入方式完全重构，现在直接嵌入 html 即可 - 更换 live2d 插件为[kooritea/live2d-helper](https://github.com/kooritea/live2d-helper)，从而支持 live2d 定制 - 看板娘隐藏按钮 - 去除 jQuery - 去除 categories 标签，使用 tags 代替 - 博客结构调整，把`/public`目录迁移到 jekyll 默认的`/assets` - merger 打赏页 - 侧边栏样式调整，更加简洁 - 为竖屏显示增加壁纸 - 全局搜索 - $\KaTeX$ 行间公式 ### 2020.01.31 v2.4.1 - 赞赏按钮样式修复 - 使用加速 gravatar，感谢~ - 网站字体更换为等宽字体+微软正黑体 - live2d 移动到页面右侧 - 更换爱酱壁纸 ### 2019.11.11 v2.4.0 - 修复`sidebar-overlay`失效的 Bug - 修复赞助按钮点两次才出现的 Bug - 修复 mermaid 不显示的 Bug - 去掉正文部分的白色半透明背景 - 动态背景增加 nest 粒子动画（花里胡哨，默认关闭 - Ribbon 动态背景默认关闭，可在配置文件中去掉注释打开（花 里 胡 哨 - 博文显示信息增加 tag - 变迁页面增加 tag、categories 图标及对应分类文章数量 - 页面显示适应宽屏显示器 - layout 增加 - index - tag - page404 ### 2019-08-30 v2.3.0 - 更换 cdn 为[jsDelivr](https://www.jsdelivr.com/) - 升级 fontaswsomev4.7.0 至 fontawesome-freev5.10.2，支持的图标数量由 675 增加至 1535 - 所有脚本和插件 JSLoader 化，增加移植性和访问速度 - 界面调整 - 正文部分增加背景，从而减少动态 ribbon 背景影响的阅读体验 - sidebar 微调 - layout 删除 document 页 ### 2019-07-06 v2.2.1 - prismjs 使用[UNPKG](https://unpkg.com)加速 - 删去 layout 中的 404 页（因为只需要引入 js 脚本） ### 2019-06-28 v2.2.0 - 博客结构微调 - 将大部分博客用到的 jscdn 换成 unpkg.com，感谢其提供的加速服务~ - 留言板加入友链 ### 2019-05-03 v2.1.4 - valine 更新 - 现在支持记录访问者 IP - 每次重新拉取评论者头像 ### 2019-04-29 v2.1.3 - 页面样式微调，将 masthead 调矮，将标题字号改小 ### 2019-03-20 v2.1.2 - 修复 sidebar 展开时回到顶部的问题 ### 2019-03-18 v2.1.1 - 一些界面上的小调整 ### 2019-03-01 v2.1.0 - 调整某些插件 - layout 新增 document 页，一个只开启$\KaTeX$而不引入任何其他样式的页面，主要是方便自己生成可打印的 ICPC 模板和一些课程报告 - layout 新增 404 页，可选择开启腾讯公益 - mermaid 支持 markdown 扩展了 ### 2019-02-24 v2.0.1 - sidebar 的触发按钮样式换成了 bars，原来的样式更像是菜单 - 一点页面上的小调整 ### 2019-02-23 v2.0.0 - 重构完成 - 正式开源 ### 2019-02-19 - 模块化·初步 - 博客搜索实现 ### 2019-02-01 - [署名-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-sa/4.0/deed.zh)。 - 社会主义核心价值观点击特效，感谢[dujin](https://www.dujin.org/9088.html)。 - 打赏。 ### 2019-01-31 - mathjax 换 katex - post 访问量统计 ### 2019-01-24 - 代码高亮 - 选中代码按钮 - 代码语言按钮 ### 2019-01-23 - 加入文章目录到 SideBar ### 2019-01-22 - 加入 Ribbon 动态背景 ### 2019-01-21 - 加入 valine 评论系统，留言页实现 ### 2019-01-20 - 加入归档页 ### 2019-01-19 - 加入标签页 ### 2019-01-18 - 开始用 Jekyll 重构整个博客 折腾吧，折腾是才最好玩的。 ### 2019-01-13 - 更换 Next.Muse 主题模板 - 少量修改页面自定义样式布局，主要是 sidebar - 将网易云音乐 iframe 移动到 description，感觉挺有意思的 ### 2019-01-12 - 将 NexT 版本更新至 v6.7.0 ### 2018-12-23 - 页面字体修改 - 网易云音乐 iframe 加入 SideBar ### 2018-12-16 - 引入 mermaid 支持 - 修复部分 Latex 渲染的 Bug ### 2018-11-24 - 将 NexT 版本更新至 v6.5.0 - 用 Valine 更换失效的 Gitment 评论系统 - 加入 Leancloud 和 busuanzi 页面统计 ### 2018-11-20 - 谷歌，百度搜索页面提交 ### 2018-11-18 - 全局透明化 - 动态背景 - 页面加载动画 - Latex 支持 ### 2018-11-16 - 主题由默认的 Landspace 换至 NexT v5.1.4 - 使用 Next.Pisces 主题模板 - 开始对网页进行自定义样式布局 - 尝试加入 Gitment，但初始化总是不成功 ### 2018-11-15 - 在 Github 上成功部署博客 - 成功迁移[原 CSDN 博客](https://blog.csdn.net/w_weilan)上的所有文章 - live2d