Hugo集成社交分享插件
诺亚
LIKE.TG | 发现全球营销软件&服务汇聚顶尖互联网营销和AI营销产品，提供一站式出海营销解决方案。唯一官网：www.like.tg
很多站长开发网站时为了推广页面，或者获得更多的回访和流量，会在网站页面添加 “分享到” 插件，用来发布到某些社交网站。因此社会化分享是很多网站常用的功能之一，国内也有很多专业的公司在做，比较出名的包括 j*this，B*hare 等。不过很悲伤的是，这些公司的产品，无一例外的具有一个特点：奇丑无比。丑就算了，还不允许别人修改其设计，结果就是，再好的 UI 设计也毁在这些插件手里了。
还好我发现了一款简单高效的社交分享组件，只看一眼便可以确认这就是我要寻找的那个它。直接上预览，你看完一定会喜欢上：
1. 简介
share.js 是一款简单高效的社交分享组件，直接引入使用即可，无须依赖其他库。它有以下这些特点：
一个标签完成初始化 自定义启用/禁用分享站点 更美观的 UI 体验 基于标签data属性轻松实现分享数据的自定义 支持分别对不同站点设置分享内容 同页面个分享组件 支持npm安装
2. 引入 share.js
由于我的博客使用的是 hugo，而且使用的主题是 Jimmy Song 的 beautifulhugo，官方文档提供的安装方式不适用，需要稍作改动。
如果你使用的是其他主题，安装方式类似，你可以自己研究一下。
导入静态资源 首先克隆 share.js 的代码仓库：
1 | $ git clone https://github.com/overtrue/share.js |
|---|
然后分别将 css、js 和 fonts 拷贝到 beautiful 主题中的相应目录下：
1 2 3 4 | # |
|---|
默认的 css 样式图标太小，我稍微调整了一下，将图标放大一点，修改后的 css 内容如下：
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 41 42 43 44 45 46 47 48 49 50 51 | $ cat |
|---|
主要修改了这一段：
1 | .social-share .social-share-icon{position:relative;display:inline-block;width:42px;height:42px;font-size:25px;border-radius:50%;line-height:37px;border:2px solid #666;color:#666;text-align:center;vertical-align:middle;transition:background 0.6s ease-out 0s} |
|---|
将分享插件嵌入到网页中 为了将分享插件嵌入到每篇文章的网页中，我们需要修改一些模板。首先需要引入 css 样式，通过修改文件 /themes/beautifulhugo/layouts/partials/head.html，在其中引入 share.min.css。
1 2 3 4 5 6 7 8 9 10 | ... ... |
|---|
然后在 /themes/beautifulhugo/layouts/partials/目录下创建一个 html。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $ cat |
|---|
修改模板 /themes/beautifulhugo/layouts/_default/single.html，加载 share.html。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{{ if isset .Params "postmeta" }}
{{ else }}
{{ partial "postmeta.html" . }}
{{ end }}
|
|---|
如果你想让某些页面不开启分享插件，可以通过参数 (.Params.noshare) 来控制是否加载分享插件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{{ if isset .Params "postmeta" }}
{{ else }}
{{ partial "postmeta.html" . }}
{{ end }}
|
|---|
这样我们就可以在页面中通过 noshare 参数来控制了。如下是不想加载分享插件的文章的 meta 信息参数：
1 2 3 4 5 6 | --- title: xxxxxx date: xxxxxx ... noshare: true --- |
|---|
3. 更多
关于分享插件的更多自定义配置请参考代码仓库的 README。
LIKE.TG：汇集全球营销软件&服务，助力出海企业营销增长。提供最新的“私域营销获客”“跨境电商”“全球客服”“金融支持”“web3”等一手资讯新闻。
点击【联系客服】 🎁 免费领 1G 住宅代理IP/proxy， 即刻体验 WhatsApp、LINE、Telegram、Twitter、ZALO、Instagram、signal等获客系统，社媒账号购买 & 粉丝引流自助服务或关注【LIKE.TG出海指南频道】、【LIKE.TG生态链-全球资源互联社区】连接全球出海营销资源。
