Gray Space

Firefly 文章 slug 自动生成功能开发

Sun, 30 Aug 2026 00:00:00 GMT

需求描述#

当前 Firefly 的文章 slug 仅支持依赖文章标题的拼音转写的生成模式，该模式与文章标题强耦合，文章标题修改会导致其与链接不一致。希望新增一种业务无关的 slug 模式，同时支持自动检测并补全缺失 slug 的文章。

功能设计#

新增 `Slug` 模式配置#

在文章内容页配置中增加 slug 模式配置项：

1
post: {
2
  slug: "random",
3
}

配置类型同步新增：

1
slug: "pinyin" | "random";

其他模块通过 PostSlugMode 复用该配置项的派生类型，避免再次定义相同的模式范围。

1
export type PostSlugMode = SiteConfig["post"]["slug"];

生成业务无关的随机 Slug#

random 模式使用 Node.js 的 crypto.randomBytes 生成 8 字节随机数，再转换为 16 位小写十六进制字符串。

1
function createRandomSlug(): string {
2
  return randomBytes(8).toString("hex");
3
}

随机值不读取文章标题、正文、分类或路径，因此这些业务内容发生变化时不会影响已写入的 slug。

`setup` 生命周期阶段补全 Slug#

通过 Astro Integration 接入配置生命周期：

1
integrations: [
2
  postSlugIntegration(siteConfig.post.slug),
3
]

该 Integration 在 astro:config:setup 阶段检查文章，仅允许 dev 命令写入缺失的 slug：

1
const generated = await syncPostSlugs({
2
  mode,
3
  write: command === "dev",
4
});

运行 pnpm dev 时，缺少 slug 的文章会生成随机 slug 并写回 frontmatter。已有非空 slug 不会重新生成。运行构建、检查、Astro 同步或预览命令时只进行校验，如果仍有文章缺少 slug ，流程会报错提醒。

创建文章时直接生成随机 Slug#

当前配置为 random 时，新文章会立即得到 16 位随机 slug。写入文件前还会检查该值是否已被其他文章占用：

1
await assertPostSlugAvailable(slug, targetDir);

检查通过后，随机 slug 与其他 frontmatter 字段一同写入新文章，使文章从创建时开始就使用稳定的访问路径。

Firefly 头像组件圆形旋转效果功能开发

Fri, 28 Aug 2026 00:00:00 GMT

需求描述#

Firefly 侧边栏的个人资料头像当前为正方形静态效果，希望改为鼠标悬停时旋转一圈，移开时反向旋转归位的效果。为适配该效果，头像应同步修改为圆形，尺寸也可以有所调整。

功能设计#

自适应圆形头像组件#

src/components/widget/Profile.astro 的头像组件保留响应式最大宽度，增加正方形约束和圆形裁切：

1
class="group block relative mx-auto mt-1 lg:mt-0 mb-3
2
  max-w-36 lg:max-w-48 aspect-square overflow-hidden rounded-full active:scale-95"

aspect-square ：容器高度始终等于宽度，即使源图片不是正方形。
overflow-hidden rounded-full ：将容器及内部内容裁为圆形。

悬停旋转#

1
:global(.profile-avatar-image) {
2
  transition: transform 1s ease-out;
3
}
4

5
.group:hover :global(.profile-avatar-image) {
6
  transform: rotate(360deg);
7
}

transform 1s ease-out ：设置动画为一秒，效果为以慢速结束的过渡动画。
rotate(360deg) ：旋转 360 度。

该元素为 ImageWrapper 生成的图片包装元素的内部元素，故样式需要使用 :global() 才能命中内部组件 profile-avatar-image 。

Firefly Footer 组件页面置底布局功能开发

Fri, 28 Aug 2026 00:00:00 GMT

需求描述#

