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文件
参考