Elysiam

Android 音频焦点与共存播放机制研究

Fri, 03 Apr 2026 00:00:00 GMT

Cover Image 画中游 | 九道梵音 #Pixiv

Android 音频焦点与共存播放机制研究

前言

最开始处理 Flutter 音视频播放的“后台被抢焦点就暂停”问题时，很容易先入为主地认为：既然想和网易云或其它音乐软件“同时播放”，那我不去抢音频焦点不就得了？毕竟按照直觉，你不惹事，别人自然也不会来弄停你。

但真往 Android 的底层和实现里翻，就会发现事情没有这么简单。在现代 Android（尤其是 Android 15+ 引入了 AudioHardening 机制后），音频焦点的管理可以说是一门非常“玄学”且充满强权的艺术。

本文主要基于 PiliNara 的实际迭代经验和系统级日志，整理一下 Android 音频焦点的运作机制，以及在 Flutter 环境下，如何利用系统协议的“潜规则”来实现与其他应用的完美混音共存。

什么是音频焦点（Audio Focus）？

它并不是物理排他的

我们常听说的“音频焦点（Audio Focus）”，在 Android 系统里本质上并不是一个物理开关，而是一种**“礼貌协议”（Cooperative Protocol）**。

当你想播放声音时，你需要向系统（AudioManager）发出一个 requestAudioFocus 请求，声明你需要占用声道。系统会根据你请求的等级，给当前正在播放的其他 App 发送不同级别的 LOSS（丢失焦点）回调：

AUDIOFOCUS_LOSS (-1)：永久丢失。比如接到了电话，或者用户打开了另一款大型的独占音乐 App。
AUDIOFOCUS_LOSS_TRANSIENT (-2)：临时丢失。比如微信来了条提示音，或者用户在那边刷了一个短视频。
AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK (-3)：临时丢失，但允许你“低头”（Duck）。比如导航播报时，你可以把自己的音量压低一半，不用完全闭嘴。

:::tip 对应谷歌文档的链接：AudioManager :::

核心事实：收到这些信号后，系统通常不会直接物理做相关的操作（前提是你是合法的媒体应用），而是看你自己的代码怎么写。常规的、老实的 App 收到 -1 或 -2 时，代码里会乖乖调用 player.pause()。于是外界看起来就像是“被抢走焦点，声音断了”。

“不申请焦点”行不通吗？

既然收到信号就要乖乖暂停，那最直觉的想法自然是：那我干脆一上来就不申请音频焦点，是不是系统就不管我了？

在早年间的 Android 系统中，这确实可行。但在最新的 Android 15+ 机制下，这其实是在“裸奔”。系统引入了 AudioHardening 策略。如果你作为一个后台媒体应用，试图在没有持有有效音频焦点（或相应权限等级不足）的情况下向硬件输出音频数据，系统会立刻探测到你的非法行为，并从硬件层强制执行 Mute（静音）。

抓到的底层日志非常直白：

AudioHardening background playback would be muted for com.example.pilinara (10164), level: full

所以得出一个非常明确的结论：想要播放，你必须去拿焦点，这是“准入证”。

“厚脸皮”协议：两个独占焦点如何共存

既然必须老老实实当“大哥”去申请最高级别的独占媒体身份（AUDIOFOCUS_GAIN，即 req=1），那当其他音乐软件也申请 req=1 的时候，必定有一方会收到 LOSS_TRANSIENT 或 LOSS 信号。那为什么我们在用网易云音乐时，开启了对应的与其他应用同时播放功能却能一边听歌一边顺畅地刷 B站？

这就是 Android 音频焦点机制中最有意思的地方。

如前所述，系统发出的 LOSS 信号更像是一种“道德约束”。当网易云（App B）发起 req=1 抢焦点时，系统给当前正在播放的前台 App A 发送了一个 LOSS_TRANSIENT (-2) 信号。

普通 App 的反应：收到信号 -> 触发监听 -> 乖乖暂停。
网易云 / 厚脸皮 App 的反应：收到信号 -> 代码里直接写一个 return // ignore this signal -> 拒不暂停，继续疯狂往底层的 AudioTrack 塞数据。

结果就是，Android 系统的底层混音器（AudioFlinger）看到两个流都有数据源，就会机械地把两个 App 的数据帧混合在一起。只要你具备了前台媒体服务（mediaPlayback）的系统权限，系统并不会直接封杀你。这就是实现两个 GAIN 级别共存的底层密码。

Flutter (audio_session) 下的最佳实践

分析完了底层逻辑，在 Flutter 项目中，尤其是当底层视频库（如基于 mpv 的 media_kit）把焦点管理都全权交给我们另外引入的 audio_session 插件时，该如何写这套逻辑呢？

这也是 PiliNara 在兼容混音播放时踩过的一个大坑。这块逻辑真正难的地方，不是“怎么去骗过系统”，而是你到底该在什么时候该装聋作哑，什么时候该乖乖闭嘴。

如果无脑忽略所有系统中断，那在用户接到语音通话时，你的视频声音还在震天响，这就是严重的体验事故了。

目前在 PiliNara 里的处理方式如下：

1. 配置层：持证上岗

首先是需要请求相关的权限

修改 AndroidManifest.xml (必须) 从 Android 14 开始，系统要求必须显式声明前台服务类型。对于视频/音频播放，必须声明 mediaPlayback。

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />

<application ...>
    <service
        android:name=".YourPlaybackService" 
        android:foregroundServiceType="mediaPlayback"
        android:export="false">
    </service>
</application>

对于希望“与其他应用共存”的场景，我们在 Android 端坚决不再使用类似 androidAudioFocusGainType: null 这样企图隐身的危险写法（实际上这也是违背 Dart 强类型语法的），而是恢复它作为主权媒体应用的声明。

// 在 Android 上保持不变，老老实实申请最高级别焦点
await session.configure(const AudioSessionConfiguration.music());

这确保了我们的 App 在系统层面拥有“准入证”。

2. 逻辑层：精准拦截“劝退”信号

真正的核心手术在 interruptionEventStream 监听器里。当产生冲突时：

系统发来 AudioInterruptionType.pause（对应原生的 LOSS_TRANSIENT）：比如打开了别的短视频软件。这时候如果用户开启了 mixWithOthers 选项，选择“厚脸皮”，直接 return 忽视他。
系统发来 AudioInterruptionType.unknown（对应原生的 LOSS 高危信号）：比如打进来了电话。这种涉及严重系统资源回收或高优先级通话时，必须强制暂停。

具体的代码实现实际上非常轻量：

session.interruptionEventStream.listen((event) {
  if (event.begin) {
    switch (event.type) {
      case AudioInterruptionType.duck:
        // 被压低音量，比如系统导航语音
        PlPlayerController.setVolumeIfExists(... * 0.5);
        break;

      case AudioInterruptionType.pause:
        // 如果系统发来临时切断（比如外部播放音乐），且我们开启了同时播放选项，直接拦截（装聋作哑）
        if (Pref.mixWithOthers) return; 
        
        // 否则乖乖暂停
        PlPlayerController.pauseIfExists(isInterrupt: true);
        break;

      case AudioInterruptionType.unknown:
        // 来了电话这种硬断事件，无论如何都要老实暂停
        PlPlayerController.pauseIfExists(isInterrupt: true);
        break;
    }
  } else {
    // 恢复逻辑...
  }
});

。

总结

到这里其实已经能得出一个明确的结论：

完全避开焦点申请不仅是错的，而且非常危险，尤其在现代 Android 系统的 AudioHardening 环境下。
真正想要实现像网易云一样的系统级完美并存，本质上就是脸皮厚：去申请最大、最长效的焦点保护自己的存活，然后在收到别人想抢你位置的 LOSS_TRANSIENT 通知时装作没听见。

B站表情渲染机制研究

Sat, 28 Mar 2026 00:00:00 GMT

Cover Image 爻光 | knmoca

B站表情渲染机制研究

前言

最开始看 B 站表情时，很容易先入为主地把它当成普通 emoji。毕竟在评论区里看到一句 啊~是陀螺王来了[吃瓜]，直觉上会以为前端只是把某些特殊字符渲染成图片了。

但真往实现里翻，就会发现事情没有这么简单。B 站这套表情机制，至少在目前 PiliNara 实际碰到的场景里，已经分成了几条完全不同的链路：

评论区、私信、直播底部弹幕面板里的“方括号表情”
动态、专栏这种服务端直接下发富文本节点的表情
直播消息里整条消息就是一张图的 uemote

它们表面看起来都叫“表情”，但返回结构、渲染方式、尺寸语义其实都不一样。

本文主要基于 PiliNara 当前实现和上游PiliPlus的实现和实际抓到的返回数据，整理一下 B 站表情的工作机制，以及直播 uemote 这条链路里几个比较容易踩坑的地方。

需要提前说明一点：本文讨论的是评论区、私信、动态、直播底部弹幕面板这些富文本显示链路，不讨论播放器上的 canvas_danmaku 飘屏弹幕层。后者本身就是另一套渲染体系。

B站表情机制的解析与渲染方法

它并不是普通意义上的 emoji

像 [吃瓜]、[doge] 这种内容，从数据层看通常并不是 Unicode emoji，而是一段普通文本 token。

也就是说，后端并不会把它编码成某种特殊字符，而是仍然保留为：

[吃瓜]

前端真正做的事情，其实是：

先拿到原始文本
再拿到一份“这个 token 对应哪张图片”的映射表
最后在渲染时把文本中的命中片段替换成图片 span

所以这类表情在复制时还能拿到 [吃瓜] 原文，并不奇怪。因为原始内容本来就是这个字符串，图片只是显示层效果。

评论区：`message + emotes` 的经典模式

评论区这条链最典型。

在 gRPC 的评论 Content 结构里，既有原始文本 message，也有 emotes 映射表。PiliPlus 的评论渲染逻辑会把：

content.emotes.keys
话题
@用户名
URL

这些特殊 token 全部拼进正则，然后对 content.message 做一次扫描，命中 emotes 时替换成 WidgetSpan。

这一套的好处是很明显的：

原文可复制
表情和普通文本可以混排
同一套扫描逻辑还能顺手处理话题、时间戳、链接、投票

评论区表情的尺寸也不是直接看图片原始宽高，而是使用服务端下发的 size 字段，再乘一个前端基准值。目前 PiliPlus 里评论区的实现是：

final size = emote.size.toInt() * 20.0;

所以评论区里“有些表情大，有些表情小”，本质上是：

服务端决定相对大小等级
前端决定最终展示基准

私信：同样是 token 替换，但结构换成了 `eInfos`

私信并没有复用评论区的 emotes 字段，而是通过 IM 接口单独返回一组 EmotionInfo 列表。

PiliPlus 的做法是把这组 eInfos 转成：

text -> url
text -> size

这样的本地映射，再对消息正文做扫描。命中后同样替换成图片.

这一层和评论区很像，只是协议长得不一样：

评论区是 message + emotes
私信是 content + eInfos

但渲染思想是一样的，依然是“原文 token + 图片映射”。

动态 / 专栏：服务端直接下发表情节点

动态、专栏再往前走一步，不再要求前端自己从一长串纯文本里拆 [吃瓜] 了。

这类场景里，服务端很多时候直接把内容切成了富文本节点，例如：

普通文本节点
话题节点
@ 节点
链接节点
RICH_TEXT_NODE_TYPE_EMOJI

前端拿到这种结构之后，直接按节点类型渲染就行。命中 RICH_TEXT_NODE_TYPE_EMOJI 时，直接插入图片，不需要再手写一轮 token 扫描。

这也是为什么动态、专栏这类页面的表情链路通常比评论区更“稳定”：因为服务端已经帮前端把富文本拆好了。

但是这里有个额外的坑,默认的动态获取接口里面,会将原文所有的链接替换成"网页链接",导致如果普通的获取就会丢失掉文章中的链接,所以需要使用动态详情接口重新获取,在详情接口中,原文链接会被保留.具体做法就这里不细说了

直播底部弹幕面板：`emots` 和 `uemote` 是两套东西

直播底部弹幕面板是最容易让人误判的一块，因为它里面同时存在两种看起来都像“表情”的东西：

emots
uemote

它们虽然都显示成图，但语义完全不同。

`emots`：行内表情

这类更像评论区那套机制。

直播消息正文仍然是一段文本，比如：

啊这[吃瓜]

如图:

同时 extra['emots'] 里会给出：

"[吃瓜]" -> { url, width, height, ... }

前端渲染时扫描正文，命中后把这段方括号 token 换成图片。

这种情况下，图片是“嵌在文本里”的，所以它属于行内表情。

`uemote`：整条消息就是一张图

而 uemote 不是行内替换，而是整条消息本身就是一个表情消息。

一旦消息里存在 uemote，PiliPlus 当前实现会直接走图片分支，返回一个单独的 WidgetSpan，不再继续渲染 text 文本。

这类消息里 text 字段很多时候更像是：

兼容字段
语义文本
回退文案

但真正显示给用户看的，是 uemote 里的图片。

`uemote` 的返回解析

目前在 PiliNara 里，直播 uemote 被解析成了一个很轻量的 BaseEmote：

class BaseEmote {
  late String url;
  late String emoticonUnique;
  late double width;
  late double height;
  late final isUpower = emoticonUnique.startsWith('upower_');
  //以下是PiliNara相较于PiliPlus新增的字段,根据emoticonUnique前缀派生出来的本地分类
  late final isOfficial = emoticonUnique.startsWith('official_');
  late final isRoom = emoticonUnique.startsWith('room_');
}

也就是说，当前渲染阶段真正依赖的核心字段只有 4 个：

url
emoticon_unique
width
height

而几类 uemote 的判断，实际上并不是接口额外给了 isOfficial、isRoom 这种字段，而是根据 emoticon_unique 的前缀派生出来的本地分类。

常见类型目前至少有这几种：房间专属表情

房间专属表情 room_{{room_id}}_{{int}}
通用表情 (包含一般通用表情和个别频道的特殊表情)official_{{int}}
付费相关表情,比如收藏集,装扮等 upower_[{{emote}}]

从协议设计上看，这个字段更像是 B 站在直播系统里给表情做的一层“类型命名空间”。而真正让前端头疼的地方在于：不同前缀下，width/height 的语义并不统一,~~感觉官方在瞎写?~~

这也是后面踩坑的根源。

几类 `uemote` 的渲染踩坑与处理方式

这一段是本文最有价值的部分。因为 uemote 真正难的地方，不是“怎么显示一张图”，而是你到底该不该信接口返回的尺寸。

1. `room_*`：当前策略能正常工作的类型

先看一个正常的例子：

如图:

{
    "name": "xxx", //用户名
    "text": "嘤嘤嘤",  //文本内容,但对于uemote来说通常不显示
    "uemote": {
        "url": "http://i0.hdslb.com/bfs/live/904ead78c8c91f5defc18ac506ad6dc5b9cdf694.png",
        "emoticon_unique": "room_1370893_24538",
        "width": 162.0,
        "height": 162.0
    },
    "extra": {
        "id": "7d0b33b9d07dcef93da32f42ad69c7786684",
        "mid": 675119090,
        "dm_type": 1,
        "ts": 1774680118,
        "ct": "2761E891"
    }
}

这一类在 PiliNara 当前实现里显示正常，和官方一致。

原因并不是因为代码里专门对 room_* 做了什么高级处理，而是因为现有的缩放规则刚好适配了它的返回值语义。

当前 uemote 渲染逻辑里，除 upower_* 和 official_* 之外，默认会对尺寸做：

width = uemote.width / devicePixelRatio;
height = uemote.height / devicePixelRatio;

