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

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

原文地址:https://www.cnblogs.com/lanuage/p/8215459.html

时间: 2024-10-10 00:29:57

hexo next主题为博客添加分享功能的相关文章

Hexo博客添加在线联系功能

title: Hexo博客添加在线联系功能 date: 2018-08-29 21:03:11 tags: - 博客 - git - hexo - 博客优化 categories: 搭建博客 --- Hexo博客添加在线联系功能 Hexo博客如何添加在线联系功能呢,发现了一个不错的网站可以提供在线联系的服务,当有用户在网页上给你留言后会通过邮件或者微信通知你,可以及时的解答用户的疑问. 最终的效果可以参考我博客的右下角,有个聊天的按钮,效果如下所示: 配置方法如下: 首先到DaoVoice上注册

使用hexo+GitHub搭建个人博客的心得(含教程)

Author Email Yaoyao Liu [email protected] 前言 对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程.配置环境.阅读论文的心得体会是一个很常见的习惯.当然想搭建个人博客,就需要找个靠谱的平台,主要就是以下的两种方式: 使用网站提供的博客平台,例如国内的CSDN.博客园:国外的Blogger.Wordpress 自己建站,发布到自己的服务器上,或者发布到GitHub.GitLab.Bitbucket等支持静态网页发布的git平台 针对于第一种方式,

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clone,运行,看到博客演示.觉得可以给颗星星):https://github.com/saucxs/hexo-blog-origin.git 一.搜索引擎收录 1.验证网站所有权 登录百度站长平台:http://zhanzhang.baidu.com,只要有百度旗下的账号就可以登录,登录成功之后在站点

github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如果觉得可以请给颗星星):https://github.com/saucxs/saucxs.github.io.git 注意1:怎么避免 .md 文件被解析? Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中,在执行hexo depl

利用hexo+github创建个人博客

因为想拥有一个独属于自己的个人博客啊. 安装部署hexo 进入一个安全的目录,cd ~/Desktop 在 GitHub 上新建一个空 repo,repo 名称是「你的GitHub用户名.github.io」 安装 Hexo $ npm install -g hexo-cli $ hexo init myBlog $ cd myBlog $ npm I $ hexo new这时会看到一个 md 文件的路径 $ vi _config.yml编辑网站配置 把第 6 行的 title 改成你想要的名字

杨泽业:给你的wordpress博客添加经典语录功能,适合所有php网站

我们做一个网站就是要不断给访客提供最佳的用户体验,同时提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能 这个是怎样实现的呢?其实很简单,下面我就将核心文件和代码分享给大家. 第一步:添加语录功能的核心文件. 在网站的根目录里面添加一个yulu的文件夹,里面含有index.php和yulu.txt两个文件.其中index.php里面是核心代码,yulu.txt是要显示的经典语录,一条占用一行. 文末免费给出了所

#WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能

原文:https://www.wn789.com/13323.html 很多人的WordPress博客在文章尾部都有打赏功能,让读者可以直接通过扫描微信.支付宝二维码进行赞助,毕竟维护博客,编写博文需要花费不少的精力,大多数朋友和蜗牛一样都是利用自己业余时间对博客进行管理与维护(如果大家觉得蜗牛789文章能起到一定帮助作用,也欢迎对蜗牛进行打赏,目前大家可以通过支付宝扫红包活动对蜗牛进行打赏,无需自己掏腰包#每日#支付宝扫码最高领取99元红包 可用于店面消费或捐赠蜗牛). 在此文章中蜗牛为大家分

windows下hexo+github搭建个人博客

网上利用hexo搭建博客的教程非常多,大部分内容都大同小异,选择一篇合适的参考,跟着一步一步来即可. 但是,很多博客由于发布时间较为久远等问题,其中某些操作在现在已不再适用,从而导致类似于我这样的小白在搭建过程中困难重重. 因此在我这第一篇博客中,主要记录我搭建时参考的两篇博客中出现问题的地方(网上很多的博客都会导致这些问题,因此如果你在搭建过程中遇到困难的话,不妨来这里找一下答案) 参考的两篇博客 这里附上两篇博客的链接: windows下Hexo博客搭建过程 关于HEXO安装失败的解决方法