Next主题开启文章分享功能及去除图片上的分享按钮

发表于 | 更新于 | 分类于 | 热度：
本文字数： 618 | 阅读时长 ≈ 1 分钟

Next主题的文章分享功能，会在文章中的图片上也加上分享按钮，消除图片分享按钮，强迫症患者的福音来了！

Hexo的Next主题中已经集成了文章分享功能，我们只需要clone下github上的分享插件，并修改Next主题配置文件就可以实现文章的分享功能。具体操作如下。

配置Next主题配置文件

打开主题配置文件检索baidushare配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
baidushare:
  type: slide

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: true
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

下载文章分享所需插件

配置文件中已经给出了文章分享所需插件的github仓库地址，即 https://github.com/theme-next/theme-next-needmoreshare2
仓库中也给出了使用方法，即首先通过命令行进入themes/next主题目录下，然后将插件clone下来：

1
2
$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

后期需要更新的话就是通过以下命令：

1
2
$ cd themes/next/source/lib/needsharebutton
$ git pull

至此，我们就可以在文章的尾部看到分享文章的按钮了。但是当我把鼠标放在文章中的图片上时，发现图片的右上角也加上了一排分享的按钮，经过分析，找到了添加分享的代码，将其注释一下就大功告成了，实现清清爽爽的页面。
找到路径为themes\next\layout_partials\share\baidushare.swig的文件，将代码中的image注释掉。大约在26-30行，代表设置分享按钮在文章底部时的效果；42-46行，代表设置文章分享按钮在侧边时的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 <script>
    window._bd_share_config = {
      "common": {
        "bdText": "",
        "bdMini": "2",
        "bdMiniList": false,
        "bdPic": ""
      },
      "share": {
        "bdSize": "16",
        "bdStyle": "0"
      },
      // "image": {
      //   "viewList": ["tsina", "douban", "sqq", "qzone", "weixin", "twi", "fbook"],
      //   "viewText": "分享到：",
      //   "viewSize": "16"
      // }
    }
  </script>
{% elif theme.baidushare.type === "slide" %}
  <script>
    window._bd_share_config = {
      "common": {
        "bdText": "",
        "bdMini": "1",
        "bdMiniList": false,
        "bdPic": ""
      },
      // "image": {
      //   "viewList": ["tsina", "douban", "sqq", "qzone", "weixin", "twi", "fbook"],
      //   "viewText": "分享到：",
      //   "viewSize": "16"
      // },
      "slide": {
        "bdImg": "5",
        "bdPos": "left",
        "bdTop": "100"
      }
    }
  </script>

注释掉以后执行Hexo g重新生成页面（记得cd .. 退回到Hexo博客的根目录欧），就可以看到图片上已经没有分享按钮了。

PS：前往公众号“Linux工坊”，可以查看最新内容！

------ 本文结束------
0%