爲你的jekyll博客添加gitalk評論插件吧!

首先到你的github賬戶設置中的最下面開發者設置中申請OAuth Apps,申請後會有clientID和clientSecret兩個很長的數,申請時需要注意的是:Authorization callback URL的填寫 。

在這裏插入圖片描述

之後在你的博客的相應位置,一般爲在每個 文章下面添加,所以在/_layout/post.html中 添加以下代碼 :

首先在HTML頭引入以下js和CSS,如果寫在下面容易和你的其他衝突。此方式爲2020年2月可用。

<!-- Link Gitalk 的支持文件 -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script> 

爲了防止網絡問題,這裏你也可以按以下方式引入其中分別打開上面對應文件的連接,https://unpkg.com/gitalk/dist/gitalk.csshttps://unpkg.com/gitalk@latest/dist/gitalk.min.js應該是一堆代碼,沒關係,郵件保存後即可,按照下面的路徑放入的博客原文檔中。這種方式在依賴文件升級後你需要重新下載放置,除非你一直用這個版本。

<link rel="stylesheet" href="/assets/css/gitalk.css">
<script src="/assets/js/gitalk.min.js"></script>

將以下代碼放置到需要顯示評論插件的地方

  <!-- Gitalk 評論 start  -->
  <div id="gitalk-container"></div>
      <script type="text/javascript">
      var title = location.pathname.substr(0, 50);//截取路徑的前50個字符作爲標識符
      var gitalk = new Gitalk({

      // gitalk的主要參數
          clientID: `這裏插入你申請到的clientID `,
          clientSecret: `這裏插入你申請到的clientSecret`,
          repo: `你的博客倉庫`,
          owner: '就是你了',
          admin: ['你的github賬戶名,不是暱稱'],
          id: title,//因爲這裏不能超過50字符,所以做了處理,當超過50時自動截取前50
     
      });
      gitalk.render('gitalk-container');
      </script>
  <!-- Gitalk end -->

通過 以上方式 可以在你的博客相應位置添加gitalk評論,即爲 每篇 文章新建一個issues,這時候每篇文章都需要初始化,但是當你 瀏覽器登陸你的帳戶時可以在預覽網頁的時候直接初始化建立新的issue。關於報錯處理部分其他大佬講的很好。

歡迎大家到我的博客小站參觀

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章