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”)