基于Jekyll的博客模板代码地址如下：
效果
环境配置
环境
Windows 10
Git Bash
安装rubyrubyinstaller安装
下载rubyinstaller安装： (推荐Ruby 2.2.6版本)
$ ruby -v
安装DevKit
下载：，解压完成后进⼊⽬录，init初始化，review检查，成功添加ruby⽬录后再install
$ ruby dk.rb init
$ ruby dk.rb review
$ ruby dk.rb install
安装Jekyll
切换gem镜像后再安装Jekyll（需要安undler）
$ gem sources --add / --remove /
$ gem sources -l
$ gem install Jekyll
$ gem install bundler
新建博客
$ jekyll new ba-blog
$ jekyll server
模板套⽤
_l
进⾏个性化全局配置。
# All possible configuration.
# For more see: jekyllrb/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: jekyllrb/docs/permalinks/
permalink: /:title
# Pagination based on number of posts
# For more see: jekyllrb/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: jekyllrb/docs/configuration/
safe: false
# Jekyll-sitemap auto generate
# For more see: github/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>{{ pt | 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"
---
⾸页、订阅配置
⾸页配置
⾸页图⽚为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>
订阅配置
项⽬根⽬录下l基本已完成RSS模板配置，只需变更⼀些个⼈信息即可。
<title>Bee Ant ~ Wongjorie's Blog</title>
...
<author>
<name>Wong Jorie</name>
<email></email>
</author>
演⽰效果
侧边栏
博⽂⽬录
博⽂详情
项⽬⽂件
基于Jekyll的博客模板
代码地址如下：
注：本⽂著作权归作者，由demo⼤师代发，拒绝转载，转载需要作者授权
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
linux下查看已安装的软件与卸载
« 上一篇
Windows环境部署Redis集
下一篇 »
发表评论