Fanzhuo's Blog

说说

Fanzhuo's Blog — Fri, 29 May 2026 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/%E8%AF%B4%E8%AF%B4/

import AudioPlayer from "../../components/mdx/AudioPlayer.tsx";

2026/5/29

你们好，之前我的博客遭受了攻击，vercel流量额度全没了（悲，现在换了个平台准备继续搞了=D，现在评论系统还没好。

2026/2/10

把音乐先删掉了。

2025/12/28

我去PicGo的图床的图片全部挂了，现在全部转移到我的图床上了，但是还有部分图片找不到原图转移不了了qwq。

2025/12/24

圣诞节快乐🎄🎅！！

2025/12/14

哇，居然三个月没有写说说了吗。

放一首我很喜欢的歌测试一下。

2025/9/14

入手了一台佳能R100！=D

2025/9/13

自搭的Telegraph-Image挂了（不知道什么原因），只好把网站里的所有图片改成PicGO图床的了QAQ

这个说说的图片太多了换到我累似……

2025/9/3

因为明天要考试所以要把所有书带回家qwq

肩膀都要背断了……

18斤(；′⌒`)

晚霞也是很好看的捏。

2025/9/2

晚霞捏

~~门锁拍的保密级画质~~

明天上午大课间、第三、四节不用上课了！去看阅兵直播(〃＾▽＾〃)

2025/8/30

没想到我经常用来加速 steam 的小黑盒加速器居然还可以加速 github ！

搜个 vip 兑换码就可以用了(～￣▽￣)～

明天返校（；´д｀）

2025/8/29

开学前和同学聚一波

~~三人行，必吃三锅~~

2025/8/28

军训每天要写日记军训完还要写总结

2025/8/5

寻找午餐的路上路过法院~

2025/7/31

三万人挤进一个苗寨

喝杯下午茶(～￣▽￣)～

2025/7/29

坐高铁一路都是隧道没网

2025/7/22

这个乳酸菌冰茶报喝

后记

2025/8/30: 当时联动好像会送周边qwq为什么我这杯没送qwq

2025/7/16

有内鬼，终止交易！

2025/7/3

学院里的小茂密(〃＾▽＾〃)

2025/6/25

好吃😋

又是和朋友出去玩的一天~

2025/6/7

打羽毛球！

骑车出发！

到了到了

晒啊……

等朋友来……

2025/6/2

ヾ(✿ﾟ▽ﾟ)ノ

2025/2/27

(◦˙▽˙◦)

用压岁钱买了台自行车~

为你的人造语言搭建在线词典

Fanzhuo's Blog — Mon, 29 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/%E4%B8%BA%E4%BD%A0%E7%9A%84%E4%BA%BA%E9%80%A0%E8%AF%AD%E8%A8%80%E6%90%AD%E5%BB%BA%E5%9C%A8%E7%BA%BF%E8%AF%8D%E5%85%B8/

import Kbd from "../../components/mdx/Kbd.astro";

演示地址：乌斯托什语词典

前言

人造语言（Constructed Language，简称Conlang）是指那些语音、语法和词汇都由创造者有意识设计的语言。与自然语言（如汉语、英语等）不同，人造语言并不随人类文化的演变而变化，而是根据特定的需求和目的进行构造。

如果你有一个自己的人造语言，可能会为需要一个词典而发愁，而这篇文章可以帮助你为你的人造语言搭建在线词典。

搭建

事前准备

首先你需要一个 Github 账号、一个 Vercel 账号、一个域名（有很多免费域名教程，这里不再赘述）、在你的电脑上安装 git 、在你的电脑上安装 python。

本地部署

打开 sanatian项目，点击右上角的 Fork ，创建新分支到你的仓库。

然后将仓库克隆到本地（在本地新建文件夹，右键运行 git 终端），在终端里输入 git clone <你的仓库URL> ，推荐使用SSH，可以不用魔法来推送更改。

至此，你成功在本地部署了sanatian。

改写词库

打开 dictionary.txt ，你将会看到原来的词库内容，你可以直接 Ctrl + A 全选后 backspace 删除掉。

你可以添加你的词库内容了！

自动添加（推荐）

运行自动添加程序：终端输入 python add_word.py ，简单易懂，跟着提示来就行了。

手动添加（不推荐）

一条词汇的格式是这样的：


word:<词（必要）>
explanation:<释义（必要）>
part_of_speech:<词性（必要）>
phonetic_symbols:<音标（可选）>
example_sentence:<例句（可选）>
cultural_note:<来源（可选）>
grammar_note:<语法解析（可选）>

两个词之间用空格隔开。

重要解释↓

explanation & part_of_speech

这两个是释义和词性。如果这个词有两个词性，比如 n. 和 v. 那你可以在两个词性之间添加 @@@ ，并在两个词性的两个释义之间也添加 @@@ ，就像这样：


explanation:蓝色的；蔚蓝的@@@蓝色；蔚蓝
part_of_speech:adj.@@@n.

这里顺序很重要，是一一按顺序对应的， 蓝色的；蔚蓝的 对应 adj. ， 蓝色；蔚蓝 对应 n. 。・ω・。

example_sentence

这个是例句，格式是 <序号>.<原句>###<翻译>。 ，序号就是 1、2、3、4这些，如果你有多个例句，请使用多个 example_sentence ，并将序号按例句的编号写，例如这是两个例句的情况：


example_sentence:1.Io aldra ö sana of sanatian.###我修改词典中的一个词。
example_sentence:2.Ao oulue aldra dat'projekt'initz?###你可以修改那个项目初始化吗？

演示

所以，一个符合格式的词典应该是这样的（这题展示两个词）：


word:compra
explanation:理解；领会
part_of_speech:vt.
phonetic_symbols:/kɒm.pra/
grammar_note:过去式：compraz（表示“已经理解”）

word:vlook
explanation:看起来地
part_of_speech:adv.
phonetic_symbols:/vlʊk/

个性化修改

按首字母筛选

默认的首字母筛选的字母为 'A', 'B', 'C', 'D', 'Ð', 'E', 'É', 'Ë', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'Ł', 'M', 'N', 'Ñ', 'O', 'Ö', 'P', 'Q', 'R', 'S', 'ß', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ，如果你想修改为自己的字母，可以打开 dictionary.html ，找到第 305 行附近的这个代码：


const alphabetOrder = [
    'A', 'B', 'C', 'D', 'Ð', 'E', 'É', 'Ë', 'F', 'G', 'H', 'I',
    'J', 'K', 'L', 'Ł', 'M', 'N', 'Ñ', 'O', 'Ö', 'P', 'Q', 'R', 'S',
    'ß', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];

将里面的内容修改为你的字母。

词性

如果你想使用自己的词性缩写或者新的词性，找到 60 行附件的这些代码：


<h3 style="margin-bottom: 15px; color: #2c3e50; margin-top: 25px;">按类别筛选</h3>
<div class="category-filter" id="categoryFilter">
    <button class="category-btn active" data-category="all">全部词汇</button>
    <button class="category-btn" data-category="noun">名词 (n.)</button>
    <button class="category-btn" data-category="verb">动词 (v.)</button>
    <button class="category-btn" data-category="adj">形容词 (adj.)</button>
    <button class="category-btn" data-category="adv">副词 (adv.)</button>
    <button class="category-btn" data-category="pron">代词 (pron.)</button>
    <button class="category-btn" data-category="conj">连词 (conj.)</button>
    <button class="category-btn" data-category="int">感叹词 (int.)</button>
    <button class="category-btn" data-category="prep">介词 (prep.)</button>
    <button class="category-btn" data-category="art">冠词 (art.)</button>
    <button class="category-btn" data-category="det">限定词 (det.)</button>
    <button class="category-btn" data-category="num">数词 (num.)</button>
    </div>
</div>

修改它！（记得词库里的词性要和这个对应上）

本地预览，然后发布到 Github

终端输入 python -m http.server ，然后浏览器进入 http://localhost:8000/dictionary.html 查看效果，确认可以了，没有问题了，进行发布环节。

首先，你需要让 Git 知道你是谁，终端输入 git config --global user.name "你的 Github 用户名" 和 git config --global user.email "你的 Github 使用的邮箱" 。

然后，更改远程仓库为ssh*（如果是通过ssh克隆的不用改），输入 git remote set-url origin git@github.com:xxx/xxx 。

之后跟着 git_push.txt 里的内容来提交。

部署

Versel

打开 Vercel ，点击右上角的 Add New... ，选择连接 Git 存储库，连接你的 Github （具体网上有教程）。

部署好后给你的项目添加域名，或者也可以使用 vercel 分配给你的 .vercel.app 域名，不过国内经常被墙。

Netlify

也可以使用 Netlify 。

Q&A

Q1：人造语言吧里不是已经有一个词典软件了吗，相比之下 sanatian 有什么优点？

A1：人造语言吧里的那个软件只支持安卓，且离线，数据（词库）无法共享（其实可以把数据库发到其他设备，但是有点麻烦）， sanatian 则是一个网站，可以用任意连了网的设备打开，查询。

Q2：缺点呢？

A2：那个软件下载安装了直接就能用， sanatian 搭建相比之下比较麻烦。

TODO

1、支持 SQLite 数据库格式。

2、为这个教程添加图片。

如果你有什么改进意见，欢迎评论。

旺财

Fanzhuo's Blog — Mon, 15 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/%E6%97%BA%E8%B4%A2/

小时候阿嫲家养了条狗，叫旺财，很普通的名字，就像它自己一样，一只普普通通的大狗金毛，性格好。打我有记忆起，每次回老家，旺财就在那了。

记得刚开始我怕过他，后面就熟络起来了。每次放假回去，他就摇着尾巴，一哈一哈地来迎接我们。吃饭的时候，剩的骨头那些就扔给他，他牙口挺好，咔吱咔吱就吃了。

我记得很清楚的和他玩的一次，是我和我堂哥无聊，想着骑狗，跨旺财背上，但还是没坐下去，怕压着他了。

他平时在村里自己溜达，有时半天不见影。他认得路，从来不会走丢。我们也习惯了他这种自由。二零年的一天，他照常出去，可是他出去了，就再也没有回来。可能是被狗贩子捉了去。

旺财就这么不见了。直到现在，我再没听过他从远处跑回来的脚步声，也没再见过他蹲在门口等我们的样子。

有时我会想，他或许还在哪个地方活着，被另一户人家收留了，在另一个院子里晒太阳。

丹霞日出

Fanzhuo's Blog — Sat, 13 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/%E4%B8%B9%E9%9C%9E%E6%97%A5%E5%87%BA/

import Info from "../../components/mdx/Info.astro";

这篇文章的初稿写于2024年1月1日左右（具体日期不清），这篇文章是由初稿修改而来的。

这是我迄今见过最完美的一次日出。

天还没亮透，我就已经站在丹霞山顶。风很轻，带着凌晨特有的清冽。东方依然沉着地黑着，像一砚浓墨，只有几粒星子疏疏地挂着，光很淡，却固执地亮着。

然后，变化开始了。先是地平线那里，极细微地渗出一丝不同于黑夜的灰白，很快，那灰白底下就透出了光，不是刺眼的白，是温温的、妥帖的、带着睡意的金黄。它慢慢漫上来，像谁用极软的笔，蘸着稀释了的金粉，一层层晕染天空。

就在这片金黄最浓郁的地方，一点红意悄然渗了出来，先是针尖大的一点，旋即化开、蔓延，与周遭的金暖融融地交汇，融合成一种无法言说的、温柔的橘。这时我才发现，那片金黄的边缘并非突然终止，它和未醒的夜色交界处，墨黑化作了青黛，青黛又淡成了鱼肚白，那白还在徐徐地、静默地向四面八方浸润开去。

然后，它冒出来了。

太阳的顶端，只是那么饱满的一弧，红得纯净、红得温润。它升起得那样静，那样稳，没有丝毫声张，只是沉静地、一寸寸地，将自己从大地母体的怀抱中挣脱出来。升到一半时，它便不再遮掩自己的光华——光芒成片地泼洒下来，整座山峦、每一棵树、每一块岩石的轮廓，都被一道流动的、璀璨的金边瞬间勾勒清晰。世界仿佛从素描变成了油画。

“啾——”

一声鸟鸣，清脆地划破了这近乎神圣的寂静。我一怔，随即看到近处树梢一阵轻颤，一只鸟儿的剪影箭一般射向泛白的天际。紧接着，第二声、第三声……从山谷、从林间、从看不见的角落，应和般响起。整座山醒来了。声音与影子交织着，有的清越，有的短促，有的在枝头颤动，有的在空中划过流畅的弧线。这份突如其来的、蓬勃的生机，仿佛也传递给了那颗太阳。它像是终于得到了勇气，褪去了最后一点羞涩，加快了上升的步伐，形体愈发完整，光芒也愈发坦荡。

终于，它完整地跃离了地平线。天空彻底亮了，是那种通透的、浅浅的蔚蓝。而刚才铺陈满天的、戏剧般的金黄与橘红，却奇迹般地消散了，仿佛它们存在的全部意义，就只是为了护送这一次庄严的诞生。光，现在均匀地、慷慨地洒在万物之上。

我站在渐渐升高的阳光里。

在博客里添加标签栏

Fanzhuo's Blog — Fri, 12 Dec 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/tag_sidebar/

以我的博客主题Frosti为例，其他主题也可以参考。

一、项目结构与组件设计

我们将创建以下核心文件：

src/components/new-test/
├── Tags.astro              # 标签栏主组件
├── WidgetLayout.astro      # 带展开/收起功能的容器
├── ButtonTag.astro         # 单个标签按钮
├── url-utils.ts            # 网址跳转
└── content-utils.ts        # 数据获取工具函数

二、数据获取与处理

首先创建工具函数获取标签数据：

// src/components/new-test/content-utils.ts
import { getCollection } from "astro:content";

// 获取所有文章
export async function getAllPosts() {
  return await getCollection("blog");
}

// 获取标签列表
export async function getTagList() {
  const posts = await getAllPosts();
  const tagCount: Record<string, {original: string, count: number}> = {};
  
  posts.forEach(post => {
    if (post.data.tags) {
      post.data.tags.forEach(tag => {
        // 使用小写标签名作为键，但保留原始标签名
        const lowerTag = tag.toLowerCase();
        if (tagCount[lowerTag]) {
          tagCount[lowerTag].count++;
          // 保留最常见的大小写形式
          if (tagCount[lowerTag].original !== tag && 
              tagCount[lowerTag].count > 1) {
            tagCount[lowerTag].original = tag;
          }
        } else {
          tagCount[lowerTag] = {
            original: tag,
            count: 1
          };
        }
      });
    }
  });
  
  return Object.entries(tagCount)
    .map(([lowerName, {original, count}]) => ({ 
      name: original, 
      count,
      lowerName
    }))
    .sort((a, b) => b.count - a.count);
}

export function getTagUrl(tagName: string): string {
  // 直接使用 encodeURIComponent，它会正确处理特殊字符如 C++
  return `/blog/tag/${encodeURIComponent(tagName.toLowerCase())}/`;
}

// 从URL slug获取原始标签名
export function getTagFromSlug(slug: string, allTags: Array<{name: string, lowerName: string}>) {
  // 解码URL参数
  const decodedSlug = decodeURIComponent(slug);
  
  // 查找匹配的标签（不区分大小写）
  return allTags.find(tag => 
    tag.name.toLowerCase() === decodedSlug.toLowerCase() ||
    getTagUrl(tag.name).includes(decodedSlug.toLowerCase())
  );
}

三、核心组件实现

1. 标签按钮组件 (ButtonTag.astro)

---
interface Props {
	size?: string;
	dot?: boolean;
	href?: string;
	label?: string;
}
const { dot, href, label }: Props = Astro.props;
---
<a href={href} aria-label={label} class="btn-regular h-8 text-sm px-3 rounded-lg">
    {dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
    <slot></slot>
</a>

2. 带展开/收起的容器组件 (WidgetLayout.astro)

---

interface Props {
	id: string;
	name?: string;
	isCollapsed?: boolean;
	collapsedHeight?: string;
	class?: string;
	style?: string;
}
const { id, name, isCollapsed, collapsedHeight, style } = Astro.props;
const className = Astro.props.class;
---
<widget-layout data-id={id} data-is-collapsed={String(isCollapsed)} class={"pb-4 card-base pt-1 " + className} style={style}>
    <div class="font-bold transition text-lg text-base-content relative ml-8 mt-4 mb-2
        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
        before:absolute before:left-[-16px] before:top-[5.5px]">{name}</div>
    <div id={id} class:list={["collapse-wrapper px-4 overflow-hidden", {"collapsed": isCollapsed}]}>
        <slot></slot>
    </div>
    {isCollapsed && <div class="expand-btn px-4 -mb-2">
        <button class="btn-plain rounded-lg w-full h-9">
            <div class="text-[var(--primary)] flex items-center justify-center gap-2 -translate-x-2">
                查看更多
            </div>
        </button>
    </div>}
</widget-layout>

<style define:vars={{ collapsedHeight }}>
    .collapsed {
        height: var(--collapsedHeight);
    }
</style>

<script>
    class WidgetLayout extends HTMLElement {
        constructor() {
            super();

            if (this.dataset.isCollapsed !== "true")
                return;

            const id = this.dataset.id;
            const btn = this.querySelector('.expand-btn');
            const wrapper = this.querySelector(`#${id}`)
            btn!.addEventListener('click', () => {
                wrapper!.classList.remove('collapsed');
                btn!.classList.add('hidden');
            })
        }
    }

    if (!customElements.get("widget-layout")) {
        customElements.define("widget-layout", WidgetLayout);
    }
