Jekyll发布文章+评论模块

我想成为聪明的人，所以我在学习。

前言

在搭建好博客之后，又给自己增加的评论模块，还建了一个我自己比较喜欢关于页面，简单地介绍了下自己。

参考

Jekyll + Github Pages构建个人技术博客

写作环境

• 使用Macbook，我一般是使用Mou写，实时预览功能很好用,Help -> Mou Help打开语法提示
• 在Windows下，我直接在简书上写，也有实时预览效果，而且会实时保存，需要联网

Markdown

• Markdown上手还是很快的，使用简便，语法简单Markdown语法介绍，写一篇练手文章就差不多能掌握了

文字发布

• 文章标题遵守YYYY-MM-DD-文章标题.markdown格式，.md结尾也是可以的
• 文字顶部加入：
  <pre>
  <code>---</code>
  title: 这个是标题
  date: 2016-04-16 11:11:11.000000000 +09:00
  tags: Jekyll
  author: xx
  layout: post
  <code>---</code>
  </pre>
• 按照上面指定格式保存好文章之后，放进_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，花费了大量时间去找对应的参数，不放弃不将就，最终全部修改成自己希望看到的样子。