专栏首页MasiMaro 的技术博文hexo next主题为博客添加分享功能

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 菜单的使用

    2)弹出式菜单:一般在顶级菜单上都有很多菜单项,单击这些菜单项时会弹出一个下拉式的菜单项,我们点击的这个菜单称为弹出式菜单

    Masimaro
  • C/C++中整数与浮点数在内存中的表示方式

    在C/C++中数字类型主要有整数与浮点数两种类型,在32位机器中整型占4字节,浮点数分为float,double两种类型,其中float占4字节,而double...

    Masimaro
  • Error: Your project contains C++ files but it is not using a supported native build system

    我在编写有关JNI的代码的时候回报这个错误,我在网上搜了相关的资料后,找到了一篇文章解决了这个问题,点击这里查看这篇文章,我在照着这篇文章尝试的时候,总有一些错...

    Masimaro
  • 关于AI芯片,这些头部企业是这么说的

    刚刚落下帷幕的“2018年中国人工智能峰会”活动中,分论坛关于AI芯片的议题引发了多方关注。在AI的第三次浪潮中,摩尔定律再次被唤起,应用端强烈的需求加速AI芯...

    镁客网
  • MySQL 8.0的新特性-克隆插件

    今天在睡觉前想起了MySQL 8.0里面的一个很好的特性,克隆插件。这篇文章介绍的很细致,可以参考。

    jeanron100
  • springboot项目中静态资源的访问

    贪挽懒月
  • 推荐两款很安逸的离线API文档查询工具Dash和Zeal

    大家开发的时候难免会查询一些文档,看一下API的调用方法等,所以会不同的语言去某一个地方去找,确实很麻烦,今天给大家安逸两款软件,肯定会让你爱不释手!

    Java后端技术
  • 教你怎么编写高效的JSON工具类

    在开发过程中,极有可能会用到JSON数据的传输。这不,笔者在前段时间的开发过程中在http请求后台数据时就用到了JSON与对象和集合之间的转换。在JSON数据组...

    格姗知识圈
  • Rollup初探

    需要注意的是参数 -f 是 --output.format 的缩写,用来指定 bundle 的类型,有以下选项:

    用户1515472
  • 来聊聊ResNet及其变种

    2015 年,ResNet 横空出世,一举斩获 CVPR 2016 最佳论文奖,而且在 Imagenet 比赛的三个任务以及 COCO 比赛的检测和分割任务上都...

    AI算法修炼营

扫码关注云+社区

领取腾讯云代金券