</script>

3. 主标签栏组件 (Tags.astro)

---
import { getTagList } from "./content-utils";
import { getTagUrl } from "./url-utils";
import ButtonTag from "./ButtonTag.astro";
import WidgetLayout from "./WidgetLayout.astro";

const tags = await getTagList();

const COLLAPSED_HEIGHT = "7.5rem";

const isCollapsed = tags.length >= 20;

interface Props {
	class?: string;
	style?: string;
}
const className = Astro.props.class;
const style = Astro.props.style;
---
<WidgetLayout name=标签 id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
    <div class="flex gap-2 flex-wrap">
        {tags.map(t => (
            <ButtonTag href={getTagUrl(t.name)} label={`View all posts with the ${t.name.trim()} tag`}>
                {t.name.trim()}
            </ButtonTag>
        ))}
    </div>
</WidgetLayout>

四、样式配置

在全局 CSS 文件中添加以下样式：

:root {
  --primary: oklch(var(--p)); /* 使用你现有的 primary 颜色 */
  --btn-content: oklch(var(--bc) / 0.8); /* 使用现有文本颜色，带透明度 */
  --card-bg: oklch(var(--b1)); /* 使用现有背景颜色 */
}

/* 暗色主题适配 */
[data-theme-type="dark"] {
  --btn-content: oklch(var(--bc) / 0.9);
}

/* 按钮样式 */
.btn-regular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card-bg);
  color: var(--btn-content);
  border: 1px solid oklch(var(--bc) / 0.2);
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  height: 2rem;
  font-size: 0.875rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
}

.btn-regular:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
}

.btn-plain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  border-radius: 0.5rem;
}

.btn-plain:hover {
  background-color: oklch(var(--p) / 0.1);
}

/* 卡片基础样式 */
.card-base {
  background-color: var(--card-bg);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding-bottom: 1rem;
}

/* 折叠动画 */
.collapse-wrapper {
  transition: height 0.3s ease;
}

/* WidgetLayout 组件特定样式 */
widget-layout {
  display: block;
}

