解決 Hexo Comment !

1. 評論 Widget 設定
1. 1.1. 為什麼會有這篇文章
2. 1.2. 開始正文
  1. 1.2.1. 使用 Disqus
  2. 1.2.2. 更多
2. 最後

為什麼會有這篇文章

你的主題可能沒有 recent_comment.ejs
Comment 可能是 多說Duoshuo 而你不喜歡

開始正文

使用 Disqus

請到 Disqus 申請帳號，並且記住你的 shortname
- 到本機下，修改本機目錄下的 _confid.yml 在 disqus_shortname 貼上自己的 shortname
- 接著，就是確認運行成功。
  1
  2
  # Disqus
  disqus_shortname: morris1028

Widget 側欄的近期評論，當然還有熱門、聚合 … 等。請參考這裡

themes/xxxx/layout/_widget/recent_comment.ejs

<div id="recentcomments" class="dsq-widget">
    <p class="asidetitle">Recent Comments</p>
        <script type="text/javascript" src="http://morris1028.disqus.com/recent_comments_widget.js?num_items=10&hide_avatars=1&avatar_size=32&excerpt_length=100&hide_mods=0"></script>
</div>

關於主題可能沒有 comment.ejs，請在目錄下增加代碼

themes/xxxx/layout/_partial/comment.ejs

<% if (page.comments){ %>
<section id="comment">
  <h1 class="title"><%= __('comment') %></h1>
  <% if (theme.comment_provider == "facebook") {
      if (theme.facebook) { %>
      <%- partial('_partial/facebook_comment', {fbConfig: theme.facebook}) %>
      <% } %>
  <% } else if(config.disqus_shortname) { %>
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
  <% } %>
</section>
<% } %>

萬一還是啟動不成功，請查閱 after_footer.ejs 是否具有以下代碼

themes/xxxx/layout/_partial/after_footer.ejs

    <% if (config.disqus_shortname){ %>
    <script type="text/javascript">
    var disqus_shortname = '<%= config.disqus_shortname %>';
    (function(){
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }());
    </script>
<% } %>

評論 CSS 設置，請到 comment.styl 查閱

themes/xxxx/source/css/_partial/comment.styl

#comment
  padding 20px
  background #272822
  box-shadow 1px 2px 3px #ddd
  margin-bottom 50px
  .title
    font-weight normal
    margin-bottom 15px

最後再確認一下，有載入 comment 的 CSS
theme/xxxx/source/_partial/css/style.styl
1
@import '_partial/comment'

其實差不多了，想必也能配置成功。

關於近期文章 widget

themes/xxxx/layout/_widget/recent_comment.ejs

<% if (site.posts.length){ %>
<div class="categorieslist">
    <p class="asidetitle">Recents</p>
        <ul>
          <% site.posts.sort('date', -1).limit(5).each(function(post){ %>
            <li>
              <a href="<%- config.root %><%- post.path %>"><%= post.title || '(no title)' %></a>
            </li>
          <% }) %>
        </ul>
</div>
<% } %>

最後在 themes/xxxx/_config.yml 加入您的 widget

themes/xxxx/_config.yml

#### Widgets
widgets: 
- recent_posts
- category
- archive
- tagcloud 
- recent_comment
- links
- rss

最後

非常感謝您的閱讀

Morris' Blog

解決 Hexo Comment !

contents

評論 Widget 設定

為什麼會有這篇文章

開始正文

使用 Disqus

更多

最後