# 原创
： 为Jekyll博客添加小功能
# 为Jekyll博客添加小功能
## 为博客添加各种功能
### 1.关于Jekyll本身插件的安装
一共三种方式:
* 在根目录下新建`_plugins`文件夹, 然后把对应的`*.rb`插件文件放进去就行了;
* 在`_config.yml`文件中增加一个`gems`关键字, 然后把要引用的插件用数组形式存储其中即可;
* 在Gemfile中添加相关的插件;
三种方法都可以, 甚至完全可以同时使用~
### 2.用kramdown自动生成目录树
```
* 目录
{:toc}
```
第一行必须加！
### 3.添加标签归档页
```
---
layout: post
title: 标签
permalink: /tags/
---
<ul class="tags">
{% for tag in site.tags %}
<li>
<a href="#{{ tag[0] }}">{{ tag[0] }}</a> <sup>{{ tag[1].size }}</sup>
</li>
{% endfor %}
</ul>
<ul class="listing">
{% for tag in site.tags %}
<li class="listing-seperator" id="{{ tag[0] }}">{{ tag[0] }}</li>
{% for post in tag[1] %}
<li class="listing-item">
<time datetime="{{ post.date | date:"%Y-%m-%d" }}">{{ post.date | date:"%Y-%m-%d" }}</time>
<a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>
</li>
{% endfor %}
{% endfor %}
</ul>
```
### 4.添加日期归档页
```
---
layout: post
permalink: /archives/
title: "归档"
---
<ul>
{% for post in site.posts %}
{% unless post.next %}
<h2>{{ post.date | date: '%Y年' }}</h2>
{% else %}
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
{% if year != nyear %}
<h2>{{ post.date | date: '%Y年' }}</h2>
{% endif %}
{% endunless %}
<li>{{ post.date | date:"%Y年%m月%d日：" }} <a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
```
### 5.添加网易云音乐插件
```
<!-- cloud music -->
<!-- auto=1 可以控制自动播放与否，当值为 1 即打开网页就自动播放，值为 0 时需要访客手动点击播放 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id={{ page.music-id }}&auto=0&height=66">
</iframe>
```
```
<!-- 在正文开头添加网易云音乐插件 -->
{% if page.music-id %}
{% include cloud-music.html %}
{% endif %}
{{ content }}
```
### 6.添加站点访客数及文章浏览量
```
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
```
```
<!-- pv的方式，单个用户连续点击n篇文章，记录n次访问量 -->
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
```
```
<!-- uv的方式，单个用户连续点击n篇文章，只记录1次访客数 -->
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>
```
1. 显示单页面访问量
```
<!-- pv的方式，单个用户点击1篇文章，本篇文章记录1次阅读量 -->
<span id="busuanzi_container_page_pv">
本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>
```
### 7.添加中英文字数统计
英文字数统计
中文字数统计
### 8.添加评论
使用[intensedebate](https://intensedebate.com/)，注册账号什么得不说了，将得到的html文件，即`intensedebate-comments.html`保存到`include`目录下，在`post.html`正文结束处添加：
```
{% if site.intensedebate_comments %}
{% include intensedebate-comments.html %}
{% endif %}
```
### 9.添加动态网站运行时间
```
<!-- 计算网站运行时间 -->
<span style="font-size:12px;"><script language=JavaScript>
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {
time[4] = second;
}
return time;
}
</script>
<!-- 动态显示网站运行时间 -->
<script type="text/javascript" language="javascript">
function setTime() {
var create_time = Math.round(new Date(Date.UTC(2018, 05, 05, 0, 0, 0)).getTime() / 1000);
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp - create_time));
currentTimeHtml = '本站已安全运行' + currentTime[0] + '年' + currentTime[1] + '天' + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4] + '秒';
document.getElementById("htmer_time").innerHTML = currentTimeHtml;
}
setInterval(setTime, 1000);
</script></span>
```
>
添加百度统计和Google分析以及站内搜索引擎，甚至自定义搜索引擎，以及更多细节操作见个人主页下的链接