評論遷移到網(wǎng)易云跟帖

前言

2017年3月21日多說宣布將于6月1日前關(guān)閉旗下的評論服務(wù)，意味著目前使用多說的站點(diǎn)的評論信息必須全部遷移到其他第三方評論系統(tǒng)里，有些人可能正在搭建多說評論，也有搭建好了的，正準(zhǔn)備考慮遷移到哪去，而我在分析了幾個第三方評論平臺后，選擇了使用網(wǎng)易云跟帖。至于為什么，請繼續(xù)往下閱讀。

關(guān)于第三方評論插件

我是搭建博客的時候才接觸到多說的，多說怎么樣，我相信對于一些使用過其他的第三方評論系統(tǒng)的人心里都知道，我在了解過目前國內(nèi)主流的暢言、來比力、網(wǎng)易云跟帖等后，得出了一個結(jié)論。

其實我只去用過暢言和來比力，最后來總結(jié)多說。

暢言

暢言背后是屬于搜狐這個大公司的，有著這種大背景下，暢言的一些安全和保密性，以及垃圾評論的減少得到保證，而且不會掛掉，很穩(wěn)定。

但是暢言有一點(diǎn)原因?qū)е铝宋曳艞壛怂?/p>

那就是它必須要求所使用的站點(diǎn)完成備案，因為我的網(wǎng)站是托管在的github pages上的屬于國外服務(wù)器，根本沒辦法去備案的，而且我也不打算自己去租用一個云服務(wù)器或云主機(jī)來托管博客。所以我就放棄了它，不然它會是目前多說倒閉后的最好選擇。

來必力

來必力是韓國的，目前該公司把業(yè)務(wù)做到了國外，支持英語、中文、韓語。

先不說其他的，目前韓國在部署薩德，說什么我都不會去用韓國人的東西的！

撇開政治因素來談，它的UI設(shè)計和后臺管理也比較不錯，數(shù)據(jù)可視化用到了圖標(biāo)來展示，所以有付費(fèi)和免費(fèi)兩個版本，博客只需要用免費(fèi)的就行了，當(dāng)然付費(fèi)的效果主要體現(xiàn)在數(shù)據(jù)分析上，還可以取消掉免費(fèi)版未來所帶來的廣告。

網(wǎng)易云跟帖

它是16年6月份才推出的一個新產(chǎn)品，選擇這個評論系統(tǒng)有一種情節(jié)在里面，因為我本人非常愛用網(wǎng)易云音樂來聽歌，所以我本著支持網(wǎng)易云音樂的原則，也來支持這個產(chǎn)品. 盡管這個產(chǎn)品目前有很多的不足，不過背后畢竟是網(wǎng)易這個大公司，相信日后會越來越好的。我在后面會詳細(xì)介紹這個的。

多說

重點(diǎn)來了 多說倒閉的原因，我暫且不談，每個人的看法不一樣，多說的各方面功能都算的上完善，有很多組件可用，最近評論、訪客，最熱文章，都能有效提高博客的互動性。

我覺得多說唯一的缺陷就是沒有采取有效的盈利方式。

多說作為國內(nèi)第一下載量的第三方評論插件提供方，它的倒閉肯定導(dǎo)致許多博客主焦頭爛額，在這里我有幾點(diǎn)建議。

1. 選擇一個穩(wěn)定的大公司第三方評論插件
2. 盡早導(dǎo)出現(xiàn)有的評論數(shù)據(jù)，并在新的評論系統(tǒng)后臺導(dǎo)入
3. 剛搭建博客的新人小白，可以選擇觀望2個月后看是否多說有補(bǔ)救措施繼續(xù)運(yùn)營
4. 愛折騰的可以考慮和我一樣投奔網(wǎng)易云跟帖懷抱（笑....）
5. 如果是用hexo開發(fā)的博客，建議時刻關(guān)注你使用的主題的官方網(wǎng)頁，以及源項目的github倉庫，看看主題作者和大家怎么解決多說評論問題
6. 小白建議選擇新評論系統(tǒng)的時候，從官方主題文檔中給出的已支持的插件中選擇

