yelee主题安装gitalk(转载+整理)
這篇記錄是在參考文末的三個鏈接的基礎上,在yelee主題上驗證通過的。
##########################################
這里進行注冊:
https://github.com/settings/applications/new
?
注冊后會生成如圖所示的ID、Secret 【下文有用】
如上圖,以小編的申請為例:
- Application name填入喜歡的應用名稱。
- Homepage URL填入域名。
- Application description填入應用的描述。
- Authorization callback URL 填入域名。
然后,Register application,轉到應用頁面。在該頁面,可以看到Client ID和Client Secret。
使用配置
以yelee主題為例。
1、下載gitalk項目
git clone https://github.com/gitalk/gitalk.git
2、拷貝gitalk/dist/目錄下的gitalk.css和gitalk.min.js到yelee/source/lib/gitalk目錄。
3、在yelee/layout/_partial/post目錄下,新建gitalk.ejs,內容為:
?
<div class="gitalk"><div id="gitalk-container"></div><script type="text/javascript">const gitalk = new Gitalk({clientID: '<%=theme.gitalk.client_id%>',clientSecret: '<%=theme.gitalk.client_secret%>',repo: '<%=theme.gitalk.repo%>',owner: '<%=theme.gitalk.owner%>',admin: ['<%=theme.gitalk.admin%>'],id: location.pathname, // Ensure uniqueness and length less than 50distractionFreeMode: false // Facebook-like distraction free mode})gitalk.render('gitalk-container')</script> </div>?
?
4、編輯yelee/layout/_partial/article.ejs,添加:
<% if (!index && theme.gitalk.enable && post.comments){ %> <%- partial('post/gitalk', {key: post.slug,title: post.title,url: config.url+url_for(post.path)}) %> <% } %>?
5、編輯yelee/_config.yml,添加:
?
6、編輯yelee/layout/_partial/head.ejs,添加:
<% if (theme.gitalk.enable){ %><link rel="stylesheet" href="/lib/gitalk/gitalk.css"><script src="/lib/gitalk/gitalk.min.js"></script> <% } %>至此,配置gitalk評論插件完成。
最終效果如下圖:
?
?
#################################################################33
關于Error:Not found問題,解決方案:
一、
網上說法較多的是:
repo: apppleyuchi.github.io
這里不要寫成鏈接
二、
我碰到了另外一種情況,因為我看了好幾個博客,所以每個博客的變量定義都不一樣,導致一直出現這個問題,好了,說重點:
yelee/config.yml中的變量名稱例如:
yelee/layout/_partial/post/gitalk.ejs中涉及到的變量(例如owner、admin等)
必須在yelee/_config.yml中存在,且這兩個文件中的這些變量命名必須一致,否則就會出現上面那個錯誤。
?
很顯然,如果你多看幾個博客,每個博客對變量的定義都不一樣,
你東拷貝一點,西拷貝一點,導致上述兩個文件中的變量名稱不一致,就會出現這個問題。
上述內容絕大部分取自于[1]
?
?
參考鏈接:
[1]https://www.voidking.com/dev-hexo-gitalk-comment-plugin/
[2]https://blog.csdn.net/lzw2016/article/details/83244906
[3]https://www.jianshu.com/p/656e6101bf0f
?
總結
以上是生活随笔為你收集整理的yelee主题安装gitalk(转载+整理)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hexo的yelee主题修改左上角的博客
- 下一篇: yelee主题中的Busuanzi网站统