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

通常，给出这些答案的人已经通过这些办法找到了解决问题的关键，正在一边看一边敲键盘。这些回复意味着他认为：第一，你要的信息很容易找到。第二，自已找要比别人喂到嘴里能学得更多。你不应该觉得这样就被冒犯了，按黑客的标准，他没有不理你就是在向你表示某种尊敬，你反而应该感谢他热切地想帮助你。

posted @ 2018-01-06 21:47 masimaro 阅读(2954) 评论(0) 编辑收藏举报

刷新页面返回顶部

GunLun

hexo next主题为博客添加分享功能

解决思路

总结

最后的最后

公告