如果 room_* 返回的 162x162 更接近“物理像素尺寸”，那在 Flutter 里除以设备 DPR 之后，就正好变成了合理的逻辑像素尺寸。

也就是说，room_* 之所以没出问题，不是因为协议最规范，而是因为它返回的数据刚好跟当前这套换算规则对上了。

因此当前策略是：

room_* 保留现状，不动

2. `official_*`：直接按现有规则渲染会偏小

再看 official_* 的实际抓包：

{
  "name": "xxxxx",
  "text": "一诺行为",
  "uemote": {
    "url": "https://i0.hdslb.com/bfs/live/74049288b8e65ab81ecddfe5d4dc475cd8a56b85.png",
    "emoticon_unique": "official_54",
    "width": 195.0,
    "height": 60.0
  }
}

这类消息最开始在 PiliNara 里的显示会偏小。原因也很扯淡：

当前旧逻辑里，它会被当成“普通非 upower 的 uemote”
然后直接走 width / DPR、height / DPR

如果设备 DPR 比较高，例如 3 左右，那么：

60 / 3 = 20

视觉上就会很接近一行字的高度，这是非常正常的。

official_* 的返回尺寸是正确的,处理也是正确的,那为啥会偏小呢?原因是官方客户端里这类表情的实际显示尺寸，比接口返回的尺寸要大一些。

在当前版本里，PiliNara 对 official_* 的处理做了一个经验修正：

仍然先除以 DPR
再在此基础上额外乘 1.25

实现大致是：

width = uemote.width / devicePixelRatio * 1.25;
height = uemote.height / devicePixelRatio * 1.25;

这不是来自官方文档，而是基于实际对比官方客户端效果后的工程修正。它的优点是实现简单、抖动小、成本低；缺点也很明显，就是没有明确的协议依据，完全是个经验值。

但在没有更完整官方说明的前提下，这已经是比较稳妥的折中。

3. `upower_[...]`：接口明明给了 `20x20`，官方却显示成大图

最离谱的坑出现在这类应援装扮、收藏集、装扮赠送相关表情上。

实际抓到的一个例子如下：

对应的API返回是这样的：

{
  "name": "珈乐Dollar",
  "text": "[星绘·沐春灼华 应援装扮_腹黑]",
  "uemote": {
    "url": "https://i0.hdslb.com/bfs/garb/ea50e865dab1906e04c87fc268e7259be0782292.png",
    "emoticon_unique": "upower_[星绘·沐春灼华 应援装扮_腹黑]",
    "width": 20.0,
    "height": 20.0
  }
}

如果单看这份返回，很自然会认为这是一张小图表情。

但实际对比官方客户端后会发现，官方根本没有按 20x20 显示，而是按大图展示，视觉尺寸接近图片原始 162x162。

这说明了一个非常重要的事实：

对 upower_[...] 这类 uemote，接口返回的 width/height 不能直接信。

这类坑和 official_* 还不一样。official_* 更像是“返回值能参考，但不能机械照搬”；而 upower_[...] 在部分场景里是“返回值本身就和官方客户端的最终显示不一致”。

那怎么办？最开始,一种最直觉的想法是：

实时去请求图片原始尺寸

但这个方案实际并不优雅：

会增加额外网络请求
首帧显示容易先小后大
同一张图会重复查询
对聊天列表这种高频场景不太友好

因此，PiliNara 目前采取的是最暴力的处理方式：

对 upower_* 这类消息不再信返回的 20x20
直接按一个经验源尺寸 162px 处理
再换算成 Flutter 里的逻辑像素

当前实现是：

const upowerDefaultPx = 162.0;
width = upowerDefaultPx / devicePixelRatio;
height = upowerDefaultPx / devicePixelRatio;

这依然不是来自官方文档，而是基于目前抓到的装扮/收藏集表情样本做出的经验规则。

它的核心思想其实很简单：

room_* 可以信接口尺寸
official_* 半信半疑，需要修正
upower_[...] 的某些子类根本不能信接口尺寸

4. 为什么不能把所有 `uemote` 用一套规则吃掉

到这里其实已经能得出一个很明确的结论：

uemote.width/height 在不同类型下，语义并不统一。

至少目前已有样本说明：

room_*：当前更像“物理像素尺寸”，除以 DPR 后结果正确
official_*：单纯除以 DPR 会偏小，需要经验放大
upower_[...]：至少部分装扮类消息里，接口尺寸和官方最终显示明显不一致

因此如果还坚持“所有 uemote 都统一按 width/height 渲染”，基本一定会出错。

真正稳妥的思路反而是：

先按 emoticon_unique 做分类
再为不同类别选择不同的尺寸策略
在没有完整协议文档时，允许保留少量经验修正

这听起来土一点，但在实际逆向和兼容类工作里，往往比“一套优雅大一统公式”更靠谱。

总结

B 站表情机制并不是一个统一模型，而是几套机制并行存在：

评论区、私信、直播行内表情，本质上是“文本 token + 映射表”
动态、专栏更多是“服务端直接下发富文本节点”
直播 uemote 则是一类“整条消息就是表情图”的独立消息

而真正麻烦的地方不在于“怎么显示图片”，而在于：

同样叫 uemote，不同前缀下的尺寸字段并不遵守同一种语义。

目前基于 PiliNara 的实现和实际抓包，比较稳妥的策略已经收敛成下面这样：

room_*：保留现状，继续按 width/height / DPR 处理
official_*：在当前基础上额外放大一档，避免显示过小
upower_[...]：对部分装扮/收藏集表情，不再信返回的 20x20，而是使用经验源尺寸 162px

这套方案未必是最终答案，但至少它符合一个事实：官方客户端自己也没有完全“照接口尺寸渲染”。既然目标是和官方保持一致，那前端实现就不能只迷信协议字段，还得尊重实际表现。

如果后面继续往下深挖，这条链路真正值得做的事不是再写一层更复杂的缩放公式，而是继续积累样本，把不同 emoticon_unique 家族的行为边界摸清楚。等规则足够稳定之后，再把经验判断收敛成更明确的分类逻辑，这样比一开始就追求“绝对通用解”更现实。

修复HyperOS 小窗模式下 Flutter viewPadding 异常的临时兼容方案

Sun, 14 Dec 2025 00:00:00 GMT

Cover Image 摸了卢西娅 (@Clear water)

修复HyperOS 小窗模式下 Flutter viewPadding 异常的临时兼容方案

前言

最近在调试 dart_simple_live / PiliPlus 时遇到一个烦人的问题：在澎湃OS（HyperOS）的窗口化／小窗模式下，Flutter 会把 MediaQuery 上报的 viewPadding.top 给出异常值（例如非常大或不合理的数值），导致界面灰屏、只显示底栏或布局错位。官方 issue 已有相关讨论但修复优先级较低，于是我把社区实践的临时兼容方案记录下来，顺便把注意点写清楚，方便后续在项目里复用。

省流版结论（直接上结论）

问题根源：HyperOS 窗口化模式下 Flutter 的 viewPadding 报告异常（参考 issues: https://github.com/flutter/flutter/issues/164092, https://github.com/flutter/flutter/issues/161086）。
暂时有效的兼容逻辑：当 mediaQuery.viewPadding.top > 50 时认为异常，并替换为 fallback padding（例如 top:25 bottom:35）。
千万不要把 viewPadding.top == 0 或 <= 0 一律视为异常：0 在全屏/沉浸模式下是合法值，会被误判导致全屏出现顶部空白。

实际场景与踩坑（短版）

复现：在澎湃OS设备上启用小窗/窗口化模式，观察页面是否变成灰屏或只显示底部（布局异常）。
我看到的错误做法：把 viewPadding.top <= 0 也当成异常（初版修复中常见）。结果是：全屏/沉浸模式（viewPadding.top == 0）会被强制套上回退 padding，从而导致顶部空白。
正确做法：只把明显异常的大值（> 50）当作 Flutter 在小窗模式下的上报 bug 来处理。

解决方案（代码 + 说明）

把下面的临时兼容逻辑放到你的 main.dart（或创建 MaterialApp 的地方），通常放在 MaterialApp 的 builder 中最合适：

// 在 MaterialApp 的 builder 中加入如下逻辑：
builder: (context, child) {
  // Fix for HyperOS windowed-mode Flutter bug:
  // - Values > 50 indicate the bug (windowed mode on HyperOS)
  // - Values == 0 are valid for fullscreen/immersive mode and must NOT be treated as abnormal
  const fallbackPadding = EdgeInsets.only(top: 25, bottom: 35);
  const maxNormalPadding = 50.0;

  final mediaQueryData = MediaQuery.of(context);
  final hasAbnormalPadding = mediaQueryData.viewPadding.top > maxNormalPadding;

  if (hasAbnormalPadding) {
    return MediaQuery(
      data: mediaQueryData.copyWith(
        viewPadding: fallbackPadding,
        padding: fallbackPadding,
      ),
      child: child!,
    );
  }

  return child!;
},

要点说明

maxNormalPadding = 50 是一个经验值（正常状态栏高度通常 20–48dp）；根据设备或需要可微调。
回退 padding 选用 top:25 bottom:35 是社区常见值，也可根据 UI 需求调整。
这个改动只做“临时兼容”；一旦 Flutter 官方修复对应 issue，应当移除或用 feature flag 控制。

测试建议（必做几项）

真机验证（HyperOS）：
- 切换到小窗/窗口化模式，确认页面不再灰屏且布局正常。
- 切换到全屏/沉浸式，确认没有被误加顶部回退（无顶部空白）。
在其他厂商系统（Android 原生、MIUI 等）上回归测试，确保该兼容逻辑不会引入副作用。
如果可能，记录 MediaQuery.of(context).viewPadding.top 在不同模式下的数值，方便调参和日志定位。

关联与参考

我在修复PiliPlus 的实践 PR（参考）：https://github.com/Starfallan/PiliPlus/pull/2 和 https://github.com/Starfallan/PiliPlus/pull/4
- 初版 PR 对 <= 0 也判为异常 → 导致全屏空白
- 后续 PR 将判定改为仅 > 50 → 解决了全屏误判问题
Flutter 官方 issue：
- https://github.com/flutter/flutter/issues/164092
- https://github.com/flutter/flutter/issues/161086

总结（一句话）

把 viewPadding.top == 0 视为合法（全屏/沉浸），只把非常大的值（>50）当作 HyperOS 窗口化模式下的 Flutter 报错并进行回退，这样既能修复小窗灰屏问题，又避免破坏全屏体验。

listary-hack

Tue, 26 Aug 2025 00:00:00 GMT

Listary Pro逆向教程

工具准备

Listary v6.3.2.88
官网下载地址
下载后正常安装，例如安装到 D:\Program Files\Listary
dnSpy v6.1.8
下载地址
下载 dnSpy-net-win64.zip，解压到任意目录
de4dot v3.2.0.0
下载地址
下载 de4dot-net8.0-winx64.zip，解压到任意目录

反混淆

将安装目录下的 D:\Program Files\Listary\Listary.exe 拖到 de4dot.exe 上
安装目录下会生成 Listary-cleaned.exe
重命名文件：
- Listary.exe → Listary0.exe
- Listary-cleaned.exe → Listary.exe

修改代码

打开 dnSpy.exe，将新的 Listary.exe 拖入程序集资源管理器
修改 Listary.Core.Pro/LicenseChecker
- 右键 CheckLicense 方法，选择“编辑方法”
- 替换方法内容，点击右下角“编译” 修改代码
```
public static bool CheckLicense(string email, string license)
{
    // 替换掉原有的，直接返回true
    return true;
}
```
修改 Listary.Core.Pro/LicenseProPageViewModel
- 右键 CheckLicense() 方法，选择“编辑方法”
- 删除第15行，点击右下角“编译”
```
private void CheckLicense()
{
        // 删除下面这行
-       this.dt();
}
```

修改 Listary.Core.Pro/ProService（共五处）

右键 ProService，选择“编辑类”
修改1：删除指定的两行

    public bool IsPro
    {
        [CompilerGenerated]
        get
        {
            return this.bool_0;
        }
        [CompilerGenerated]
        private set
        {
            if (this.bool_0 == value)
            {
                return;
            }
            this.bool_0 = value;
-           this.<>OnPropertyChanged(Class373.LicenseEmail);
-           this.<>OnPropertyChanged(Class373.IsPro);
        }
    }

修改2：跳到210行附近，删除指定内容,如图删除211-221行内容

修改3：将 ActivateNewLicense 和 method_2 函数内容改为return Task.FromResult(new ProService.ActivationResult());

以下为单个示例：

// Token: 0x06001177 RID: 4471 RVA: 0x0003A6D0 File Offset: 0x000388D0
public Task<ProService.ActivationResult> ActivateNewLicense(string email, string licenseKey)
{
    ProService.Struct84 @struct;
    @struct.asyncTaskMethodBuilder_0 = AsyncTaskMethodBuilder<ProService.-
    ActivationResult>.Create();
    @struct.proService_0 = this;
    @struct.string_0 = email;
    @struct.string_1 = licenseKey;
    @struct.int_0 = -1;
    @struct.asyncTaskMethodBuilder_0.Start<ProService.Struct84>(ref @struct);
    return @struct.asyncTaskMethodBuilder_0.Task;
    return Task.FromResult(new ProService.ActivationResult());
}

修改4：将 DeactivateLicense、ScheduleAutoCheck、DebugTestActivateLicense、method_3 函数内容改为 return Task.CompletedTask;

  // Token: 0x06001178 RID: 4472 RVA: 0x0003A724 File Offset: 0x00038924
  public Task DeactivateLicense()
  {
-       ProService.Struct85 @struct;
-       @struct.asyncTaskMethodBuilder_0 = AsyncTaskMethodBuilder.Create();
-       @struct.proService_0 = this;
-       @struct.int_0 = -1;
-       @struct.asyncTaskMethodBuilder_0.Start<ProService.Struct85>(ref @struct);
-       return @struct.asyncTaskMethodBuilder_0.Task;
+       return Task.CompletedTask;
  }

修改5：修改完上述函数后，可能会遇到编译报错的情况。这时候请删除13行和224行：

//第13行
- using NLog;
//第224行
- // Token: 0x04000951 RID: 2385
- private static readonly ILogger ilogger_0 = LogManager.GetCurrentClassLogger();

点击右下角“编译”
点击左上角“文件”，选择“保存模块”，确定

运行

将修改的Listary.exe覆盖原有的安装目录下的 Listary.exe

双击 Listary.exe，完成所有步骤，Enjoy 🎉

Cloudflare R2 图像压缩

Thu, 31 Jul 2025 00:00:00 GMT

Cover Image: 「天外大合唱」耀嘉音x知更鸟(@若宫晴月)

Cloudflare R2 图像压缩

前言

博客之前上传的图片都是直接上传到基于 Cloudflare R2 的图床的。并且早期都是直接上传的原图。随着时间的推移，发现原图的体积实在是太大了。导致网站加载速度变慢。所以需要对图片进行压缩。

工具介绍

为了实现对图片的压缩，在互联网上搜了下，看到了这样的一个帖子开源一个压缩 Cloudfare R2 图片的工具。帖子中介绍了他开发的一个工具，支持将多种格式图片进行压缩。实现了全自动图片的下载、压缩、上传到 Cloudflare R2 的功能。

::github{repo="zhangchenchen/reduce_cloudfare_image"}

感谢原作者的贡献。

但是他开发的工具是将各种图片保持原格式分类进行压缩的，而我希望能够将所有图片统一压缩为 AVIF 格式。于是我对他的工具进行了改造，改为将图片转换为 AVIF 格式。并且在压缩过后，支持删除原图。

