NO IMAGE

一、前言

經過一天的部署環境,從升級npm、下載hexo,從中經歷了各種磨難,今天終於把個人部落格建立起來了,參觀傳送門:永無島的個人部落格

不過我不想講如何搭建hexo部落格,網上有一大推教程,給個傳送門:如何搭建hexo個人部落格

作為一個部落格網站,怎麼能沒有跟各位互動呢,而github是一個純靜態的網頁部落格,無法設定評論,所以就只有用其它網站的外掛了。聽網上說之前githubpage很多人的評論系統是用的多說,不過最近多說網站關閉,導致很多人沒有辦法使用評論,而友言又因為是http協議不支援https的github部落格,別擔心,還有一個替代品,那就是暢言。

二、註冊登入暢言

網上搜尋暢言,可以直接傳送門:http://changyan.kuaizhan.com/

註冊暢言

註冊完成後還會有一大堆初始化,有個需要注意的地方,暢言是需要備案的,不備案會有15天的試用期,現在我們不管,點選下圖示註的地方,後面我會介紹怎麼通過備案。
初始化
其它可以參考我寫的。

三、插入程式碼

接下來就是程式碼的插入了,我用的是yelee的主題,所以就用這個作為例子。
1. 在\themes\hexo-theme-yelee\layout_partial\comments資料夾下建立一個changyan.ejs的檔案,檔案裡的程式碼參考在你暢言的管理頁有。
檔案建立

<!--PC版-->
<div id="SOHUCS" ></div>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: '***',
conf: '***''
});
</script>

這是我暢言網站建議我的程式碼

<section class="changyan" id="comments">    
<div id="SOHUCS"></div>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
var loadComment = function(){
window.changyan.api.config({
appid: '**appid**',
conf: '**appkey**'
});
}
</script>
<%- partial('click2show') %>
</section>

大家參考我寫的程式碼和網站示例程式碼,這裡其實大家可以參考你們主題裡面其它評論裡面的程式碼,根據主題不同可以做變動,大家有不懂的地方可以給我發郵箱,我一定及時給你們答覆。
2. 在article.ejs裡面新增一句程式碼,下面高亮部分就是我加的程式碼

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
<%if(post.noDate != "true"){%>
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
</div>
<%}%>
<div class="article-inner">
<% if (theme.fancybox){ %>
<input type="hidden" class="isFancy" />
<% } %>
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
</header>
<% if (!index){ %>
<div class="article-info article-info-post">
<%- partial('post/category') %>
<%- partial('post/tag') %>
<div class="clearfix"></div>
</div>
<% } %>
<% } %>
<div class="article-entry" itemprop="articleBody">
<% if (index && (post.description || post.excerpt)){ %>
<% if (post.description){ %>
<%- post.description %>
<% } else { %>
<%- post.excerpt %>
<% } %>
<% } else { %>
<% if (is_page()){ %>
<%- partial('_partial/page') %>
<% } %>
<%- post.content %>
<% } %>
</div>
<% if (index){ %>
<div class="article-info article-info-index">
<%if(post.top){%>
<div class="article-pop-out tagcloud">
<a class="">置頂</a>
</div>
<% } %>
<%- partial('post/category') %>
<%- partial('post/tag') %>
<% if (index && (post.description || post.excerpt)){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= __('index.more') %> >></a>
</p>
<% } %>
<div class="clearfix"></div>
</div>
<% } %>
</div>
<% if (!index){ %>
<%- partial('post/nav') %>
<% } %>
</article>
<%- partial('_partial/toc') %>
<% if (!index && theme.share.on && (post.share != false || post.share)){ %>
<%- partial('post/share') %>
<% } %>
<% if (!index && post.comments){ %>
<% if (theme.duoshuo.on) { %>
<%- partial('comments/duoshuo', {
key: post.path,
title: post.title,
url: config.url url_for(post.path),
}) %>
<% } else if (theme.youyan.on) { %>
<%- partial('comments/youyan') %>
<% } else if (theme.disqus.on) { %>
<%- partial('comments/disqus', {
shortname: theme.disqus.shortname
}) %>
<% } else if (config.disqus_shortname) { %>
<%- partial('comments/disqus', {
shortname: config.disqus_shortname
}) %>
<% } %>
#下面這四行程式碼就是我加的程式碼
<%else if (theme.changyan.on) { %>
<%- partial('comments/changyan', {
}) %>
<% } %> 
<% } %>
<%- partial('_partial/post-nav-button') %>
<% if (!index) { %>
<script>
<% if (post.fancybox === false){ %>
yiliaConfig.fancybox = false;
<% } %>
</script>
<% } %>

我就加了這幾行程式碼

<%else if (theme.changyan.on) { %>
<%- partial('comments/changyan', {
}) %>
<% } %>
其中theme.changyan.on是在主題的_config.yml檔案中配置,comments/changyan是新增檔案的位置。

3. 在主題的config.yml 檔案中加

changyan:
on: true

當然,我們要把檔案中的preload_comment: 配成ture。

preload_comment: true

此時,我們對暢言外掛的新增就完成了一大半了。如果你暢言中的地址寫對,應該在頁面可以看到效果了。
評論頁面

四、暢言的備案

前面也提到,暢言是需要備案的,但是如果我們搭建個個人網站還得去買域名買空間備案,那也太得不償失了。下面我教大家用一個方法忽略備案。
1. 我們需要一個已經備案的網站域名和備案號,這個大家可以去網上百度。可以找一個小眾的網站域名,去備案查詢網查詢備案號。
2. 然後在暢言後臺系統 系統設定-通用設定新增備案號和站點網址,注意站點網址一定要改。
備案
重點來了,備案地址沒有寫我們自己的網站域名我們的部落格是用不了評論系統的,這個時候我們只需要把我們的域名地址寫入域名白名單就行了。

做到這樣,差不多就完成了。如果大家遇到什麼問題,可以聯絡我的email,也可以在評論區寫下你的評論,我會第一時間回覆大家。