概述

详细

效果

环境配置

环境

• 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
4. $ gem install Jekyll
5. $ 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. # Build settings
8. markdown: rdiscount
9. rdiscount:
10. extensions: [smart]
11. # This is the default base url path.
12. BASE_PATH : /
13. # Website title.
14. title : Bee Ant<small>Wongjorie's Blog</small>
15. # label listing. [create labels for category in folder `_label`]
16. # social listing. [create labels for social in folder `_label`]
17. collections:
18. - category
19. - social
20. # This is the default format.
21. # For more see: http://jekyllrb.com/docs/permalinks/
22. permalink: /:title
23. # Pagination based on number of posts
24. # For more see: http://jekyllrb.com/docs/pagination/
25. #paginate: 20
26. #paginate_path: "page/:num"
27. ## Author Details ##
28. ###########################
29. author:
30. # Info
31. name: Wong Jorie
32. role: Computer Programmer
33. email:
34. image: images/ba.jpg
35. # Social
36. github: joriewong
37. mail:
38. # About
39. about: ""
40. # copyright
41. copyright: "Some rights reserved © 2018 Wong Jorie."
42. # Disable custom plugins,and ignore symbolic links..
43. # For more see: http://jekyllrb.com/docs/configuration/
44. safe: false
45. # Jekyll-sitemap auto generate
46. # For more see: https://github.com/jekyll/jekyll-sitemap
47. gems:
48. - 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. <h1>前端</h1>
6. <hr/>
7. {% for category in site.categories %}
8. {% if category[0] == "FE" %}
9. {% for posts in category %}
10. {% for post in posts %}
11. {% if post.title %}
12. {% if post.custom-link %}
13. <h2><a href="{{ post.custom-link }}"><small>{{ post.date | date: "%d %B, %Y" }}</small>{{ post.title }}</a></h2>
14. {% else %}
15. <h2><a href="{{ post.url }}"><small>{{ post.date | date: "%d %B, %Y" }}</small>{{ post.title }}</a></h2>
16. {% endif %}
17. <p>{{ post.excerpt | truncatewords:25 }}</p>
18. <hr/>
19. {% endif %}
20. {% endfor %}
21. {% endfor %}
22. {% endif %}
23. {% endfor %}

_layouts目录

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

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

_posts目录

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

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

_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>
9. Life isn't always what one likes.
10. </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