csdn_spider/blog/ds19991999/原创-- 为Jekyll博客添加小功能.md

5.4 KiB
Raw Blame History

原创

为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注册账号什么得不说了将得到的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分析以及站内搜索引擎甚至自定义搜索引擎以及更多细节操作见个人主页下的链接