当前 Firefly 中 Footer 组件的高度原本由文章内容决定，文章较短时，Footer 会紧跟正文显示。希望修改为始终保持在当前窗口的底部，使得短页面的 Footer 位于视口底部，长页面的 Footer 仍位于全部内容之后。

功能设计#

传递内容面板的最小高度#

.content-panel 已根据内容顶部位置计算视口内的剩余高度，但由于 .content-panel 与 #main-grid 之间还有一层容器， min-height 不会默认传递给子元素。进而导致 Footer 组件无法利用视口内的剩余空间。因此，需要将最小高度逐层传递到实际负责布局的 #main-grid 。

1
<div class="relative min-h-[inherit] ...">
2
  <div id="main-grid" class="... min-h-[inherit] ...">

第一处 min-h-[inherit] ：中间容器继承 .content-panel 的最小高度。
第二处 min-h-[inherit] ： #main-grid 继续继承中间容器的最小高度。

这里使用最小高度而不是固定高度，目的是使短页面至少占满视口剩余区域，长页面仍可随正文自然增长。

使用 Grid 分配剩余高度并定位 Footer#

仅让 #main-grid 占满视口剩余高度，还不会自动把 Footer 组件推到底部。普通内容仍会从顶部依次排列，并将多余空间留在 Footer 组件之后。同时，移动端底部组件是可选内容，侧边栏数量也会随页面和配置变化，如果完全依赖 Grid 自动排列，Footer 可能进入用于吸收剩余空间的行。因此，需要同时定义响应式 Grid 行结构，并明确 Footer 在其中的行位置。

1
<div
2
  id="main-grid"
3
  class="... grid-rows-[auto_1fr_auto] md:grid-rows-[1fr_auto] ..."
4
>
5
  ...
6
  <div class={`${footerClassName} row-start-3 md:row-start-2`}>
7
    <Footer></Footer>
8
  </div>
9
</div>

移动端分为三行：正文使用第一行，移动端底部组件或剩余空间使用第二行，Footer 使用第三行。第二行的 1fr 会吸收正文之外的剩余高度， row-start-3 则确保 Footer 始终从第三行开始。

平板和桌面端分为两行：正文与侧边栏使用第一行，Footer 使用第二行。第一行的 1fr 吸收剩余高度，第二行的 auto 仅保留 Footer 实际需要的高度， md:row-start-2 则将 Footer 固定在第二行。

原有的 footerClassName 继续负责 Footer 的列位置。当正文较短时， 1fr 将 Footer 推到视口底部；正文较长时，Grid 随内容增长，Footer 继续排列在完整内容之后。

恢复移动端 Grid 布局#

移动端原有样式将 .mobile-no-sidebar 强制设为 display: block !important ，会覆盖 #main-grid 的 display: grid 。如果继续保留，前面设置的 Grid 行结构、 1fr 和 Footer 行号都会失效。因此，需要删除冲突的 display 声明，并继续保留原有宽度规则。

更新后的移动端样式如下：

1
.mobile-no-sidebar {
2
  width: 100% !important;
3
}

删除覆盖后，移动端的 grid-rows-[auto_1fr_auto] 、 1fr 和 row-start-3 才能生效，其他移动端宽度设置保持不变。

Obsidian Kanban Bases View 卡片排序功能开发

Fri, 21 Aug 2026 00:00:00 GMT

需求描述#

Obsidian Bases 可以通过 Sort 设置卡片的查询顺序，但原生 Card 视图不能通过拖动任意调整卡片顺序。

Kanban Bases View 支持拖动卡片，但该顺序无法存储在显式属性或被其他视图复用。

本次开发的目标是在保留原有隐式排序方式的基础上，新增一个可选的 Card order 属性：用户需要可见序号时，将拖动结果写入笔记；不配置该属性时，继续使用原有的隐式配置，不增加笔记字段。

功能设计#

新增可选的 Card order 属性#

