Yuanji's Blog

这个博客已通过认证

博客更新:增加分享按钮

📅 | 🏷️ , ,
文章目录

上次在2023 年博客回顾中提到准备给博客文章加上分享按钮,这一次趁着新年假期还没结束,尝试着做了一下,大概花了一下午时间。本文就把这个过程记录一下。

分享到哪?

首先摆在面前的一个问题是,我希望把文章都分享到哪?稍微参考了一下一些平时浏览的网站,我大致列出了下面几个,简单附加了我个人对这些网站的看法:

分享按钮的实现方法

调查了一些现有网站上的实现方法,发现大体上有两大类:

  1. 使用现成的服务,好处是非常方便,只需要引入一个 JavaScript 脚本,然后在需要的地方添加一个 div 元素即可。目前常见的还在提供服务的有:

  2. 完全不使用 JavaScript,每个分享按钮就是一个可点击的图标链接。虽然从使用者的角度不如上面简单,但是只要稍微有一些 Hugo 模板和 CSS 的知识,再加上下面这个脚手架网站,自己做一个也并非难事。

纯 HTML + CSS 实现分享按钮

本着让本博客最大限度不依赖于 JavaScript 就能使用大部分功能的宗旨,我当然选择了第二个方法。通过 https://sharingbuttons.io 生成了一个基本的 HTML 骨架和一个能用的 CSS 之后,魔改之路就开始了。

主要的更改大概是下面几个:

  1. 替换最新的图标和配色,最显然的 Twiiter 已经改成 X,Facebook 和 Reddit 等也都有细微改动,通过 Simple Icons 可以获得各种品牌最新 Logo 的 SVG 和配色。
  2. 添加缺失的服务,比如豆瓣和 Pocket,除了需要跟上面一样获得 Logo 和配色之外,还需要构造分享的 URL,比如豆瓣的像是这样:https://www.douban.com/share/service/?href={{ .Permalink }}&name={{ .Title }},各家虽然名称不尽相同,但基本都是需要提供链接和一个可选的标题就行。
  3. 最后可选的一步就是清理一下最初生成的 HTML 和 CSS,我甚至把 CSS 转写成了 SCSS 以保持本博客主题样式的一贯性。

代码虽然不复杂但是稍微有点冗长,感兴趣的朋友可以直接参考 feat: add share buttons for post · masakichi/futu@1ce5993 主题仓库里这个 commit。其实也许可以做得更灵活一些,比如支持在 Hugo 可以按需配置生成分享按钮,不过目前的功能已经够我自已用了。

在 Hugo 中启用分享按钮

在 Hugo 主题里添加了这个分享按钮的功能后,使用起来就很简单了,就像博客的其他一些非主要的功能(比如显示目录、显示相关文章)一样,我提供了相同的启用逻辑:

  1. 如果需要全局所有文章启用分享按钮,就在配置文件(比如 config.toml)里设置 enableSharetrue
  2. 如果只需要部分页面启用分享按钮,那就在那些文章的 front matter 里设置 enableSharetrue
  3. 同样地,如果需要在特定页面禁用分享按钮,就在那些文章的 front matter 里设置 enableSharefalse

最后

通过差不多一下午的努力,给自己的博客加上了社交属性。虽然不知道多少人会使用,但是不管怎么说从我的角度当然希望自己的文章能被更多的人读到,所以读者朋友们,请毫不犹豫地使用这些分享按钮,分享你觉得有意思的文章给亲朋好友吧!

对于那些不使用 Hugo 的朋友,如果也想给自己的网站加上类似的功能,我做了一个单 HTML 文件的 demo,也许你可以直接拿它改一改加到自己的网站。