.widget-layout-title {
  font-weight: bold;
  transition: color 0.2s;
  font-size: 1.125rem;
  color: oklch(var(--bc));
  position: relative;
  margin-left: 2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.widget-layout-title::before {
  content: "";
  width: 0.25rem;
  height: 1rem;
  border-radius: 0.375rem;
  background-color: var(--primary);
  position: absolute;
  left: -1rem;
  top: 0.35rem;
}

.collapse-wrapper {
  padding: 0 1rem;
  overflow: hidden;
}

.collapsed {
  height: 7.5rem;
}

.expand-btn {
  padding: 0 1rem;
  margin-bottom: -0.5rem;
}

/* 标签云样式 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 确保自定义元素正确显示 */
widget-layout {
  display: block;
}

五、在侧边栏中使用

将标签栏组件添加到你的侧边栏中：

<!-- /src/components/Sidebar.astro -->
---
<!-- 其他 -->
import Tags from "@components/tags/Tags.astro";
<!-- 其他 -->
---

  <!-- 其他侧边栏组件... -->
  
<div class="relative mb-4">
    <Tags />
</div>
  
  <!-- 更多侧边栏组件... -->

六、创建标签详情页面

为了使标签链接正常工作，需要创建标签详情页：

// src/pages/blog/tag/[tag].astro
---
import type { Post, Page } from "@interfaces/data";
import PostCard from "@components/PostCard.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import BaseCard from "@components/BaseCard.astro";
import Pagination from "@components/widgets/Pagination.astro";
import CardGroup from "@components/temple/CardGroup.astro";
import { t } from "@config";
import { Icon } from "astro-icon/components";
import { generatePageLinks } from "@utils/blogUtils";
import { getTagPaginationPaths } from "@utils/paginationUtils";

export async function getStaticPaths({ paginate }: { paginate: any }) {
  return getTagPaginationPaths({ paginate });
}

const { page } = Astro.props as { page: Page };
const params = Astro.params as { tag: string; page: string };

const totalPages = Math.ceil(page.total / page.size);
const pageLinks = generatePageLinks(totalPages);
---

<BaseLayout title={`${t("label.tagPage")} - ${params.tag}`}>
  <BaseCard title={t("label.tagPage")}>
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
      <div class="flex items-center gap-2">
        <Icon name="lucide:tag" class="w-6 h-6 text-secondary" />
        <h1 id="h1" class="text-2xl md:text-3xl font-bold">{params.tag}</h1>
        <div class="badge badge-secondary">{page.total} {page.total === 1 ? t("label.post") : t("label.posts")}</div>
      </div>
      <a href="/blog/tags" class="btn btn-outline btn-sm gap-2">
        <Icon name="lucide:tag" class="w-4 h-4" />
        <span>{t("label.allTags")}</span>
      </a>
    </div>
    <div class="divider my-2"></div>
    <p class="text-sm opacity-75">{t("label.tagDescription")}</p>
  </BaseCard>
  <CardGroup cols="1" gap="6">
    {
      page.data.map((blog: Post) => (
        <PostCard
          title={blog.data.title}
          image={blog.data.image}
          description={blog.data.description}
          url={"/blog/" + blog.slug}
          pubDate={blog.data.pubDate}
          badge={blog.data.badge}
          categories={blog.data.categories}
          tags={blog.data.tags}
          word={blog.remarkPluginFrontmatter.totalCharCount}
          time={blog.remarkPluginFrontmatter.readingTime}
        />
      ))
    }
  </CardGroup>
  <Pagination page={page} totalPages={totalPages} pageLinks={pageLinks} baseUrl={`/blog/tag/${params.tag}`} />
</BaseLayout>

七、完活！

OK完工！

猫

Fanzhuo's Blog — Tue, 23 Sep 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/cat/

三条

在研究生宿舍那一片有很多猫，三条是其中一只。三条是一只白猫，眼睛是黄的。性别记不太清了，好像是一位小公子吧！名字来得十分直白：小时候额头有三条黑纹。但现在是纯白了。后来它当了家长，有个孩子长得和它小时候一模一样，呵呵。

我和小蟹都很喜欢三条。不怕人，圆滚滚的十分可爱：很多大学生都很喜爱三条，经常给它投喂。每天我和小蟹都去找三条玩，除了找不到它时或作业有点多一中午都去写作业了时。有时它在花坛灌木下面晒太阳，有时候在宿舍前的电鸡大军下面打盹，有时又在宿舍楼里巡逻。

后来有一次没找到它。再出现时，三条挂了彩，得了猫癣。眼睛肿得眯起来，眼睛周围一块都秃了。好像是和八字眉打输了架，还丢了宿舍楼的地盘。我们认识的一位大学生姐姐，之前也经常来喂三条的，带三条去了医院，后面诊断了，开了药，要每天去涂。三条不想涂，经常躲着，不过姐姐经常找啊找，找到它给它涂。后来，三条也好了。

之后也没见着三条了，直到有一次在食堂吃饭时遇见了那位姐姐，她告诉我们，三条被人领养了，新主人还把它改名为酸奶了，嗯，很好的名字（不过我还是更喜欢“三条”）。

三条有了一个家，想必三条现在正躺在它主人的怀抱里吧！

八字眉

对，就是和三条打架那只，其实八字眉也挺可爱的。“八字眉”这个名字是我起的，原本它是一只无名小猫，一次我们偶然遇见它，它额头上有一个像八字的黑条纹，很像这个“囧”啊！于是在问过姐姐确定它没名之后，给它起名为八字眉了。

八字眉很喜欢喵喵叫，像三条我就没听过几次它喵喵叫。在撸八字眉的时候，它就会懒懒地喵喵叫，不过平时很少见着它。有一次晚上我骑车到那里的时候，忽然发现了八字眉，它就过来蹭蹭我的车，窝在旁边，真是可爱呀！

图集

撸三条

三条受伤

三条吃猫条（受伤之前）

在网页中添加____

Fanzhuo's Blog — Sat, 13 Sep 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/web-widgets/

import LinkCard from "../../components/mdx/LinkCard.astro";

访问量统计

我们这里用的是不蒜子访问量统计

要使用不蒜子必须在页面中引入busuanzi.js，目前最新版如下：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

要显示站点总访问量，复制以下代码添加到你需要显示的位置。有两种算法可选：

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数

<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

随机诗词

我们可以调用 今日诗词API ，这是一个可以返回一句古诗词名句的接口。

直接在要添加的页面加上下面的代码：

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
    <p class="text-xl text-base-content/80">
        <span id="jinrishici-sentence" class="font-bold">正在加载今日诗词....</span>
    </p>

我这个文字加粗了，可以把 class="font-bold" 去掉以去掉加粗。

在欧卡2中使用自定义电台

Fanzhuo's Blog — Thu, 28 Aug 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/%E5%9C%A8%E6%AC%A7%E5%8D%A12%E4%B8%AD%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%94%B5%E5%8F%B0/

import Collapse from "../../components/mdx/Collapse.astro"; import Diff from "../../components/mdx/Diff.astro"; import Error from "../../components/mdx/Error.astro"; import Info from "../../components/mdx/Info.astro"; import Kbd from "../../components/mdx/Kbd.astro"; import Success from "../../components/mdx/Success.astro"; import Warning from "../../components/mdx/Warning.astro"; import TimeLine from "../../components/mdx/TimeLine.astro"; import LinkCard from "../../components/mdx/LinkCard.astro";

复制电台 URL

打开蜻蜓FM，搜索你想要听的电台。

点击播放。

之后按 fn + f12 打开开发者模式（不同的浏览器打开方式可能会不一样）。

选择 网络 ，再点击 重新加载页面 。

找到类型是 media 的这一项，点击左边的名称。

复制从 https 开始到 app_id 这一串。

游戏内刷新电台文件

进入游戏打开电台播放器，如果没有游戏内置的电台就点 在线更新 。

更改游戏电台文件

打开文件管理器，找到文档，再在文档里找到 Euro Truck Simulator 2 文件夹。

打开 live_streams.sii 文件（用记事本打开）。

按照格式填写（直接改原来的电台就行了），蓝色填刚刚复制的 URL ，红色填名字，黄色填标签，绿色填语言，紫色填比特率（填 128 就行了）。

大功告成！

你也可以直接把我的 live_streams.sii 复制过去（我加了三个我平常听的电台）。

SiiNunit
{
live_stream_def : _nameless.15f.aa46.2e80 {
 stream_data: 275
 stream_data[0]: "https://lhttp-hw.qtfm.cn/live/20194/64k.mp3?app_id|广州MYFM 88.0|Chat, Pop|CN|128|0"
 stream_data[1]: "https://lhttp-hw.qtfm.cn/live/1262/64k.mp3?app_id|广东交通之声|Chat, Pop|CN|128|0"
 stream_data[2]: "https://lhttp-hw.qtfm.cn/live/1254/64k.mp3?app_id|广东新闻广播|Chat, Pop, News|CN|128|0"
 stream_data[3]: "http://relay.181.fm:8050|181.FM - 90's Country|90s|EN|128|0"
 stream_data[4]: "http://relay.181.fm:8018|181.FM - Highway 181|Country|EN|128|0"
 stream_data[5]: "http://relay.181.fm:8130|181.FM - Kickin' Country|Country|EN|128|0"
 stream_data[6]: "http://relay.181.fm:8034|181.FM - Real Country|Country|EN|128|0"
 stream_data[7]: "http://relay.181.fm:8016|181.FM - The Front Porch|Bluegrass|EN|64|0"
 stream_data[8]: "https://streams.80s80s.de/web/mp3-192|80s80s|80s|DE|192|0"
 stream_data[9]: "http://158.69.114.190:8065/stream|80sMania-radio|80s hits|GR|128|0"
 stream_data[10]: "https://n0b.radiojar.com/083wqknmsuhvv?rj-ttl=5|89 FM Rainbow|Rock|GR|96|0"
 stream_data[11]: "https://streams.90s90s.de/pop/mp3-192|90s90s|90s|DE|192|0"
 stream_data[12]: "https://n10.radiojar.com/h693vkmhe5uvv?rj-ttl=5|Alepou Radio|Pop|GR|128|0"
 stream_data[13]: "https://s6-webradio.antenne.de/antenne|Antenne Bayern|Pop|DE|128|0"
 stream_data[14]: "http://arabelfm.ice.infomaniak.ch/arabelprodcastfm.mp3|Arabel FM|Variety|BE|128|0"
 stream_data[15]: "https://ice.onestreaming.com/athenspartyrnb|Athens Party RNB|Hip-Hop and RNB|GR|128|0"
 stream_data[16]: "https://n13.radiojar.com/9ndpdg3c0s8uv?rj-ttl=5&rj-tok=AAABkaOvYUsAAqQP5zVE3-F1SQ|Athens Up Radio|Electronic and House|GR|128|0"
 stream_data[17]: "http://live.antenne.at/arr|Austrian Rock Radio|Rock|AT|128|0"
 stream_data[18]: "https://radio.autoliferadio.com:8090/radio|AutoLife Azerbaijan|Jazz, Pop|AZ|128|0"
 stream_data[19]: "https://dispatcher.rndfnk.com/br/br24/live/mp3/mid?aggregator=onlineradiobox-com|BR24|News|DE|128|0"
 stream_data[20]: "http://ec2.yesstreaming.net:3350/stream|Barfly Radio|Jazz and Rock|GR|128|0"
 stream_data[21]: "http://www.radiobeograd.rs/download/radio202/dnevnik/dnevnik202.mp3|Beograd 202|Spoken|RS|128|0"
 stream_data[22]: "https://live.radio.si/BestFM|Best FM|Folk, Pop, Dance|SL|128|0"
 stream_data[23]: "https://best.live24.gr/best1222|Best Radio|Electronic|GR|128|0"
 stream_data[24]: "https://radio.bigrig.fm/|BigRig FM|Country|EN|320|0"
 stream_data[25]: "https://stream.bigtimefm.de/stream.mp3|BigTimeFM|Dance, Pop|DE|192|0"
 stream_data[26]: "http://centova32.instainternet.com:8033/stream|Blue Radio|Blues|GR|128|0"
 stream_data[27]: "https://blueswave.radio:8000/blueswave|BluesWave Radio|Blues|GR|128|0"
 stream_data[28]: "https://stream.radiojar.com/n8buhxbsk9duv|Bottle o' Groove|Blues|GR|128|0"
 stream_data[29]: "http://176.9.117.123:9998/;stream/1|City Radio|Hits|MK|128|0"
 stream_data[30]: "http://176.9.117.123:9996/;|Club FM|Adult Contemporary|MK|128|0"
 stream_data[31]: "https://cp1.sednastream.com/proxy/clubfm?mp=/stream|Club FM SQ|Adult Contemporary|SQ|128|0"
 stream_data[32]: "https://live.coolradio.rs/cool128|Cool Radio|Pop, Folk|SR|128|0"
 stream_data[33]: "http://eco.onestreaming.com:8689/;|Cosmo Radio|Talk and News|GR|128|0"
 stream_data[34]: "http://icecast2.play.cz:8000/country64.mp3|Country Radio|Country|CZ|64|0"
 stream_data[35]: "http://stream.dbmedia.se/crrMP3|Country Rocks Radio|Various|SE|128|0"
 stream_data[36]: "http://live-icy.gss.dr.dk:8000/A/A03H.mp3|DR P1|News|DK|192|0"
 stream_data[37]: "http://live-icy.gss.dr.dk:8000/A/A04H.mp3|DR P2|Classical|DK|320|0"
 stream_data[38]: "http://live-icy.gss.dr.dk:8000/A/A05H.mp3|DR P3|Top 40|DK|192|0"
 stream_data[39]: "http://live-icy.gss.dr.dk:8000/A/A08H.mp3|DR P4 K\xc3\xb8benhavn|Variety|DK|192|0"
 stream_data[40]: "http://live-icy.gss.dr.dk:8000/A/A25H.mp3|DR P5|Variety|DK|192|0"
 stream_data[41]: "http://live-icy.gss.dr.dk:8000/A/A29H.mp3|DR P6 Beat|Variety|DK|192|0"
 stream_data[42]: "http://live-icy.gss.dr.dk/A/A22H.mp3|DR P8 Jazz|Jazz|DK|192|0"
 stream_data[43]: "https://stream.radiojar.com/pr9r38w802hvv|Dalkas FM|Pop|GR|128|0"
 stream_data[44]: "https://st01.sslstream.dlf.de/dlf/01/128/mp3/stream.mp3?aggregator=onlineradiobox-com|Deutschlandfunk|Talk|DE|128|0"
 stream_data[45]: "http://dieneue1077.cast.addradio.de/dieneue1077/rock/high/stream.mp3|Die Neue 107.7|Pop, Rock|DE|192|0"
 stream_data[46]: "http://directfm.ice.infomaniak.ch/directfm-128.mp3|Direct FM|Variety|FR|128|0"
 stream_data[47]: "http://176.31.120.166:6404/;|Diva FM|Jazz and Swing|GR|320|0"
 stream_data[48]: "https://cast.streams.ovh:9362/;|DreamCity Web Radio|Blues|GR|128|0"
 stream_data[49]: "https://eu8.fastcast4u.com/proxy/sotos?mp=/1|Dust Radio|Rock and Metal|GR|128|0"
 stream_data[50]: "http://icecast.err.ee/raadio2.mp3|ERR Raadio 2|Various|EE|128|0"
 stream_data[51]: "https://ic1.smcdn.pl/2380-1.mp3|ESKA Warszawa|Pop|PL|128|0"
 stream_data[52]: "http://netradio.ziniur.lt/easyfm.mp3|Easy FM|Jazz|LT|256|0"
 stream_data[53]: "http://sc-eldolive.newmedia.lu/;stream.nvs|EldoRadio Luxembourg|Pop|INT|128|0"
 stream_data[54]: "https://radio.elmag.me/elmag.mp3|Elmag radio|Folk, Talk|SR|128|0"
 stream_data[55]: "http://eco.onestreaming.com:8368/;|Erotas FM online|Folk, Pop and Rock|GR|128|0"
 stream_data[56]: "https://eu1.fastcast4u.com/proxy/nmarog01?mp=/1|Eroticos FM|Pop|GR|96|0"
 stream_data[57]: "http://ice.abradio.cz/fajn128.mp3|Fajn Radio|Top 40|CZ|128|0"
 stream_data[58]: "https://imagine2.radioca.st/;stream.nsv|Fly 104|Electronic|GR|128|0"
 stream_data[59]: "https://stream.zeno.fm/yetzdv442k8uv|Folk Radio Kneginec|Pop, Folk|HR|128|0"
 stream_data[60]: "https://n0a.radiojar.com/n8buhxbsk9duv?rj-ttl=5&rj-tok=AAABkdbNcd4AsAz2bnU7EZNNww|Foxy Radio Station|Blues|GR|128|0"
 stream_data[61]: "https://stream.funradio.sk:8000/funpgm256.mp3|Fun R\xc3\xa1dio|Pop|SK|256|0"
 stream_data[62]: "https://stream.radiojar.com/garavelas-radio-com.m4a|Garavelas Radio Country|Country|GR|128|0"
 stream_data[63]: "https://onairmediagroup.live24.gr/glenti1011xanthi?us_privacy=1YNY|Glenti FM|Folk|GR|160|0"
 stream_data[64]: "https://streaming.hitfm.rs/hit.mp3|HIT FM|Pop, Folk|SR|128|0"
 stream_data[65]: "http://mp3.ffh.de/ffhchannels/hqrock.mp3|Hit Radio FFH - Rock|Rock|DE|128|0"
 stream_data[66]: "http://stream2.radiocenter.si:8000/;stream/1|Hitradio Center|Dance, Rock, R&B|SL|128|0"
 stream_data[67]: "http://ice.abradio.cz/faktor128.mp3|Hitr\xc3\xa1dio - Faktor|Pop|CZ|128|0"
 stream_data[68]: "http://s36.myradiostream.com:13028/;listen.mp3|House Heads UK|House|EN|128|0"
 stream_data[69]: "https://imagine897.radioca.st/;stream.nsv|Imagine FM|Pop|GR|128|0"
 stream_data[70]: "https://sp3.streams.ovh/8014/stream|Island FM|Electronic|EN|192|0"
 stream_data[71]: "http://radio.canstream.co.uk:8075/live.mp3|Jazz London Radio|Jazz|EN|256|0"
 stream_data[72]: "https://live.radioart.com/fJust_jazz.mp3?dlid=|Jazz Radio - Just Jazz|Jazz and Swing|GR|96|0"
 stream_data[73]: "https://ice.greekstream.net/gnomi|Kalamaria FM|Hits|GR|128|0"
 stream_data[74]: "http://188.40.62.20:8004/stream|Kalman Radio|Folk|BS|128|0"
 stream_data[75]: "http://138.201.198.218:8075/;stream.nsv|Kameleon|Adult Contemporary|BS|128|0"
 stream_data[76]: "https://kissfm.live24.gr/kissfmathens|Kiss FM|Rock and Pop|GR|192|0"
 stream_data[77]: "http://icecast8.play.cz/kisspublikum128.mp3|Kiss Ji\xc5\xben\xc3\xad \xc4\x8cechy|Top 40|CZ|128|0"
 stream_data[78]: "https://radiostreaming.ert.gr/ert-kosmos|Kosmos|Pop|GR|128|0"
 stream_data[79]: "https://radiostreaming.ert.gr/ert-webjazz|Kosmos Jazz|Jazz and Swing|GR|128|0"
 stream_data[80]: "http://dione.shoutca.st:8443/;?1619626151706|Kritikos FM|Pop and Folk|GR|128|0"
 stream_data[81]: "http://ice-the.musicradio.com:80/LBC973MP3Low|LBC|Talk|EN|48|0"
 stream_data[82]: "https://netradio.live24.gr/laikos876|Laikos FM|Pop and Folk|GR|128|0"
 stream_data[83]: "http://195.13.253.51:8000/128_mp3|Latgolys Radeja|Local|LV|128|0"
 stream_data[84]: "https://onairmediagroup.live24.gr/legend1016xanthi|Legend FM|Rock and Metal|GR|160|0"
 stream_data[85]: "https://stream.zeno.fm/e0cbypaxvchvv|Lobby Radio Rap & Trap|Rap|GR|128|0"
 stream_data[86]: "https://ice07.fluidstream.net/lovefm.mp3|Love FM|Pop|IT|320|0"
 stream_data[87]: "https://loveradio-her.live24.gr/loveradio-her2|Love Radio|Folk, Pop and Rock|GR|128|0"
 stream_data[88]: "https://radio.albanialoveradio.al/stream|Love Radio Digital|Pop|SQ|128|0"
 stream_data[89]: "https://netradio.live24.gr/magic982|MAGIC FM 98.2|Pop|GR|96|0"
 stream_data[90]: "https://solid2.streamupsolutions.com/proxy/wddmcway/stream|MC45|Rap|GR|128|0"
 stream_data[91]: "http://icecast.vrtcdn.be/mnm-high.mp3|MNM|Pop|BE|128|0"
 stream_data[92]: "http://n11a-eu.rcs.revma.com/1nnezw8qz7zuv|MUZO.FM|Rock, Pop|PL|128|0"
 stream_data[93]: "http://stream.manofm.lt/listen?|Mano FM|Pop|LT|128|0"
 stream_data[94]: "https://metromedia.live24.gr/metropolis955thess|Metropolis 95.5|Talk and News|GR|128|0"
 stream_data[95]: "https://stream.zeno.fm/cngtgn2wea0uv|Musicafe Radio|Oldies|GR|128|0"
 stream_data[96]: "https://streaming.myradio1046.fm/myradio1046|My Radio 104.6|Hits|GR|128|0"
 stream_data[97]: "https://icecast.ndr.de/ndr/njoy/live/mp3/128/stream.mp3?aggregator=onlineradiobox-com|N-Joy|Dance, Pop|DE|128|0"
 stream_data[98]: "https://icecast.omroep.nl/3fm-bb-mp3|NPO 3 FM|Pop|NL|192|0"
 stream_data[99]: "https://icecast.omroep.nl/radio1-bb-mp3|NPO Radio 1|Talk|NL|192|0"
 stream_data[100]: "http://185.52.127.155/fr/30001/mp3_128.mp3?origine=fluxradios|NRJ Energy Paris|Pop|FR|128|0"
 stream_data[101]: "http://edge-bauerse-03-gos2.sharp-stream.com/nrj_instreamtest_se_mp3?|NRJ Sverige|Pop|SE|96|0"
 stream_data[102]: "https://lyd.nrk.no/nrk_radio_alltid_nyheter_mp3_h|NRK Alltid Nyheter|News|NO|192|0"
 stream_data[103]: "https://lyd.nrk.no/nrk_radio_jazz_mp3_h|NRK Jazz|Jazz|NO|192|0"
 stream_data[104]: "http://lyd.nrk.no/nrk_radio_klassisk_mp3_h|NRK Klassisk|Classical|NO|192|0"
 stream_data[105]: "https://lyd.nrk.no/nrk_radio_p1_hordaland_mp3_h|NRK P1 Hordaland|Variety|NO|192|0"
 stream_data[106]: "https://lyd.nrk.no/nrk_radio_p1_ostlandssendingen_mp3_h|NRK P1 \xc3\x98stlandssendingen|Oldies|NO|192|0"
 stream_data[107]: "https://lyd.nrk.no/nrk_radio_p2_mp3_h|NRK P2|Talk|NO|192|0"
 stream_data[108]: "http://lyd.nrk.no/nrk_radio_mp3_mp3_h|NRK mP3|Hip Hop, Electro|NO|192|0"
 stream_data[109]: "http://rs2.myradio24.de:8410/stream|Oldie Party Austria|Oldies|AT|128|0"
 stream_data[110]: "http://icepe11.infomaniak.ch/ouifm-high.mp3|Oui FM|Rock|FR|192|0"
 stream_data[111]: "http://188.40.62.20:8032/;stream.nsv|POP FM BS|Pop, Folk|BS|128|0"
 stream_data[112]: "https://n0f.radiojar.com/pepper?rj-ttl=5&rj-tok=AAABkaOuIQYA0l7jYuZgP-xrLw|Pepper|Jazz and Swing|GR|192|0"
 stream_data[113]: "http://pink.exyuserver.com/;|Pink Radio|Pop|SR|128|0"
 stream_data[114]: "https://stream.piraterock.se:8101/webradio|Pirate Rock|Rock|SE|192|0"
 stream_data[115]: "http://mp3.polskieradio.pl:8080/;|Polskie Radio - 24|News|PL|192|0"
 stream_data[116]: "http://mp3.polskieradio.pl:8906/;|Polskie Radio - Czw\xc3\xb3rka|Pop|PL|192|0"
 stream_data[117]: "http://mp3.polskieradio.pl:8902/;|Polskie Radio - Dw\xc3\xb3jka|Classical|PL|192|0"
 stream_data[118]: "http://mp3.polskieradio.pl:8916/;|Polskie Radio - Dzieciom|Children|PL|192|0"
 stream_data[119]: "http://mp3.polskieradio.pl:8900/;|Polskie Radio - Jedynka|Easy listening|PL|192|0"
 stream_data[120]: "http://stream4.nadaje.com:9212/radiokatowice|Polskie Radio - Katowice|Local|PL|128|0"
 stream_data[121]: "http://mp3.polskieradio.pl:8918/;|Polskie Radio - Kierowc\xc3\xb3w|Easy listening|PL|192|0"
 stream_data[122]: "http://stream4.nadaje.com:11986/prs|Polskie Radio - Szczecin|Local|PL|128|0"
 stream_data[123]: "http://mp3.polskieradio.pl:8904/;|Polskie Radio - Tr\xc3\xb3jka|Pop|PL|192|0"
 stream_data[124]: "http://stream.radiopik.pl:9004/|Polskie Radio PiK|Adult Contemporary|PL|128|0"
 stream_data[125]: "http://stream.popfm.dk/pop128|Pop FM|Pop|DK|128|0"
 stream_data[126]: "http://www.radioproton.at:8000/proton|Proton FM|Local|AT|256|0"
 stream_data[127]: "http://icestreaming.rai.it/4.mp3|RAI Radio 4 Light|Rock|IT|256|0"
 stream_data[128]: "http://rs6-krk2.rmfstream.pl/rmf_2010|RMF 10s|2010s|PL|128|0"
 stream_data[129]: "http://rs6-krk2.rmfstream.pl/rmf_2000|RMF 2000|2000s|PL|128|0"
 stream_data[130]: "http://217.74.72.10:8000/rmf_50s|RMF 50s|50s|PL|128|0"
 stream_data[131]: "http://217.74.72.10:8000/rmf_60s|RMF 60s|60s|PL|128|0"
 stream_data[132]: "http://217.74.72.10:8000/rmf_70s|RMF 70s|70s|PL|128|0"
 stream_data[133]: "http://217.74.72.10:8000/rmf_80s|RMF 80s|80s|PL|128|0"
 stream_data[134]: "http://217.74.72.10:8000/rmf_90s|RMF 90s|90s|PL|128|0"
 stream_data[135]: "http://217.74.72.11:8000/rmf_alternatywa|RMF Alternatywa|Alternative Rock|PL|128|0"
 stream_data[136]: "http://217.74.72.10:8000/rmf_classic|RMF Classic|Classical|PL|128|0"
 stream_data[137]: "http://217.74.72.11:8000/rmf_fm|RMF FM|Pop|PL|128|0"
 stream_data[138]: "http://rmfstream1.interia.pl:8000/rmf_hip_hop|RMF Hip Hop|Hip Hop|PL|128|0"
 stream_data[139]: "http://217.74.72.10:8000/rmf_maxxx|RMF MAXXX|Electronic|PL|128|0"
 stream_data[140]: "http://217.74.72.11:8000/rmf_24|RMF24|News|PL|128|0"
 stream_data[141]: "https://duthradio.ddns.net:8010/radio.mp3|ROFA Station|Rap|GR|128|0"
 stream_data[142]: "http://stream.rsg.ba:9000/;stream |RSG|Adult Contemporary|BS|128|0"
 stream_data[143]: "http://tachyon.shoutca.st:8594/;|RSO 91.7|Rock and Pop|GR|128|0"
 stream_data[144]: "http://live.newmedia.lu/|RTL Radio L\xc3\xabtzebuerg|Variety|LU|256|0"
 stream_data[145]: "http://5.20.223.18/rrb128.mp3|RUSRADIO LT|Pop|LT|128|0"
 stream_data[146]: "http://icecast.err.ee:80/raadio2.mp3|Raadio 2|Pop|EE|128|0"
 stream_data[147]: "http://icecast.err.ee/raadio4madal.mp3|Raadio 4|Various|EE|128|0"
 stream_data[148]: "https://eu4.fastcast4u.com/proxy/nikoud00?mp=/1|RadiOi|Punk and Rock|GR|128|0"
 stream_data[149]: "http://82.135.234.195:8000/pukas.mp3|Radijo Stotis P\xc5\xabkas|Folk, Pop|LV|192|0"
 stream_data[150]: "http://111.gr:8000/;|Radio 1|Pop|GR|128|0"
 stream_data[151]: "http://live3.infonetmedia.si/Radio1|Radio 1 SL|Rock, Pop, News|SL|128|0"
 stream_data[152]: "https://live-bauerdk.sharp-stream.com/radio100_dk_mp3|Radio 100|Adult Contemporary|DK|128|0"
 stream_data[153]: "http://radio105.makbots.com:21010/;stream.nsv|Radio 105 Bombarder|News, Sport|MK|128|0"
 stream_data[154]: "https://stream.rcs.revma.com/an1ugyygzk8uv|Radio 357|Various|PL|128|0"
 stream_data[155]: "https://playerservices.streamtheworld.com/api/livestream-redirect/RADIO538.mp3|Radio 538|Pop|NL|128|0"
 stream_data[156]: "https://live.radio.si/Aktual|Radio Aktual|Pop, News, Folk|SL|128|0"
 stream_data[157]: "http://live1.radioantena.si/Antena|Radio Antena|Dance, Rock, Pop|SL|128|0"
 stream_data[158]: "http://air.radioart.com/fCountry.mp3?dlid=|Radio Art - Country|Country|GR|128|0"
 stream_data[159]: "http://air.radioart.com/fJust_blues.mp3?dlid=|Radio Art - Just Blues|Blues|GR|96|0"
 stream_data[160]: "http://eco.onestreaming.com:8099/;|Radio Astro|Rock and Pop|GR|128|0"
 stream_data[161]: "http://stream.radiobaobab.pl:8000/radiobaobab.mp3|Radio Baobab|Blues|PL|128|0"
 stream_data[162]: "http://uk1.internet-radio.com/proxy/bloodstream?mp=/stream|Radio Bloodstream|Rock|EN|144|0"
 stream_data[163]: "https://stream.ffn.de/radiobollerwagen/mp3-192|Radio Bollerwagen|Variety|DE|192|0"
 stream_data[164]: "http://stream.bubamara.com.mk/live-128.aac|Radio Bubamara|Folk, Adult Contemporary|MK|128|0"
 stream_data[165]: "https://stream.exit.si/live|Radio Capris|Rock, Pop, News|SL|128|0"
 stream_data[166]: "http://sc8.radiocaroline.net:8040/|Radio Caroline|Rock|EN|128|0"
 stream_data[167]: "http://stream.radioreklama.bg/city64|Radio City (\xd0\xa0\xd0\xb0\xd0\xb4\xd0\xb8\xd0\xbe \xd0\xa1\xd0\xb8\xd1\x82\xd0\xb8)|Pop|BG|128|0"
 stream_data[168]: "https://cp1.sednastream.com/proxy/clubfmkosova?mp=/stream|Radio Club FM Kosove|Rock, Pop|SR|128|0"
 stream_data[169]: "https://radiocontact.ice.infomaniak.ch/radiocontact-mp3-192.mp3|Radio Contact|Adult Contemporary|BE|192|0"
 stream_data[170]: "http://tachyon.shoutca.st:8289/xstream|Radio D|Pop|SR|128|0"
 stream_data[171]: "http://tachyon.shoutca.st:8303/xstream|Radio D plus|Pop|SR|128|0"
 stream_data[172]: "https://antena.albaniadigitalradio.al/radiodj|Radio DJ|Dance, Electronic|SQ|128|0"
 stream_data[173]: "http://radiodudelange.ice.infomaniak.ch/radiodudelange-128.mp3|Radio Diddel\xc3\xa9ng|Variety|LU|128|0"
 stream_data[174]: "http://s6.voscast.com:8824/;stream.mp3/;|Radio Dukagini|Rock, Pop|SR|128|0"
 stream_data[175]: "https://n01.radiojar.com/t0x7dyqmsuhvv?rj-ttl=5|Radio ENA|Pop and Folk|GR|128|0"
 stream_data[176]: "https://stream.ffn.de/ffn/mp3-192/stream.mp3|Radio FFN|News, Pop|DE|192|0"
 stream_data[177]: "http://193.108.24.21:8000/fmplus|Radio FM+ (\xd0\xa0\xd0\xb0\xd0\xb4\xd0\xb8\xd0\xbe FM+)|Adult Contemporary|BG|128|0"
 stream_data[178]: "http://radio.fsspx.pl:8000/radio.mp3|Radio FSSPX|Christian|PL|128|0"
 stream_data[179]: "https://live.radiostreaming.al:8010/;stream.mp3|Radio Fontana|Talk, News|SQ|128|0"
 stream_data[180]: "http://sirius.shoutca.st:8761/1|Radio Forever 80s|Retro|PL|128|0"
 stream_data[181]: "http://streaming.radio.lublin.pl:8000/radiofreee|Radio Freee|Alternative|PL|128|0"
 stream_data[182]: "http://193.108.24.21:8000/fresh|Radio Fresh (\xd0\xa0\xd0\xb0\xd0\xb4\xd0\xb8\xd0\xbe \xd0\xa4\xd1\x80\xd0\xb5\xd1\x88)|Pop|BG|128|0"
 stream_data[183]: "https://stream.laut.fm/radiogoldstar|Radio GoldStar|Oldies|GR|128|0"
 stream_data[184]: "http://hear.fi:8000/hear.mp3|Radio Hear|Adult Contemporary|FI|320|0"
 stream_data[185]: "https://streaming.radiojat.rs/radiojat.mp3|Radio Jat|Pop, News|SR|128|0"
 stream_data[186]: "https://streaming.karolina.rs/karolina.mp3|Radio Karolina|Pop, Folk, Talk|SR|128|0"
 stream_data[187]: "http://stream3.nadaje.com:8048/;0872561763972044stream.nsv|Radio Kaszebe|Classical|PL|128|0"
 stream_data[188]: "https://stream-162.zeno.fm/a5ffd4skgg0uv?zs=Vc8ZjmmJR9aV90sbz7FyaA|Radio Kavadarci|Folk|MK|128|0"
 stream_data[189]: "https://radiokos.radioca.st/;|Radio Kosova e Lir\xc3\xab|News|SQ|128|0"
 stream_data[190]: "http://zeus.lrb.lu:8000/lrb.live|Radio LRB|Adult Contemporary|LU|192|0"
 stream_data[191]: "http://radio.1dhe1.com:8555/;|Radio Llapi|Folk, Sports|SQ|128|0"
 stream_data[192]: "http://team-data.ba:8030/;?type=http&nocache=57|Radio M|Rock, Pop, News|BS|128|0"
 stream_data[193]: "http://play.radiomrs.com:7494/;stream.nsv|Radio MRS|Electronic|PL|128|0"
 stream_data[194]: "http://116.203.7.166:9010/;stream.nsv|Radio Mix|Rock, Pop|BS|128|0"
 stream_data[195]: "https://stream.radionl.fm/rnlhoogeveen|Radio NL|Dutch Schlager|NL|192|0"
 stream_data[196]: "http://comet.shoutca.st:8050/stream|Radio Nova Gradiska|Pop, Talk|HR|128|0"
 stream_data[197]: "http://stream.rcs.revma.com/ypqt40u0x1zuv|Radio Nowy \xc5\x9awiat|Variety|PL|128|0"
 stream_data[198]: "http://s1.slotex.pl:7390/stream/1/|Radio Orbit|Alternative Rock|PL|128|0"
 stream_data[199]: "https://ic2.smcdn.pl/4100-1.mp3|Radio PLUS|Adult Contemporary|PL|128|0"
 stream_data[200]: "https://stream.silvacast.com/RPLive/mp3-128/onlineradiobox_net/|Radio Paloma|Pop, Folk|DE|128|0"
 stream_data[201]: "http://stream4.nadaje.com:15274/live|Radio Parada|Local|PL|128|0"
 stream_data[202]: "http://ns5.albaservers.com:8020/;?1516996701669.mp3|Radio Peja|Rock, Pop|SR|128|0"
 stream_data[203]: "https://stream.radio.co/sbe73908d2/listen|Radio Prishtina|Rock, Pop, Folk|SR|128|0"
 stream_data[204]: "http://edge-bauerno-03-gos2.sharp-stream.com/radiorock_no_mp3?|Radio Rock|Rock|NO|128|0"
 stream_data[205]: "http://193.105.67.24:8010/;stream.nsv|Radio Rogla|Rock, Pop, Oldies|SL|128|0"
 stream_data[206]: "http://stream.wlmm.dk/stream/54/|Radio SLR|Variety|DK|128|0"
 stream_data[207]: "https://live.radio.si/Salomon|Radio Salomon|Dance, Pop|SL|128|0"
 stream_data[208]: "https://cp1.sednastream.com/proxy/radioshqip?mp=/stream|Radio Shqip|Albanian Music|SQ|128|0"
 stream_data[209]: "http://wma02.fluidstream.net:2250/;|Radio Sorrriso|Variety|IT|128|0"
 stream_data[210]: "http://nashe1.hostingradio.ru/ultra-128.mp3|Radio Ultra (\xd0\xa0\xd0\xb0\xd0\xb4\xd0\xb8\xd0\xbe \xd0\xa3\xd0\xbb\xd1\x8c\xd1\x82\xd1\x80\xd0\xb0)|Rock|RU|128|0"
 stream_data[211]: "http://ca3.rcast.net:8024/;|Radio Vala Rinore|Pop, Adult Contemporary|SQ|128|0"
 stream_data[212]: "https://live.wtfradio.rs/wtfradio.mp3|Radio WTF|Dance, Electronic|SR|128|0"
 stream_data[213]: "http://zt04.cdn.eurozet.pl/ZETPAR.mp3|Radio Zet Party|Dance|PL|128|0"
 stream_data[214]: "http://poznan5-6.radio.pionier.net.pl:8000/tuba9-1.mp3|Radio Z\xc5\x82ote Przeboje|Oldies|PL|128|0"
 stream_data[215]: "https://thanasis.radioca.st/stream?|Rain Music Radio|Jazz and Hip-Hop|GR|128|0"
 stream_data[216]: "http://rock-high.rautemusik.fm/Musik.Rock|RauteMusik.FM - Rock|Indie Rock|DE|192|0"
 stream_data[217]: "https://realfm.live24.gr/realfm|Real FM|Talk and News|GR|192|0"
 stream_data[218]: "http://ice-the.musicradio.com:80/RealXSManchesterMP3|Real Radio XS Manchester|Classic Rock|EN|128|0"
 stream_data[219]: "http://5.20.223.18/relaxfm128.mp3|Relax FM|Pop|LT|128|0"
 stream_data[220]: "https://metromedia.live24.gr/republicthess|Republic FM|Electronic|GR|128|0"
 stream_data[221]: "http://retroserver.streamr.ru:8043/retro256.mp3|Retro FM (\xd0\xa0\xd0\xb5\xd1\x82\xd1\x80\xd0\xbe FM)|Retro|RU|256|0"
 stream_data[222]: "http://streammp3.retro-radio.dk/retro-mp3|Retro Radio|Oldies|DK|192|0"
 stream_data[223]: "https://stream-153.zeno.fm/ax5v5k9b2hhvv?zt=eyJhbGciOiJIUzI1NiJ9.eyJzdHJlYW0iOiJheDV2NWs5YjJoaHZ2IiwiaG9zdCI6InN0cmVhbS0xNTMuemVuby5mbSIsInJ0dGwiOjUsImp0aSI6Ik5uV0RDaWxKUU1Hcmp3V0RIeXluVVEiLCJpYXQiOjE3MjU4ODgxOTgsImV4cCI6MTcyNTg4ODI1OH0.XcNFCFLTfFmSlZzcJQN_cp4z2aZQeDqHi7IusTE_ZPo|RnB Hits Radio|Hip-Hop and RnB|GR|96|0"
 stream_data[224]: "https://stream.zeno.fm/av7zrzlnf3huv|Rock Club|Heavy Metal|GR|128|0"
 stream_data[225]: "http://5.20.223.18/crf128.mp3|Rock FM|Rock|EN|128|0"
 stream_data[226]: "https://stream-153.zeno.fm/ybwz7k5gzchvv?zs=xzV7CDObQg2InZQNn6KWYQ |Rock Fans Kosova|Rock|SQ|128|0"
 stream_data[227]: "https://stream.zeno.fm/5fcz2fkbqtzuv|Rock Lab Radio|Classic Rock and Metal|GR|320|0"
 stream_data[228]: "http://radiostream.pl/tuba8-1.mp3|Rock Radio|Rock|PL|128|0"
 stream_data[229]: "http://icecast5.play.cz/rockzone128.mp3|Rock Zone|Rock|CZ|128|0"
 stream_data[230]: "http://listen.rusongs.ru:8005/ru-mp3-128|Russian Songs (\xd0\xa0\xd1\x83\xd1\x81\xd1\x81\xd0\xba\xd0\xb8\xd0\xb5 \xd0\xbf\xd0\xb5\xd1\x81\xd0\xbd\xd0\xb8)|Pop|RU|128|0"
 stream_data[231]: "http://icecast5.play.cz/radiobeat128.mp3|R\xc3\xa1dio Beat|Classic Rock|CZ|128|0"
 stream_data[232]: "http://icecast5.play.cz:8000/impuls128.mp3|R\xc3\xa1dio Impuls|Adult Contemporary|CZ|128|0"
 stream_data[233]: "https://stream.sepia.sk:8000/viva320.mp3|R\xc3\xa1dio Viva|Pop|SK|320|0"
 stream_data[234]: "http://live.slovakradio.sk:8000/Regina_BB_128.mp3|SRo 2 R\xc3\xa1dio Regina Bansk\xc3\xa1 Bystrica|Spoken|SK|128|0"
 stream_data[235]: "https://dispatcher.rndfnk.com/swr/swr3/live/mp3/128/stream.mp3|SWR 3|News, Pop|DE|128|0"
 stream_data[236]: "http://server.rmnradio.de:30842/|Schlagerparadies|German Schlager|DE|128|0"
 stream_data[237]: "http://eco.onestreaming.com:8012/;|Sferikos.gr|Pop|GR|128|0"
 stream_data[238]: "http://stream.laut.fm/simliveradio|SimLiveRadio|Dance, Pop|DE|128|0"
 stream_data[239]: "http://radio.simulatorradio.com:8002/stream.mp3|Simulator Radio|Sim radio|EN|128|0"
 stream_data[240]: "https://skai.live24.gr/skai1003-2|Skai|Talk and News|GR|128|0"
 stream_data[241]: "http://icecast.skyrock.net/s/natio_mp3_128k|Skyrock|Rock|FR|128|0"
 stream_data[242]: "http://media-sov.musicradio.com/ChillMP3|Smooth Chill|Chill|EN|128|0"
 stream_data[243]: "http://media-ice.musicradio.com/SmoothLondonMP3|Smooth Radio|Adult Contemporary|EN|128|0"
 stream_data[244]: "https://n09.radiojar.com/zeqcyyvu48hvv?rj-ttl=5|Sok FM|Pop and Folk|GR|128|0"
 stream_data[245]: "https://sportfm.live24.gr/sportfm7712|Sport FM|Talk and News|GR|128|0"
 stream_data[246]: "https://sp3.streams.ovh/8062/stream|Stigma Radio 97.6|Jazz and Pop|GR|128|0"
 stream_data[247]: "http://radio.studiob.rs:8004/|Studio B|Pop|RS|128|0"
 stream_data[248]: "https://stream.sunshine-live.de/hq/mp3-192|Sunshine Live|Dance, Techno|DE|192|0"
 stream_data[249]: "http://dione.shoutca.st:8530/;|Super FM|Pop and Folk|GR|128|0"
 stream_data[250]: "https://mcp1.mydataknox.com:8010/stream|Super Radio|Pop, Folk, News|HR|128|0"
 stream_data[251]: "https://listen.radioking.com/radio/552965/stream/612287|Tambura\xc5\xa1ki Radio|Pop|HR|128|0"
 stream_data[252]: "http://stream.laut.fm/techliveradio|TechLiveRadio|Pop, Rock|DE|128|0"
 stream_data[253]: "https://live-bauerdk.sharp-stream.com/thevoice_dk_mp3|The Voice|Pop|DK|128|0"
 stream_data[254]: "http://wroclaw.radio.pionier.net.pl:8000/pl/tuba10-1.mp3|Tok FM|Spoken|PL|128|0"
 stream_data[255]: "http://str0.creacast.com/topmusic1|Top Music - Strasbourg|Pop|FR|128|0"
 stream_data[256]: "http://cast.streams.ovh:8008/stream|Trance Athena|Trance|GR|128|0"
 stream_data[257]: "http://radio.trucksim.fm:8000/stream|TruckSimFM|Sim radio|EN|320|0"
 stream_data[258]: "https://oreo.truckstopradio.co.uk/radio/8000/radio.mp3|TruckStopRadio|Sim radio|EN|320|0"
 stream_data[259]: "https://radio.truckers.fm/|TruckersFM|Sim radio|EN|320|0"
 stream_data[260]: "https://ic2.smcdn.pl/3990-1.mp3|VOX FM|Dance|PL|128|0"
 stream_data[261]: "https://vrt.streamabc.net/vrt-radio2antwerpen-mp3-128-8732799|VRT Radio 2|Pop|BE|128|0"
 stream_data[262]: "https://fresh.vanillaradio.com:8009/live|Vanilla Radio Fresh Flavors|Hip-Hop|GR|128|0"
 stream_data[263]: "https://live.radio.si/Veseljak|Veseljak|Pop, News, Folk|SL|128|0"
 stream_data[264]: "https://tx-bauerse.sharp-stream.com/http_live.php?i=vinylfm_instream_se_mp3|Vinyl FM|60s, 70s, 80s|SE|128|0"
 stream_data[265]: "http://wdr-1live-live.icecastssl.wdr.de/wdr/1live/live/mp3/128/stream.mp3?aggregator=onlineradiobox-com|WDR 1LIVE|Pop, Rock|DE|128|0"
 stream_data[266]: "https://ams-pioneer02.dedicateware.com:1060/;?type=http|YES!|Pop|GR|128|0"
 stream_data[267]: "https://radiostreaming.ert.gr/ert-zeppelin|Zeppelin 106.7|Rock|GR|192|0"
 stream_data[268]: "https://stream.zuccaradio.com/stream|Zucca Radio|Pop|GR|128|0"
 stream_data[269]: "http://whsh4u-panel.com:14155/stream|djlrockradio|Punk and Rock|GR|128|0"
 stream_data[270]: "http://stream.myrock.fm/myrock128|myROCK|Rock|DK|128|0"
 stream_data[271]: "http://stream.laut.fm/simulator1|simulator1|Dance, Pop|DE|128|0"
 stream_data[272]: "http://icecast8.play.cz/cro1-128.mp3|\xc4\x8cRo 1 Radio\xc5\xbeurn\xc3\xa1l|News, Talk|CZ|128|0"
 stream_data[273]: "http://netradio.ziniur.lt/ziniur.mp3|\xc5\xbdini\xc5\xb3 radijas|Spoken|LT|256|0"
 stream_data[274]: "https://eco.onestreaming.com/proxy/toxotis/stream|\xce\xa1\xce\xac\xce\xb4\xce\xb9\xce\xbf \xce\xa4\xce\xbf\xce\xbe\xcf\x8c\xcf\x84\xce\xb7\xcf\x82|Pop|GR|128|0"
}

}

在 Frosti 中使用 mdx

Fanzhuo's Blog — Fri, 22 Aug 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/%E5%9C%A8-frosti-%E4%B8%AD%E4%BD%BF%E7%94%A8-mdx/

前言

Frosti 中有很多内置的 mdx 组件，今天就来讲一下如何使用这些组件。

正文

准备

首先需要在存放文章的 \src\content\blog 文件夹里面创建一个 mdx 后缀的文件。

引用

Frosti 提供的组件放置在 /mdx 文件夹中。在文件属性中写下：

import Collapse from "../../components/mdx/Collapse.astro";
import Diff from "../../components/mdx/Diff.astro";
import Error from "../../components/mdx/Error.astro";
import Info from "../../components/mdx/Info.astro";
import Kbd from "../../components/mdx/Kbd.astro";
import Success from "../../components/mdx/Success.astro";
import Warning from "../../components/mdx/Warning.astro";
import TimeLine from "../../components/mdx/TimeLine.astro";
import LinkCard from "../../components/mdx/LinkCard.astro";

使用例

折叠文字

（；´д｀）我被隐藏了……

<Collapse title="(。・ω・。)你好呀！">
  （；´д｀）我被隐藏了……
</Collapse>

对比图

<Diff l="/image/l.png" r="/image/r.png" />

错误

(っ °Д °;)っ加载失败，请检查你的网络状态！

<Error>(っ °Д °;)っ加载失败，请检查你的网络状态！</Error>

警告

如果下方没有评论区请刷新页面

<Warning>如果下方没有评论区请刷新页面</Warning>

信息

这只是一条信息

<Info>这只是一条信息</Info>

成功

大功告成！

<Success>大功告成！</Success>

按键

用 Ctrl + C 来复制文本.

用 <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> 来复制文本.

时间线

<TimeLine
  items={[
    { year: "1984", event: "第一台 Macintosh 计算机" },
    { year: "1998", event: "iMac" },
    { year: "2001", event: "iPod" },
    { year: "2007", event: "iPhone" },
    { year: "2015", event: "Apple Watch" },
  ]}
/>

链接卡

<LinkCard
  title="Fanzhuo's blog"
  desc="我的博客链接"
  url="https://blog.fanzhuo.xyz/"
  img="/logo.png"
/>

原文链接（英文）：Using mdx in Frosti

使用 CSS 和 HTML 实现“失忆按钮”

Fanzhuo's Blog — Thu, 21 Aug 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/forget_button/

看到这张表情包，突然心血来潮（，想在网站里塞一个小彩蛋：失忆按钮(。・ω・。)

先理一下功能

为了避免无限循环，还是加上退出按钮……

点击"失忆按钮"链接时，触发按钮

显示自定义弹窗，内容为"这是什么？"和两个按钮："点一下"、"不点啦"

当点击"点一下"按钮时，弹窗会关闭并立即重新打开

当用户点击"不点啦"按钮时，弹窗会关闭

实现

我们使用 CSS 类来控制动画，并在适当的时候添加和移除类。定义动画：

打开动画：我们命名为 dialog-open-animation
关闭动画：命名为 dialog-close-animation

在弹窗显示时，我们添加 dialog-open-animation 类，并移除关闭动画类。

在关闭时，我们添加 dialog-close-animation 类，然后等待动画结束再隐藏。

每次打开时，我们需要先移除之前的动画类，然后添加打开动画类，以重新触发动画。

由于我们每次打开都是同一个弹窗，我们需要在关闭后重置样式，以便下次打开时动画重新开始。

我们这样设计：

显示弹窗：

设置 display: block
移除关闭动画类（如果有）
添加打开动画类

关闭弹窗：

添加关闭动画类
监听动画结束事件，结束后隐藏弹窗并移除关闭动画类

好像我们可以使用更简单的方法：在关闭弹窗后，我们将弹窗的 display 设为 none ，并移除所有动画类。这样下次打开时，再重新添加动画类就行啦。

具体实现

<!-- 页面中的按钮 -->
<a class="projectItem b" href="javascript:void(0)" onclick="showRecursiveDialog()">
    <div class="projectItemLeft">
        <h1>失忆按钮</h1>
        <p>这是什么？点一下</p>
    </div>
</a>

<!-- 递归弹窗容器 -->
<div id="recursiveDialog" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; transition: opacity 0.3s ease;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: white; padding: 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; max-width: 80%; transition: transform 0.3s ease, opacity 0.3s ease;">
        <p style="font-size: 18px; margin-bottom: 20px; line-height: 1.5; color: #000;">这是什么？</p>
        <div>
            <button onclick="handleDialogChoice('click')" style="background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-right: 10px; font-size: 16px; transition: all 0.2s ease;">点一下</button>
            <button onclick="handleDialogChoice('cancel')" style="background: #f44336; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: all 0.2s ease;">不点啦</button>
        </div>
    </div>
</div>

<script>
let dialogActive = false; // 跟踪弹窗状态

// 显示递归弹窗（带动画）
function showRecursiveDialog() {
    if (dialogActive) return; // 防止重复打开
    
    const dialog = document.getElementById("recursiveDialog");
    const content = dialog.querySelector("div");
    
    // 重置状态
    dialogActive = true;
    dialog.style.display = "block";
    
    // 触发动画
    setTimeout(() => {
        dialog.style.opacity = "1";
        content.style.transform = "translate(-50%, -50%) scale(1)";
    }, 10);
}

// 关闭弹窗（带动画）
function closeRecursiveDialog() {
    const dialog = document.getElementById("recursiveDialog");
    const content = dialog.querySelector("div");
    
    // 关闭动画
    dialog.style.opacity = "0";
    content.style.transform = "translate(-50%, -50%) scale(0.8)";
    
    // 动画结束后隐藏
    setTimeout(() => {
        dialog.style.display = "none";
        dialogActive = false; // 重置状态
    }, 300);
}

// 处理选择
function handleDialogChoice(choice) {
    if (choice === 'click') {
        // 先关闭当前弹窗
        closeRecursiveDialog();
        
        // 延迟后打开新弹窗
        setTimeout(() => {
            showRecursiveDialog();
        }, 350); // 比关闭动画稍长一点
    } else {
        closeRecursiveDialog();
    }
}
</script>

完成！

你可以在飞屋工作室官网看到我留的失忆按钮小彩蛋！

在前端框架使用 Astro 的静态博客搭建 Waline 评论系统

Fanzhuo's Blog — Thu, 21 Aug 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/astro_waline/

介绍

我这个博客用的是 Frosti 这个主题，添加评论系统需要一些额外配置。我们今天就来一步步将 Waline 评论系统集成到 Frosti 博客中（其他主题也可以参考参考）。

由于静态网站无法直接处理动态内容，例如评论。不过，我们可以借助第三方评论服务来处理后端逻辑，同时将他们的前端组件嵌入到我们的网站中（就比如我们今天讲的 Waline 评论系统）。

实现

部署 Waline 评论系统后端

直接根据 Waline 官方文档操作，之后复制服务端地址。

创建 Waline 组件

在 src/components/ 中创建一个组件，命名为 Waline.astro ，再将以下代码添加到组件：

---
interface Props {
  serverURL: string;
  lang?: string;
  dark?: string;
  emoji?: string[];
  meta?: string[];
  requiredMeta?: string[];
  reaction?: boolean;
  pageview?: boolean;
}

const {
  serverURL,
  lang = "zh",
  dark = "html[data-theme-type='dark']",
  emoji = ["https://unpkg.com/@waline/emojis@1.1.0/weibo", "https://unpkg.com/@waline/emojis@1.1.0/bilibili", "https://unpkg.com/@waline/emojis@1.1.0/qq", "https://unpkg.com/@waline/emojis@1.1.0/tieba", "https://unpkg.com/@waline/emojis@1.1.0/bmoji", "https://unpkg.com/@waline/emojis@1.1.0/alus"],
  meta = ["nick", "mail", "link"],
  requiredMeta = [],
  reaction = false,
  pageview = false,
} = Astro.props;
---

<div id="waline-container"></div>

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />

<script
  type="module"
  define:vars={{
    serverURL,
    lang,
    dark,
    emoji,
    meta,
    requiredMeta,
    reaction,
    pageview,
  }}
>
  import { init } from "https://unpkg.com/@waline/client@v3/dist/waline.js";

  async function initWaline() {
    const container = document.querySelector("#waline-container");
    if (!container) return;

    init({
      el: "#waline-container",
      serverURL,
      path: location.pathname,
      lang,
      dark,
      emoji,
      meta,
      requiredMeta,
      reaction,
      pageview,
    });
  }

  document.addEventListener("astro:page-load", () => {
    initWaline();
  });

  if (document.readyState !== "loading") {
    initWaline();
  } else {
    document.addEventListener("DOMContentLoaded", initWaline);
  }
</script>

<style>
  #waline-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
</style>

使用 Waline 组件

找到 [...slug].astro ，添加以下代码：

---
// 添加这个↓，其他不用动
import Waline from "../../components/Waline.astro";
// 添加这个↑，其他不用动
---

<!-- 添加这些↓，其他不用动 -->
<section class="comments">
  <Waline serverURL="你的服务端地址" />
</section>

完成！

官方文档：Adding Comment Systems to Frosti

搭建免费、无限空间的图床

Fanzhuo's Blog — Wed, 20 Aug 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/telegraph-image%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA/

在写网页、写博客的时候，经常会遇到需要插入图片的情况，这个时候就需要一款图片托管工具，那么我们能不能自己搭建一款呢？

简介

Telegraph-Image 是一款开源的图床系统，通过 Telegraph-Image ，我们可以更轻松地上传、管理和引用图片。

搭建

账号注册

首先我们需要一个 Github 账号、一个 Clougflare 账号和一个 Telegram 账号。

在 Github 上 Fork Telegraph-Image 项目。

打开 Telegraph-Image 项目仓库点击右上角的 Fork ，创建新分支到你的仓库。

获取 Bot_Token

在 Telegram 中，向 @BotFather 发送命令 /newbot ，根据提示依次输入你的机器人名称和用户名。成功创建机器人后，你将会收到一个 BOT_TOKEN ，用于与 Telegram API 进行交互。

设置机器人为频道管理员

创建一个新的频道（ Channel ），进入该频道后，选择频道设置。将刚刚创建的机器人添加为频道管理员，这样机器人才能发送消息。

获取Chat_ID

通过 @VersaToolsBot 获取你的频道ID：向该机器人发送消息，按照指示操作，最后就可以得到 CHAT_ID （即频道的ID）。

或者也可以通过 @GetTheirIDBot 获取（也是按指示操作）。

部署

连接 Git 提供程序

打开 Cloudflare Dashboard ，进入 Pages 管理页面，选择创建项目，选择连接到 Git 提供程序

按照页面提示输入项目名称，选择我们刚刚 Frok 的 git 仓库，点击部署站点即可完成部署

设置环境变量

去Cloudflare Pages后台设置相关的环境变量（注：修改环境变量后，需要重新部署才能生效）

环境变量	示例值	说明
TG_Bot_Token	123468:AAxxxGKrn5	从 @BotFather 获取的 Telegram Bot Token 。
TG_Chat_ID	-1234567	频道的ID，确保 TG Bot 是该频道或群组的管理员。

绑定自定义域名

在 Pages 的自定义域里面，绑定 cloudflare 中存在的域名，在 Cloudflare 托管的域名，自动会修改 dns 记录。

完成了！

现在你可以通过你的域名或者 Cloudflare 给你分配的域名访问这个图床了！

这个是我制作的，可以先看看最终效果awa

参考文档：Telegraph-Image 项目仓库的 README

Dijkstra最短路算法讲解

Fanzhuo's Blog — Sat, 31 May 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/dijkstra/

Dijkstra最短路算法讲解

你说得对，但是迪克斯特拉算法(Dijkstra)是由荷兰计算机科学家狄克斯特拉于1959年提出的算法，因此又叫狄克斯特拉算法。是从一个顶点到其余各顶点的最短路径算法，解决的是有权图中最短路径问题。迪杰斯特拉算法主要特点是从起始点开始，采用贪心算法的策略，每次遍历到始点距离最近且未访问过的顶点的邻接节点，直到扩展到终点为止。

很简单就能理解，举个例子，我们就以下图的多节点、多路径图来讲解一下Dijkstra算法寻找最短路径的过程。（这个图可能有点看不清， B-E 的距离是 6 ， C-D 的距离是 15 ，这个图这俩数有点乱……qwq）

你看，从 A 开始，直接能到的点有 B E 。之后我们将除此之外的其他点到 A 的距离视为无穷大（ 0x3F3F3F3F3F3F3F3F ），之后我们将每个点到自身的距离视为 0 。那么，在最开始的时候， A 到诸点的距离如下。

A	B	C	D	E	F
0	10 （ A-B ）	无穷大	4 （ A-D ）	无穷大	无穷大

OK！接下来，我们找一个除了 A ，到 A 距离最短的点。很明显，是 D 对不对。所以，目前最优的路径就是 A-D ，我们以 A-D 的距离更新其他的点，可以得出：

A	B	C	D	E	F
0	6 （ A-D-B ）	19 （ A-D-C ）	4	10 （ A-D-E ）	无穷大

把俩表的 A 到各点的距离取最小值，得出：

A	B	C	D	E	F
0	6 （ A-D-B ）	19	4	10	无穷大

之后我们不看 A 和 D （这俩点已经操作完了），可以看出当前最有的路径是 A-D-B ，我们就以 A-D-B 的距离更新其他的点，可得：

A	B	C	D	E	F
0	6	14 （ A-D-B-C ）	4	12 （ A-D-E ）	无穷大

还是和以前的取最小值：

A	B	C	D	E	F
0	6	14	4	10	无穷大

我们只需要重复这步骤，最终的结果就是：

A	B	C	D	E	F
0 （ A-A ）	6 （ A-D-B ）	11 （ A-D-E-C ）	4 （ A-D ）	10 （ A-D-E ）	16 （ A-D-E-C-F ）

C++二分模板

Fanzhuo's Blog — Sat, 24 May 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/binary/

上课时记下的一些笔记

//整数二分
int L = 0, R= 1e9;
int ans = -1;
while(L <= R)
{
    int mid = (L + R) >> 1;
    if(check(mid))
    {
        ans = mid;
        R = mid - 1;
    }
    else
    {
        L = mid + 1;
    }
}
//实数二分 或者 浮点数二分
long double l = 0, r = 1e9;
int T = 100;
while(T--)
{
    long double mid = (l + r) * 0.5;
    if(check(mid))
    {
        l = mid;
    }
    else
    {
        r = mid;
    }
}
cout << l << "\n";//输出r也可
//二分函数
//lower_bound(*begin, *end, val, cmp) //cmp是自主设定的比较函数（可有可无，不建议使用）
//upper_bound()

//lower表示 在我给定的排序规则下，找到第一个大于等于val的位置指针
//upper表示                                大于

//例：
int a[50];
a[1] = 2;
a[2] = 4;
a[3] = 5;
a[4] = 6;
auto it = lower_bound(a + 1, a + 49, 5);
cout << *it << "\n";//输出的是5（a[3]），实际得到的是第一个大于等我要求的值（val项的5）的位置
//访问第一个大于等于val的值
//第二种用法
int pos = lower_bound(a + 1, a + 49, 5) - a;//得到了我们想要的位置
//a[pos] == *it
## ## ```

C++模意义下的乘法逆元模板

Fanzhuo's Blog — Sat, 24 May 2025 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/inv-fermat/

也是上课时记的笔记

前导知识

费马小定理：若$p$是质数，对任意整数$a$不是$p$的倍数，有$a^{p-1}\equiv 1\pmod pap−1≡1(modp)$，也可以写作$a^{p}\equiv a\pmod pap≡a(modp)$。

#include <iostream>
using namespace std;
const int N = 3e6 + 1;//题目的数据范围
int fac[N], ifac[N], inv[N], n, p;
int fast_power(int a, int b)//快速幂
{
    int res = 1;
    while(b)
    {
        if(b & 1)
        {
            res = 1ll * res * a % p;
        }
        a = 1ll * a * a % p;
        b >>= 1;
    }
    return res;
}
int main()
{
    scanf("%d%d", &n, &p);
    fac[0] = 1;
    for(int i = 1; i <= n; i++)
    {
        fac[i] = 1ll * fac[i - 1] * i % p;
    }
    ifac[n] = fast_power(fac[n], p - 2);
    for(int i = n - 1; i >= 0; i--)
    {
        ifac[i] = 1ll * ifac[i + 1] * (i + 1) % p;
        inv[i + 1] = 1ll * ifac[i + 1] * fac[i] % p;
    }
    for(int i = 1; i <= n; i++)
    {
        printf("%d\n", inv[i]);
    }
    return 0;
}

P11385 [POI 2024/2025 R1] Walki robotów 题解

Fanzhuo's Blog — Sat, 28 Dec 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/p11385/

题意

有若干个机器人要比赛，每个机器人有一个力量和敏捷度，如果在比赛时这两项值任意一个大于对手，就可以将对手淘汰。如果这两项值一个大于对方一个小于对方，就会同归于尽。现在需要安排机器人比赛顺序使所有机器人都被同归于尽。如果可以，输出 TAK，否者输出 NIE。

思路

先按照力量升序排序。排完后，用力量从小到大找出若干条路径。这样子，每条路径的终点是可以一路“吃”下去的，最后会剩下两个高手机器人，它们可以同归于尽，所以是 TAK。

所以，我们可以发现，如果路径是偶数个，那么一定是 TAK。那要是路径为奇数个呢？

如果有这些机器人，那么找出路径后如下图。

“吃”完后剩下奇数个高手，同归于尽不了啊。

其实是可以的。

让一个高手跳过一个本该被它“吃”掉的机器人，让它最后去和多出的那个高手（见图中红色路径）同归于尽。

如果找不到这样的“小兵”去碰高手，才输出 NIE。

完活！

感谢 purinliang 的指导。

B4104 [CSP-X2024 山东] 购物题解

Fanzhuo's Blog — Sat, 28 Dec 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/b4104/

题意

题目中已经表达的很明白了，在此就不在赘述了。

思路

先将所有商品按照价格降序排序，之后每 $m$ 个一组，答案加上这 $m$ 个商品的原价与优惠价格 $w$ 取最小值。

注意！最后一组有可能没算完，所以需要特判一下。

Code

#include <iostream>
#include <algorithm>
#define ll long long
using namespace std;
ll a[200005];
bool cmp(ll x, ll y)
{
    return x > y;
}
int main()
{
    ll n, m, w, ans = 0, cnt = 0;
    cin >> n >> m >> w;
    for(int i = 1; i <= n; i++)
    {
        cin >> a[i];
    }
    sort(a + 1, a + n + 1, cmp);//从大到小排序。
    for(int i = 1; i <= n; i++)
    {
        cnt += a[i];
        if(i % m == 0)//每m个一组
        {
            ans += min(cnt, w);
            cnt = 0;
        }
    }
    if(cnt >= w)//如果最后一组没算完
    {
        ans += w;
    }
    else
    {
        ans += cnt;
    }
    cout << ans;
    return 0;//return 0好习惯
}

UVA11661 Burger Time?题解

Fanzhuo's Blog — Sun, 15 Dec 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/uva11661/

~~也可以在我的洛谷博客中食用。~~

题意

给定若干个长度为 $l$ 的字符串，其间 R 表示餐厅，D 表示药店，Z 表示两者，. 代表空地。

思路

先是一个 while 循环输入 $l$，里面定义一个 $ans$ 表示最终答案，$r$ 和 $d$ 分别表示餐厅位置和药店位置，再输入字符串 $s$，把 $s$ 的每一个字符遍历一遍。

如果那个字符是 Z 就直接 $ans$ 设为 $0$ 后退出循环。

R 或者 D 的时候就分别把 $r$ 或者 $d$ 赋值为当前循环的次数 $i$。

每次循环时如果 $r$ 和 $d$ 已经有值了就把 $ans$ 赋值为 $\min(ans, |r - d|)$。

注意哦，$ans$ 初始要赋值为一个较大的值，不然在取最小值的时候会错。

Code

#include <iostream>
#include <algorithm>
#include <cmath>
using namespace std;
int main()
{
    int l;
    cin >> l;
    while(l != 0)
    {
        int r = -1, d = -1, ans = 1e9;
        string s;
        cin >> s;
        for(int i = 0; i < l; i++)
        {
            if(s[i] == 'Z')
            {
                ans = 0;
                break;
            }
            if(s[i] == 'D')
            {
                d = i;
            }
            else if(s[i] == 'R')
            {
                r = i;
            }
            if(r != -1 && d != -1)
            {
                ans = min(abs(r - d), ans);
            }
        }
        if(ans == 1e9)//一间都没有
        {
             ans = 0;
        }
        cout << ans << "\n";
        cin >> l;
    }
    return 0;
}

如有不严谨之处欢迎指出。

P1364 医院设置题解

Fanzhuo's Blog — Sat, 14 Dec 2024 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog.fanzhuo.xyz/blog/p1364/

题意

找一个点使得所有点到它的距离最短。

所有点到它的距离计算方法是其他所有点的人口乘以到这个点的距离之和。

注意！这题没有边权！只有点权（我第一次就栽在这里[捂脸哭笑]）。

思路

有两种方法，暴力和换根dp。

暴力很简单，由于 $n$ 很小，直接遍历 $1 \thicksim n$ 为根dfs后一遍算出的距离之和取最小值。

换根dp就是先dfs出以 $1$ 为根的距离之和，再dfs以其他节点为根的距离之和取最小值。

那么状态转移方程是什么呢？

看下题目中的图，如果把医院改 $3$ 号点，不就是左边的 $1, 2$ 号点多走了，右边的 $3, 4, 5$ 号点少走了？

所以很容易推出状态转移方程是：

$f[v]=f[u]+size[1]−size[v]−size[v]$

完活！

Code

//暴力写法
#include <iostream>
#include <vector>
#include <algorithm>
using namespace std;
vector <int> wth[105];
int ans = 1e9, cnt[105], hz[105];
int a[105];
void dfs(int now, int f, int dep, int rt)
{
    cnt[now] = hz[now];
    a[rt] += hz[now] * dep;
    for(auto v : wth[now])
    {
        if(v == f)
        {
            continue;
        }
        dfs(v, now, dep + 1, rt);
        cnt[now] += cnt[v];
    }
}
int main()
{
    int n;
    cin >> n;
    for(int i = 1; i <= n; i++)
    {
        int u, v, w;
        cin >> w >> u >> v;
        hz[i] = w;
        if(u != 0)
        {
            wth[i].push_back(u);
            wth[u].push_back(i);
        }
        if(v != 0)
        {
            wth[i].push_back(v);
            wth[v].push_back(i);
        }
    }
    for(int i = 1; i <= n; i++)
    {
        dfs(i, 0, 0, i);
        ans = min(ans, a[i]);
    }
    cout << ans;
    return 0;
}

朴实无华的分割“字”

//换根dp写法
#include <iostream>
#include <vector>
#include <algorithm>
using namespace std;
vector <int> wth[105];
int ans = 1e9, cnt[105], hz[105];
int a[105];
void dfs(int now, int f, int dep)
{
    cnt[now] = hz[now];
    a[1] += hz[now] * dep;
    for(auto v : wth[now])
    {
        if(v == f)
        {
            continue;
        }
        dfs(v, now, dep + 1);
        cnt[now] += cnt[v];
    }
}
void dfs2(int u, int f)
{
    if(u != 1)
    {
        a[u] = a[f] + (cnt[1] - cnt[u]) - cnt[u];
    }
    ans = min(ans, a[u]);
    for(auto v : wth[u])
    {
        if(v == f)
        {
            continue;
        }
        dfs2(v, u);
    }
}
int main()
{
    int n;
    cin >> n;
    for(int i = 1; i <= n; i++)
    {
        int u, v, w;
        cin >> w >> u >> v;
        hz[i] = w;
        if(u != 0)
        {
            wth[i].push_back(u);
            wth[u].push_back(i);
        }
        if(v != 0)
        {
            wth[i].push_back(v);
            wth[v].push_back(i);
        }
    }
    dfs(1, 0, 0);
    dfs2(1, 0);
    cout << ans;
    return 0;
}

第一次写题解，有不严谨之处望指出=D