hexo next主題為部落格添加分享功能

title: hexo next主題為部落格添加分享功能

date: 2018-01-06 20:20:02

tags: [hexo部落格, 部落格配置]

categories: hexo next主題配置

今天心血來潮，決定給部落格添加分享功能，百度上首先是找到了使用shareSDK的分享功能，最後在實踐的過程中發現它添加時步驟比較多，添加完成後效果比較醜（就是一個長條的淺藍色按鈕），而且點選後想要退出分享比較麻煩（它的取消按鈕實在太難找了，它在頁面最下方的位置，呈現淺灰色，這個設計太反人類了，決定放棄它了）。在next主題的官方的文檔中發現它自身內建了百度分享的功能，是以決定采用百度了。

解決思路

根據官方文檔的說法，隻需要添加/修改字段 baidushare，值為 true。即可

​​​官方文檔​​

但是我自己改了之後發現并沒有出現分享功能，下面是我的主體配置檔案的部分代碼

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
#baidushare:
  #type: button
baidushare: true
      

網上也沒找到什麼靠譜的資料，沒辦法，自己來分析源代碼，找找問題在哪吧

由于hexo本身是使用node.js将Markdown渲染成靜态頁面，是以百度分享的相關代碼必然會出現在HTML頁面中，我們通過檢視生成的HTML發現并沒有對應的分享的代碼，也就是說配置并沒有啟用。現在初步估計問題應該是出現在Markdown轉化為HTML的過程中。

hexo中文章使用的模闆是主題目錄中的layout/post.swig檔案，檔案中關于分享功能的代碼大緻出現在第16行

<div class="post-spread">
      {% if theme.jiathis %}
        {% include '_partials/share/jiathis.swig' %}
      {% elseif theme.baidushare %}
        {% include '_partials/share/baidushare.swig' %}
      {% elseif theme.add_this_id %}
        {% include '_partials/share/add-this.swig' %}
      {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
        {% include '_partials/share/duoshuo_share.swig' %}
        
      {% elseif theme.sharesdk %}
        {% include '_partials/share/sharesdk.swig' %}
      {% endif %}
div>      

從代碼上看，next主題支援許多中分享方式。它會先判斷配置檔案中對應的配置打開與否執行相應的代碼，其中theme代表的是主題的配置檔案。

** ps:當時我在配置sharesdk的時候發現隻有注釋掉其他的分享功能才能正常啟用sharesdk，從代碼上來看如果其他的打開了，根本就不會加載sharesdk的配置檔案，要正常使用sharesdk的分享功能，要麼修改判斷的順序，要麼在配置檔案中注釋掉其他的分享功能 **

百度分享功能加載的是檔案配置檔案目錄下的_partials/share/baidushare.swig,打開該檔案：

{% if theme.baidushare.type === "button" %}
  <div class="bdsharebuttonbox">
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微網誌">a>
    <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網">a>
    <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間">a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">a>
    <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度貼吧">a>
    <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter">a>
    <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook">a>
    <a href="#" class="bds_more" data-cmd="more">a>
    <a class="bds_count" data-cmd="count">a>
  div>
....
{% endif %}      

代碼中先判斷了theme.baidushare.type的值，如果為button則執行後面的代碼，原始代碼中判斷了兩種情況一種是theme.baidushare.type為button，另一種是為slide，隻有為這兩種值才會執行代碼，再次檢查配置檔案看看它的類型值是否正确。最後發現baidushare以及它下面的type被注釋掉了，由于它沒有讀取到這個值，是以這兩中情況都不滿足，也就不會生成對應的分享代碼，是以打開這兩行的代碼，最終這塊的配置如下：

baidushare:
  type: button
  baidushare: true      

重新生成一下，發現百度分享的按鈕出現了。

至此問題解決了。

總結

百度了很久沒有解決，還是還是帶着絕望的心情看源碼看出了點頭緒。最後我想說：RTFSC大法好（Linus大神說的：Read The Fucking Source Code....）

​​​實際效果請移步到此​​

最後的最後

• RTFSC(Read the fucking source code)
• RTFM(Read the fucking manual)
• UTFH (“Use The Fucking Help”)
• STFW (“Search The Fucking Web”)
• STFG (“Search The Fucking Google” or “Search The Fantastic Google”)
• GIYF (“Google Is Your Friend”)
• JFGI (“Just Fucking Google It”)
• UTSL (“Use The Source Luke”—alternately, RTFS)
• RTFA (“Read The Fucking Article”—common on news forums such as Fark.com[3] and Slashdot)
• RTFE (“Read The Fucking Email”)
• RTFC (“Read The Fucking Code,” or “Reboot The Fucking Computer”)
• RTFQ (“Read The Fucking Question”)
• LMGTFY (“Let Me Google That For You”)
• WIDGI (“When In Doubt Google It” - Also occasionally ‘WIDGIT’)
• FIOTI (“Find It On The Internet”)