Hexo + yilia 主題 +githubpages博客添加友言評論功能

前言

Hexo博客的Yilia主題中評論系統只提供了暢言、網易雲跟帖、多說和Disqus。
由於多說評論、網易雲跟帖已經關閉系統,暢言需要域名備案,而github是國外的,沒有備案,所以嘗試了其他第三方評論系統——友言。

友言使用極其簡單,本地成功實現,但是上傳上github後發現無法出現評論

在多次查找與嘗試下,終於成功,下面與大家分享我的方法。

歡迎關注我的博客:destiny'Note
本文引自:Hexo + yilia 主題 +githubpages博客添加友言評論功能
注意:本文是在前面都配置好的情況下進行的,如果最初並沒有配置好,請查看:
hexo+gitHubPages 快速搭建個人博客

一、註冊友言id

1. 註冊

友言官網上直接使用qq登錄,註冊成功直接出來代碼

1240

2. 獲取你的id

進入後臺管理,你會看到:


1240

獲取到你的id

二、博客文件配置

1. 創建uyan.ejs文件

hexo\themes\yilia\layout_partial\post\下新建一個uyan.ejs的文件
將上述代碼copy到該文件中。

2. 修改article.ejs文件

修改hexo\themes\yilia\layout\_partial\article.ejs,找到

<% if (!index && post.comments){ %>

在此下方添加下列代碼:

 <% if (theme.uyan){ %>
  <%- partial('post/uyan', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
    }) %>
  <% } %>

3. 修改yilia主題配置文件_config.yml

修改hexo\themes\yilia下的_config.yml,在空白處,添加如下配置:

uyan: '你的友言id'

注意:
要用引號包含你的id
uyan: 後面必須添加一個空格,這是Hexo博客的配置要求

這樣友言已經配置好了,重新編譯,運行:
hexo clean
hexo g
hexo s
訪問: http://localhost:4000
本地實現評論系統成功!

三、解決Github發生錯誤

上傳到github上後,打開你的github頁面,發現評論並沒有出現。按F12,發現報錯:

The page at 'https...' was loaded over HTTPS,
 but requested an insecure stylesheet 'http://..../css/1_6/background.css'. 
This request has been blocked; the content must be served over HTTPS.

原因:https下的http加載會被阻塞,也就是無法加載友言的那個js文件

查明之後,發現友言並不支持https,但是仍然有人實現了,並沒有詳細的解說。而我注意到域名的更改,如果改了域名,那麼就不是https下了。實踐證明,是可行的。

1. 域名註冊

這裏不詳細說明,沒有域名可自行百度:騰訊雲、阿里雲、萬網等註冊。
域名不貴,基本就幾塊、十幾塊一年,毫無問題

2. Github綁定域名

添加CNAME文件

注意,CNAME文件必須放進博客目錄source文件夾下,不然會被hexo clean命令清除

在文件內寫入你的域名,不加www

3. 域名解析

1240

按下圖添加記錄:


1240

現在基本已經成功,你可以訪問你的域名來查看你的博客

四、修改配置文件

查看你的博客後,你會發現,頭像無法顯示,鏈接發生錯誤的情況。

原因:
根鏈接發生錯誤,在不添加域名的時候,你的root會添加/倉庫名/,各種鏈接都會自動添加這個根,而在添加域名後,域名直接指向你的倉庫,此時鏈接仍然會自行添加根而發生鏈接錯誤。

博客目錄下的_config.yml文件

修改根爲'/'

root: /

主題目錄下的_config.yml文件

修改根同上,並去掉頭像等鏈接的倉庫名

此時就大功告成了!

參考

爲next添加友言評論支持
hexo yilia 添加友言評論支持
使用GitHub頁面的自定義域
github怎麼綁定自己的域名?

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