hexo next主題深度優化(五)，評論系統換成gittalk

文章目錄

• 背景：
• 開始：
• 新建comments_git.js
• 找到comments.swig在最後一個endif以前
• 引入代碼
• pjax加入gitalk
• 遇到的問題
• 全部的頁面共享的一個評論issue
• 本地4000啓動報錯401 沒有權限
• 未找到相關的Issues 進行評論，請聯繫xxx初始化建立
• 發現本身的留言板明明評論了卻不顯示
• gitalk本身的博客首次須要登陸github進行初始化，初始化的時候跳轉到了blog首頁。
• gitalk本身的博客登陸成功後報錯 Error: Validation Failed.
• 若是出現Error: Container not found, document.getElementById: gitalk-container
• GET https://api.github.com/user 401 (Unauthorized)
• vue-router.esm.js?8c4f:1905 ReferenceError: Gitalk is not defined
• NetWork Error
• 2019.1.30更新
• GET https://api.github.com/user 401 (Unauthorized)
• Mixed Content: The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

我的博客： https://mmmmmm.me
源碼： https://github.com/dataiyangu/dataiyangu.github.io

背景：

以前一直用的是來必力的評論系統，還不錯，可是由於我加入了pjax，能力有限，雖然降來必力的js重現，可是每次返回到首頁都會報錯id notfound ，閱讀了來必力的api，全是並無找到不少好的答案。遂換成gittalk的評論系統。

開始：

新建comments_git.js

注：配置文件中的詳細，本身網上查查。

if($('#gitalk-container').length>0){
  var gitalk = new Gitalk({

    // gitalk的主要參數
clientID: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `Github 倉庫名`,//存儲你評論 issue 的 Github 倉庫名（建議直接用 GitHub Page 的倉庫名）
owner: 'Github 用戶名',
admin: ['Github 用戶名'], //這個倉庫的管理員，能夠有多個，用數組表示，通常寫本身,
id: 'window.location.pathname', //頁面的惟一標識，gitalk 會根據這個標識自動建立的issue的標籤,咱們使用頁面的相對路徑做爲標識


  });
  gitalk.render('gitalk-container');

}

找到comments.swig在最後一個endif以前

（目錄：themes/next/layout/_partials/comments.swig）

<div id="gitalk-container"></div>

引入代碼

_layour.swig

<script src="/js/src/pjax/comments/comments.gitalk.js"></script>

在這裏引入而再也不require引入的緣由，就像個人另外一篇文章，define只能定義一次，引不進去。
main.js

//
require.config({
  paths: {

    "music": "/dist/music",
    "aplayer": "/js/src/aplayer",
    "backgroudLine": "/js/src/backgroudLine",
    "category": "/js/src/category",
    "jquery.share.min":"/js/src/pjax/share/jquery.share.min",
    /*不顯示圖標的話替換fonts*/
    "share":"/js/src/pjax/share",
    "css":"/js/src/pjax/css",
    "comments":"/js/src/pjax/comments_git",
  },

  shim: {
    'share': {
      deps: [
        'css!/js/src/pjax/share/share.min','jquery.share.min'
      ]
    },
    'comments': {
      deps: [
        'css!https://unpkg.com/gitalk/dist/gitalk'
      ]
    }
  }
});
require(['backgroudLine','music','aplayer','category','jquery.share.min','share','css','comments'], function (){
});

若是沒有用require的直接在_layout.swig

<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
 <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
 //再引入comments_git.js
 <script src="xxxxxxxxxx/comments_git.js">

pjax加入gitalk

一樣從新調用comments_git.js便可

遇到的問題

全部的頁面共享的一個評論issue

這個好像到如今的版本，人家已經優化的很好了。
注意上年的comments_git.js
中的配置id 改成location.pathname，即

id: location.pathname

意思是，根據目錄建立不一樣的iss

本地4000啓動報錯401 沒有權限

push到遠端就沒問題了。

未找到相關的Issues 進行評論，請聯繫xxx初始化建立

這個issue每次須要管理員，即做者你建立，怎麼建立呢？在你本身的博客進入評論，登陸本身的github帳號，訪問沒有建立issues的博客，就初始化了。
這樣豈不是很麻煩？
解決博客：https://link.jianshu.com/?t=https%3A%2F%2Fdraveness.me%2Fgit-comments-initialize
這個方法，我試過，沒有成功，時間有限，就不深追了~
tips：裏面的sitmap地圖，若是是next地圖在網址:https://你的博客地址/sitemap.xml
之後有時間或者能力容許的話，可能會寫一個相似爬蟲的腳本，完成這一操做~