::github{repo="Starfallan/reduce_cloudfare_image"}

使用方法

具体的使用方法可以参考仓库中的Readme，这里就不在赘述。

结语

希望这个工具能够帮助到需要压缩 Cloudflare R2 图片的朋友们。如果有任何问题或者建议，欢迎在仓库中提出issue或者pr。实际测试了下，在压缩质量为85的时候，整体压缩率在85%左右。效果还是非常不错的。

Pillow的AVIF 支持

Thu, 31 Jul 2025 00:00:00 GMT

Cover Image: Summertime🏝️(@Remmui)

Pillow AVIF 支持

前言

之前在使用 Pillow 处理图像时，发现 AVIF 格式的支持并不完善。在查阅最新的 Pillow 文档后，发现Pillow在11.3.0版本中终于在已经内置了对 AVIF 格式的支持。

Pillow 11.3.0 has now been released with AVIF support in the wheels.

但是在实际使用中，仍然遇到了一些问题。经过一番折腾，终于搞定了 AVIF 格式的支持。

省流版：有问题就尝试手动安装libavif库。再从pypi源安装Pillow。

实际使用

:::tip 因为我在前面的文章已经介绍过了我已经将Python切换到了Pixi进行管理。

所以以下命令，均为Pixi的命令。可以自行替换为pip命令。 :::

踩坑

首先我直接使用pixi add pillow安装了Pillow，结果发现 AVIF 格式的支持并没有生效。运行代码直接报错。于是使用检查代码查看Pillow的信息。

pixi run python -m PIL --report

报告内容显示：

pixi run python -m PIL --report
--------------------------------------------------------------------                                              
Pillow 11.3.0
Python 3.12.11 | packaged by conda-forge | (main, Jun  4 2025, 14:29:09) [MSC v.1943 64 bit (AMD64)]
--------------------------------------------------------------------
Python executable is D:\Code\Python\reduce_cloudfare_image\.pixi\envs\default\python.EXE
System Python files loaded from D:\Code\Python\reduce_cloudfare_image\.pixi\envs\default
--------------------------------------------------------------------
Python Pillow modules loaded from D:\Code\Python\reduce_cloudfare_image\.pixi\envs\default\Lib\site-packages\PIL
Binary Pillow modules loaded from D:\Code\Python\reduce_cloudfare_image\.pixi\envs\default\Lib\site-packages\PIL
--------------------------------------------------------------------
--- PIL CORE support ok, compiled for 11.3.0
--- TKINTER support ok, loaded 8.6
--- FREETYPE2 support ok, loaded 2.13.3
--- LITTLECMS2 support ok, loaded 2.17
--- WEBP support ok, loaded 1.6.0
*** AVIF support not installed
--- JPEG support ok, compiled for libjpeg-turbo 3.1.0
--- OPENJPEG (JPEG2000) support ok, loaded 2.5.3
--- ZLIB (PNG/ZIP) support ok, loaded 1.3.1
--- LIBTIFF support ok, loaded 4.7.0
*** RAQM (Bidirectional Text) support not installed
*** LIBIMAGEQUANT (Quantization method) support not installed
*** XCB (X protocol) support not installed

可以看到 AVIF 的支持并没有安装。

又因为在默认情况下，Pixi安装是从Conda Forge源获取的。我于是猜测可能是因为Conda Forge源的Pillow的wheel包没有包含 AVIF 的支持。

于是使用pixi add --pypi pillow命令从PyPI源安装Pillow。发现还是不行,这就有点奇怪了。官方明确表示11.3.0版本已经内置了 AVIF 的支持。

解决方案

经过一番查找，发现是因为Pillow的AVIF支持依赖于libavif库，而这个库有可能没有被正确安装。于是建议手动安装libavif库。

pixi add libavif

安装完成后，再次运行报告命令，检查 AVIF 支持是否已安装。就已经ok了。

注意，测试了下。从conda-forge源安装的pillow在手动安装libavif后，还是无法工作的。但是pypi源安装的pillow可以正常工作。

有点奇怪，但至少现在可以正常使用 AVIF 格式了。开摆。

--- AVIF support ok, loaded 1.3.0

总结

在使用 Pillow 处理图像时，AVIF 格式的支持虽然在11.3.0版本中已经内置。但从Conda Forge源安装的Pillow可能无法正常工作。建议从PyPI源安装，并手动安装libavif库以确保 AVIF 格式的支持。

远离Notify For系列软件

Sat, 19 Jul 2025 00:00:00 GMT

Cover image source: 鸦居

前言

相信日常有使用过小米手环的朋友，而且之前玩过表盘自定义的朋友都知道Notify For系列软件。例如Notify For Mi Band、Notify For Amazfit等。这些软件的主要功能是提供手环的通知推送、表盘自定义等功能。当初玩小米手环6的时候，看中了通知的自定义推送和闹钟的自定义唤醒功能，所以就下载了Notify For Mi Band。并购买了Pro版本。

问题

只可惜其实Notify For Mi Band看似功能很多，其实大多只是界面上宣传的效果很强，在实际使用中只是比当初本身丑的要命的Zeep Life好看一些。什么闹钟的智能唤醒，自定义提醒，很多功能都是在吹的很强大。实际使用中并没有什么用。

并且第三方本身app都挺难用的，需要额外的折腾成本已经大于了体验的提升。需要额外的授权码，需要禁用官方app。

并且在更新到小米运动健康后，可以说对比起来Notify For Mi Band的界面不能说经典吧，只能说是充满历史的厚重感。以下是界面对比，Notify的界面已经是沿用非常多年了。

购买体验

此外，重要的是，Notify For Mi Band的购买体验也并不理想。当初在购买Pro订阅时，承诺一次购买，终身解锁功能。但事实上官方总想着出其他的付费方式。当初还卖过Pro之外的2023订阅，说是要覆盖开发成本。我只能说是玩不起。

然后，由于小米手环7Pro不再使用原来的华米的Zeep OS，软件需要重新适配，官方直接就放弃了原来的Notify For Mi Band的更新。直接新开了一个Notify For Xiaomi的app。并且在购买时，直接就不支持原来的Pro订阅了。宣布二者是独立的产品，订阅不通用。

如果是之前的Notify For Amazfit和Notify For MiBand这两个软件的Pro订阅不互通我是可以理解的，毕竟是两个不同的产品。但是Notify For Xiaomi和Notify For Mi Band是同一个产品线的，直接就不支持Pro订阅了。只能说是非常不合理。

后续

总的来说，希望这些碎碎念能够让大家对Notify For系列软件有一个更清晰的认识。建议不要使用和购买。表盘自定义可以用米坛的表盘自定义工具（虽然捐赠后，广告还是有点多），其他官方app已经足够使用了。

将Vscode添加到Win11右键菜单

Fri, 13 Jun 2025 00:00:00 GMT

Cover image：鱼鹅BABA

前言

VScode相信大家都用的，但是由于当初安装的时候没有勾选“将VScode添加到右键菜单”，导致现在想要在文件夹或文件上右键打开VScode时没有这个选项。今天就来分享一下如何将VScode添加到Windows 11的右键菜单。

目前网上的很多办法都是通过修改注册表来实现的，但是这种方法有点麻烦，而且只能添加到Win10的旧版右键菜单中。今天这个方法可以实现直接添加到Win11的新版右键菜单中。

方法来源

:::note 以下方法发现于官方 Issue

[Meta] Enable windows 11 context menu by default in Stable :::

BartoszRojek 在评论区分享了其开发的程序 CodeModernExplorerMenu，用以一键添加在VScode中打开到Win11右键菜单，同时支持Insider版本。

具体使用方法

下载 CodeModernExplorerMenu
运行对应版本的msi文件。（可能需要关闭杀毒软件）
完成后，重启 Windows资源管理器。

这样，你就可以在 Win11 的右键菜单中看到“在 Visual Studio Code 中打开”选项了。

补充

如果你的Vscode没有安装在默认路径（ C:\Program Files\Microsoft VS Code ），你需要先 Fork 该仓库，Fork 仓库后，编辑 src/explorer_command.cc 文件中的路径，提交更改后会自动触发构建。在 "Actions" 标签页中打开最新的构建，你可以在 Artifacts 里找到生成的 msi 文件。
```
 if (!std::filesystem::exists(module_path)) {
    std::filesystem::path fallback_path = std::filesystem::path("C:\\Program Files") / DIR_NAME / EXE_NAME;
    if (std::filesystem::exists(fallback_path)) {
        module_path = fallback_path;
    } else {
        return E_FAIL;
    }
}
```
如果你需要自定义安装路径，一样是 Fork 项目后，在 msi/RunOnInstall.ps1 文件中修改对应文本。之后同样是等待 Actions 重新打包生成 msi 文件即可。
```
$ProductName = 'Code Modern Explorer Menu'
$ProductPath = "$Env:LOCALAPPDATA\Programs\$ProductName"
$MenuName = "Open with Code"
```

以上的内容均来自于之前那个Issue中软件作者的回答，经过翻译和整理。

结语

Vscode右键菜单打开貌似还是一笔烂账。但是通过以上的方法，不管是之前跟我一样忘了在安装的时候勾选“将Vscode添加到右键菜单”，还是莫名其妙消失了的用户，都可以方便地将其添加到右键菜单中，提高我们的开发效率。

终端挑选日记

Wed, 11 Jun 2025 00:00:00 GMT

Cover image：Fre

前言

之前用其实折腾过一段时间了，因为主要开发环境在Windows上，所以一直用的是Windows Terminal。为了增强，使用了Powershell7和Oh My Posh来美化终端。

其实原本的效果已经很不错了，~~但我这个人就是喜欢折腾~~，想尝试一些新的东西，看看能不能带来一些新体验。

选择终端

1.Warp

Warp还是比较火的一个终端，主要新意对我来说应该是他的AI功能。我的原终端使用copilot-cli也是类似的，但是我觉得copilot-cli的使用步骤比较繁琐，需要先输入命令：gh copilot suggest "xxx"，然后再选择命令。

Warp的AI功能可以直接在终端中输入命令，自动补全和建议命令，使用起来更方便。

试了一下，觉得整体界面还是挺不错的。但是发现了几个问题。

需要账号登录，才能使用AI功能。
Shell Promt的显示有问题显示图标有割裂，需要调整字体和字号来解决。比较隔应，因为已经习惯于这个字号和字体了。
AI功能是收费的，免费版每月只能使用150次。而且不能使用自定义的AI模型，只能使用Warp提供的模型。目前来看Warp团队也不打算提供自定义模型的功能。150次属于是不太够用。

WaveTerm

这个说实话，预期还蛮高。结果下载下来开幕雷击：默认Shell选择了Windows Powershell而不是PowerShell 7。

想要设置一下默认终端，发现没有GUI设置界面，只能通过配置文件来手动修改。

设置完更是震惊：设置默认终端后

"term:localshellpath": "C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe"

打开显示找不到Oh My Posh的配置文件。

说实话，给我震惊到了。就目前这个程度，属实不够好用。我原本是冲着可以自定义AI模型和自定义主题来的。结果现在连默认终端都不能设置好。那还是算了吧。并且他的AI也只是内置一个对话窗口而已，并没有集成到终端中。

WezTerm

WezTerm是一个跨平台的终端模拟器，支持GPU加速，性能非常好。它的配置文件是Lua脚本，可以自定义很多功能。折腾到这里，已开摆了。没有什么额外的功能，类似于目前的Windows Terminal，于是没有下载。

结论

原本换终端的打算就是想要改进目前的AI体验和补全的体验。因为目前终端的补全，我觉得效果都比较差。我理想中应该是类似于IDE那样的补全形式。我看到的方法是通过Amazon Q和Fig来实现的，但是Windows上使用不了。只能希望有更好的终端出现或者Amazon Q能出原生的Windows版本。

Fuck Pixi

Wed, 04 Jun 2025 00:00:00 GMT

Cover Image 冷蝉

Fuck!!! :::tip 温馨提示，本文无任何价值，纯纯输出情绪 :::

从11点打算随手装个thefuck在Global环境下

pixi global add --environment python3-12 thefuck
Error:   × Failed to determine virtual packages for environment python3-12
  ╰─▶ Cannot solve the request because of: No candidates were found for thefuck *.

很好，Conda下没有，那就Pypi吧

pixi global add --environment python3-12 thefuck --pypi
error: unexpected argument '--pypi' found

  tip: a similar argument exists: '--pypi-keyring-provider'

Usage: pixi.exe global add --environment <ENVIRONMENT> --pypi-keyring-provider <PYPI_KEYRING_PROVIDER> <PACKAGE>...

For more information, try '--help'.

报错，提示要使用--pypi-keyring-provider参数。那就继续研究吧。找到keyring章节，发现要配置keyring。

虽然对于我这种Python小白来说，还没用过keyring，但还是试着配置了一下。

pixi global install keyring

然后

keyring set https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple starfallen

结果报错，提示找不到keyring命令。我真的是艹了。试了各种方法，结果都不行。网上唯一有关的issue上只说了

With no Pixi changes, this now works. Some dependency of keyring pushed a broken version I guess.

在没有 Pixi 更改的情况下，这现在可以正常工作。我想是 keyring 的某个依赖推送了一个损坏的版本。

这就是说了没说。就这样一直尝试配置Keyring，尝试了换源，各种方法重装。反正明明对外暴露了keyring命令，结果就是找不到。

最后，又去找issue。我看看别人在Global上是如何安装pypi dependencies的。

结果就看到了Allow pypi dependencies in global envs

这个issue，里面说了Pixia暂不支持在Global环境下使用Pypi。这一个不支持，就拖到了25年6月。还不支持！

希望支持的可以到对应Issue上点个赞，激励Pixi团队。

So，这几个小时就是纯纯的浪费。希望大家引以为戒，同时也希望Pixi能早日支持Global环境下的Pypi依赖。

最后，有没有人能告诉我，这个Keyring到底怎么配？清华源就没提过要keyring这件事。项目内pixi安装pypi依赖也没提过要配置keyring。来个大佬，救一救！

Pixi使用笔记

Tue, 03 Jun 2025 00:00:00 GMT

Cover image ASK

Pixi使用笔记

1. 为何选择Pixi

以下是官网介绍：

Pixi is a fast, modern, and reproducible package management tool for developers of all backgrounds.

1.1 性能

Pixi 集成了UV，是目前最为强大的Conda包管理工具。比Conda快10倍以上，在Python方面，UV更是比PIP快的不知道多少倍。像我一样厌烦了Conda和pip那蜗牛般速度的用户，Pixi是一个不错的选择。如图

1.2 隔离环境

pixi 可以为常用的 CLI 工具全局安装软件包，例如 git 、 bat 、 rg （ripgrep）、 bash 等。每个全局安装的工具都生活在其自己的隔离环境中，因此没有损坏“基础环境”的风险。

$ pixi global install git bash ripgrep bat
✔ Installed package bash 5.2.21 h15d410d_0 from conda-forge
✔ Installed package ripgrep 14.1.0 h5ef7bb8_0 from conda-forge
✔ Installed package bat 0.24.0 h5ef7bb8_0 from conda-forge
  These executables are now globally available:
   -  bash
   -  bashbug
   -  rg
   -  bat

1.3 不再需要激活

相信每个人都被Conda的激活和取消激活搞得头疼不已。Pixi没有“conda activate” / “conda deactivate”功能。相反，项目应该在一个 pixi.toml 中定义所有配置，并在项目文件夹中运行 pixi shell 或 pixi run 。Pixi 会自动发现环境，安装并激活它。再也不用担心conda激活污染终端的配置文件了。