在视图设置中新增一个可选属性。未选择时维持原有的 cardOrders 隐式存储；选择后，该属性成为卡片顺序的读取和写入位置。两种模式之间不迁移或清理数据。

1
private cardOrderPropertyId: BasesPropertyId | null = null;
2

3
private loadConfig(): void {
4
  this.cardOrderPropertyId = this.config.getAsPropertyId('cardOrderProperty');
5
}
6

7
{
8
  displayName: 'Card order',
9
  type: 'property',
10
  key: 'cardOrderProperty',
11
  filter: (prop: string) => prop.startsWith('note.'),
12
  placeholder: 'Optional: card order property',
13
}

校验显式属性#

Card order 必须是可写的 note.* 属性，并且不能与 Group by 或 Swimlane by 使用同一属性。否则重新编号可能改变卡片所属的列或泳道，插件会停止渲染并显示配置错误。

1
if (
2
  this.cardOrderPropertyId &&
3
  (!this.cardOrderPropertyId.startsWith('note.') ||
4
    this.cardOrderPropertyId === this.groupByPropertyId ||
5
    this.cardOrderPropertyId === this.swimlaneByPropertyId)
6
) {
7
  this.fullReset();
8
  this.containerEl.createDiv({
9
    text: EMPTY_STATE_MESSAGES.CARD_ORDER_PROPERTY_INVALID,
10
    cls: CSS_CLASSES.EMPTY_STATE,
11
  });
12
  return;
13
}

按显式序号排列卡片#

显式属性接受有限数字和可转换为有限数字的字符串，按数值升序排列。空值和非法值没有显式顺序，统一放在已有序号之后。

1
export function readCardOrderValue(value: unknown): number | null {
2
  if (typeof value === 'number') return Number.isFinite(value) ? value : null;
3
  if (typeof value !== 'string') return null;
4
  const trimmed = value.trim();
5
  if (trimmed === '') return null;
6
  const numeric = Number(trimmed);
7
  return Number.isFinite(numeric) ? numeric : null;
8
}
9

10
export function compareCardOrderValues(a: number | null, b: number | null): number {
11
  if (a === null) return b === null ? 0 : 1;
12
  if (b === null) return -1;
13
  return a - b;
14
}

每个列或“泳道 + 列”单元格分别调用该比较逻辑：

1
private sortCardEntriesByOrderProperty(entries: BasesEntry[]): BasesEntry[] {
2
  if (!this.cardOrderPropertyId) return entries;
3
  return [...entries].sort((a, b) =>
4
    compareCardOrderValues(
5
      readCardOrderValue(a.getValue(this.cardOrderPropertyId)?.toString()),
6
      readCardOrderValue(b.getValue(this.cardOrderPropertyId)?.toString()),
7
    ),
8
  );
9
}

拖动后写回显式序号#

同列拖动后，显式模式不再写入 cardOrders ，而是按照当前 DOM 顺序更新选定属性。

1
const paths = getColumnPaths(evt.to);
2
if (this.cardOrderPropertyId) {
3
  await this.writeVisibleCardOrder(paths);
4
} else {
5
  this._prefs.cardOrders[newKey] = paths;
6
  this._persistPrefs();
7
}

写回值使用从 1 开始的连续整数。已有值正确时不重复修改； skipPath 用于跳过已经与分组属性一起写入的跨列移动卡片。

1
private async writeVisibleCardOrder(paths: string[], skipPath?: string): Promise<void> {
2
  const propertyId = this.cardOrderPropertyId;
3
  if (!propertyId) return;
4
  if (!propertyId.startsWith('note.')) {
5
    throw new Error(`Card order property must be a writable note property: ${propertyId}`);
6
  }
7
  if (!this.app?.fileManager) {
8
    throw new Error('File manager not available');
9
  }
10

11
  const propertyName = parsePropertyId(propertyId).name;
12
  const updates = paths.flatMap((path, index) => {
13
    if (path === skipPath) return [];
14
    const entry = this._entryMap.get(path);
15
    if (!entry) throw new Error(`Entry not found for card order: ${path}`);
16
    const order = index + 1;
17
    if (readCardOrderValue(entry.getValue(propertyId)?.toString()) === order) return [];
18
    return [
19
      this.app.fileManager.processFrontMatter(entry.file, (frontmatter: Record<string, unknown>) => {
20
        frontmatter[propertyName] = order;
21
      }),
22
    ];
23
  });
24
  await Promise.all(updates);
25
}

