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' %}
        <!--後面的兩句是我爲了使用sharesdk的分享功能而添加的，原版沒有-->
      {% 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....）
實際效果請移步到此

最後的最後

最後說點題外話，關於求助這件事，其實不少時候看源代碼或者幫助文檔能解決咱們差很少不少問題，若是實在沒有，通常你遇到的問題別人可能也遇到過，善用搜索引擎能解決全部問題，以前看到一個說法:普通程序員 + google = 超級程序員。因此在平時要養成一些習慣，仔細閱讀幫助文檔，閱讀源碼，善用搜索引擎，再實在沒轍了再上論壇提問。
下面是常常見到的在一些問答網站回答的一些縮寫，我以爲頗有趣也頗有用，在此將其列舉出來：

• 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」)

一般，給出這些答案的人已經經過這些辦法找到了解決問題的關鍵，正在一邊看一邊敲鍵盤。這些回覆意味着他認爲：第一，你要的信息很容易找到。第二，自已找 要比別人喂到嘴裏能學得更多。你不該該以爲這樣就被冒犯了，按黑客的標準，他沒有不理你就是在向你表示某種尊敬，你反而應該感謝他熱切地想幫助你。