现在都忘不了powershell折腾了conda activate搞了半天，成功后成功使powershell的启动慢到需要5,6秒。

1.4 兼容性

Pixi可以一行命令实现从Conda迁移到Pixi

pixi init --import ./environment.yml

2. 安装Pixi

Pixi的安装非常简单

curl -fsSL https://pixi.sh/install.sh | bash
# or on Windows PowerShell
iwr -useb https://pixi.sh/install.ps1 | iex

3. Pixi入门

Pixi的入门非常简单，和Conda类似。Pixi使用pixi命令来管理包和环境。

初始化

//新建hello-world工作空间
//也可以在当前目录直接Pixi init就行

pixi init hello-world
cd hello-world

添加依赖: // 添加Python 3.12基础环境
```
pixi add python=3.12
```
添加依赖:
```
pixi add cowpy
```
如果对应包不在conda-forge中，可以使用pypi源
```
``` bash
pixi add cowpy --pypi
```
```
直接运行:
```
pixi run python hello.py
```
也可以使用pixi shell实现类似于conda activate后的效果
```
pixi shell

python hello.py
```

添加任务: Pixi有独有的任务管理功能，可以方便地添加和运行任务。

pixi task add start python hello.py

随后可以直接运行任务

pixi run start

✨ Pixi task (start): python hello.py
 __________________
 < Hello Pixi fans! >
 ------------------
      \   ^__^
       \  (oo)\_______
          (__)\       )\/\
            ||----w |
            ||     ||

4.Pixi的自定义配置

以下配置为我个人的使用习惯，参考了官网的文档。Pixi Configuration

4.1 自定义Pixi存储位置

Pixi默认的存储位置在C盘个人用户目录下的.pixi文件夹中，可以通过设置环境变量PIXI_HOME来修改。

我们可以使用pixi info命令查看当前的Pixi配置。

4.2 修改缓存位置

经过上面的配置后，Pixi Global环境会使用新的存储位置，如上图，但是缓存位置还是在C盘

Pixi的缓存默认位置在C盘的%LOCALAPPDATA%\rattler文件夹中，可以通过设置环境变量PIXI_CACHE来修改。

4.3 新建Global环境

不得不说，拥有一个独立的Global环境是非常有必要的。我们可以使用以下命令来创建一个新的Global环境：

pixi global install python=3.12 --environment python3-12 --expose python=python

上面的命令会创建一个名为python3-12的全局环境，并将Python 3.12暴露为python命令。这样的话，用户可以在任何地方使用python命令，而不必担心环境问题。

此外，如果你想要有多个版本的Python，可以使用以下命令来安装不同版本的Python：

pixi global install python=3.10 --environment python3-10 --expose python3.10=python
pixi global install python=3.11 --environment python3-11 --expose python3.11=python

在运行上述命令后，我们的系统上有 python3.10 和 python3.11 可用。

4.4 自定义源

可以更改每个单独项目的源，也可以更改全局源。我这里是更改了全局设置

[pypi-config]
# Main index url 主镜像设置为清华源
index-url = "https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple"
# list of additional urls
extra-index-urls = ["https://pypi.org/simple"]


[mirrors]
# 重定向所有对conda-forge的请求到清华源
"https://conda.anaconda.org/conda-forge" = ["https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/conda-forge/"]

给Fuwari博客添加密码保护功能（test123）

Thu, 29 May 2025 00:00:00 GMT

🔒 这是一篇受密码保护的文章

恭喜！如果你能看到这段内容，说明密码加密功能工作正常。

功能特性

这个密码保护系统具有以下特性：

✅ 静态部署友好: 完全基于前端加密，不需要后端服务
✅ AES-256-CBC 加密: 使用现代加密算法保护内容
✅ 用户友好: 简洁的密码输入界面
✅ 响应式设计: 适配各种设备屏幕
✅ 主题兼容: 完美适配明暗主题切换

使用方法

要创建一篇受密码保护的文章，只需要在文章的 frontmatter 中添加 password 字段：

---
title: 我的私密文章
published: 2025-05-29
password: yourpassword
---

这里是受保护的内容...

测试密码

本文的密码是：test123

安全说明

⚠️ 重要提醒：

虽然内容经过加密，但这只是基础的内容保护
不建议用于存储高度敏感的信息
密码会存储在生成的静态文件中，请选择合适的强度
这个方案主要适用于博客中需要简单访问控制的场景

技术实现

该功能基于以下技术栈实现：

Web Crypto API: 用于浏览器端的加密解密操作
AES-CBC 模式: 提供对称加密功能
Base64 编码: 用于存储加密后的内容
Astro Slots: 用于获取需要加密的HTML内容

不用管上面的，其实就是参考大佬的Astro❤️Password

自定义样式

密码输入界面完全支持自定义样式，与博客主题保持一致的视觉效果。

感谢使用Fuwari博客的密码保护功能！🎉

记录Vercel的天坑测试环境

Thu, 29 May 2025 00:00:00 GMT

Cover Image Coria

前言

因为Fuwari没有自带加密博客的功能，但是觉得这个功能还是挺有用的，所以就想着自己实现一个。于是就开始了Fuwari的加密博客功能的开发。在网上找到了对应的资料，并尝试着手实现。这就是给Fuwari添加加密博客。

自然，在开发新功能的时候，肯定是创建了一个测试分支，来进行测试和开发。而Vercel在检测到分支有更新时，会自动部署到预览环境。如图

Vercel的坑爹Preview环境

因为本地测试没有问题，所以就想着在Vercel的预览环境上进行测试。毕竟这也不敢直接merge到主分支上。于是就开始了Vercel的预览环境测试。

自信满满，直接打开velcel，选择对应的deployment，点击预览环境的链接，发现加密文章的浏览非常正常。本来想着下班收工，可以直接合并到主分支，部署到生产环境了。

结果当我访问其他非加密文章时，发现页面直接报500了。报错Code: MIDDLEWARE_INVOCATION_FAILED。

这下可好了，开始怀疑是不是要开启SSR（服务端渲染）还是哪里配置有问题。

然后就开始查后面。一开始查Vercel对这个问题的说明，发现没啥帮助，后面又看到Astro文档里说要添加Vercel适配器。就开始添加适配器。（一开始没加过，也是正常跑）

安装完适配器，发现还是一模一样的问题。继续查文档，发现Astro官网关于适配器的文档里有设置edgemiddleware的设置项，便又是添加对应的配置。

添加完配置后，重新部署，还是一样的问题。500错误。这下我就彻底懵了。明明本地测试没问题，为什么Vercel的预览环境就不行了？难道是Vercel的Preview环境有问题？

于是随便打开了一个之前main分支的预览环境，发现也是500错误。这个时候我就开始怀疑Vercel的Preview环境是不是有问题。

那就只能实践出真知了，直接merge到主分支，看看生产环境会不会有问题。结果那就是一遍过。生产环境一切正常。真的是自己吓自己。。

总结

Vercel的Preview环境真的是一个天坑。完全不可靠，测试完全不靠谱。建议大家在开发新功能时，在本地测试完后做好措施，如果发现测试环境有问题，可以试试直接在生产环境测试。

毕竟Vercel的Preview环境可能会给你带来意想不到的麻烦。

当然，如果有哪位大佬知道Vercel的Preview环境到底出了什么问题，欢迎在评论区指导一二。

使用Charles在MuMu12上进行抓包

Fri, 23 May 2025 00:00:00 GMT

Cover image source: ATDAN

因为我使用的模拟器是MuMu12，所以需要在MuMu12中配置代理，使其能够通过Charles进行抓包。具体步骤如下：主要参考了官网教程。

但是还是要额外补充一些要注意的点：

教程中要使用openssl x509 -inform PEM -subject_hash_old -in charles.pem命令，win默认自带的OpenSSL版本过低，无法使用该命令。可以手动安装一个新的版本，具体步骤参考另一篇文章《升级Windows自带的OpenSSL》。
文中adb连接地址为 127.0.0.1:7555 ，但mumu12的adb默认端口为16384，故需要将连接地址修改为 127.0.0.1:16384。
使用adb root命令时，注意到模拟器界面在弹出的授权框中需要点击“允许”才能获取root权限。

adb push c98c9e74.0 /system/etc/security/cacerts .\adb shell "chmod 664 /system/etc/security/cacerts/c98c9e74.0"

升级Windows自带的OpenSSL

Fri, 23 May 2025 00:00:00 GMT

Cover image source: 鸦居

背景

我在尝试使用抓包工具Charles时，教程中提到有一步需要使用openssl x509 -inform pem -subject_hash_old -in charles.pem命令来获取证书的指纹。由于Windows自带的OpenSSL版本过低，导致无法使用该命令，因此决定升级OpenSSL。

升级过程

首先，访问Shining Light Productions下载最新版本的OpenSSL，选择适合你系统的版本（32位或64位），并下载对应的安装包。
- 或者使用winget命令安装：
```
winget install -e --id ShiningLight.Light.OpenSSL
```
下载完成后，点击对应的安装包进行安装。安装过程中，选择“Copy OpenSSL DLL files to: The Windows system directory”选项，这样可以将OpenSSL的DLL文件复制到Windows系统目录中，方便后续使用。
接下来，需要将OpenSSL的bin目录添加到系统的环境变量中。右键点击“此电脑”，选择“属性”，然后点击“高级系统设置”，在“系统属性”窗口中点击“环境变量”。
在“系统变量”中找到“Path”变量，选择后点击“编辑”，然后添加OpenSSL的bin目录，例如C:\Program Files\OpenSSL-Win64\bin。 :::important 如果你直接点击新增按钮并添加，你会发现还是使用的默认旧版本。

所以你需要手动将对应的条目放置在最上面。以防止哪里第三方的OpenSSL版本覆盖你新安装的版本。 :::
完成后，打开命令提示符，输入openssl version，如果显示的是最新版本的OpenSSL，则说明升级成功。

关于EDG事件的杂谈？

Mon, 19 May 2025 00:00:00 GMT

（非）客观先介绍下事情的经过

:::note 以下内容来自Gemini搜集网络资料整理 :::

早期 (早于2025年4月): Simon加入EDG战队。 EDG在2024年的无畏契约全球冠军赛中夺冠，Simon是其中的关键一员，赢得了粉丝的喜爱。
2025年VCT中国赛区第一阶段前两周: EDG决定用新选手Jieni7替换Simon。这一变动引起了粉丝的不满和困惑，因为Simon在之前的比赛中表现出色。
2025年4月14日左右:
- EDG经理Aqua在直播中解释换人原因，称Simon训练不努力，与队伍沟通存在问题。 Aqua提到，Simon被下放后曾问是否第二天就不用起床训练，并且在队友训练时玩手机、不参与复盘、不与教练沟通，甚至不去场馆。 Aqua表示，EDG最初希望保护Simon，认为他还有进步空间。
- Simon对此进行回应，声称自己一直在努力训练。他在直播中分享了与Aqua的私聊截图，质疑为何自己要承担比其他首发选手更多的训练责任，并声称其他队员也存在不职业的行为。他认为自己受到了不平等的对待。
- EDG的其他关键队员，包括Zmjjkk、Nobody、Smoggy和CHICHOO，在微博上公开表达了对Simon的不满。他们指责Simon在训练赛中缺乏沟通，与直播时判若两人，并且在比赛表现不佳时会说不想打或要求换人。队友表示曾试图帮助和包容Simon，但他的职业态度令人无法接受。
2025年4月15日左右: Simon与Aqua的微信聊天记录被泄露，进一步公开了双方的矛盾和指责。聊天记录显示，Simon对被下放感到不满，并质疑队伍的管理和队友的职业性，而Aqua则指责Simon缺乏投入和在训练中的不良行为，并称通过摄像头观察到了他的行为。
事件发生后至VCT CN第一赛段结束:
- 部分Simon的粉丝对EDG俱乐部和队员进行了攻击，甚至泄露了队员Smoggy的个人信息。 EDG俱乐部对此采取了法律行动，并报案处理。
- EDG战队在2025年VCT CN第一赛段的比赛中表现不佳。作为曾经的世界冠军和CN赛区的成绩担当，EDG未能延续其统治力。
- EDG在季后赛中，于败者组以1-2不敌BLG，止步四强，因此无缘参加多伦多大师赛。这是EDG自VCT CN赛区成立以来，首次未能获得大师赛资格，也创下了他们在CN联赛的最差战绩。
- Simon在此期间处于非活跃状态，未能参与队伍的比赛。他的未来去向和职业生涯发展尚未明确。

聊聊这件事

其实我本人没有玩过很多瓦罗兰特游戏本身，之前也只是搓过几把游戏。

第一次真正接触其比赛，也就是edg的夺冠的那次冠军赛。偶然在B站有刷到说edg打破历史，于是便点进了比赛看了两眼。

很幸运，第一次看比赛就看到了edg的夺冠。这是VCTCN赛区的第一次夺冠，作为一个新兴的赛区，能在全球赛上夺冠，确实是很不容易的。EDG在赛前也是不被大家看好，但就是他们，在比赛中打破了所有人的预期，最终夺得了冠军。

之后也陆陆续续看了一些比赛，EDG的表现也一直很不错。直到曼谷大师赛，EDG回家的那场比赛。我当初也是觉得胜负乃兵家常事，没什么特别遗憾的，有问题慢慢解决就好了。

但是后续就是第一赛段的换人事件了。我一开始也觉得很意外，冠军五人组的换人，确实是很少见的。虽然说需要调整，但是直接换人对于团队游戏意味着很多东西。毕竟团队游戏，五个人的配合是很重要的。换人意味着重新磨合，重新适应。但是也还是觉得是正常轮换，毕竟是要求变的。

当时网上也冒出了一些声音质疑战队为什么要换Jieni7。毕竟确实刚上场，打的不是很行。

但是后面随着时间的推移，越来越多的事情被曝光出来。这件事也就变得越来越复杂了。看到了Simon的直播，看到网上的争吵。但我也是默默吃瓜，等待回应，静待发展。

直到了那天，四个队友集体发声，在微博上指责Simon。我也觉得这件事就是已经盖棺定论了。职业选手的职业态度是很重要的，有天赋的很多，一个人要四个队友哄着玩游戏，这就说不过去了。我记得当初的网上的声音也基本是指责Simion的。

可是电子竞技就是成绩说话，EDG输了就是该挨骂，但是这时候转过来又开始疯狂指责战队。说战队不行，战队管理不行，战队换人不行。这就有点搞心态了。从各种证据来看，Simon的职业态度就是不行。这还没得洗的，在我的主观视角看来，俱乐部的处理没啥问题，正常换人，正常调整。后续交流也表明Simon的主观态度很差。

我觉得吧，成绩不行，确实该喷。Simon对于战队，对于他自己我觉得都是一个双输的局面，最终的结果也让人感到遗憾。但是我也不认为成绩不行不是反过来疯狂喷战队，喷选手的理由。一个战队不可能一直整整齐齐。既然已经是轮换了，就要坦然接受。如kk所说：从零开始。我真的蛮不理解这些在网上一直喷的人。你们的存在是为了让战队成绩更好？还是只是串子，喷喷EDG过过瘾？

很喜欢一句话，VCTCN夺冠夺得太早了，导致大家根本不知道一个冠军有多难。后续的期望和压力也太大了。节奏起来以后我也看到很多其实平时不看edg瓦比赛的其他游戏主播，也是开始指责edg管理层不行，可能会干涉到其他同俱乐部比赛的队伍。我真的只能遗憾于舆论状况的恶劣。

