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 <hugo_home>/static/css
3cp share.js/dist/js/social-share.min.js <hugo_home>/static/js
4#cp share.js/dist/js/jquery.share.min.js <hugo_home>/static/js
5cp -r share.js/dist/fonts <hugo_home>/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 class="social-share">分享到：</div>

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

1<body class="body">
2  {{ block share . }}
3  
4  {{ end }}
5    <div class="container container--outer">
6        {{ partial "header" . }}
7        <div class="wrapper flex">
8            <div class="primary">
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文件

参考