Jekyll發佈文章+評論模塊

原文鏈接，我的新博客

我想成爲聰明的人，所以我在學習。

前言

在搭建好博客之後，又給自己增加的評論模塊，還建了一個我自己比較喜歡關於頁面，簡單地介紹了下自己。

參考

Jekyll + Github Pages構建個人技術博客

寫作環境

• 使用Macbook，我一般是使用Mou寫，實時預覽功能很好用,Help -> Mou Help打開語法提示
• 在Windows下，我直接在簡書上寫，也有實時預覽效果，而且會實時保存，需要聯網

Markdown

• Markdown上手還是很快的，使用簡便，語法簡單Markdown語法介紹，寫一篇練手文章就差不多能掌握了

文字發佈

• 文章標題遵守YYYY-MM-DD-文章標題.markdown格式，.md結尾也是可以的
• 文字頂部加入：

---
title: 這個是標題  
date: 2016-04-16 11:11:11.000000000 +09:00  
tags: Jekyll
author: xx
layout: post  
---

• 按照上面指定格式保存好文章之後，放進_posts文件夾裏
• 執行$ bundler exec jekyll serve後就能在博客裏看到自己的文字了

增加評論模塊

• 打開_config.yml編輯：

# Comment
comment:
 duoshuo: 約定的Name

• 在多說註冊好帳號，註冊好之後點擊右上角 用戶名->工具->獲取代碼->複製代碼
• 打開_includes文件夾，編輯comments.html文件，輸入複製代碼，例如：

# 如果自動生成了duoshuo相關代碼 則不需要添加

<section class="post-comments">    
   {% if site.comment.disqus %}
    <div id="disqus_thread"></div>
    <script>
    var disqus_config = function () {
        this.page.url = "{{ page.url | prepend: site.baseurl | prepend: site.url }}";
        this.page.identifier = "{{ page.url }}";
    };
    var disqus_shortname = '{{ site.comment.disqus }}';
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
    <noscript>要查看<a href="http://disqus.com/?ref_noscript"> Disqus </a>評論，請啓用 JavaScript</noscript>
  {% elsif site.comment.duoshuo %}
    <div class="ds-thread" data-thread-key="{{ page.url }}" data-title="{{ page.title }}" data-url="{{ page.url | prepend: site.baseurl | prepend: site.url }}"></div>
    <script type="text/javascript">
        var duoshuoQuery = {short_name:"{{ site.comment.duoshuo }}"};
        (function() {
            var ds = document.createElement('script');
            ds.type = 'text/javascript';ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
    </script>
  {% endif %}

• 重新打開文章詳情頁，底部就出現評論模塊啦！

結語

在修改關於我頁面UI的時候，因爲不懂CSS，花費了大量時間去找對應的參數，不放棄不將就，最終全部修改成自己希望看到的樣子。