总得来说，菜就多练，电子竞技，成绩说话。

EDG我上早八，后续支棱点！

在Vercel上部署Fuwari博客

Sun, 04 May 2025 00:00:00 GMT

1. 博客历程回忆

1.1早期的 Hexo

其实大概五六年前就开始瞎琢磨博客，当时觉得互联网上拥有博客的人很帅，有一个能够展示自己的地方，就开始琢磨着写第一个博客。没钱吗，就得琢磨着白嫖。最早好像是用的 Hexo 和 Github Pages 搭建的第一个博客。主要是没钱和没域名，就是瞎折腾。现在都忘不了在那配置 Hexo 的 Next 主题的样子。当初比较流行给博客加一个 Live2D 小人在前面萌娘用，当初折腾了半天样式优化和二次元萌娘，啥代码都看不懂，就是照搬着尝试去做，属于早期的探索。啥也不懂，就会折腾。感谢遇见西门大佬的 (最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析 | 遇见西门), 一个非常详细的攻略，让一位啥具体技术也不懂的萌新，学会了搭建了人生的第一个博客。

1.2遇见 Typecho

因为说过我是一个很喜欢折腾的人，Hexo 搭建后，因为现实生活比较忙，就暂时没有动博客一年多。但是后续有空折腾的时候，又开始看 Hexo 不爽了。当初又接触到了虚拟面板（就那种没有 cli，就一个提供给界面给你上下传文件之类的），又是因为穷，而这种面板属于一个月几块钱，刚好是可以接受的程度。于是又开始折腾打算做新的博客。当初在 WordPress 和 Typecho 中纠结。最后选择了 Typecho（我觉得这玩意儿更新鲜），并选择了 handsome 主题。属于是年轻人的第一个动态博客了。于是又是一番折腾，什么 css 美化，添加什么网页名称变换，添加博客音乐播放器之类的。

1.3归于 Astro

1.3.1原因

其实主要的原因是，又开始心血来潮想部署博客，看到很多人在推荐 Astro，于是便选择了 Astro，我这个人还是比较喜欢花里胡哨的东西，不是很喜欢极简的的类似 Paper 一样的主题，于是最终挑选之下选择了 Fuwari。

2.安装 Fuwari

2.1 Fuwari功能特性

[x] 基于 Astro 和 Tailwind CSS 开发
[x] 流畅的动画和页面过渡
[x] 亮色 / 暗色模式
[x] 自定义主题色和横幅图片
[x] 响应式设计
[x] 评论（作者没实现，自行选择了 Giscus）
[x] 搜索
[x] 文内目录（已经实现）

2.2 安装方法

使用此模板生成新仓库或 Fork 此仓库

[!TIP] Vercel 支持私有仓库，所以为了隐私，建议使用私有仓库。

进行本地开发，Clone 新的仓库，执行 pnpm install 和 pnpm add sharp 以安装依赖
- 若未安装 pnpm，执行 npm install -g pnpm
通过配置文件 src/config.ts 自定义博客
执行 pnpm new-post <filename> 创建新文章，并在 src/content/posts/ 目录中编辑
参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等。就打开 Vercel 导入即可

3.博客初始化

在本地 Clone 下载后，本地搭建后环境后，便可以开始配置自定义设置了。

3.1配置 src/config.ts