原有數(shù)據(jù)導(dǎo)出

這里以多說評論系統(tǒng)導(dǎo)出數(shù)據(jù)為例，其他的可以類比。

后臺管理導(dǎo)出數(shù)據(jù)

進(jìn)入多說的后臺管理系統(tǒng)，從工具——導(dǎo)出數(shù)據(jù)

一定要記得勾選包含文章數(shù)據(jù)和包含評論數(shù)據(jù)

導(dǎo)出后就是一個json文件，用于后面上傳到新評論系統(tǒng)內(nèi)的。

導(dǎo)入以往數(shù)據(jù)

以網(wǎng)易云跟帖操作為例，注冊好帳號后，進(jìn)入后臺管理，綁定好自己的站點(diǎn)網(wǎng)址，在數(shù)據(jù)統(tǒng)計——數(shù)據(jù)管理——數(shù)據(jù)導(dǎo)入中，上傳之前導(dǎo)出的文件進(jìn)去，就完成了

配置

網(wǎng)易云跟帖的后臺里可以進(jìn)行一些基本設(shè)置，我這里就跳過，主要說下hexo下next主題的配置。

因為最新版的主題集合了網(wǎng)易云跟帖所以操作起來簡便

獲取Product Key

登陸 網(wǎng)易云跟帖 獲取你的 Product Key。 編輯 主題配置文件， 編輯 gentie_productKey 字段，設(shè)置如下：

gentie_productKey: #your-gentie-product-key

配置文件修改

請注意，您在云跟帖管理后臺設(shè)置的域名必須跟您站點(diǎn)的域名一致。在本地測試時，需要做兩步驟前置設(shè)定：

修改 hosts 文件，將您域名的請求指向本地。例如：127.0.0.1 notes.example.com
修改 Hexo 監(jiān)聽的端口為 80：hexo s --debug -p 80

我的host文件路徑C:\Windows\System32\drivers\etc

測試完成后請將 hosts 文件中的域名映射刪除。 hosts文件中記錄寫法一般為“tab鍵”→“ip地址”→“tab鍵”→“域名”→“回車”（最后的回車最好加上。）如圖，我將百度域名解析到本地。

因為我的80端口被apache服務(wù)器占用了，而且我不想去改，其實這個也不用怎么測試的，所以大家完全可以上傳到線上自己來看。

細(xì)節(jié)優(yōu)化

評論系統(tǒng)出來了，它不像多說一樣，對博客進(jìn)行了一些優(yōu)化，比如首頁的文章摘要信息里，沒有了以前多說的評論數(shù)了和對應(yīng)的評論icon圖標(biāo),但在文章詳情里它又出來了，信息的人可能發(fā)現(xiàn)了，樣式很丑具體如下： 我通過使用一個偽類的CSS樣式添加了“評論”二字讓用戶體驗提高。 相關(guān)源碼在最后。

注意事項

如果你的評論系統(tǒng)沒有加載成功，請試著看如下幾點(diǎn)要求和注意點(diǎn)。

1. 關(guān)閉多說評論系統(tǒng)或其他的第三方評論系統(tǒng)
2. 檢查以前配置多說的參數(shù)將其注視掉或設(shè)為false等，因為next主題會優(yōu)先檢測多說評論是否支持
3. 網(wǎng)易云站點(diǎn)網(wǎng)址是否填寫正確，我之前填寫的地址為www.cduyzh.com，但我在域名解析那解析的是兩個地方，cduyzh.com和www.cduyzh.com，導(dǎo)致了我評論系統(tǒng)加載出現(xiàn)問題，如果在cduyzh.com內(nèi)的新評論在www.cduyzh.com是看不到的，所以大家注意下，可以把域名解析中的cduyzh.com暫停使用。
4. 網(wǎng)易云跟帖的小功能插件比較少，其中的熱門新聞模塊，我按照之前加載多說熱門文章的方法添加了對應(yīng)的代碼進(jìn)去，發(fā)現(xiàn)兩者不能很好的兼容會出現(xiàn)問題，導(dǎo)致我評論加載不出來，只加載出來了熱門文章。

