Skip to content

ldy/ldy.github.io

Repository files navigation

丶德灬锅的博客

Fork from kaeyleo/jekyll-theme-H2O主题,参考zhonger/jekyll-theme-H2O-ac主题进行改进。

Features 特性新增

  • archives.html页面
  • rss.html页面
  • 不蒜子访问量统计
  • 百度统计分析
  • Markdown代码编辑器支持自定义主题
  • Markdown代码编辑器显示行号
  • Markdown代码编辑器显示语言
  • Markdown代码编辑器复制代码(不添加版权信息)
  • 字数统计及阅读时长估算
  • 点击放大图片
  • 懒加载图片资源
  • 升级Ruby,Jekyll,NodeJs,以及Gulp到5.0.0版本
  • 添加Toc目录
  • 添加回到顶部按钮

Usage 快速开始

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 上线环境使用。

About

丶德灬锅的博客

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published