Fork 现有的博客模板
关于如何 「零成本」打造个人博客, 可以参阅博主之前的分享(点击图像自动跳转):
自定义博客内容 (Build From Source)
基本概念
在动手修改之前, 先要对 Web 前端有一些浅显的认识, 比如:
HTML: 文档结构标记语言(.html), 构建页面内容骨架CSS: 层叠样式表语言(.css), 控制视觉呈现与布局JavaScript: 动态脚本语言(.js), 实现交互逻辑与数据操作
本篇博客的自定义方法主要围绕对以上三部分内容的修改展开.
开发环境
想要修改主题, 需要在本地配置 Grunt 开发环境.
你可以在
Gruntfile.js中找到许多任务, 包括最小化JavaScript, 将.less编译为.css. 与jekyll相关的关键代码位于_include/和_layouts/中, 它们中的大多数是Liquid模板.
安装 Grunt 之前需要安装 npm, 这里使用 Homebrew (MacOS 包管理工具) 进行快速安装:
1
$ brew install node
然后使用 npm 安装 grunt-cli 工具:
1
$ npm i -g grunt-cli
安装之后需要初始化项目依赖包:
1
$ npm init -y && npm install load-grunt-tasks grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-watch --save-dev
运行一次以生成初始输出:
1
$ grunt default # grunt 会读取 js, css 下的文件, 并将其编译为 .min.js 或者 .min.css
关于 Grunt
Grunt的具体用法博主并没有深入了解, 博主本身也没有前端开发的经验, 它存在的目的是为了帮博主将.js文件编译成.min.js, 网站在运行时, 读取的是.min.js和.min.css, 原博主也推荐使用这个依赖.
还有一个可以生成 .min.* 的方法, 即使用 clean-css, 安装方法如下 (目前作者使用该方法编译 css 文件):
1
2
$ npm install -g clean-css-cli
$ npx cleancss -o css/yongqiang-blog.min.css css/yongqiang-blog.css # 这个是博主目前使用的方法
如果你想实现的某些功能需要修改 js/yongqiang-blog.js 或 css/yongqiang-blog.css 文件 (包括对文件的重命名), 那么在修改之后你需要重新将其编译为对应的 .min.* 文件, 否则修改不会生效.
例如当你需要为模板支持一个图像点击放大的功能, 你可以参考 walterlv-blog, 你需要根据建议修改 css 文件夹下的内容, 然后编译成对应的 .min.css 文件, 重新启动 Jekyll s 以使得修改生效.
Jekyll 的基本操作
Jekyll 简介
-
Jeklly的一个最好的特点是关注博客本身 -
Jekyll的核心其实是一个文本转换引擎
Jekyll 允许你使用你喜欢的标记语言来写文章, 可以是 Markdown, 也可以是 Textile, 或者就是简单的 HTML, 然后 Jekyll 会帮你套入一个或一系列的布局中.
在整个过程中你可以设置 URL 路径、你的文本在布局中的显示样式等等. 这些都可以通过纯文本编辑来实现, 最终生成的 静态页面 就是你的成品了.
只需简单地管理电脑中的一个文件夹下的文本文件就可以写文章并方便地在线上 (online)发布.
工程结构
一个基本的 Jekyll 网站的目录结构一般如下所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.
├── _config.yml
├── _data
│ └── members.yml
├── _drafts
│ ├── begin-with-the-crazy-ideas.md
│ └── on-simplicity-in-technology.md
├── _includes
│ ├── footer.html
│ └── header.html
├── _layouts
│ ├── default.html
│ └── post.html
├── _posts
│ ├── 2007-10-29-why-every-programmer-should-play-nethack.md
│ └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
│ ├── _base.scss
│ └── _layout.scss
├── _site
├── .jekyll-cache
│ └── Jekyll
│ └── Cache
│ └── [...]
├── .jekyll-metadata
└── index.html # can also be an 'index.md' with valid front matter
着重对其中一些参数进行说明:
| FILE/DIRECTORY | DESCRIPTION |
|---|---|
| _config.yaml | Jekyll 中心配置. 例如: WebName、主页背景、评论区设置等 |
| _includes | 可以通过 liquid-tag 加载这些 _includes 部分到你的布局或者文章中以方便重用 |
| _layouts | 这部分是包裹在文章外面的模板, 不同布局可以在 front matter yaml 中指定 |
| _posts | 存放文章的地方, 文件格式: YEAR-MONTH-DAY-title.md (suffix 自定义) |
| _site | Jekyll 将文章转换为 html 文件后存放的位置 |
以上除了 _site 文件夹是自动编译生成的之外, 其他文件/文件夹均是常见的修改位置.
这里对文档格式进行说明, 以 markdown 为例:
- 命名格式:
YEAR-MONTH-DAY-title.md, 例如: 2025-02-21-my-blog-builded.md - 文件内容包括
头信息(front matter yaml) 和博客正文
正是头信息使得 Jekyll 变得十分酷炫, 任何只要包含 yaml front matter 的文件都会变 Jekyll 当做一个特殊文件来处理. 头信息必须出现在文件开头, 并且按照 Yaml 格式写在两行三虚线之间. 下面是一个基本的例子:
1
2
3
4
---
layout: post
title: my-blog
---
在这两行的三虚线之间, 你可以设置预定义的变量(如上所示), 也可以 创建自定义变量. 这样在接下来的文件和任意模板中或者在包含这些页面或博客的模板中都可以通过使用 Liquid 标签来访问这些变量.
关于 Liquid tags 的具体代码示例参见这里.
常用的 front matter yaml 定义如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
---
layout: post # keynote, page, default
title: 这是一个 <code>Test</code> BLOG # 文字高亮
subtitle: Why is <code>document</code> an instance of <code>HTMLDocument</code>?
# 搭配 keynote 布局使用
# layout: keynote
# iframe: "//huxpro.github.io/js-module-7day/"
date: 2005-02-21 10:00:00
author: "YongQiang"
header-style: text # 博客 title 如果有图像背景, 需要注释
hidden: true # 控制是否往主页推荐
published: false # 控制是否被 Jekyll 渲染
# catalog: false # 功能不明
# 使用图片背景
# header-img: "img/post-bg-css.jpg"
# header-img-credit: "@WebdesignerDepot"
# header-img-credit-href: "medium.com/@WebdesignerDepot/poll-should-css-become-more-like-a-programming-language-c74eb26a4270"
# header-mask: 0.4 # 数值越大, 图像背景越暗
# 可以通过下面两行代码使用纯色背景
# header-img: ""
# header-bg-css: "linear-gradient(to right, #24b94a, #38ef7d);"
# 语言
# lang: en # 说明文档使用语言, zh-CN
tags: # 文章标签
- Jekyll
---
如果对博文有疑问, 就请评论说明吧! 😄😄
