杂活►SNS

Hexo博客自定义 - Bluesky篇

我也没想到有一天我会有一个可以公开在profile里的SNS账号。
毕竟我是个不爱在公众面前表露想法、喜清净的人。

但我需要一个输出GL相关碎碎念或进度记录之类的地方，博客显然不适合。
而且既然在不同平台上都发布GL内容了，也得给大家一个社媒联系方式吧。
所以我很久之前就想搞一个，但FB/Ins/X等等都太嘈杂了 hmm
我不希望无关人员看到我或和我互动，又想让志同道合的人有机会看到我了解我。

机缘巧合之下，我发现Bluesky正好满足我的需求：
人少清静但相对知名，无广告和乱七八糟的算法，适合发表碎片想法和记录。
于是我把以前偶然注册过的Bluesky账号找回来，收拾收拾让它上阵，还创建了一个GL/Yuri创作者关注列表（新手包）clap

多个人多双筷子，作为新成员的欢迎仪式，是时候在各平台加上Bluesky的个人链接了。
但其中有关Hexo博客的部分有点麻烦，所以在这里做个整理记录。

导入Bluesky图标

我的Hexo博客用的是Landscape主题，该主题的图标集合来自Fork Awesome。
但Fork Awesome已弃用，也就没有Bluesky图标。
所以我导入Font Awesome作为右上角header links的图标集合，但同时保留Fork Awesome以免影响到其它图标（毕竟屎山代码能不动就不动 sideeye-left

问题在于，这两个图标集合都采用类似fa的class名。
为了不让Font Awesome覆盖原先的图标，需要在themes/landscape/layout/_partial/head.ejs文件中将其CSS先于Fork Awesome导入：

1
2
3
4
5
<head>
  // ...其它代码
  <%- css('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css') %>
  <%- css('https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css') %>
</head>

经过我的试验，v6.5.2刚好是Font Awesome已加入Bluesky图标但又不会影响到博客里其它图标的版本。

接着在themes/landscape/layout/_partial/header.ejs的header links部分将class名fa改为fa-brands，就能使用Bluesky图标了：

1
2
3
4
5
// 更改前
<a class="nav-icon" href="<%- url_for(theme.links[i]) %>"><span class="fa fa-<%= i %>"></span></a>

// 更改后
<a class="nav-icon" href="<%- url_for(theme.links[i]) %>"><span class="fa-brands fa-<%= i %>"></span></a>

把博客域名作为Bluesky handle

Bluesky支持handle自定义，那我没理由浪费这个大好机会吧 smug
比起跟我毫不相关的@xxx.bsky.social，不如换成博客域名更有辨识度也更统一。

参考这篇文章，在Bluesky的设置里找到自定义handle的入口，它会指示我们完成个人网站域名的认证。
简言之，就是在/source目录下添加/.well-known/atproto-did文件（无扩展名），文件内容为did:开头的一串文字。

但为了在部署中包含该文件并使其能被访问到，我们需要做2个额外工作：

  1. 在/source目录下添加.nojekyll空文件

    尽管GitHub可以提供以句点 (.) 开头的文件夹，但Jekyll的处理过程会阻止.well-known目录的访问，而.nojekyll文件可以防止这种情况发生。

  2. 在部署中包含 .nojekyll和atproto-did文件

    在博客根目录的_config.yml文件中添加以下代码：

    1
    2
    3
    include:
      - .well-known/*
      - .nojekyll

这样完成部署后，便可回到Bluesky认证个人Hexo博客的域名并更换handle。

参考

Font awesome - two versions

.well-known 編 | Welcome Bluesky!

Including .well-known directory

How to add .well-known on Github Pages files using html