基于Jekyll的博客模板

概述

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

详细

效果

环境配置

环境

• Windows 10
• Git Bash

安装ruby

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

1. $ ruby -v

安装DevKit

下载DevKit.exe：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
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
8. # Build settings
9. markdown: rdiscount
10. rdiscount:
11. extensions: [smart]
13. # This is the default base url path.
14. BASE_PATH : /
16. # Website title.
17. title : Bee Ant<small>Wongjorie's Blog</small>
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
25. # This is the default format.
26. # For more see: http://jekyllrb.com/docs/permalinks/
27. permalink: /:title
29. # Pagination based on number of posts
30. # For more see: http://jekyllrb.com/docs/pagination/
31. #paginate: 20
32. #paginate_path: "page/:num"
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."
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. ---
6. <h1>前端</h1>
7. <hr/>
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 %}
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/>
23. {% endif %}
24. {% endfor %}
25. {% endfor %}
26. {% endif %}
27. {% endfor %}

_layouts目录

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

1. ---
2. layout: default
3. ---
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. ---
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. <!-- 490 x 490 pixels -->
6. <img src="{{ BASE_PATH }}{{ site.author.image}}" alt="color photo ftl"/>
7. <!-- <p>Can't find your topic? Use <a href="{{ site.BASE_PATH }}search">Search Page</a></p> -->
8. <pre>
10. Life isn't always what one likes.
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>

演示效果

侧边栏

博文目录

博文详情

项目文件

代码下载地址：

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