基於Jekyll的博客模板

代碼地址如下：
http://www.demodashi.com/demo/13147.html

效果

環境配置

環境

• 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 &#169; 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 | 前端
---

<h1>前端</h1>
<hr/>

{% 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:[e-mail]"
---

首頁、訂閱配置

首頁配置

首頁圖片為images下ba.jpg，可根據個人喜好隨時更換，首頁文字在項目根目錄下index.html的<pre>標簽中編輯。

---
layout: default
title: Bee Ant
---
<!-- 490 x 490 pixels -->
<img src="{{ BASE_PATH }}{{ site.author.image}}" alt="color photo ftl"/>
<!-- <p>Can't find your topic? Use <a href="{{ site.BASE_PATH }}search">Search Page</a></p> -->
<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>

演示效果

側邊欄

博文目錄

博文詳情

項目文件

基於Jekyll的博客模板

代碼地址如下：
http://www.demodashi.com/demo/13147.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權