展开收起

跨列拖动新增两步处理：先将移动卡片的新分组值和目标序号写入同一次 frontmatter 更新，再重新编号来源单元格和目标单元格。

1
const cardOrderPropertyName = this.cardOrderPropertyId
2
  ? parsePropertyId(this.cardOrderPropertyId).name
3
  : null;
4
const cardOrder = newPaths.indexOf(entryPath) + 1;
5

6
if (cardOrderPropertyName) frontmatter[cardOrderPropertyName] = cardOrder;
7

8
if (this.cardOrderPropertyId) {
9
  await Promise.all([
10
    this.writeVisibleCardOrder(oldPaths),
11
    this.writeVisibleCardOrder(newPaths, entryPath),
12
  ]);
13
}

允许 Base Sort 下保存拖动顺序#

原实现检测到 Base Sort 后会取消同列拖动，并用 Notice 提示用户清除 Sort。本次移除了 sortActive 、 hasActiveSort() 和该提示。现在显式属性始终决定卡片顺序；未配置显式属性时，已有的隐式拖动顺序也不再被 Base Sort 跳过。

蛤诞百年祭

Mon, 17 Aug 2026 00:00:00 GMT

曾经的我以为，膜蛤会是一辈子的事情。

汇文 2015 闭幕式-1

2015 年在汇文闭幕式上，我第一次看到有关长者的视频，那个时候的我还不懂，为什么上至组委学团，下至代表，都在大谈什么膜法；那个时候我还不懂，为什么大家看着江主席谈笑风生的场面会嘻嘻哈哈，说着什么“提高姿势水平”“这是坠吼的”之类半懂不懂的话；那个时候的我还不懂，原来这就是最后一届汇文中国。

汇文 2015 闭幕式-2

后来我成为了一名成熟的膜法师，并且觉得自己一辈子都会是膜法师。我会熟练地吟诵蛤三篇，尽管现在只会讲两句“跑得快”与“谈笑风生”；我会认真研读《葛底斯堡演说》，尽管现在只记得 “of the people, by the people, for the people”；我会张口“苟利社稷”，闭口“历史的进程”，尽管现在看到评论区的神秘接龙只会淡淡一笑；我会在每年的 817 的时候与《盗墓笔记》十年之约的粉丝们在 QQ 空间里争个你死我活，尽管现在“长白山见”与“长者续命”都已是昨日黄花。

98 年抗洪

刚读完《长者传》那会儿，对他的事迹不能说是倒背如流，也可算是如数家珍。精通八国语言、在夏威夷弹吉他、合唱毕业歌、建立社会主义市场经济体制、军队一律不得经商……有迹可循的是，“膜蛤文化”最初也许是对政治人物的某种“戏谑”，但真正能够出圈的，也许就是他的某种个人魅力，也许就是他真的做了一点“微小的贡献”。

你我皆是凡人，没有永生的长者，亦没有一辈子的蛤丝。江能泽民，亦可赛艇，江主席，再见。

基于 SSH 反向端口转发的服务器联网代理

Sat, 08 Aug 2026 00:00:00 GMT

需求描述#

当前服务器本身无法直接访问互联网，但存在稳定的联网下载需求，主要包括以下两类场景：

使用 apt 更新系统源、安装系统依赖；
使用 uv 安装 Python、安装项目依赖。

