基于Jekyll的博客模板

深碍√TFBOYSˉ_ 2022-05-25 13:07 159阅读 0赞

# 概述 #

基于Jekyll的博客模板，清爽配色，简约风格。

# 详细 #

# 效果 #

![效果图][mFYAae8g1nwyzKpeVzs.gif]

# 环境配置 #

## 环境 ##

*  Windows 10
 *  Git Bash

## 安装ruby ##

下载rubyinstaller安装：[https://rubyinstaller.org/downloads/][https_rubyinstaller.org_downloads] (推荐Ruby 2.2.6版本)

1.  `$ ruby -v`

## 安装DevKit ##

下载DevKit.exe：[https://rubyinstaller.org/downloads/][https_rubyinstaller.org_downloads] ，解压完成后进入目录，init初始化，review检查，成功添加ruby目录后再install

1.  `$ ruby dk.rb init`
2.  `$ ruby dk.rb review`
3.  `$ ruby dk.rb install`

## 安装Jekyll ##

切换gem镜像后再安装Jekyll（需要安装bundler）

1.  `$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/`
2.  `$ gem sources -l`
3.  `https://gems.ruby-china.org`
4.  ``
5.  `$ gem install Jekyll`
6.  `$ gem install bundler`

## 新建博客 ##

1.  `$ jekyll new ba-blog`
2.  `$ jekyll server`

# 模板套用 #

## \_config.yml ##

进行个性化全局配置。

1.  `# All possible configuration.`
2.  `# For more see: http://jekyllrb.com/docs/configuration/`
3.  `destination: ./_site`
4.  `lsi: false`
5.  `port: 4000`
6.  `highligher: true`
7.  ``
8.  `# Build settings`
9.  `markdown: rdiscount`
10. `rdiscount:`
11. `extensions: [smart]`
12. ``
13. `# This is the default base url path.`
14. `BASE_PATH : /`
15. ``
16. `# Website title.`
17. `title : Bee Ant<small>Wongjorie's Blog</small>`
18. ``
19. ``# label listing. [create labels for category in folder `_label`]``
20. ``# social listing. [create labels for social in folder `_label`]``
21. `collections:`
22. `- category`
23. `- social`
24. ``
25. `# This is the default format.`
26. `# For more see: http://jekyllrb.com/docs/permalinks/`
27. `permalink: /:title`
28. ``
29. `# Pagination based on number of posts`
30. `# For more see: http://jekyllrb.com/docs/pagination/`
31. `#paginate: 20`
32. `#paginate_path: "page/:num"`
33. ``
34. `## Author Details ##`
35. `###########################`
36. `author:`
37. `# Info`
38. `name: Wong Jorie`
39. `role: Computer Programmer`
40. `email:`
41. `image: images/ba.jpg`
42. `# Social`
43. `github: joriewong`
44. `mail:`
45. `# About`
46. `about: ""`
47. `# copyright`
48. `copyright: "Some rights reserved © 2018 Wong Jorie."`
49. ``
50. `# Disable custom plugins,and ignore symbolic links..`
51. `# For more see: http://jekyllrb.com/docs/configuration/`
52. `safe: false`
53. `# Jekyll-sitemap auto generate`
54. `# For more see: https://github.com/jekyll/jekyll-sitemap`
55. `gems:`
56. `- jekyll-sitemap`

## \_category目录 ##

1、侧边栏中的博客分类分别对应一个`序号-同名.markdown`文件，套用格式如下。

1.  `---`
2.  `title: FE`
3.  `short-description: 前端`
4.  `permalink: FE`
5.  `---`

2、博客分类在项目根目录下有同名文件夹，其中包含`index.md`文件，套用格式如下。

1.  `---`
2.  `layout: default`
3.  `title: FE | 前端`
4.  `---`
5.  ``
6.  `<h1>前端</h1>`
7.  `<hr/>`
8.  ``
9.  `{% for category in site.categories %}`
10. `{% if category[0] == "FE" %}`
11. `{% for posts in category %}`
12. `{% for post in posts %}`
13. `{% if post.title %}`
14. ``
15. `{% if post.custom-link %}`
16. `<h2><a href="{ { post.custom-link }}"><small>{ { post.date | date: "%d %B, %Y" }}</small>{ { post.title }}</a></h2>`
17. `{% else %}`
18. `<h2><a href="{ { post.url }}"><small>{ { post.date | date: "%d %B, %Y" }}</small>{ { post.title }}</a></h2>`
19. `{% endif %}`
20. `<p>{ { post.excerpt | truncatewords:25 }}</p>`
21. `<hr/>`
22. ``
23. `{% endif %}`
24. `{% endfor %}`
25. `{% endfor %}`
26. `{% endif %}`
27. `{% endfor %}`

## \_layouts目录 ##

整体布局模板和博文默认模板(无需修改)。

1.  `---`
2.  `layout: default`
3.  `---`
4.  ``
5.  `<article>`
6.  `<h1>{ { page.title}}</h1>`
7.  `<hr/>`
8.  `{ { content}}`
9.  `</article>`

## \_posts目录 ##

每次撰写博文在此目录下新增.md文件即可，文件命名格式`年-月-日-标题名.md`，撰写时，文件头可配置博文分类，正文支持Markdown语法。

1.  `---`
2.  `layout: post`
3.  `title: Trim snippet`
4.  `categories: [Snippet]`
5.  `---`
6.  ``
7.  `正文部分`

## \_social目录 ##

侧边栏中的社交链接分别对应一个`序号-同名.markdown`文件，套用格式如下。

1.  `---`
2.  `title: Mail`
3.  `short-description: If you talk`
4.  `permalink: "mailto:JieYu.Wang@cisdi.com.cn"`
5.  `---`

## 首页、订阅配置 ##

### 首页配置 ###

首页图片为images下ba.jpg，可根据个人喜好随时更换，首页文字在项目根目录下index.html的`<pre>`标签中编辑。

1.  `---`
2.  `layout: default`
3.  `title: Bee Ant`
4.  `---`
5.  ``
6.  `<img src="{ { BASE_PATH }}{ { site.author.image}}" alt="color photo ftl"/>`
7.  ``
8.  `<pre>`
9.  ``
10. `Life isn't always what one likes.`
11. ``
12. `</pre>`

### 订阅配置 ###

项目根目录下`feed.xml`基本已完成RSS模板配置，只需变更一些个人信息即可。

1.  `<title>Bee Ant ~ Wongjorie's Blog</title>`
2.  `...`
3.  `<author>`
4.  `<name>Wong Jorie</name>`
5.  `<email></email>`
6.  `</author>`

# 演示效果 #

## 侧边栏 ##

![侧边栏][bLsyfzQjI14rLbc4tGB.png]

## 博文目录 ##

![博文目录][P8QWW4UUz2isT7dEeNO.png]

## 博文详情 ##

![博文详情][WDeZN0X9V06y2Djg1iw.png]

## 项目文件 ##

![项目结构][nEcjqnrFYOSRLIIG8BX.png]

代码下载地址：

http://www.demodashi.com/demo/13147.html

[mFYAae8g1nwyzKpeVzs.gif]: /images/20220525/9f8796bde22e4ddeb96f3f607737fde8.png
[https_rubyinstaller.org_downloads]: https://rubyinstaller.org/downloads/
[bLsyfzQjI14rLbc4tGB.png]: /images/20220525/fdd026ac5f02438387beadb81c868902.png
[P8QWW4UUz2isT7dEeNO.png]: /images/20220525/fd0f8cffb9414680bb07a79c82374456.png
[WDeZN0X9V06y2Djg1iw.png]: /images/20220525/0e8fd657ce73497e87b15b5a58f7d9e5.png
[nEcjqnrFYOSRLIIG8BX.png]: /images/20220525/9e33cd5e2ed24626979b50cb44ea04bb.png