最后一點(diǎn)希望大家把自己的問題反饋出來，大家可以相互交流，歡迎大神給我指出哪里出現(xiàn)了問題。

福利

經(jīng)過折騰終于遷移到了網(wǎng)易云跟帖，因為本人在添加網(wǎng)易云的熱門文章時，出現(xiàn)了一些未知BUG，目前無法在保證有評論的情況下有熱門文章，雖然這個小功能看似不是很重要，但是對于強(qiáng)迫癥來說有點(diǎn)不爽，希望大神指點(diǎn)。

評論樣式開源

之前我出過文章講解多說的樣式優(yōu)化，現(xiàn)在搬到了網(wǎng)易云跟帖，我當(dāng)時也對它做了一些優(yōu)化，在查看評論的樣式后，我發(fā)現(xiàn)網(wǎng)易云跟帖這方面優(yōu)化做的還不錯，用戶頭像已經(jīng)設(shè)置為原型了，只是沒有添加旋轉(zhuǎn)的效果，我把之前的多說下的樣式引入了一部分進(jìn)來，然后自己設(shè)置了一些其他樣式?，F(xiàn)貼出具體的樣式代碼，和以前一樣，重寫覆蓋在D:\hexo\blog\themes\next\source\css\_custom\custom.styl 修改代碼如下：

//網(wǎng)易云跟帖評論樣式增添
.post-comments-count a::before {
    content: "評論";
}
#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn {
    background-color: #649ab6;
}


#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn:hover {
    background-color: #4c618f;
}
.tie-empty-tip {
    display: none;
}
//即將發(fā)布消息人樣式
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img:hover {


box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6) inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6) inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg); 
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img {
width: 32px;
height: 32px;
border-radius: 50%;
margin: 4px 10px 4px 8px;
padding: 0;
cursor: pointer;
box-shadow: inset 0 -1px 0 #3333sf; /*設(shè)置圖像陰影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out; /*變化時間設(shè)置為0.4秒(變化動作即為下面的圖像旋轉(zhuǎn)360讀）*/
-moz-transition: -moz-transform 0.4s ease-out;
}


//評論框內(nèi)其他人樣式
#yun-tie-sdk-wrap .single-tie .photo img:hover {


box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6) inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6) inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg); 
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#yun-tie-sdk-wrap .single-tie .photo img {
width: 42px;
height: 42px;
border-radius: 50%;
padding: 0;
cursor: pointer;
box-shadow: inset 0 -1px 0 #3333sf; /*設(shè)置圖像陰影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out; /*變化時間設(shè)置為0.4秒(變化動作即為下面的圖像旋轉(zhuǎn)360讀）*/
-moz-transition: -moz-transform 0.4s ease-out;
}


.name-nick:hover {
    border-left: 14px solid #3264b4;
}
.name-desp:hover {
    border-left: 14px solid #3264b4;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-nick{
    cursor: pointer;
    transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp {
    cursor: pointer;
    transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;
}
.tie-time:hover {
    border-right: 14px solid #3264b4;
}
#yun-tie-sdk-wrap .single-tie .tie-time {
    transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;
    cursor: pointer;
}

End

從多說評論系統(tǒng)，到優(yōu)化的它的樣式，優(yōu)化UA（評論用戶操作系統(tǒng)和瀏覽器信息）、最近訪客，以及用戶頭像設(shè)置等，期間參考了不少其他人的博客和文章，然后在動手去修改，感概很多，多說是我心目中的國內(nèi)第一的第三方評論系統(tǒng)，居然在前幾天宣布了即將關(guān)閉服務(wù)，讓我很是失落。希望在6月1日在眾多獨(dú)立站長的支持下能走出困境，找到屬于自己發(fā)展的盈利模式以此來繼續(xù)經(jīng)營下去。