本机具备可用的代理环境，代理软件为 Clash Verge，代理端口为 7897 。因此目标是让服务器通过 SSH 隧道复用本机的代理出口访问互联网。

解决方案#

整体流程#

1
服务器 apt / uv
2
  ↓
3
服务器 127.0.0.1:7897
4
  ↓
5
SSH 反向端口转发
6
  ↓
7
本机 Clash Verge 127.0.0.1:7897
8
  ↓
9
互联网

建立 SSH 反向端口转发#

在本机执行以下命令：

Terminal window

1
ssh -R 127.0.0.1:7897:127.0.0.1:7897 \
2
  user@server_ip

执行 expect 脚本：

1
#!/usr/bin/expect -f
2

3
set timeout -1
4

5
set SSH_USER "root"
6
set HOST "10.130.10.166"
7
set PORT "30412"
8
set PASSWORD ""
9

10
spawn ssh \
11
  -p $PORT \
12
  -R 127.0.0.1:7897:127.0.0.1:7897 \
13
  $SSH_USER@$HOST
14

15
expect {
16
  "*yes/no*" {
17
    send -- "yes\r"
18
    exp_continue
19
  }
20
  -re {.*assword.*} {
21
    send -- "$PASSWORD\r"
22
  }
23
}
24

25
interact

展开收起

测试代理链路#

建立隧道后，在服务器上测试代理是否可用：

Terminal window

1
curl -I -x http://127.0.0.1:7897 https://pypi.org

配置 `apt` 代理#

在服务器上创建或覆盖 apt 代理配置：

Terminal window

1
sudo tee /etc/apt/apt.conf.d/95proxy > /dev/null <<'EOF'
2
Acquire::http::Proxy "http://127.0.0.1:7897";
3
Acquire::https::Proxy "http://127.0.0.1:7897";
4
EOF

然后执行：

Terminal window

1
sudo apt update

配置 `uv` 代理#

uv 可以直接使用环境变量中的 HTTP/HTTPS 代理配置。建议写入服务器的 /etc/environment ：

Terminal window

1
cat >> ~/.bashrc <<'EOF'
2

3
export HTTP_PROXY=http://127.0.0.1:7897
4
export HTTPS_PROXY=http://127.0.0.1:7897
5
export ALL_PROXY=http://127.0.0.1:7897
6
export NO_PROXY=localhost,127.0.0.1,::1
7
EOF

然后执行

Terminal window

1
source ~/.bashrc

Codex TRACE 日志写盘问题修复

Wed, 08 Jul 2026 00:00:00 GMT

需求描述#

Codex 桌面端会将大量 WebSocket 底层事件以 TRACE 级别持续写入 ~/.codex/logs_2.sqlite 。活跃会话中，TRACE 占新增日志的绝大多数，并引发频繁的 SQLite 预写日志（WAL）写入和旧日志清理。

目标是在不影响 INFO、DEBUG、WARN 和 ERROR 日志的前提下停止 TRACE 日志落盘，并确保方案可验证、可回滚。

解决方案#

在 logs 表上创建 BEFORE INSERT （插入前）触发器，仅忽略 TRACE 级日志：

1
CREATE TRIGGER block_trace_logs
2
BEFORE INSERT ON logs
3
WHEN NEW.level = 'TRACE'
4
BEGIN
5
  SELECT RAISE(IGNORE);
6
END;

实施前已备份数据库并通过 PRAGMA quick_check 完整性检查。安装后连续验证未发现新增 TRACE，其他级别日志正常写入，Codex 活跃窗口的进程写入量明显下降。该方案只阻止 TRACE 日志落盘，不会停止上游日志生成；Codex 更新后需确认该触发器是否仍存在。

回滚命令：

Terminal window

1
sqlite3 ~/.codex/logs_2.sqlite "DROP TRIGGER IF EXISTS block_trace_logs;"

Obsidian Douban 插件图片上传 PicGo 功能修复

