使用Hexo搭建博客(四),博客的部件和插件

上一篇是博客配置相關的說明。這一篇也算是收尾了,基本是一些博客的小部件,和一些可以自己添加的插件,這些都是自己嘗試成功了的,所以這里也算是總結一下。文章寫到這里,可能就是一些比較細枝末節的東西了。但也許以后有人用的上,也可能自己需要回顧一下,總結一下以便于后續有據可查,不必要再在需要的時候再去檢索。

一、博客的零部件

1.添加『微搜索』

現在的文章還不多,使用目錄和標簽就可以快速找到文章,這是一種方式。對于習慣用搜索的用戶來說,特別是后續文章積累到一定的程度之后,想要快速找到自己想看到的文章就比較困難,我自己就希望實現站內搜索的功能。而靜態網頁和動態的諸如Wordpress不同,內置的谷歌搜索,但是顯然在國內直接不能實現站內搜索的,你需要采取其他的措施。查詢了一下,使用百度swiftype都可以為Hexo實現站內搜索,我自己也實踐了一下,但是不明原因的不現實結果。好在Jacman主題內置了微搜索的功能,注冊一下,添加代碼就可以了。比較方便,也能夠滿足使用。
1.注冊之后得到key,然后把key填到到D:\Hexo\themes\jacman\layout\_partial\tinysou_search.ejs文件;

engineKey: ''  #e.g.  'eb4726b2a0ea6b569b79'

2.把主題配置文件_config.yml修改啟用,填上你的id就可以。

tinysou_search:     ## http://tinysou.com/
  enable: true
  id:  ## e.g. eb4726b2a0ea6b569b79  for your tiny search id

2.添加『多說評論』

評論系統國內使用比較多的是多說,先注冊一下,然后在主題配置文件中填上你的用戶名;

  1. 在多說進行注冊,獲得通用代碼,將通用代碼粘貼到D:\Hexo\themes\jacman\layout\_partial\post\comment.ejs文件里面;

<% if (theme.duoshuo.enable && page.comments){ %>
<section class="comment">
 #此處粘貼你的通用代碼
</section>
<% } %>
  1. 在主題配置文件中,填上你多說的用戶名
duoshuo_shortname:    ## e.g. qjzhixing  your duoshuo short name.

3.添加『JiaThis分享』

博客在前期需要大量推廣,即使你寫的文章再好,別人也不一定能看到,或者別人看到了也不會認真閱讀,這是正常的。不妨主動自己主動一點,把自己的文章推廣一下,也能幫助自己博客提高訪問量。微博、微信和QQ空間都是很好的傳播平臺,需要利用好。我以前看不上QQ空間,但是后面我發現,多數人還是習慣了用QQ空間。所以就需要一鍵分享的功能。不少人用的百度的,但個人對JiaThis更感興趣一點。樣式多,支持平臺多,重要的是方便。

  1. 注冊之后得到了id,把id添加到jiathis.ejs文件中;沒改動的話是在第22行的uid那里。
  2. 再在主題配置文件中jiathisenable改為true啟用,也同樣填上id。
jiathis:
  enable: true ## if you use jiathis as your share tool,the built-in share tool won't be display.
  id:    ## e.g. 1889330 your jiathis ID.

4.添加『新浪微博秀』

微博秀這個可以根據個人的意愿,得到的效果如我博客右側那般。

  1. 先在微博秀開通一下,把得到的代碼直接保存到weibo.ejs文件里,沒有就新建一個;
  2. 在主題配置文件的部件里加上微博秀。
widgets:
- weibo

5.添加『友情鏈接』

友情鏈接的文件在links文件里面添加,同樣需要在主題配置文件中設置顯示。在<ul></ul>標簽之間添加,格式參考

<div class="linkslist">
  <p class="asidetitle"><%= __('links') %></p>
    <ul>
      <li><a  title="起今知行">起今知行</a></li>
      <li><a  title="思考啊|劍飛在思考">劍飛在思考</a></li>
    </ul>
</div>

二、Hexo的幾款插件

Hexo里面默認有一些插件,這里推薦幾款可能對個人有用的插件。輸入對應的命令安裝一下,然后設置一下就可以。

1.導入『Wordpress數據』

開篇我說過我寫博客的基本經歷,是從Wordpress轉移過來的,寫了一段時間之后,文章全部在那里面,如果一篇篇的復制粘貼那工作量就太大了。好在Hexo提供了Wordpress插件,可以一次性把wordpress數據導入到Hexo博客,html文件都轉換成了Markdown文件,非常的方便,有圖片的更改一下圖片的路徑就好了。

  1. 首先導出wordpress數據,得到的回事一個xml格式的文件,先把這個復制到Hexo文件夾下,假設文件是wordpress.xml。
  2. 安裝好wordpress插件,再使用遷移命令就可以實現從Wordpress到Hexo的轉移。
npm install hexo-migrator-wordpress --save
hexo migrate wordpress wordpress.xml

