基于Jekyll的博客模板

立即下载用AI写一个

发布时间：2018-05-15

1人 | 浏览：2723次 | 收藏 |

技术：Jekyll+Markdown

运行环境：Ruby+Jekyll

概述

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

详细

# 效果

![效果图](/contentImages/image/20180514/mFYAae8g1nwyzKpeVzs.gif "效果图")

# 环境配置

## 环境

- Windows 10
- Git Bash

## 安装ruby

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

```
$ ruby -v
```

## 安装DevKit

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

```
$ ruby dk.rb init
$ ruby dk.rb review
$ ruby dk.rb install
```

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

```
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org

$ gem install Jekyll
$ gem install bundler
```

## 新建博客

```
$ jekyll new ba-blog
$ jekyll server
```

# 模板套用

## _config.yml

进行个性化全局配置。

```
# All possible configuration.
# For more see: http://jekyllrb.com/docs/configuration/
destination: ./_site
lsi:         false
port:        4000
highligher:  true

# Build settings
markdown:    rdiscount
rdiscount:
  extensions: [smart]

# This is the default base url path.
BASE_PATH : /

# Website title.
title : Bee Ant<small>Wongjorie's Blog</small>

# label listing. [create labels for category in folder `_label`]
# social listing. [create labels for social in folder `_label`]
collections:
  - category
  - social

# This is the default format.
# For more see: http://jekyllrb.com/docs/permalinks/
permalink: /:title

# Pagination based on number of posts
# For more see: http://jekyllrb.com/docs/pagination/
#paginate: 20
#paginate_path: "page/:num"

## Author Details ##
###########################
author:
# Info
  name: Wong Jorie
  role: Computer Programmer
  email: 
  image: images/ba.jpg
# Social
  github: joriewong
  mail: 
#  About
  about: ""
# copyright
  copyright: "Some rights reserved © 2018 Wong Jorie."

# Disable custom plugins,and ignore symbolic links..
# For more see: http://jekyllrb.com/docs/configuration/
safe:    false
# Jekyll-sitemap auto generate
# For more see: https://github.com/jekyll/jekyll-sitemap
gems:
  - jekyll-sitemap

```

## _category目录

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

```
---
title: FE
short-description: 前端
permalink: FE
---
```
2、博客分类在项目根目录下有同名文件夹，其中包含`index.md`文件，套用格式如下。

```
---
layout: default
title: FE | 前端
---

{% for category in site.categories %}
{% if category[0] == "FE" %}
    {% for posts in category %}
    {% for post in posts %}
{% if post.title %}

{% if post.custom-link %}
<h2><a href="{{ post.custom-link }}"><small>{{ post.date | date: "%d %B, %Y" }}</small>{{ post.title }}</a></h2>
		{% else %}
<h2><a href="{{ post.url }}"><small>{{ post.date | date: "%d %B, %Y" }}</small>{{ post.title }}</a></h2>
		{% endif %}
<p>{{ post.excerpt | truncatewords:25 }}</p>
<hr/>

{% endif %}
   {% endfor %}
   {% endfor %}
{% endif %}
{% endfor %}
```

## _layouts目录

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

```
---
layout: default
---

<article>
<h1>{{page.title}}</h1>
<hr/>
{{content}}
</article>
```

## _posts目录

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

```
---
  layout: post
  title: Trim snippet
  categories: [Snippet]
---

正文部分

```

## _social目录

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

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

## 首页、订阅配置

### 首页配置

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

```
---
layout: default
title: Bee Ant
---

<img src="{{ BASE_PATH }}{{ site.author.image}}" alt="color photo ftl"/>

<pre>

Life isn't always what one likes.

</pre>
```

### 订阅配置

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

```
<title>Bee Ant ~ Wongjorie's Blog</title>
...
<author>
   <name>Wong Jorie</name>
   <email></email>
 </author>
```

# 演示效果

## 侧边栏

![侧边栏](/contentImages/image/20180514/bLsyfzQjI14rLbc4tGB.png "侧边栏")

## 博文目录

![博文目录](/contentImages/image/20180514/P8QWW4UUz2isT7dEeNO.png "博文目录")

## 博文详情

![博文详情](/contentImages/image/20180514/WDeZN0X9V06y2Djg1iw.png "博文详情")

## 项目文件

![项目结构](/contentImages/image/20180514/nEcjqnrFYOSRLIIG8BX.png "项目结构")

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

基于Jekyll的博客模板

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子