Fri, 27 Mar 2026 00:00:00 GMT

需求描述#

豆瓣图片访问策略发生变化，访问 doubanio 图片链接时需要附带有效的 Referer 请求头，否则会被拒绝访问。
插件原有的 PicGo 上传链路依赖系统剪贴板，部分 webp 在写入剪贴板时无法被当前 Electron 运行时直接解析，最终导致上传失败。

功能设计#

图片请求新增 Header `Referer`#

图片请求时，使用豆瓣条目页地址作为 Referer ，并在原有请求头基础上清理不适用于图片请求的字段，保证图片能够正常下载。

高清图地址改为使用远端文件名生成#

高清图地址生成时，不再使用本地附件文件名拼接，而是从原始图片 URL 中提取远端文件名，避免生成错误的高清图地址。

剪贴板写入新增显式等待#

保留原有 PicGo 剪贴板上传流程，仅在上传前显式等待剪贴板写入完成，避免写入未完成时提前上传。

1
.then(async (buffer) => {
2
  if (!buffer || buffer.byteLength == 0) {
3
    throw new Error(i18nHelper.getMessage('130109'));
4
  }
5
  await ClipboardUtil.writeImage(buffer);
6
  return await this.uploadClipboardFile(context);
7
})

Webp 格式图片处理#

仍优先使用原有方式写入剪贴板；仅当 webp 图片无法被 Electron 直接解析时，再通过 canvas 转为 png 后写入，保证对原有逻辑改动最小。

1
private static async createNativeImageFromWebp(data: ArrayBuffer) {
2
  const { nativeImage } = require('electron');
3
  const imageElement = await this.loadImage(URL.createObjectURL(new Blob([data], {type: 'image/webp'})));
4
  try {
5
    const canvas = document.createElement('canvas');
6
    canvas.width = imageElement.naturalWidth || imageElement.width;
7
    canvas.height = imageElement.naturalHeight || imageElement.height;
8
    const context = canvas.getContext('2d');
9
    if (!context) {
10
      throw new Error(i18nHelper.getMessage('130110'));
11
    }
12
    context.drawImage(imageElement, 0, 0);
13
    return nativeImage.createFromDataURL(canvas.toDataURL('image/png'));
14
  } finally {
15
    imageElement.src = '';
16
  }
17
}

展开收起

Gray Space

Firefly 文章 slug 自动生成功能开发

需求描述#

功能设计#

新增 Slug 模式配置#

生成业务无关的随机 Slug#

setup 生命周期阶段补全 Slug#

创建文章时直接生成随机 Slug#

Firefly 头像组件圆形旋转效果功能开发

需求描述#

功能设计#

自适应圆形头像组件#

悬停旋转#

Firefly Footer 组件页面置底布局功能开发

需求描述#

功能设计#

传递内容面板的最小高度#

使用 Grid 分配剩余高度并定位 Footer#

恢复移动端 Grid 布局#

Obsidian Kanban Bases View 卡片排序功能开发

需求描述#

功能设计#

新增可选的 Card order 属性#

校验显式属性#

按显式序号排列卡片#

拖动后写回显式序号#

允许 Base Sort 下保存拖动顺序#

蛤诞百年祭

基于 SSH 反向端口转发的服务器联网代理

需求描述#

解决方案#

整体流程#

建立 SSH 反向端口转发#

测试代理链路#

配置 apt 代理#

配置 uv 代理#

Codex TRACE 日志写盘问题修复

需求描述#

解决方案#

Obsidian Douban 插件图片上传 PicGo 功能修复

需求描述#

功能设计#

图片请求新增 Header Referer#

高清图地址改为使用远端文件名生成#

剪贴板写入新增显式等待#

Webp 格式图片处理#

新增 `Slug` 模式配置#

`setup` 生命周期阶段补全 Slug#

配置 `apt` 代理#

配置 `uv` 代理#

图片请求新增 Header `Referer`#