2.添加『RSS訂閱』和『百度sitemap』

RSS訂閱和百度sitemap(站點地圖,方便搜索引擎的收錄)的安裝和設置做法相似,所以放在一起說明。輸入的命令分別是:

npm install hexo-generator-feed --save
npm install hexo-generator-baidu-sitemap --save

然后在博客配置文件_config.yml中添加啟動

plugins:
- hexo-generator-feed
- hexo-generator-baidu-sitemap

對于百度地圖,還需要添加

#sitemap
baidusitemap:
    path: baidusitemap.xm

添加好了之后,測試一下RSS和百度地圖是否生效,百度地圖是訪問qjzhixing.com/sitemap.xml可以查看,如果能正常訪問說明可用。

3.添加『CNZZ統計/百度統計』

CNZZ統計和百度統計都不算是Hexo的插件,但我個人覺得還是充當了插件的作用,所以就放在了這里。做法是先注冊賬號,然后添加網址就設置好了。CNZZ和百度統計的設置和做法相似,兩種統計我都有測試過,沒有問題。是先試過百度的,然后轉換到了CNZZ上,所以就那CNZZ作為例子說明一下。
1.在CNZZ網站注冊一個賬號,添加網站后,得到各個形式的代碼,任選其一;
2.在D:\Hexo\themes\jacman\layout\_partial文件夾下新建一個cnzz_tongji.ejs文件,把你的代碼粘貼在第一行和最后一行之間(中間是我的,替換成你自己的);

<% if (theme.cnzz){ %>
<script type="text/javascript">
 var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
 document.write(unescape("%3Cspan id='cnzz_stat_icon_1256211004'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1256211004%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
</script>
<% } %>

3.在footer.ejs文件中適當的位置添加你的代碼,這是我的代碼;

<script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " [http://");](http://");)
    document.write(unescape("%3Cspan id='cnzz_stat_icon_1256211004'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1256211004%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
</script>

4.在主題配置文件中加入下面代碼啟用CNZZ統計,注意不要添加站點id,填了的話就不顯示圖標了。

## Analytics
cnzz_tongji: true

三、購買和綁定頂級域名(可選)

域名的購買多數人都推薦在Godaddy購買,我的qjzhixing.com這個域名也是。名氣較大,支持支付寶付款。解析和管理域名在Dnspod上面進行,兩個都需要注冊,這個簡單不用說,說下實現域名綁定的過程。
1.把購買好的域名添加到Dnspod里面,得到兩個默認的NS地址,此時順便添加以下A記錄,主機記錄有兩個:@www,記錄類型默認A,而且記錄值都一樣,填寫192.30.252.153


2.使用Dnspod解析域名的話,就要將GoDaddy的NS設置為Dnspod提供的地址。做法是在GoDaddy的Nameservers里面添加Dnspod的NS,也就是圖中中間的那兩個記錄值。


3.在博客的D:\Hexo\source目錄下,新建名為CNAME的文本文件,沒有后綴,在里面添加你的域名。比如我的就是qjzhixing.com,如果你想用www.qjzhixing.com域名就在里面填相應的域名。添加之后盡量就不要改了。

qjzhixing.com

注意,綁定好了有可能還需要等待一段時間才能生效。我綁定域名的過程進展不是那么的順利,原因是收不到GoDaddy的驗證郵件。沒有驗證郵件是無法添加Dnspod的NS地址的,也就不能實現綁定。試過QQ郵箱、163郵箱,最后換到了Gmail郵箱都不行,奇怪的是,自己注冊和買域名的時候能受到郵件,但是就是驗證郵件收不到,垃圾箱里面也沒有。沒有辦法,只得在網上找GoDaddy的客服,等待了11分鐘之后客服回話了,給重新發了一封驗證郵件,問題終于解決了。所以,如果遇到什么問題,還是要找對Keyman。

四、寫在后面

到這里,博客的搭建和裝修工作也先告一段落了。如果還有其他的什么需求,自己利用搜索引擎搜索一下,都能找到相應的解決辦法。我搭建博客過程中走了不少的彎路,先是在Jekyll上浪費了一些時間,后來又是更換了兩三個主題,中間可以說是浪費了一些時間。好在基本的問題都已經解決了。
  至于浪費時間,我也有過考慮。一方面,從不懂到勉強入門誰都要經過一個摸索的過程,這是事實;其次,在你解決一個個問題中,你會收獲成就感,也會收獲挫敗感,這也算是豐富了自己的經歷,而沒有嘗試肯定得不到這樣美妙的體驗。所以,即使花費了不少的時間,也還是值得的。
  最后的最后,需要重點感謝趙兄在這個過程中給自己提供的幫助,非常熱情的一位朋友,不吝賜教。我也是遇到了好多的問題就去找他的麻煩,好在,趙兄人非常不錯,也很有耐心。如果沒有他的幫助,可能博客的上線還要推遲一些時間。十分感謝!!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容