發現本身的留言板明明評論了卻不顯示

緣由：本身加入了pjax致使
手動刷新的地址是：https://mmmmmm.me/message/
pjax刷新的地址是：https://mmmmmm.me/message
由於gitalk建立issues是根據地址來建立的，因此不一樣的地址固然issues是不同的啊。

gitalk本身的博客首次須要登陸github進行初始化，初始化的時候跳轉到了blog首頁。

緣由：
md文件的名字不能中間和結尾不能有空格，尤爲是結尾
md文件的名字不能有特殊符號
md文件的名字不能有漢字，漢字會轉碼，最好的英文
也可能和tittle有關，不過改了md以後應該就沒問題了

gitalk本身的博客登陸成功後報錯 Error: Validation Failed.

md文件的名字太長（根本緣由）致使，由於issus是根據md文件名字來建立的
注意點:
1.md文件的名字不能太長，最好用英文，由於中文轉碼後會變長不少
2.通常md的文件名字是顯示在地址欄的，具體的文章標題在md文件裏面的tittle裏面設置成漢字就好了，並不影響閱讀。

若是出現Error: Container not found, document.getElementById: gitalk-container

確保本地啓動沒這個報錯，多是service 緩存的問題
也有多是真的沒有初始化gitalk-container div
爲解決這個問題，對已經scriptGitalk的頁面從新創建gitalk-container div

GET https://api.github.com/user 401 (Unauthorized)

無影響

我本人遇到了，是由於原來網站是http的後來強制變成了https issue須要從新初始化。我從新建了gitalk服務，而且刪掉了原來的issue

vue-router.esm.js?8c4f:1905 ReferenceError: Gitalk is not defined

js包還在下載中，找不到Gitalk

NetWork Error

一開始還覺得是js加載順序的問題（因而把拖了快一個月問題3的bug修了）
後來才發現那段時間GitHub Api不穩定 你頻繁請求的時候 是會出現Network Error的狀態
這個就無解了
以上三個錯誤摘自：https://wyydsb.com/javaScript/comment.html

2019.1.30更新

遇到新的錯誤

GET https://api.github.com/user 401 (Unauthorized)

無影響

我本人遇到了，是由於原來網站是http的後來強制變成了https issue須要從新初始化。我從新建了gitalk服務，而且刪掉了原來的issue，從新創建

Mixed Content: The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

描述：pjax在本地完美實現，可是經過域名訪問，發現其餘的pjax還好，可是在轉到message（留言板）頁面的時候，仍是會所有刷新，pjax失效了，經過打開調試功能發現報錯以下：

Mixed Content: The page at 'https://cootrandesenv.tjdft.jus.br/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://cootrandesenv-api.tjdft.jus.br/api/v1.0/contratos/'. This request has been blocked; the content must be served over HTTPS.

從字面上理解是個人這個頁面是https的，可是由於我博客中加入了pjax，在pjax中從新定向調用了http的請求，因此是不成功的，可是我發現個人gitalk中並無調用相關的東西呀。最後終於經過
https://discuss.emberjs.com/t/mixed-content-the-page-was-loaded-over-https-but-requested-an-insecure-xmlhttprequest-endpoint/13876
這篇文章找到了答案。很是感謝！
大概意思就是在訪問的路徑中「/」反斜槓的問題。

menu:
  home: / || home
  about: /about/ || user
  top: /top/ || signal
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  message: /message/ || heart

在hexo next主題下的config文件中有關於跳轉頁面的配置信息，最後一行中的message: /message/ || heart 我原來寫的是message: /message || heart，因此默認請求的是https://mmmmmm.me/message 這個時候自動重定向到了http://mmmmmm.me/message/ ,因此出現了上面的錯誤。
至此完美解決。

這裏末尾不加/ 這個反斜槓，還會致使一個問題就是由於gitalk的issue是根據訪問的路徑名字來進行建立的，發現原本評論了的再次訪問沒有了，就是由於，在缺乏了/的路徑裏面進行了評論，下次訪問的時候系統加上了/，因此數據沒有對應上。