export const siteConfig: SiteConfig = {
 title: "Elysiam", //修改网站主标题
 subtitle: "May you, the beauty of this world, always shine",//修改网站副标题
 lang: "zh_CN", // 选择语言'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
 themeColor: {
  hue: 250, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
  fixed: false, // Hide the theme color picker for visitors
 },
 banner: {
  enable: true,// 启用banner
  src: "assets/images/custom1.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
  position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
  credit: {
   enable: true, // Display the credit text of the banner image
   text: "Honkai 3rd", // Credit text to be displayed
   url: "", // (Optional) URL link to the original artwork or artist's page
  },
 },
 toc: {
  //启用目录（需要后续优化，见后面章节）
  enable: true, // Display the table of contents on the right side of the post
  depth: 3, // Maximum heading depth to show in the table, from 1 to 3
 },

接下来是修改个人信息，默认的类似 Twitter 和 Steam 我都删掉了，然后添加了网易云音乐和邮箱，使用了 tabler 图标库，无法加载出图标的可以使用下面的命令。 pnpm add -D @iconify-json/tabler

export const profileConfig: ProfileConfig = {
 avatar: "assets/images/demo-avatar.jpg", // 修改头像 Relative to the /src directory. Relative to the /public directory if it starts with '/'  
 name: "Starfallen", // 修改名称
 bio: "May you, the beauty of this world, always shine", // 修改个性签名
 links: [
  {
   name: 'NetEaseMusic',
   icon: 'tabler:brand-netease-music',
   url: 'https://music.163.com/#/user/home?id=331341358',
  },
  // 添加Email
  {
   name: "Email",
   icon: "tabler:mail",
   url: "mailto:solihuan@foxmail.com",
  },
  {
   name: "GitHub",
   icon: "fa6-brands:github",
   url: "https://github.com/Starfallan", // Updated GitHub URL
  },
 ],
};

3.2修改关于界面

这我觉得没啥好说的，就是修改 src\content\spec\about.md，写上自己想要的关于界面就行

4.博客优化配置

4.1优化目录显示

打开目录后，在我的设备上，目录是无法正常显示的。一开始是以为目录配置出错，查询了代码后，才发现目录会在小屏幕上默认隐藏，但是在我的 16:9 的 1920 x 1080 的笔记本屏幕上，目录仍然是无法正常显示。尝试修改显示代码，进行优化。方法来自于 Disappear TOC · Issue #311 · saicaca/fuwari

<!-- 将原有的2xl:block改为xl:block，即修改触发宽度 -->
<div class="absolute w-full z-0 hidden 2xl:block">
<div class="absolute w-full z-0 hidden xl:block"> 
    <div class="relative max-w-[var(--page-width)] mx-auto">
        <!-- TOC component -->
        {siteConfig.toc.enable && <div id="toc-wrapper" class:list={["hidden lg:block transition absolute top-0 -right-[var(--toc-width)] w-[var(--toc-width)] flex items-center",
        {siteConfig.toc.enable && <div id="toc-wrapper" class:list={["block lg:block transition absolute top-0 right-0 lg:-right-[var(--toc-width)] w-[var(--toc-width)] flex items-center",
            {"toc-hide": siteConfig.banner.enable}]}
        >

[!NOTE] 由于改成了 xl: block 显示效果不是很好，有大神可以指教下怎么后续优化

效果如图所示：

4.2 添加评论系统

由于 Fuwari主题尚未实现自有的评论系统，我选择了 Giscus 作为自己博客的评论系统。

:::important 2025年 7 月 22 日更新

在源仓库PR中闲逛时发现官方在comment分支中已经实现了Giucus，Twikoo和Disqus的支持，只是未合并到主分支。建议使用对应PR手动配置：

✨ feat: Add comment component and comment configuration #37

上面的PR基本上实现了 Giscus 的配置

接着可以结合下面的PR

feat: make giscus component reactive #405。

该PR使得 Giscus 组件可以响应主题变化（不就实现了暗黑模式？）。

建议使用上述两个 PR 进行配置。以下过时内容仅供参考。 :::

4.2.1 创建 Gicus 用仓库

因为 Giscus 是利用仓库的 discussions 构建的，所以你需要在你的 Github 中创建一个新的用以存储的仓库。仓库需要保证：

该仓库是公开的，否则访客将无法查看 discussion。
giscus app 已安装，否则访客将无法评论和回应。
Discussions 功能已在你的仓库中启用。

4.2.2 配置 Giscus

打开giscus官方网站https://giscus.app/，进行配置：

语言：选择你的使用的语言
仓库：填写你刚刚创建的仓库
映射关系：保持默认即可，即第一项
Discussion 分类：保持默认即可
特性：保持默认即可
主题：保持默认，即用户偏好的色彩方案

按照顺序配置好之后，下方会自动生成对应代码，暂时不用复制，我们需要进行一定的修改以适应暗色模式。这里暗色模式的配置来自于在Fuwari中添加评论功能(带黑暗模式) - 伊卡的记事本，感谢大佬的思路。

在 src\components\widget 目录下新建 Comments.svelte 文件，将上面 Giscus生成的代码替换掉data-themen 对应行就行。

<section>
    <script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme={$mode === DARK_MODE ? 'dark' : 'light'}
         //其实就改了这一行，复制giscus网站上的，然后替换这一行即可
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
    </script>
</section>

<script>
import { AUTO_MODE, DARK_MODE } from '@constants/constants.ts'
import { onMount } from 'svelte'
import { writable } from 'svelte/store';
import { getStoredTheme } from '@utils/setting-utils.ts'
const mode = writable(AUTO_MODE)
onMount(() => {
  mode.set(getStoredTheme())
})

function updateGiscusTheme() {
  const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  const iframe = document.querySelector('iframe.giscus-frame')
  if (!iframe) return
  iframe.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
}

const observer = new MutationObserver(updateGiscusTheme)
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })

window.onload = () => {
  updateGiscusTheme()
}
</script>

修改文件 src\pages\posts\[...slug].astro 中的代码首先引入 Comments 组件

import MainGridLayout from '../layouts/MainGridLayout.astro'

import { getEntry } from 'astro:content'
import { i18n } from '../i18n/translation'
import I18nKey from '../i18n/i18nKey'
import Markdown from '@components/misc/Markdown.astro'
+ import Comments from '@components/widget/Comments.svelte'

const friendsPost = await getEntry('spec', 'friends')

之后用组件代码代替原先的代码将末尾的原 Giscus 代码换成对应组件

<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>
<Comments client:only="svelte"></Comments>

</MainGridLayout>

4.3 使用自定义字体

这里修改自定义字体的部分参考于这篇文章在Fuwari使用自定义字体 - AULyPc，感谢大佬

添加你的字体文件到 public/fonts/ 目录，或者使用在线 cdn 字体，见下 css 文件
在 src\styles 文件夹下新建 global.css 这里引用了两个字体，Maple Mono 用于代码块，霞鹜文楷作为网站主字体。

[!NOTE] LXGW WenKai Screen 是屏幕优化版，整体加粗了一点，但是我觉得在 Fuwari 太粗了，所以使用了 GBLite 版

以下css使用了cdn加载字体。在访问正常的情况下，由于CDN本身会对字体进行子集化和多级缓存，加载速度会更快。

:::warning[警告]

但是，网上很多地方推荐的LXGW的字体连接是BootCDN和Staticfile。这两个CDN有投毒情况，请勿使用。 :::


// 引入字体Maple Mono NF CN
@import url("https://fontsapi.zeoseven.com/442/main/result.css");

// 引入字体LXGW WenKai Screen
@import url("https://s4.zstatic.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css");

随后修改 tailwind.config.cjs，应用页面主字体, 将 Roboto 改为你的字体：

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme")
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}"],
  darkMode: "class", // allows toggling dark mode manually
  theme: {
    extend: {
      fontFamily: {
        sans: ["LXGW WenKai Screen", "sans-serif", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
}

修改代码块字体如果你没有使用Expressive Code 替换掉原有的代码块显示，就是在 src\styles\markdown.css 修改对应 code 的样式文件，更改 font-family 即可

.....省略前面内容
code {
    @apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
    font-family: 'Maple Mono Normal CN', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    &:before {
        content:none;
    }
    &:after {
        content:none;
    }

但是如果你和我一样使用了 Expressive Code 替换了原有的代码块显示见[4.4 增强代码块](# 4.4 增强代码块)，则需要修改对应配置文件，参考了官方文档 Style Overrides | Expressive Code

.....省略前面内容
codeFontFamily:
     "'Maple Mono NF CN', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",

4.4 增强代码块

:::note 注意，官方已经在新版本中支持并默认开启了 Expressive Code，无须进行任何配置。

以下教程无实际意义，仅供参考。 :::

偷懒，不想写了，具体请继续参考伊卡大佬的增强Fuwari的代码块功能 - 伊卡的记事本，记得自己选个喜欢的主题就行。

[!TIP] 补充一下最后的显示行号的问题，官方文档推荐修改 ec.config.js，我懒得新建，直接在原 astro.config.mjs 上添加了，具体看上面 4.3 的完整配置

新服务器上手配置优化

Sat, 03 May 2025 00:00:00 GMT

:::note 以下内容主要来自于Linux.do的我拿到VPS服务器必做的那些事，感谢原作者的分享。 :::

一、系统设置

更新软件库

apt update -y && apt upgrade -y

更新、安装必备软件

apt install sudo curl wget nano

校正系统时间

将时区改成上海

sudo timedatectl set-timezone Asia/Shanghai

查看当前时区：

timedatectl

系统参数调优

这个功能通过调整各种系统和网络参数来优化服务器的性能。

实现方法：

内核参数调整：例如，增加TCP缓冲区大小、修改系统队列长度等，这些改变有助于提高网络吞吐量和减少延迟。
性能优化：安装和配置Tuned和其他系统性能优化工具来自动调整和优化服务器的运行状态。
资源限制：例如，设置文件打开数量的限制，这可以防止某些类型的资源耗尽攻击。

通过这些功能，你的服务器不仅能够更有效地管理资源，还能提高对外部威胁的防护能力，保障系统稳定运行。

bash <(wget -qO- https://raw.githubusercontent.com/jerry048/Tune/main/tune.sh) -t

二、BBR

BBR 是 Google 提出的一种新型拥塞控制算法（Bottleneck Bandwidth and RTT），全称为瓶颈带宽和往返传播时间。

在 Linux 系统中，BBR 主要有以下特点和作用：

提高网络性能：它可以显著提高吞吐量和降低 TCP 连接的延迟，使数据传输更加高效。
适应不同网络环境：适合高延迟、高带宽的网络链路，以及慢速接入网络的用户，能在一定丢包率的网络链路上充分利用带宽，并降低网络链路上的缓冲区占用率从而降低延迟。
优化拥塞控制：BBR 改变了传统基于丢包反馈的拥塞控制机制，通过精确测量往返传播时间（RTT）和瓶颈带宽等参数来更有效地控制数据发送速率，避免了传统算法中因单纯丢包判断拥塞而导致的带宽利用率不高和端到端延迟大等问题。
提升网络稳定性：有助于减少网络拥塞和数据包丢失，提高网络的稳定性和可靠性。

补充：Azure 服务器似乎是默认开启 BBR 的。

开启BBRX加速

bash <(wget -qO- https://raw.githubusercontent.com/jerry048/Tune/main/tune.sh) -x

重启 VPS、使内核更新和BBR设置都生效

sudo reboot

确认BBR开启

如果你想确认 BBR 是否正确开启，可以使用下面的命令：

lsmod | grep bbr

此时应该返回这样的结果：

tcp_bbrx tcp_bbr

再次重启 VPS

sudo reboot

如果只有tcp_bbr则再等几分钟reboot

此时再进行查询：

lsmod | grep bbr

此时应该返回这样的结果：

tcp_bbrx

开启BBR加速（备选）

wget --no-check-certificate https://github.com/teddysun/across/raw/master/bbr.sh && chmod +x bbr.sh && ./bbr.sh

也是重启VPS生效

三、添加SWAP

在 Linux 系统中，SWAP（交换空间）是指一块磁盘空间，用于在物理内存（RAM）不足时，作为临时的扩展内存来使用。当系统的物理内存使用量接近饱和，Linux 内核会将一些不常使用的内存页交换到 SWAP 分区中，从而为当前运行的程序腾出更多的物理内存。当这些被交换出去的内存页再次被需要时，它们会被重新换回到物理内存中。SWAP 分区的存在可以在一定程度上避免由于物理内存不足导致系统性能严重下降或进程被强制终止的情况。

因此，SWAP对于内存小的VPS非常有必要，可以提高我们的运行效率。

这里我们用脚本来添加。

wget -O swap.sh https://raw.githubusercontent.com/yuju520/Script/main/swap.sh && chmod +x swap.sh && clear && ./swap.sh

注意：脚本默认单位为MB

查看当前内存

free -h

四、安装Docker、Docker-compose以及修改配置

Docker

Docker安装

非大陆服务器

wget -qO- get.docker.com | bash

或

curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh

大陆服务器Docker安装

curl https://install.1panel.live/docker-install -o docker-install && sudo bash ./docker-install && rm -f ./docker-install

查看Docker版本

docker -v

开机自动启动

sudo systemctl enable docker

卸载Docker

sudo apt-get purge docker-ce docker-ce-cli containerd.io sudo apt-get remove docker docker-engine sudo rm -rf /var/lib/docker sudo rm -rf /var/lib/containerd

五、修改SSH端口

修改 SSH 端口通常有以下几个主要原因：

增强安全性：SSH 服务默认使用的 22 端口是攻击者经常扫描和尝试攻击的目标。通过将端口修改为一个不常见的数值，可以减少自动攻击和暴力破解的风险，因为攻击者通常会首先针对常见的默认端口进行攻击。

例如，如果攻击者使用自动化工具扫描大量服务器，这些工具可能主要集中在 22 端口。而修改了端口后，就降低了被这类工具轻易发现和攻击的可能性。

减少误连接和非法访问尝试：一些网络环境中可能存在大量的随机连接请求或非法访问尝试，针对默认的 22 端口。更改端口可以减少这类无意义的连接请求。

假设您的服务器处于一个公共网络环境中，经常会收到大量的随机连接尝试，其中很多是针对常见端口的。修改 SSH 端口可以减少这类不必要的干扰。

将默认的22端口修改为53486（

sudo sed -i 's/^#\?Port 22.*/Port 53486/g' /etc/ssh/sshd_config

重启sshd服务

sudo systemctl restart sshd

六、使用密钥登录

一键生成你的密钥

wget -O key.sh https://raw.githubusercontent.com/yuju520/Script/main/key.sh && chmod +x key.sh && clear && ./key.sh

！！！注意：请牢记你生成的密钥，否则会有无法连接SSH的后果。！！！

七、安装fail2ban

安装fail2ban

apt install fail2ban

配置fail2ban

fail2ban的配置文件通常位于 /etc/fail2ban/ 目录下，fail2ban的.conf配置文件都是可以被.local覆盖，所以配置方式建议是添加.local文件，不修改原来的配置文件。

nano /etc/fail2ban/jail.local

配置文件如下：

[DEFAULT]
#忽略的IP列表,不受设置限制（白名单）
ignoreip = 127.0.0.1

#允许ipv6
allowipv6 = auto

#日志修改检测机制（gamin、polling和auto这三种）
backend = systemd

#针对各服务的检查配置，如设置bantime、findtime、maxretry和全局冲突，服务优先级大于全局设置

[sshd]

#是否激活此项（true/false）
enabled = true

#过滤规则filter的名字，对应filter.d目录下的sshd.conf
filter = sshd

#ssh端口
port = ssh

#动作的相关参数
action = iptables[name=SSH, port=ssh, protocol=tcp]

#检测的系统的登陆日志文件
logpath = /var/log/secure

#屏蔽时间，单位：秒
bantime = 86400

#这个时间段内超过规定次数会被ban掉
findtime = 86400

#最大尝试次数
maxretry = 3

Ctrl+S保存并退出

设置开机自动启动fail2ban

sudo systemctl enable fail2ban

重新启动fail2ban

sudo systemctl restart fail2ban

查看fail2ban的状态

sudo systemctl status fail2ban

查看所有可用jail的状态

fail2ban-client status

OpenWebui部署

Sat, 03 May 2025 00:00:00 GMT

OpenWebui部署

1. 镜像部署（使用二开版）

services:
  core:
    environment:
      - ENABLE_OPENAI_API=False
      - OFFLINE_MODE=True
      - TZ=Asia/Shanghai
      - AZURE_AI_API_KEY="***REMOVED***"
      - AZURE_AI_ENDPOINT="***REMOVED***"
      - EZFP_ENDPOINT="https://ezfp.cn/"
      - EZFP_CALLBACK_HOST="https://ai.170529.xyz"
      - EZFP_KEY="xxx"
      - EZFP_PID="1"
      - CREDIT_NO_CREDIT_MSG="余额不足，请在 '设置-积分' 中充值"
      - USAGE_CALCULATE_MODEL_PREFIX_TO_REMOVE=""
      - USAGE_DEFAULT_ENCODING_MODEL="gpt-4o"
    image: ghcr.io/u8f69/open-webui:v0.6.5.16
    ports:
      - 3000:8080
    restart: unless-stopped
    volumes:
      - ./data:/app/backend/data
      - ./open-webui-assets-custom:/app/build/assets/custom
    command:
      - /bin/bash
      - -c
      - |
          cp /app/build/assets/custom/fonts/* /app/build/assets/fonts/
          cp /app/build/assets/custom/custom.css /app/build/assets/
          cp /app/build/assets/custom/custom.js /app/build/assets/
          sed -i 's|</head>|<link rel="stylesheet" href="/assets/custom.css"></head>|' /app/build/index.html
          sed -i 's|</body>|<script src="/assets/custom.js"></script></body>|' /app/build/index.html
          bash /app/backend/start.sh
    networks:
      - newapi

networks:
  newapi:
    external: true

2. 配置 Nginx （含有 websocket 和缓存加速）

:::note 以下配置文件来自于的讨论，经过测试可以正常使用。 :::

子配置文件 `/etc/nginx/conf.d/openwebui.conf`

server {
    listen 80 ; 
    listen 443 ssl; 
    http2 on;
    server_name chat.170529.xyz;  # 改域名
    access_log   /var/log/nginx/nginx.openwebui.access.log main;
    error_log    /var/log/nginx/nginx.openwebui.error.log;
    ssl_certificate      /etc/letsencrypt/live/chat.170529.xyz/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/chat.170529.xyz/privkey.pem;
    # ==================== 性能優化配置 ====================
    client_max_body_size 1024M; 
    tcp_nopush on; 
    tcp_nodelay on; 
    keepalive_timeout 65s; 
    keepalive_requests 1000; 
    sendfile on; 
    sendfile_max_chunk 1m; 
    # ==================== 全域代理緩衝優化 ====================
    proxy_buffering on; 
    proxy_buffer_size 128k; 
    proxy_buffers 4 256k; 
    proxy_temp_file_write_size 512k; 
    proxy_busy_buffers_size 256k; 
    proxy_connect_timeout 60s; 
    proxy_send_timeout 60s; 
    proxy_read_timeout 60s; 
    # Gzip 壓縮
    gzip on; 
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss application/vnd.ms-fontobject font/ttf font/otf font/woff font/woff2 image/svg+xml; 
    gzip_min_length 1024; 
    gzip_comp_level 5; 
    gzip_http_version 1.1; 
    gzip_vary on; 
    gzip_proxied any; 
    # ==================== 品牌設置變數 ====================
    set $custom_logo_url https://r2.170529.xyz/2025/05/favicon.avif; 
    set $brand_name "Prometheus"; 
    set $brand_short_name "Prometheus"; 
    set $static_proxy_host img.170529.xyz; 
    set $icon_replacement_url '"https://r2.170529.xyz/2025/05/favicon.avif"'; 
    set $backend_host http://127.0.0.1:3000;     # port
    # 分層緩存策略變數
    set $immutable_cache "public, immutable, max-age=31536000"; # 1年永久緩存
    set $static_cache "public, max-age=86400"; # 24小時緩存
    set $static_cache_control "public, max-age=86400"; # 24小時緩存（兼容性變數）
    set $font_cache "public, max-age=604800"; # 7天緩存（字體可以久一點）
    set $icon_cache "no-cache, no-store, must-revalidate"; # 圖標無緩存，立即顯示
    set $html_cache "public, max-age=86400"; # 24小時緩存（OI的index.html較大7KB）
    # 強制 HTTPS 重定向
    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }
    # ==================== 優化緩存策略  ====================
    # 1. /_app/immutable/ - hash 文件名，永久緩存
    location ~ ^/_app/immutable/ {
        proxy_pass $backend_host; 
        expires max; 
        access_log off; 
        add_header Cache-Control $immutable_cache; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
    }
    # 2. 字型文件 - 較長緩存 (7天，字體變化不大)
    location ~* ^/(assets|static)/.*\.(woff|woff2|ttf|eot)$ {
        proxy_pass $backend_host; 
        expires 7d; 
        access_log off; 
        add_header Cache-Control $font_cache; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
    }
    # 3. /assets/ 和 /static/ 其他文件 - 24小時緩存 (文件名不唯一，不建議永久緩存)
    location ~* ^/(assets|static)/.*\.(js|css|jpg|jpeg|gif|webp)$ {
        proxy_pass $backend_host; 
        expires 1d; 
        access_log off; 
        add_header Cache-Control $static_cache; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
    }
    # ==================== 圖標處理配置 ====================
    # 精確匹配重要圖標路徑 - 最高優先級（避免與正則匹配衝突）
    location = /static/favicon.png {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
    }
    location = /static/favicon-96x96.png {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
    }
    location = /static/apple-touch-icon.png {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
        types {
        }
        default_type image/png; 
    }
    location = /favicon.ico {
        return 301 /static/favicon.png; 
    }
    # iOS Safari 根目錄 apple-touch-icon 處理（關鍵！）
    location = /apple-touch-icon.png {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
        types {
        }
        default_type image/png; 
    }
    # iOS Safari 優先查找的 precomposed 圖標（關鍵！）- 精確匹配優先
    location = /apple-touch-icon-precomposed.png {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
        types {
        }
        default_type image/png; 
    }
    # iOS 會自動查找的各種尺寸 apple-touch-icon
    location ~ ^/apple-touch-icon-([0-9]+x[0-9]+)\.png$ {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
        types {
        }
        default_type image/png; 
    }
    # iOS 其他格式的 apple-touch-icon（兜底方案）
    location ~ ^/apple-touch-icon-.*\.png$ {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
        types {
        }
        default_type image/png; 
    }
    location = /static/favicon.ico {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
        types {
        }
        default_type image/x-icon; 
    }
    location = /static/favicon.svg {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
    }
    # ==================== 圖標處理配置 ====================
    # 正則匹配其他圖標（排除已精確匹配的）
    location ~ ^/static/(logo|logo-dark|favicon-dark|android-chrome-192x192|android-chrome-512x512)\.png$ {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
    }
    location ~ ^/static/(splash|splash-dark)\.png$ {
        resolver 1.1.1.1 valid=30s ipv6=off; 
        proxy_pass $custom_logo_url; 
        add_header Cache-Control $icon_cache; 
        proxy_ssl_server_name on; 
        proxy_ssl_name $static_proxy_host; 
        proxy_set_header Host $static_proxy_host; 
        proxy_set_header Referer ""; 
    }
    # 4. manifest.json - 無緩存確保圖標立即顯示
    location = /manifest.json {
        proxy_pass $backend_host; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
        proxy_set_header Accept-Encoding ""; 
        # 圖標相關配置無緩存，確保立即顯示
        add_header Cache-Control $icon_cache always; 
        add_header Pragma "no-cache" always; 
        add_header Expires "Thu, 01 Jan 1970 00:00:00 GMT" always; 
        proxy_hide_header ETag; 
        proxy_hide_header Last-Modified; 
        sub_filter_types application/json application/manifest+json; 
        sub_filter_once off; 
        sub_filter '"name":"Open WebUI"' '"name":"$brand_name"'; 
        sub_filter '"short_name":"Open WebUI"' '"short_name":"$brand_short_name"'; 
        sub_filter '"/static/logo.png"' $icon_replacement_url; 
        sub_filter '"/static/logo-dark.png"' $icon_replacement_url; 
        sub_filter '"/static/favicon.png"' $icon_replacement_url; 
        sub_filter '"/static/favicon-96x96.png"' $icon_replacement_url; 
        sub_filter '"/static/apple-touch-icon.png"' $icon_replacement_url; 
        sub_filter '"/static/android-chrome-192x192.png"' $icon_replacement_url; 
        sub_filter '"/static/android-chrome-512x512.png"' $icon_replacement_url; 
    }
    # API 配置端點
    location = /api/config {
        proxy_pass $backend_host; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
        proxy_set_header Accept-Encoding ""; 
        sub_filter_types application/json; 
        sub_filter_once off; 
        sub_filter '"name":"Open WebUI"' '"name":"$brand_name"'; 
        sub_filter '"short_name":"Open WebUI"' '"short_name":"$brand_short_name"'; 
    }
    # 認證相關 API
    location ~ ^/api/(v1/)?auths?/?$ {
        proxy_pass $backend_host; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
        proxy_set_header Accept-Encoding ""; 
        sub_filter_types application/json; 
        sub_filter_once off; 
        sub_filter '"name":"Open WebUI"' '"name":"$brand_name"'; 
        sub_filter '"short_name":"Open WebUI"' '"short_name":"$brand_short_name"'; 
    }
    # 其他靜態資源 - 24小時緩存
    location ~* ^/static/.*\.(html|json|txt|xml)$ {
        proxy_pass $backend_host; 
        expires 1d; 
        access_log off; 
        add_header Cache-Control $static_cache; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
    }
    # 通用靜態文件處理（排除圖標文件，避免衝突）
    location ~ ^/static/(?!.*\.(png|ico|svg)$).*$ {
        proxy_pass $backend_host; 
        expires 1d; 
        access_log off; 
        add_header Cache-Control $static_cache; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
    }
    # WebSocket 代理
    location /ws/ {
        proxy_pass $backend_host; 
        proxy_http_version 1.1; 
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection "upgrade"; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
        # WebSocket 特殊優化 - 覆蓋全域緩衝設置
        proxy_buffering off; 
        proxy_cache off; 
        proxy_connect_timeout 7d; 
        proxy_send_timeout 7d; 
        proxy_read_timeout 7d; 
        proxy_set_header X-Forwarded-Host $server_name; 
        proxy_set_header X-Forwarded-Server $host; 
        tcp_nodelay on; 
    }
    # 其他 API 端點
    location /api/ {
        proxy_pass $backend_host; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
        proxy_set_header X-Forwarded-Host $server_name; 
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection $http_connection; 
        proxy_http_version 1.1; 
        # API 代理優化設置
        proxy_buffering on; 
        proxy_buffer_size 128k; 
        proxy_buffers 4 256k; 
        proxy_temp_file_write_size 512k; 
        proxy_busy_buffers_size 256k; 
        proxy_connect_timeout 60s; 
        proxy_send_timeout 60s; 
        proxy_read_timeout 60s; 
    }
    # ==================== SPA 路由處理 ====================
    # 5. SPA 特定路由 - 24小時緩存 (index.html較大7KB，使用適度緩存)
    location ~ ^/(auth|error|c/.+)$ {
        proxy_pass $backend_host; 
        add_header Cache-Control $html_cache; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
        proxy_set_header X-Forwarded-Host $server_name; 
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection $http_connection; 
        proxy_http_version 1.1; 
        proxy_set_header Accept-Encoding ""; 
        sub_filter_types text/html application/json application/manifest+json; 
        sub_filter_once off; 
        sub_filter '<title>Open WebUI</title>' '<title>$brand_name</title>'; 
        sub_filter '"name":"Open WebUI"' '"name":"$brand_name"'; 
        sub_filter '"short_name":"Open WebUI"' '"short_name":"$brand_short_name"'; 
        sub_filter '<head>' '<head><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="$brand_name"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"><link rel="manifest" href="/manifest.json?v=$date_gmt">'; 
        sub_filter '</body>' '<script>document.addEventListener("DOMContentLoaded",function(){var s=document.createElement("style");s.textContent="#sidebar{transition:all 0.5s cubic-bezier(0.3,0.3,0.2,1)!important;--tw-duration:0.5s;--tw-ease:cubic-bezier(0.3,0.3,0.2,1);}#sidebar[data-state=true]{animation:sidebarFade 0.4s ease-in forwards!important;}@keyframes sidebarFade{0%,30%{opacity:0;}100%{opacity:1;}}";document.head.appendChild(s);});</script></body>'; 
    }
    # 主要頁面代理 - index.html (24小時緩存，考慮到文件較大7KB)
    location / {
        proxy_pass $backend_host; 
        add_header Cache-Control $html_cache; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto https; 
        proxy_set_header X-Forwarded-Host $server_name; 
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection $http_connection; 
        proxy_http_version 1.1; 
        proxy_set_header Accept-Encoding ""; 
        sub_filter_types text/html application/json application/manifest+json; 
        sub_filter_once off; 
        sub_filter '<title>Open WebUI</title>' '<title>$brand_name</title>'; 
        sub_filter '"name":"Open WebUI"' '"name":"$brand_name"'; 
        sub_filter '"short_name":"Open WebUI"' '"short_name":"$brand_short_name"'; 
        sub_filter '<head>' '<head><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="$brand_name"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"><link rel="manifest" href="/manifest.json?v=$date_gmt">'; 
        sub_filter '</body>' '<script>document.addEventListener("DOMContentLoaded",function(){var s=document.createElement("style");s.textContent="#sidebar{transition:all 0.5s cubic-bezier(0.3,0.3,0.2,1)!important;--tw-duration:0.5s;--tw-ease:cubic-bezier(0.3,0.3,0.2,1);}#sidebar[data-state=true]{animation:sidebarFade 0.4s ease-in forwards!important;}@keyframes sidebarFade{0%,30%{opacity:0;}100%{opacity:1;}}";document.head.appendChild(s);});</script></body>'; 
    }
    # ==================== 完美的安全標頭設定 ====================
    add_header Strict-Transport-Security "max-age=31536000"; 
    add_header X-Frame-Options DENY always; 
    add_header X-Content-Type-Options nosniff always; 
    add_header X-XSS-Protection "1; mode=block" always; 
    add_header Referrer-Policy "strict-origin-when-cross-origin" always; 
}

3. 美化配置

[!NOTE] 参考来源 https://linux.do/t/topic/440439

建立自定义文件夹 open-webui-assets-custom
对应目录下建立 fonts 文件夹，文件夹中放自定义字体
目录下建立 custom.js custom.css，具体配置看参考文献，仅修改字体配置

目录结构

open-webui-assets-custom/
    - fonts/
        - DankMono-Italic.woff2
        - DankMono-Regular.woff2
        - DingTalk-JinBuTi.woff2 
    - custom.css
    - custom.js

字体配置的修改

@font-face {
    font-family: 'Maple Mono Normal';
    src: url('../assets/fonts/MapleMonoNormal-Regular.woff2') format('woff2');
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Maple Mono Normal';
    src: url('../assets/fonts/MapleMonoNormal-Italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
}

@font-face {
    font-family: 'LXGW';
    src: url('../assets/fonts/LXGWWenKaiMonoGBScreen.woff2') format('woff2');
    font-display: swap;
}

4. 测试 Nginx 缓存是否生效

在配置完成后，可以通过以下几种方法测试缓存是否生效：

4.1 查看响应头中的缓存状态

使用浏览器开发者工具（F12）打开网络面板
刷新页面并查找对 /api/models 的请求
在响应头中查看 X-Cache-Status 字段：
- MISS: 表示请求未命中缓存，从上游服务器获取
- HIT: 表示请求命中缓存，直接从缓存返回
- BYPASS: 表示请求绕过了缓存
- EXPIRED: 表示缓存已过期
- UPDATING: 表示缓存正在更新

4.2 使用 curl 命令行工具测试

# 第一次请求，应该显示 MISS
curl -I -H "Host: chat.170529.xyz" https://chat.170529.xyz/api/models | grep X-Cache-Status

# 第二次请求，如果缓存有效，应该显示 HIT
curl -I -H "Host: chat.170529.xyz" https://chat.170529.xyz/api/models | grep X-Cache-Status

4.3 检查缓存文件

查看 Nginx 缓存目录中是否有文件生成：

# 查看缓存目录
ls -la /var/cache/nginx

# 检查缓存目录大小
du -sh /var/cache/nginx

4.4 查看 Nginx 缓存日志

如果你配置了缓存日志，可以查看日志来确认缓存状态：

# 查看 Nginx 访问日志
grep "X-Cache-Status" /var/log/nginx/nginx.openwebui.access.log

缓存成功的特征是：当你第一次访问某个资源时，X-Cache-Status 显示 MISS，而后续访问同一资源时显示 HIT，并且你会注意到第二次请求的响应时间明显缩短。

NewAPi 部署

Tue, 29 Apr 2025 00:00:00 GMT

NewAPi 部署

Docker 配置，使用bridge网络，使openwebui和new api直接连接

version: '3'

services:
  new-api: 
    image: ghcr.io/veloera/veloera:latest
    container_name: new-api
    restart: always
    command: --log-dir /app/logs
    ports:
      - "3001:3000"  # 修改外部端口为3001避免冲突
    volumes:
      - ./new-api-data:/data
      - ./new-api-logs:/app/logs
    environment:
      - SQL_DSN=root:123456@tcp(mysql:3306)/new-api
      - REDIS_CONN_STRING=redis://redis
      - TZ=Asia/Shanghai
    depends_on:
      - redis
      - mysql
    networks:
      - newapi
    healthcheck:
      test: ["CMD-SHELL", "wget -q -O - http://localhost:3000/api/status | grep -o '\"success\":\\s*true' | awk -F: '{print $$2}'"]
      interval: 30s
      timeout: 10s
      retries: 3

  redis:
    image: redis:latest
    container_name: redis
    restart: always
    networks:
      - newapi

  mysql:
    image: mysql:8.2
    container_name: mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: 123456
      MYSQL_DATABASE: new-api
    volumes:
      - mysql_data:/var/lib/mysql
    networks:
      - newapi

volumes:
  mysql_data:

networks:
  newapi:
    external: true

Nginx 配置

server{
   server_name api.170529.xyz;  # 请根据实际情况修改你的域名
   location / {
          client_max_body_size  64m;
          proxy_http_version 1.1;
          proxy_pass http://localhost:4233;  # 请根据实际情况修改你的端口
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $remote_addr;
          proxy_cache_bypass $http_upgrade;
          proxy_set_header Accept-Encoding gzip;
          proxy_read_timeout 300s;  # GPT-4 需要较长的超时时间，请自行调整
   }
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/api.170529.xyz/fullchain.pem; # Cloudflare证书
    ssl_certificate_key  /etc/letsencrypt/live/api.170529.xyz/privkey.pem; # Cloudflare证书密钥
    
    # SSL配置参数（可选，但建议保留以确保安全性）
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 1d;
    ssl_session_tickets off;
}

Certbot自动配置SSL证书

Sat, 19 Apr 2025 00:00:00 GMT

用Certbot来自动生成Let’s Encrypt证书这件事儿，虽然官方和网上已经有了很详实的文档了，但是我还是想自己记录下，留作以后备查吧。

本文用的操作系统是ubuntu 20.04，DNS的话用的是Cloudflare的服务，web服务使用nginx来提供。然后，按照以下步骤进行就可以了。

安装Certbot

用以下命令安装就可以了，某些时候snap install的时候可能比较慢，有时候还可能需要重试几次：

apt install snapd  
snap install core  
snap refresh core  
snap install --classic certbot

安装完成后，运行下certbot --version命令，如果有版本号输出，就表明安装成功了。

安装Cloudflare插件

为了实现自动化地续签证书，需要安装下对应DNS服务商的插件才可以。我使用Cloudflare来做DNS解析，所以可以使用以下的命令来安装Cloudflare插件：

snap set certbot trust-plugin-with-root=ok  
  
snap install certbot-dns-cloudflare

设置Cloudflare API令牌

要使用Cloudflare插件，需要先登录到Cloudflare控制台来生成一个仅可操作DNS解析的API 令牌。可在登录Cloudflare后，跳转到这个地址来进行创建：https://dash.cloudflare.com/profile/api-tokens

以下是操作过程的简单演示：

创建完成后记得将出现的令牌复制下来。然后使用以下命令来创建配置文件：

mkdir -p ~/.secrets/certbot  
  
vim ~/.secrets/certbot/cloudflare.ini

填入如下格式的配置就可以了：

dns_cloudflare_api_token = 刚才获取到的API令牌

编辑完成后，可以修改下这个文件的权限，否则执行certbot命令时会报一个警告说文件权限不安全：

chmod 600 ~/.secrets/certbot/cloudflare.ini

获取证书

现在通过运行以下的命令就可以生成nginx所需的证书了：

certbot certonly --dns-cloudflare --dns-cloudflare-credentials ~/.secrets/certbot/cloudflare.ini --dns-cloudflare-propagation-seconds 60 -d api.170529.xyz

注意，这里用了--dns-cloudflare-propagation-seconds 60把等待时间延长到了60秒，否则默认的10秒有些时候会导致校验失败。

生成的证书和私钥会放到/etc/letsencrypt/live/YOUR_HOST目录下。

ssl_certificate /etc/letsencrypt/live/knktc.com/fullchain.pem; # managed by Certbot  
ssl_certificate_key /etc/letsencrypt/live/knktc.com/privkey.pem; # managed by Certbot

定时任务

通过以下命令可以查看certbot的定时任务是否添加成功了：

systemctl list-timers

如果要在每次生成新的证书后自动reload下nginx，可以加个hook脚本：

vim /etc/letsencrypt/renewal-hooks/post/reload-nginx

加入以下的脚本：

#!/bin/sh  
  
systemctl reload nginx

然后给这个脚本文件加上权限：

chmod +x /etc/letsencrypt/renewal-hooks/post/reload-nginx

这样的话，每次生成新的证书后，就会自动reload下nginx让新的证书生效了。

Nginx安装

Sun, 13 Apr 2025 00:00:00 GMT

1 清除旧版 Nginx（可选）

如果你的系统中之前安装过 Nginx，为了避免新旧版本冲突，建议先将其删除：

1备份现有的 Nginx 配置文件：

sudo mv /etc/nginx/ /etc/nginx.old/

2停止 Nginx 服务：

sudo systemctl stop nginx

3清除系统中所有旧的 Nginx 软件包：

sudo apt autoremove nginx* --purge

完成这些准备工作后，我们就可以开始安装 Nginx 的新版本了。

2. 安装 Nginx

我们选择直接从 Nginx.org 的官方软件源来安装，这样可以立即获得 Nginx 的最新版本。

2.1 导入 GPG 密钥

1为了确保软件包的安全性，需要先下载并添加 Nginx 的 GPG 密钥：

curl -fSsL https://nginx.org/keys/nginx_signing.key | sudo gpg --dearmor | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null

2执行以下命令验证 GPG 密钥：

gpg --dry-run --quiet --import --import-options import-show /usr/share/keyrings/nginx-archive-keyring.gpg

导入 Nginx 官方源 GPG 密钥

2.2 添加 Nginx 官方软件源

根据你的需要，为 Ubuntu 添加 Nginx 官方软件源（2 选 1）：

stable 稳定版

echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" | sudo tee /etc/apt/sources.list.d/nginx.list

mainline 主线版

echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] http://nginx.org/packages/mainline/ubuntu `lsb_release -cs` nginx" | sudo tee /etc/apt/sources.list.d/nginx.list

为 Ubuntu 添加 Nginx 官方软件源

2.3 设置 APT 优先使用 Nginx 官方源

为了确保 Nginx.org 的软件包优先级高于 Ubuntu 默认源或其他 PPA，还需要设置 APT Pin：

echo -e "Package: *\nPin: origin nginx.org\nPin: release o=nginx\nPin-Priority: 900\n" | sudo tee /etc/apt/preferences.d/99nginx

你将看到以下输出：

Package: *
Pin: origin nginx.org
Pin: release o=nginx
Pin-Priority: 900

设置 nginx.org 源优先级

2.4 安装 Nginx

在「终端」中执行以下命令更新软件包列表，并安装 Nginx：

sudo apt update
sudo apt install nginx

安装 Nginx

2.5 验证安装结果

安装完成后，可以通过以下命令查看 Nginx 版本，验证是否正确安装：

nginx -v

如果安装成功，你将看到类似以下的输出信息：

nginx version: nginx/1.26.1

查看 Nginx 版本

3. 管理 Nginx 服务

安装完成后，我们需要对 Nginx 服务进行管理：

3.1 检查服务状态

验证 Nginx 服务是否正常运行：

systemctl status nginx

查看 Nginx 服务状态

3.2 启动、停止和重启服务

你可以根据需要，通过以下命令手动启动、停止或重启 Nginx 服务：

sudo systemctl start nginx    # 启动服务
sudo systemctl stop nginx     # 停止服务
sudo systemctl reload nginx   # 重新加载配置文件，不中断服务
sudo systemctl restart nginx  # 重启服务

3.3 设置开机自启动

为了方便使用，你可以设置 Nginx 服务随系统启动时自动启动：

sudo systemctl enable nginx   # 启用开机自启动
sudo systemctl disable nginx  # 禁止开机自启动

Image Captions Example

Thu, 13 Mar 2025 00:00:00 GMT

About Image Captions

This feature wraps images in a <figure> tag only when the image carries independent meaning. If the image is part of the content and does not stand alone, it will not be enclosed in a <figure> tag. Only CommonMark syntax is supported.

Usage

Single Image

With Caption

Markdown:

![A description of the image](url "An image title")

HTML:

<figure>
  <div>
    <figure>
      <img alt="A description of the image" src="url">
      <figcaption>An image title</figcaption>
    </figure>
  </div>
</figure>

Without Caption

Markdown:

![A description of the image](url)

HTML:

<figure>
  <div>
    <img alt="A description of the image" src="url">
  </div>
</figure>

Multiple Images

When you include only images within a paragraph, they will be grouped together. Hard or soft breaks can also be used.

With Caption

Markdown:

![Image 1 description](url1 "Image Title 1")  
![Image 2 description](url2 "Image Title 2")

HTML:

<figure>
  <div>
    <figure>
      <img alt="Image 1 description" src="url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </div>
</figure>

Without Caption

Markdown:

![Image 1 description](url1)  
![Image 2 description](url2)

HTML:

<figure>
  <div>
    <img alt="Image 1 description" src="url1">
    <img alt="Image 2 description" src="url2">
  </div>
</figure>

With Shared Caption

Markdown:

![Image 1 description](url1 "This becomes the caption")  
![Image 2 description](url2)

HTML:

<figure>
  <div>
    <img alt="Image 1 description" src="url1">
    <img alt="Image 2 description" src="url2">
  </div>
  <figcaption>This becomes the caption</figcaption>
</figure>

Single Image Link

With Caption

Markdown:

[![A description of the image](image-url "An image title")](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="A description of the image" src="image-url">
      <figcaption>An image title</figcaption>
    </figure>
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![A description of the image](image-url)](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <img alt="A description of the image" src="image-url">
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![A description of the image](image-url "An image title")](link-url)

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="A description of the image" src="image-url">
      <figcaption>An image title</figcaption>
    </figure>
  </a>
</figure>

Without Caption

Markdown:

[![A description of the image](image-url)](link-url)

HTML:

<figure>
  <a href="link-url">
    <img alt="A description of the image" src="image-url">
  </a>
</figure>

Multiple Image Link

When you include only a multiple-image link within a paragraph, the images will be grouped together. Hard or soft breaks can also be used.

With Caption

Markdown:

[![Image 1 description](image-url1 "Image Title 1")  
![Image 2 description](image-url2 "Image Title 2")](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="Image 1 description" src="image-url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="image-url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![Image 1 description](image-url1)  
![Image 2 description](image-url2)](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <img alt="Image 1 description" src="image-url1">
    <img alt="Image 2 description" src="image-url2">
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![Image 1 description](image-url1 "Image Title 1")  
![Image 2 description](image-url2 "Image Title 2")](link-url)

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="Image 1 description" src="image-url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="image-url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </a>
</figure>

Without Caption

Markdown:

[![Image 1 description](image-url1)  
![Image 2 description](image-url2)](link-url)

HTML:

<figure>
  <a href="link-url">
    <img alt="Image 1 description" src="image-url1">
    <img alt="Image 2 description" src="image-url2">
  </a>
</figure>

Root Relative Path and Relative Path

Root Relative Path

A root relative path refers to assets located in the public directory of your project.

Markdown:

![A description of the image](/favicon/favicon-dark-128.png "An image title")

Relative Path

A relative path refers to assets inside the src directory, and it is relative to the location of the current file.

Markdown:

![A description of the image](../../assets/images/demo-avatar.png "An image title")

Options

You can specify the options in the astro.config.mjs file.

...
import remarkImageCaption from "./src/plugins/remark-image-caption.ts"
...
export default defineConfig({
  ...
  markdown: {
    ...
    remarkPlugins: [
      ...
      remarkImageCaption, // Plugin here
      ...

Name	Type	Default	Description
className	string	""	The class name to apply to the outer `<figure>` element.
excludedPaths	(string \| RegExp)[]	[]	An array of image paths that should be excluded from transformation. This can also be used to exclude paths like those under the `src` folder in Astro projects.
lazyLoad	boolean	false	Set the `loading` attribute on `<img>` elements.
linkAttributes	LinkAttributes		Set the target and relationship attributes for external links. These attributes can also be left unset to delegate handling to other plugins.

linkAttributes

Name	Type	Default	Description
target	string	''	Specify where to open linked documents. The default (empty) does not set a target on links.
rel	string	''	Define the relationship between the current document and the linked document. The default (empty) does not set any relationship.

Link Cards Example

Sun, 23 Feb 2025 00:00:00 GMT

This post is an example of how to use the link card feature in Fuwari. By Hasenpfote in the PR #324。Thanks for the contribution!

About Link Cards

Link Cards are similar to the <LinkCard> component in Starlight, displaying links in a card format.

Usage

Include only a single "bare" link (a link without descriptive text), or something similar, within a paragraph in Markdown, and it will automatically be converted into a Link Card.


**External Links**

https://astro.build/

<https://github.com/saicaca/fuwari/>

[https://fuwari.vercel.app/](https://fuwari.vercel.app/)

**Internal Links**

[/posts/guide/](/posts/guide/)

For more details, see the internalLink option section.

**IDN (Internationalized Domain Name)**

https://はじめよう.みんな/

https://astro.build/

https://github.com/saicaca/fuwari/

https://fuwari.vercel.app/

/posts/guide/

https://はじめよう.みんな/

[!NOTE] Once the cards are displayed, try changing the theme color or enabling dark mode!

Options

You can specify the options in the astro.config.mjs file.

...
import fuwariLinkCard from "./src/plugins/fuwari-link-card.ts"
...
export default defineConfig({
  ...
  integrations: [
    ...
    fuwariLinkCard(), // Plugin here
    ...

If the order of plugins is complex, you can also specify it as a remark plugin.

...
import remarkLinkCard from "./src/plugins/remark-link-card.ts"
...
export default defineConfig({
  ...
  markdown: {
    ...
    remarkPlugins: [
      ...
      remarkLinkCard, // Plugin here
      ...

Name	Type	Default	Description
devMode	boolean	import.meta.env.DEV	Enable or disable development mode.
excludedUrls	Array<string \| RegExp>	[]	A list of strings or regular expressions to exclude specific URLs from processing. This can also help prevent conflicts with other plugins.
linkAttributes	Object	{ target: '', rel: '' }	Set the target and relationship attributes for external links. These attributes can also be left unset to delegate handling to other plugins.
rewriteRules	Array<Object>	[]	Rewrite specific metadata attributes fetched from links, such as the title and description.
base	string	'/'	Specify the same base path as Astro's. For details, refer here. When used as an integration, if not specified, this option will be determined automatically.
defaultThumbnail	string	''	Path to the default thumbnail image to use when the metadata does not include image data. It should be relative to the public directory. For example, set `defaultThumbnail` to 'images/default-thumbnail.jpg' if the image is located at public/images/default-thumbnail.jpg.
internalLink	Object	{ enabled: false, site: '' }	Enable internal link processing within your site.
cache	Object	See detailed options below.	Download and cache images during the build process.

linkAttributes

Name	Type	Default	Description
target	string	''	Specify where to open linked documents. The default (empty) does not set a target on links.
rel	string	''	Define the relationship between the current document and the linked document. The default (empty) does not set any relationship.

rewriteRules

Name	Type	Default	Description
url	RegExp		A regular expression pattern is used to match a specific URL.
rewriteSteps	Array<Object>		Defines rewrite rules for specific metadata attributes.

Below is an example that shows how to rewrite the "title" and "description" for metadata fetched from links pointing to a GitHub repository.

rewriteRules: [
  {
    url: /^https:\/\/github\.com\/[^\/]+\/[^\/]+\/?$/,
    rewriteSteps: [
      { key: "title", pattern: /:.*/, replacement: "" },
      {
        key: "description",
        pattern: /(?: (?:\. )?Contribute to (?:.+\/.+) .+\.?)|(?: - (?:.+\/.+))$/,
        replacement: "",
      },
      {
        key: "description",
        pattern: /^Contribute to (?:.+\/.+) .+\.?$/,
        replacement: "No description provided.",
      },
    ],
  },
],

Name	Type	Description
key	string	Metadata attribute key to be rewritten.
pattern	RegExp	Regular expression pattern used to match the current value of the metadata attribute. The part of the value that matches this pattern will be replaced.
replacement	string	String to replace the matched pattern in the metadata attribute.

internalLink

Set enabled to true to enable internal link processing within your site. The site and base options resolve internal links to absolute URLs. Internal links must point to files that exist on the server.

Name	Type	Default	Description
enabled	boolean	false	Enable or disable internal link processing.
site	string	''	Specify the same deployed URL as Astro's. For details, refer here. When used as an integration, if not specified, this option will be determined automatically.

cache

The following related options allow you to easily control the caching behavior.

Name	Type	Default	Description
enabled	boolean	false	Enable or disable caching.
outDir	string	'./dist/'	Output directory path. For details, refer here. Aligning with Astro allows you to benefit from features like image optimization.
cacheDir	string	'./link-card/'	Cache directory path. If `devMode` is set to true, the final URL to the cached images will be `base + outDir + cacheDir`. Otherwise, it will be `base + cacheDir`.
maxFileSize	number	0	Maximum file size (in bytes) to cache. Set to 0 for no limit.
maxCacheSize	number	0	Maximum total cache size (in bytes). Set to 0 for no limit.
userAgent	string	'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36'	Identifier included in HTTP request headers to specify the client.

Quick and Easy Options Setup

This plugin uses @fastify/deepmerge to simplify options setup.

https://www.npmjs.com/package/@fastify/deepmerge

HTML Structure for Styling

The styles are specified in src/styles/link-card.css, and the HTML is automatically generated. Below is an example structure to guide you when customizing the styles:

<div class="link-card__container">
  <a href="https://astro.build/" class="link-card">
    <div class="link-card__info">
      <div class="link-card__title">Astro</div>
      <div class="link-card__description">Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.</div>
      <div class="link-card__metadata">
        <div class="link-card__domain">
          <img alt="favicon" class="link-card__favicon" src="https://www.google.com/s2/favicons?domain=astro.build">
          <span class="link-card__domain-name">astro.build</span>
        </div>
      </div>
    </div>
    <div class="link-card__thumbnail">
      <img alt="Astro - Build the web you want." class="link-card__image" src="https://astro.build/og/astro.jpg">
    </div>
  </a>
</div>

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code 示例

Wed, 10 Apr 2024 00:00:00 GMT

这里我们将探索如何使用 Expressive Code 展示代码块。以下示例基于官方文档，详情可参考官方说明。

Expressive Code

语法高亮

常规语法高亮

console.log('这段代码已高亮显示！')

渲染 ANSI 转义序列

ANSI 颜色：
- 普通：[31m红[0m [32m绿[0m [33m黄[0m [34m蓝[0m [35m洋红[0m [36m青[0m
- 加粗： [1;31m红[0m [1;32m绿[0m [1;33m黄[0m [1;34m蓝[0m [1;35m洋红[0m [1;36m青[0m
- 变暗： [2;31m红[0m [2;32m绿[0m [2;33m黄[0m [2;34m蓝[0m [2;35m洋红[0m [2;36m青[0m

256 色（显示 160-177）：
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

全 RGB 颜色：
[38;2;34;139;34m森林绿 - RGB(34, 139, 34)[0m

文本格式：[1m加粗[0m [2m变暗[0m [3m斜体[0m [4m下划线[0m

编辑器与终端框

代码编辑器框

console.log('Title 属性示例')

<!-- src/content/index.html -->
<div>文件名注释示例</div>

终端框

echo "这个终端框没有标题"

Write-Output "这个终端有标题！"

覆盖框类型

echo "看！没有框！"

# 默认会是终端框，这里覆盖为代码框
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本与行标记

标记整行与行范围

// 第 1 行 - 按行号标记
// 第 2 行
// 第 3 行
// 第 4 行 - 按行号标记
// 第 5 行
// 第 6 行
// 第 7 行 - 按范围 "7-8" 标记
// 第 8 行 - 按范围 "7-8" 标记

选择行标记类型（mark, ins, del）

function demo() {
  console.log('这一行被标记为删除')
  // 这一行和下一行被标记为插入
  console.log('这是第二个插入的行')

  return '这一行使用默认的中性标记类型'
}

为行标记添加标签

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

在独立行添加长标签

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

使用 diff 风格语法

+这一行将被标记为插入
-这一行将被标记为删除
这是一行普通内容

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+这是真实的 diff 文件
-所有内容都不会被修改
 没有空白会被移除

结合语法高亮与 diff 风格语法

  function thisIsJavaScript() {
    // 整个代码块会以 JavaScript 高亮，
    // 同时可以添加 diff 标记！
-   console.log('旧代码将被移除')
+   console.log('新代码上线！')
  }

标记行内指定文本

function demo() {
  // 标记行内任意指定文本
  return '支持多次匹配指定文本';
}

正则表达式

console.log('yes 和 yep 都会被标记。')

转义斜杠

echo "Test" > /home/test.txt

选择行内标记类型（mark, ins, del）

function demo() {
  console.log('这些是插入和删除标记类型');
  // return 语句使用默认标记类型
  return true;
}

自动换行

每个代码块配置自动换行

// 自动换行示例
function getLongString() {
  return '这是一个很长的字符串，除非容器非常宽，否则很可能无法完全显示'
}

// wrap=false 示例
function getLongString() {
  return '这是一个很长的字符串，除非容器非常宽，否则很可能无法完全显示'
}

配置换行缩进

// preserveIndent 示例（默认启用）
function getLongString() {
  return '这是一个很长的字符串，除非容器非常宽，否则很可能无法完全显示'
}

// preserveIndent=false 示例
function getLongString() {
  return '这是一个很长的字符串，除非容器非常宽，否则很可能无法完全显示'
}

可折叠区块

// 这些样板代码会被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分代码默认可见
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // 可以有多个折叠区块
  const a = 1
  const b = 2
  const c = a + b

  // 这部分会保持可见
  console.log(`计算结果: ${a} + ${b} = ${c}`)
  return c
}

// 这些代码会再次被折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例样板代码结束' })

行号显示

每个代码块显示行号

// 此代码块会显示行号
console.log('来自第 2 行的问候！')
console.log('我在第 3 行')

// 此代码块不显示行号
console.log('你好？')
console.log('你知道我在第几行吗？')

更改起始行号

console.log('来自第 5 行的问候！')
console.log('我在第 6 行')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili

Elysiam

Android 音频焦点与共存播放机制研究

Android 音频焦点与共存播放机制研究

前言

什么是音频焦点（Audio Focus）？

它并不是物理排他的

“不申请焦点”行不通吗？

“厚脸皮”协议：两个独占焦点如何共存

Flutter (audio_session) 下的最佳实践

1. 配置层：持证上岗

2. 逻辑层：精准拦截“劝退”信号

总结

B站表情渲染机制研究

B站表情渲染机制研究

前言

B站表情机制的解析与渲染方法

它并不是普通意义上的 emoji

评论区：message + emotes 的经典模式

私信：同样是 token 替换，但结构换成了 eInfos

动态 / 专栏：服务端直接下发表情节点

直播底部弹幕面板：emots 和 uemote 是两套东西

emots：行内表情

uemote：整条消息就是一张图

uemote 的返回解析

几类 uemote 的渲染踩坑与处理方式

1. room_*：当前策略能正常工作的类型

2. official_*：直接按现有规则渲染会偏小

3. upower_[...]：接口明明给了 20x20，官方却显示成大图

4. 为什么不能把所有 uemote 用一套规则吃掉

总结

修复HyperOS 小窗模式下 Flutter viewPadding 异常的临时兼容方案

修复HyperOS 小窗模式下 Flutter viewPadding 异常的临时兼容方案

前言

省流版结论（直接上结论）

实际场景与踩坑（短版）

解决方案（代码 + 说明）

要点说明

测试建议（必做几项）

关联与参考

总结（一句话）

listary-hack

Listary Pro逆向教程

工具准备

反混淆

修改代码

运行

Cloudflare R2 图像压缩

Cloudflare R2 图像压缩

前言

工具介绍

使用方法

结语

Pillow的AVIF 支持

Pillow AVIF 支持

前言

实际使用

踩坑

解决方案

总结

远离Notify For系列软件

前言

问题

购买体验

后续

将Vscode添加到Win11右键菜单

前言

方法来源

具体使用方法

补充

结语

终端挑选日记

前言

选择终端

1.Warp

WaveTerm

WezTerm

结论

Fuck Pixi

Pixi使用笔记

Pixi使用笔记

评论区：`message + emotes` 的经典模式

私信：同样是 token 替换，但结构换成了 `eInfos`

直播底部弹幕面板：`emots` 和 `uemote` 是两套东西

`emots`：行内表情

`uemote`：整条消息就是一张图

`uemote` 的返回解析

几类 `uemote` 的渲染踩坑与处理方式

1. `room_*`：当前策略能正常工作的类型

2. `official_*`：直接按现有规则渲染会偏小

3. `upower_[...]`：接口明明给了 `20x20`，官方却显示成大图

4. 为什么不能把所有 `uemote` 用一套规则吃掉