今天心血来潮，决定给博客添加分享功能，百度上首先是找到了使用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: buttonbaidushare: 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”)

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

hexo next主题为博客添加分享功能相关推荐

Hexo + yilia 主题 +githubpages博客添加友言评论功能
前言 Hexo博客的Yilia主题中评论系统只提供了畅言.网易云跟帖.多说和Disqus. 由于多说评论.网易云跟帖已经关闭系统,畅言需要域名备案,而github是国外的,没有备案,所以尝试了其他第三 ...
用html5看板娘,HEXO+icarus主题给博客添加看板娘(Live2D)
最近在很多博客左下角或者右下角有看到小人(看板娘),折腾了一番搜到的都没有达到预期的效果,并且大多数教程都是基于Next来做的,本人使用的主题是Icarus,跟Next有细微的区别.后面找到了大神的作 ...
为 hexo 博客添加本地搜索功能
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:我的大学到研究生自学 Java 之路,过程艰辛,不放弃,保持热情,最终发现我是这样拿到大厂 offer 的!个人 ...
Hexo博客添加评论功能
Hexo博客添加评论功能实现了Hexo的评论功能先附上官网链接valine官网我使用的是Material-X主题,大多主题都支持,基本在官方主题文档都可以找到使用方法 1.进入官网,注册账号需 ...
Hugo项目实战-集成评论博客添加评论功能
实践效果 Quick Start Install Hugo brew install hugo # or port install hugohugo version Create a New Site ...
作为程序员我给csdn博客添加打赏功能
作为程序员我给csdn博客添加打赏功能前几天在专家微信群里提到c币太多,无法消费的问题,就提出了博客打赏功能. 目前我们csdn的c币除了兑换论坛积分,下载积分,c币商城,csdn学院外几乎没有可消 ...
【hexo博客】hexo+NexT主题个人博客
1. 环境准备参考链接 1.1 在github创建Git仓库在github托管的GithubPage,也可以托管到Gitee,但是GiteePage好像有一些限制具体看自己选择仓库名一定要输入 ...
为CSDN博客添加打赏功能
在博客栏目中添加打赏功能第一步,准备好微信支付和支付的收款二维码,如下所示: 图1.微信支付第二步,管理博客,为博客增加打赏功能 1.点击 [管理博客] 2.选择 [栏目管理] 3.点击[添加自定 ...
hexo博客添加本地搜索功能
写在前面本文主要描述了怎么添加hexo博客搜索插件,然后启动搜索功能,对两个本地搜索插件的使用进行了描述,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文用的东西 hexo 3.1.0 wi ...

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

解决思路

总结

最后的最后

hexo next主题为博客添加分享功能相关推荐

最新文章

热门文章