html5 一键分享,Hugo集成Share.js一键分享插件

Hugo集成Share.js一键分享插件

一键分享功能是网站社交化的一个重要组件，当前发现一款使用非常简单的js插件-share.js，Github地址: https://github.com/overtrue/share.js 。 share.js使用非常简单，它可以通过参数配置自由控制展示哪些分享图标，同时它还可以自定义分享时的title以及icon。

拷贝css,js到网站根目录

要使用share.js功能，首先要把share.js的css文件、js文件都引入到html中。

从share.js项目的src目录，直接将子目录css、font、js文件夹 复制到博客项目的static目录中，然后将js、css文件引入主模板baseof.html中即可，js文件只需要qrcode.js以及social-share.js文件即可。

1git clone https://github.com/overtrue/share.js

2cp share.js/dist/css/share.min.css /static/css

3cp share.js/dist/js/social-share.min.js /static/js

4#cp share.js/dist/js/jquery.share.min.js /static/js

5cp -r share.js/dist/fonts /static

经过测试social-share.min.js和jquery.share.min.js的区别就是后者多2个分享图标

引入js,css

修改主配置文件config.toml，加载css和js

1vim config.toml

2

3[params]

4 ...

5 share_style = true

6 custom_css = ["/css/share.min.css"]

7 custom_js = ["/js/social-share.min.js"]

8 ...

添加share.html模板

在模板的layouts/partials目录下新建一个分享模板share.html，里面内容如下

1

分享到：

你完全可以把上面这个div添加到你博客任何需要展示分享的地方，由于我这博客采用的模板，通过在baseof.html中定义一个block share。

1

2 {{ block share . }}

3

4 {{ end }}

5

6 {{ partial "header" . }}

7

8

9 ...

修改Hugo中layouts/_default中的single.html，将分享功能直接展示在文章尾部。找到.Content下面，也就是文章内容的下方进行展示。

1{{ .Content }}

2

3{{ if .Site.Params.share_style }}

4 {{ partial "share.html" . }}

5{{ end }}

6

7{{ if .Site.Params.reward }}

8{{ partial "reward.html" . }}

9{{ end }}

10

此时，已经实现分享的功能了，默认情况下会显示所有站点的分享

定制分享按钮

修改样式文件,修改static/css/share.min.css文件

参考