Starlr blog

关于本站的一些域名

Wed, 30 Jul 2025 00:00:00 GMT

Fuwari 主题背景图功能教程

Sun, 29 Mar 2026 00:00:00 GMT

本教程将介绍如何为 Fuwari 主题添加背景图功能，包括高斯模糊效果和用户可调节的模糊程度。

功能特性#

✨ 全屏背景图显示
🎨 高斯模糊效果
🎚️ 用户可调节模糊程度（0-50px）
🧊 半透明卡片效果
💾 设置自动保存到本地存储

配置步骤#

1. 配置背景图#

打开 src/config.ts 文件，找到 siteConfig 对象，添加或修改 background 配置：

1
export const siteConfig: SiteConfig = {
2
  // ... 其他配置
3

4
  background: {
5
    enable: true,              // 是否启用背景图
6
    src: "/homeground.webg",   // 背景图片路径
7
    blur: 10,                  // 默认模糊程度（像素）
8
  },
9

10
  // ... 其他配置
11
};

参数说明：

enable: 布尔值，控制是否显示背景图
src: 图片路径，以 / 开头表示相对于 /public 目录，否则相对于 /src 目录
blur: 数字，默认模糊程度，范围建议 0-50

2. 添加背景图片#

将你的背景图片放到 /public 目录下（如果路径以 / 开头）或 /src 目录下。建议使用高分辨率的图片以获得最佳效果。

推荐图片规格：

分辨率：至少 1920x1080
格式：WebP（推荐）、JPG、PNG
大小：建议小于 2MB

3. 自定义模糊度#

用户可以在网页上通过导航栏的模糊图标调节背景模糊度：

点击导航栏右侧的模糊图标
使用滑块调节模糊程度（0-50px）
设置会自动保存，刷新页面后保持

样式自定义#

如果需要调整半透明效果，可以修改 src/styles/variables.styl 文件：

1
define({
2
  // 卡片背景透明度（85% 不透明）
3
  --card-bg-transparent: oklch(1 0 0 / 0.85) oklch(0.23 0.015 var(--hue) / 0.85)
4

5
  // 导航栏背景透明度（80% 不透明）
6
  --navbar-bg: oklch(1 0 0 / 0.8) oklch(0.23 0.015 var(--hue) / 0.8)
7
})

修改 0.85 和 0.8 可以调整透明度（0-1 之间，越小越透明）。

禁用背景图#

如果不想要背景图效果，只需在配置中设置 enable: false：

1
background: {
2
  enable: false,
3
  src: "/homeground.webg",
4
  blur: 10,
5
},

效果展示#

启用背景图后，整个网站将拥有：

固定在底层的全屏背景图
可调节的高斯模糊效果
半透明的卡片和导航栏
保持良好的文字可读性

代码实现#

如果你想从零开始实现这个功能，或者了解具体的技术细节，请按照以下步骤操作：

步骤 1: 定义配置类型#

首先在 src/types/config.ts 中添加背景图配置的类型定义：

1
export type SiteConfig = {
2
  // ... 其他配置
3

4
  background: {
5
    enable: boolean;
6
    src: string;
7
    blur?: number;
8
  };
9

10
  // ... 其他配置
11
};

步骤 2: 添加配置项#

在 src/config.ts 中添加背景图配置：

1
export const siteConfig: SiteConfig = {
2
  // ... 其他配置
3

4
  background: {
5
    enable: true,
6
    src: "/homeground.webg",
7
    blur: 10,
8
  },
9

10
  // ... 其他配置
11
};

步骤 3: 实现设置存储和读取#

在 src/utils/setting-utils.ts 中添加模糊度的存储和读取函数：

1
// 获取默认模糊度
2
export function getDefaultBlur(): number {
3
  const fallback = "10";
4
  const configCarrier = document.getElementById("config-carrier");
5
  return Number.parseInt(configCarrier?.dataset.blur || fallback);
6
}
7

8
// 获取存储的模糊度
9
export function getBlur(): number {
10
  const stored = localStorage.getItem("blur");
11
  return stored ? Number.parseInt(stored) : getDefaultBlur();
12
}
13

14
// 设置模糊度
15
export function setBlur(blur: number): void {
16
  localStorage.setItem("blur", String(blur));
17
  const r = document.querySelector(":root") as HTMLElement;
18
  if (!r) {
19
    return;
20
  }
21
  r.style.setProperty("--bg-blur", String(blur) + "px");
22
}

步骤 4: 创建模糊设置组件#

创建 src/components/widget/BlurSettings.svelte 文件：

1
<script lang="ts">
2
import I18nKey from "@i18n/i18nKey";
3
import { i18n } from "@i18n/translation";
4
import Icon from "@iconify/svelte";
5
import { getDefaultBlur, getBlur, setBlur } from "@utils/setting-utils";
6

7
let blur = getBlur();
8
const defaultBlur = getDefaultBlur();
9

10
function resetBlur() {
11
  blur = getDefaultBlur();
12
}
13

14
$: if (blur || blur === 0) {
15
  setBlur(blur);
16
}
17
</script>
18

19
<div id="blur-setting" class="float-panel float-panel-closed absolute transition-all w-80 right-4 px-4 py-4">
20
    <div class="flex flex-row gap-2 mb-3 items-center justify-between">
21
        <div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
22
            before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
23
            before:absolute before:-left-3 before:top-[0.33rem]"
24
        >
25
            背景模糊
26
            <button aria-label="Reset to Default" class="btn-regular w-7 h-7 rounded-md active:scale-90"
27
                    class:opacity-0={blur === defaultBlur} class:pointer-events-none={blur === defaultBlur} on:click={resetBlur}>
28
                <div class="text-[var(--btn-content)]">
29
                    <Icon icon="fa6-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
30
                </div>
31
            </button>
32
        </div>
33
        <div class="flex gap-1">
34
            <div id="blurValue" class="transition bg-[var(--btn-regular-bg)] w-10 h-7 rounded-md flex justify-center
35
            font-bold text-sm items-center text-[var(--btn-content)]">
36
                {blur}
37
            </div>
38
        </div>
39
    </div>
40
    <div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none">
41
        <input aria-label="Background Blur" type="range" min="0" max="50" bind:value={blur}
42
               class="slider" id="blurSlider" step="1" style="width: 100%">
43
    </div>
44
</div>

步骤 5: 更新 ConfigCarrier 组件#

修改 src/components/ConfigCarrier.astro 以传递模糊度配置：

1
---
2
import { siteConfig } from "../config";
3

4
interface Props {
5
  blur?: number;
6
}
7

8
const { blur = siteConfig.background.blur || 10 } = Astro.props;
9
---
10

11
<div id="config-carrier" data-hue={siteConfig.themeColor.hue} data-blur={blur}>
12
</div>

步骤 6: 在 Layout 中添加背景图#

在 src/layouts/Layout.astro 中添加背景图元素和初始化脚本：

1
<body>
2
  <ConfigCarrier blur={siteConfig.background.blur || 10}></ConfigCarrier>
3
  {siteConfig.background.enable && (
4
    <div id="background-wrapper" class="fixed inset-0 -z-10 overflow-hidden">
5
      <img
6
        id="background-image"
7
        src={url(siteConfig.background.src)}
8
        alt="Background image"
9
        class="absolute inset-0 w-full h-full object-cover"
10
        style={`filter: blur(var(--bg-blur, 10px))`}
11
      />
12
    </div>
13
  )}
14
  <slot />
15
</body>

并在内联脚本中添加模糊度加载：

1
<script is:inline>
2
  // 加载模糊度
3
  const configCarrier = document.getElementById('config-carrier');
4
  const defaultBlur = configCarrier?.dataset.blur || '10';
5
  const blur = localStorage.getItem('blur') || defaultBlur;
6
  document.documentElement.style.setProperty('--bg-blur', `${blur}px`);
7
</script>

步骤 7: 添加 CSS 变量#

在 src/styles/variables.styl 中添加 CSS 变量：

1
:root
2
  --radius-large 1rem
3
  --content-delay 150ms
4
  --bg-blur 10px
5

6
define({
7
  // 背景图相关的变量
8
  --card-bg-transparent: oklch(1 0 0 / 0.85) oklch(0.23 0.015 var(--hue) / 0.85)
9
  --navbar-bg: oklch(1 0 0 / 0.8) oklch(0.23 0.015 var(--hue) / 0.8)
10
})

步骤 8: 在导航栏添加模糊设置按钮#

修改 src/components/Navbar.astro，添加模糊设置按钮和面板：

1
<Search client:only="svelte"></Search>
2
{siteConfig.background.enable && (
3
  <button aria-label="Blur Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="blur-settings-switch">
4
    <Icon name="material-symbols:blur-on" class="text-[1.25rem]"></Icon>
5
  </button>
6
)}
7
<LightDarkSwitch client:only="svelte"></LightDarkSwitch>
8

9
<!-- ... -->
10

11
{siteConfig.background.enable && <BlurSettings client:only="svelte"></BlurSettings>}

并添加按钮点击事件处理：

1
<script>
2
function loadButtonScript() {
3
  // ... 其他按钮
4

5
  let blurSettingBtn = document.getElementById("blur-settings-switch");
6
  if (blurSettingBtn) {
7
    blurSettingBtn.onclick = function () {
8
      let blurSettingPanel = document.getElementById("blur-setting");
9
      if (blurSettingPanel) {
10
        blurSettingPanel.classList.toggle("float-panel-closed");
11
      }
12
    };
13
  }
14
}
15

16
loadButtonScript();
17
</script>

步骤 9: 添加半透明卡片样式#

在 src/styles/main.css 中添加半透明卡片样式：

1
@layer components {
2
  .card-base {
3
    @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
4
  }
5

6
  .card-base-transparent {
7
    @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg-transparent)] backdrop-blur-md transition;
8
  }
9
}

然后将各个组件的 card-base 类替换为 card-base-transparent 以使用半透明效果。

技术实现#

功能实现涉及以下文件：

src/types/config.ts - 配置类型定义
src/config.ts - 配置项
src/layouts/Layout.astro - 背景图渲染
src/components/Navbar.astro - 模糊设置按钮
src/components/widget/BlurSettings.svelte - 模糊调节面板
src/utils/setting-utils.ts - 设置存储和读取
src/styles/variables.styl - 样式变量

注意事项#

背景图片会影响页面加载速度，建议使用压缩后的图片
模糊程度过高可能会影响视觉体验
半透明效果在浅色主题下可能需要调整
移动设备上建议使用较小的背景图片

常见问题#

Q: 为什么背景图不显示？
A: 检查 background.enable 是否为 true，图片路径是否正确。

Q: 如何让背景图固定不滚动？
A: 当前实现已经是固定的，背景图不会随页面滚动。

Q: 可以为不同页面设置不同背景图吗？
A: 当前版本所有页面使用同一背景图，如需不同背景需要修改代码。

希望这个教程能帮助你更好地使用 Fuwari 主题的背景图功能！

通过Cloudflare Tunnel使用SSH

Wed, 04 Feb 2026 00:00:00 GMT

前言#

在没有公网的条件下我们想访问无公网IP往往只能通过FRP或IPv6，本篇文章将介绍使用Cloudflare Tunnel连接内网中的SSH服务

准备#

先决条件#

Cloudflare账号，没有的自行注册一个，并需绑定一张信用卡（不会扣费）
一个托管在Cloudflare上的域名

安装Tunnel#

打开Zero Trust团队名随便写一个，在左侧边栏找到网络，选择 连接器 。进来后点击 添加隧道 ，隧道类型选项 Cloudflared ，名称依旧随便取，保存隧道后选择系统类型，下面我以ubuntu 64-bit 为例

安装 cloudflared#

可将给的shell脚本保存为.sh执行，连上需远程ssh的终端，执行

1
cat << 'EOF' > Install_cloudflared.sh
2
#!/bin/bash
3

4
# Add cloudflare gpg key
5
sudo mkdir -p --mode=0755 /usr/share/keyrings
6
curl -fsSL https://pkg.cloudflare.com/cloudflare-public-v2.gpg | sudo tee /usr/share/keyrings/cloudflare-public-v2.gpg >/dev/null
7

8
# Add this repo to your apt repositories
9
echo 'deb [signed-by=/usr/share/keyrings/cloudflare-public-v2.gpg] https://pkg.cloudflare.com/cloudflared any main' | sudo tee /etc/apt/sources.list.d/cloudflared.list
10

11
# install cloudflared
12
sudo apt-get update && sudo apt-get install cloudflared
13
EOF

赋予权限

Terminal window

1
chmod +x Install_cloudflared.sh

执行脚本安装

Terminal window

1
./Install_cloudflared.sh

连接#

执行连接页面给的 让计算机每次启动时自动运行隧道 这条命令

Terminal window

1
sudo cloudflared service install <你的令牌>

若 Connectors 列表中出现了您的设备，则说明安装成功。

配置Tunnel及应用#

发布应用程序路由#

子域：随便填示例：ssh
域：选择你的域名
路径：空着
服务类型：SSH
URL：127.0.0.1

配置应用程序#

侧栏中选中 访问控制 → 应用程序 → 添加应用程序

类型选择 自托管 ，名称依旧随便写，会话持续时间看你自己，我这里选的是6小时

点击 添加公共主机名 输入方式默认，但子域及域要填写与发布应用程序路由 一致的 ，展开下面的浏览器呈现设置 启用允许自动 Cloudflared 身份验证
浏览器呈现选择SSH
下面需创建一个策略，名称依旧随便写，操作选择允许
认证方式自己选一个方便的，我这里选的是EMAIL即邮箱，其它的看自己最后点保存，回到配置页面，选择好刚刚配置的规则，没其它要求一直点下一步，至此配置就结束了。

最终体验#

打开你的域名，此时应会跳转到Cloudflare的验证界面，按照你自己选择的验证方式过后应该就会跳转到输入User 的界面，输入你的用户名提交后输入密码，至此就大功告成了。

Bot使用文档

Sat, 25 Oct 2025 00:00:00 GMT

Warning

变量部分均使用{}包裹，多选项用/分隔

LLM#

Deepseek#

切换命令：#Deepseek 常用模型，回复速度快，稳定缺点：无法识别图片

Gemini#

切换命令：#Gemini 可以识别图片缺点：有速率限制，超过范围会报错429

GPT#

切换命令：#GPT4/#GPT 此模型为替代模型，可联网搜索缺点：由于是非官方API，服务可能不稳

rua#

命令：#rua {@一个用户/QQ号} 介绍：生成rua表情

发电#

命令：#发电{目标名称} 介绍：生成一段表白话(?

我今天棒不棒#

命令：我今天棒不棒介绍：给出你今天的分数

enc解密#

命令：#enc解密 {解密内容} 介绍：解密被enc加密过的内容

生图#

命令：#生图 {Pixiv/ACG} {标签} 介绍：

Pixiv为从p站拉取一张图
ACG的标签只有：随机、电脑壁纸、头像、手机背景、壁纸

http#

命令：#http {网址} 介绍：测试网站是否能访问并返回状态码

Banme#

命令：banme 介绍：当bot为该群管理时会禁用1~5小时，适用于安心睡觉

今日运势#

命令：今日运势介绍：返回今日运势

名人名言#

命令：#名人名言 {引用一条消息} 介绍：制作一个名言图片

MC服务器状态#

命令：#mcs {服务器地址} 介绍：查看此服务器状态及在线人数

名言#

命令：#名言 {引用一条消息} 介绍：同上名人名言

抖音解析#

命令：发送抖音链接触发介绍：解析抖音视频并发送

点歌#

命令：#点歌 {歌名/歌曲id} 介绍：仅能解析网易云歌曲

狐狸图#

命令：狐狸图介绍：随机发送一张狐狸图

一言#

命令：#名言介绍：找一句好听的名言

天气#

命令：#天气 {城市名称} 介绍：当前天气及未来三天天气

签到#

命令：签到介绍：签到功能

转码#

命令：#转码 {文字/网址(需带https)} 介绍：将文字或网页转换为二维码

ping#

命令：#ping {域名/ip} 介绍：由bot所运行的服务器ping 4次目标地址

大头照#

命令：#大头照 {@一个用户/QQ号} 介绍：发送该用户的QQ头像

whois#

命令：#whois {域名} 介绍：查询该域名信息

点赞#

命令：赞我/超我介绍：给你QQ名片点赞

伪造消息#

命令：#伪造消息 {QQ号/@一个用户}说{内容}
多条消息格式：#伪造消息 {QQ号/@一个用户}说{消息1}|{QQ号/@一个用户}说{消息2}
更多条以此类推介绍：转发伪造合并转发的消息

角色扮演#

命令：#角色扮演
介绍：查看Bot的所有预设

fuwari修复RSS图片不显示

Sat, 27 Sep 2025 00:00:00 GMT

前言#

啊大家都知道，fuwari的RSS如果你用的是相对路径，那么生成的RSS将也是相对路径，但这样就看不了图了啊，所以本章将带你修复它

修改RSS配置文件#

打开src/pages/rss.xml.ts，当然你也可以直接删了
直接一个全选删除再将下面的配置粘贴填入

1
import rss from '@astrojs/rss';
2
import sanitizeHtml from 'sanitize-html';
3
import MarkdownIt from 'markdown-it';
4
import { getCollection } from 'astro:content';
5
import { siteConfig } from '@/config';
6
import { parse as htmlParser } from 'node-html-parser';
7
import { getImage } from 'astro:assets';
8
import type { APIContext, ImageMetadata } from 'astro';
9
import type { RSSFeedItem } from '@astrojs/rss';
10
import { getSortedPosts } from '@/utils/content-utils';
11

12
const markdownParser = new MarkdownIt();
13

14
// get dynamic import of images as a map collection
15
const imagesGlob = import.meta.glob<{ default: ImageMetadata }>(
16
  '/src/content/**/*.{jpeg,jpg,png,gif,webp}', // include posts and assets
17
);
18

19
export async function GET(context: APIContext) {
20
  if (!context.site) {
21
    throw Error('site not set');
22
  }
23

24
  // Use the same ordering as site listing (pinned first, then by published desc)
25
  const posts = await getSortedPosts();
26
  const feed: RSSFeedItem[] = [];
27

28
  for (const post of posts) {
29
    // convert markdown to html string
30
    const body = markdownParser.render(post.body);
31
    // convert html string to DOM-like structure
32
    const html = htmlParser.parse(body);
33
    // hold all img tags in variable images
34
    const images = html.querySelectorAll('img');
35

36
    for (const img of images) {
37
      const src = img.getAttribute('src');
38
      if (!src) continue;
39

40
      // Handle content-relative images and convert them to built _astro paths
41
      if (src.startsWith('./') || src.startsWith('../')) {
42
        let importPath: string | null = null;
43

44
        if (src.startsWith('./')) {
45
          // Path relative to the post file directory
46
          const prefixRemoved = src.slice(2);
47
          importPath = `/src/content/posts/${prefixRemoved}`;
48
        } else {
49
          // Path like ../assets/images/xxx -> relative to /src/content/
50
          const cleaned = src.replace(/^\.\.\//, '');
51
          importPath = `/src/content/${cleaned}`;
52
        }
53

54
        const imageMod = await imagesGlob[importPath]?.()?.then((res) => res.default);
55
        if (imageMod) {
56
          const optimizedImg = await getImage({ src: imageMod });
57
          img.setAttribute('src', new URL(optimizedImg.src, context.site).href);
58
        }
59
      } else if (src.startsWith('/')) {
60
        // images starting with `/` are in public dir
61
        img.setAttribute('src', new URL(src, context.site).href);
62
      }
63
    }
64

65
    feed.push({
66
      title: post.data.title,
67
      description: post.data.description,
68
      pubDate: post.data.published,
69
      link: `/posts/${post.slug}/`,
70
      // sanitize the new html string with corrected image paths
71
      content: sanitizeHtml(html.toString(), {
72
        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
73
      }),
74
    });
75
  }
76

77
  return rss({
78
    title: siteConfig.title,
79
    description: siteConfig.subtitle || 'No description',
80
    site: context.site,
81
    items: feed,
82
    customData: `<language>${siteConfig.lang}</language>`,
83
  });
84
}

保存了，还需要安装一个pnpm包，不用管是什么，能帮我们转换成链接就是的了

Terminal window

1
pnpm add node-html-parser

Warning

在推送到仓库时，你可能会遇到warning: in the working copy of ‘pnpm-lock.yaml’, LF will be replaced by CRLF the next time Git touches it 这是由于空格不同引起的，但并不会影响部署，忽略即可

为fuwari增加一个404界面

Wed, 24 Sep 2025 00:00:00 GMT

本文章分为两部分#

适配多语言的404界面#

打开src/i18n/i18nKey.ts

1
  license = "license",
2
  friends = "friends",
3

4
  // 404 page
5
  notFound = "notFound",
6
  notFoundTitle = "notFoundTitle",
7
  notFoundMessage = "notFoundMessage",
8
  backToHome = "backToHome",
9
  viewArchive = "viewArchive",

再分别打开languages下的en.ts和zh_CN.ts
en.ts

1
  [Key.license]: "License",
2
  [Key.friends]: "Friends",
3

4
  // 404 page
5
  [Key.notFound]: "Page Not Found",
6
  [Key.notFoundTitle]: "Oops! Page Not Found",
7
  [Key.notFoundMessage]: "The page you are looking for doesn't exist. It may have been moved or deleted.",
8
  [Key.backToHome]: "Back to Home",
9
  [Key.viewArchive]: "View Archive",

zh_CN.ts

1
  [Key.license]: "许可协议",
2
  [Key.friends]: "友链",
3

4
  // 404 page
5
  [Key.notFound]: "页面未找到",
6
  [Key.notFoundTitle]: "哎呀！页面走丢了",
7
  [Key.notFoundMessage]: "您访问的页面不存在，可能已被删除或链接有误。",
8
  [Key.backToHome]: "返回首页",
9
  [Key.viewArchive]: "查看归档",

最后在src/pages目录下创建404.astro

1
---
2
import { Icon } from "astro-icon/components";
3
import MainGridLayout from "../layouts/MainGridLayout.astro";
4
import I18nKey from "../i18n/i18nKey";
5
import { i18n } from "../i18n/translation";
6
import { url } from "../utils/url-utils";
7
import { siteConfig } from "../config";
8
---
9

10
<MainGridLayout title={i18n(I18nKey.notFound)} description={i18n(I18nKey.notFoundMessage)}>
11
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-96">
12
        <div class="card-base z-10 px-6 md:px-12 py-8 md:py-12 relative w-full">
13
            <!-- 404 Content -->
14
            <div class="flex flex-col items-center text-center space-y-6">
15
                <!-- Large 404 Number -->
16
                <div class="relative opacity-0 animate-fade-in-up">
17
                    <div class="text-8xl md:text-9xl font-bold bg-gradient-to-br from-[var(--primary)] to-[oklch(0.65_0.18_var(--hue))] bg-clip-text text-transparent select-none">
18
                        404
19
                    </div>
20
                    <!-- Decorative elements -->
21
                    <div class="absolute -top-4 -right-4 w-8 h-8 bg-[var(--primary)] rounded-full opacity-20 animate-pulse"></div>
22
                    <div class="absolute -bottom-2 -left-2 w-6 h-6 bg-[var(--primary)] rounded-full opacity-30 animate-pulse" style="animation-delay: 0.5s;"></div>
23
                </div>
24

25
                <!-- Title and Message -->
26
                <div class="space-y-3 max-w-md opacity-0 animate-fade-in-up animate-delay-100">
27
                    <h1 class="text-2xl md:text-3xl font-bold text-[var(--primary)]">
28
                        {i18n(I18nKey.notFoundTitle)}
29
                    </h1>
30
                    <p class="text-75 text-base md:text-lg leading-relaxed">
31
                        {i18n(I18nKey.notFoundMessage)}
32
                    </p>
33
                </div>
34

35
                <!-- Illustration -->
36
                <div class="py-4 opacity-0 animate-fade-in-up animate-delay-200">
37
                    <div class="relative w-32 h-32 mx-auto animate-float">
38
                        <!-- Simple geometric illustration -->
39
                        <div class="absolute inset-0 bg-gradient-to-br from-[var(--primary)] to-[oklch(0.65_0.18_var(--hue))] rounded-full opacity-10"></div>
40
                        <div class="absolute inset-4 bg-[var(--card-bg)] rounded-full border-2 border-[var(--primary)] border-opacity-20"></div>
41
                        <div class="absolute inset-0 flex items-center justify-center">
42
                            <Icon name="fa6-solid:location-crosshairs" class="w-12 h-12 text-[var(--primary)] opacity-60" />
43
                        </div>
44
                    </div>
45
                </div>
46

47
                <!-- Action Buttons -->
48
                <div class="flex flex-col sm:flex-row gap-3 pt-4 opacity-0 animate-fade-in-up animate-delay-300">
49
                    <a href={url("/")}
50
                       class="btn-regular px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 active:scale-95 flex items-center justify-center gap-2">
51
                        <Icon name="fa6-solid:house" class="w-4 h-4" />
52
                        {i18n(I18nKey.backToHome)}
53
                    </a>
54
                    <a href={url("/archive")}
55
                       class="btn-card px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 active:scale-95 flex items-center justify-center gap-2 border border-[var(--line-divider)]">
56
                        <Icon name="fa6-solid:box-archive" class="w-4 h-4" />
57
                        {i18n(I18nKey.viewArchive)}
58
                    </a>
59
                    <a href={url("/about")}
60
                       class="btn-card px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 active:scale-95 flex items-center justify-center gap-2 border border-[var(--line-divider)]">
61
                        <Icon name="fa6-solid:circle-info" class="w-4 h-4" />
62
                        {i18n(I18nKey.about)}
63
                    </a>
64
                </div>
65

66
                <!-- Additional Help Text -->
67
                <div class="pt-6 text-sm text-50">
68
                    <p class="transition-all duration-300">
69
                        {siteConfig.lang === 'zh_CN' ? '如果您认为这是一个错误，请联系网站管理员。' : 'If you believe this is an error, please contact the site administrator.'}
70
                    </p>
71
                </div>
72
            </div>
73
        </div>
74
    </div>
75
</MainGridLayout>
76

77
<style>
78
    @keyframes float {
79
        0%, 100% { transform: translateY(0px); }
80
        50% { transform: translateY(-10px); }
81
    }
82

83
    @keyframes fadeInUp {
84
        from {
85
            opacity: 0;
86
            transform: translateY(30px);
87
        }
88
        to {
89
            opacity: 1;
90
            transform: translateY(0);
91
        }
92
    }
93

94
    .animate-float {
95
        animation: float 3s ease-in-out infinite;
96
    }
97

98
    .animate-fade-in-up {
99
        animation: fadeInUp 0.6s ease-out forwards;
100
    }
101

102
    .animate-delay-100 {
103
        animation-delay: 0.1s;
104
    }
105

106
    .animate-delay-200 {
107
        animation-delay: 0.2s;
108
    }
109

110
    .animate-delay-300 {
111
        animation-delay: 0.3s;
112
    }
113

114
    .animate-delay-400 {
115
        animation-delay: 0.4s;
116
    }
117
</style>

单语言404.astro#

此方法直接在src/pages目录下创建404.astro即可
由于我没有语言的404，这里附上二叉树树的404界面
预览：

2x-404

1
---
2
import Layout from "@/layouts/Layout.astro";
3
import MainGridLayout from "@/layouts/MainGridLayout.astro";
4
import { Icon } from "astro-icon/components";
5
import { siteConfig } from "@/config";
6
---
7

8
<Layout title="页面未找到">
9
        <MainGridLayout>
10
                <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
11
                        <!-- 404 图标 -->
12
                        <div class="mb-8">
13
                                <div class="relative">
14
                                        <div class="text-8xl md:text-9xl font-bold text-[var(--primary)] opacity-20">
15
                                                404
16
                                        </div>
17
                                        <div class="absolute inset-0 flex items-center justify-center">
18
                                                <Icon name="fa6-solid:face-sad-tear" class="text-6xl md:text-7xl text-[var(--primary)]" />
19
                                        </div>
20
                                </div>
21
                        </div>
22

23
                        <!-- 错误信息 -->
24
                        <div class="card-base p-8 max-w-md mx-auto mb-8">
25
                                <h1 class="text-2xl md:text-3xl font-bold text-90 mb-4">
26
                                        页面走丢了
27
                                </h1>
28
                                <p class="text-75 mb-6 leading-relaxed">
29
                                        抱歉，您访问的页面不存在或已被移动。
30
                                        <br>
31
                                        请检查URL是否正确，或者返回首页继续浏览。
32
                                </p>
33

34
                                <!-- 导航按钮 -->
35
                                <div class="flex flex-col sm:flex-row gap-3 justify-center">
36
                                        <a href="/" class="btn-regular-dark px-6 py-3 rounded-lg text-white font-medium">
37
                                                <Icon name="fa6-solid:house" class="mr-2" />
38
                                                返回首页
39
                                        </a>
40
                                        <a href="/archive/" class="btn-regular px-6 py-3 rounded-lg font-medium">
41
                                                <Icon name="fa6-solid:box-archive" class="mr-2" />
42
                                                文章归档
43
                                        </a>
44
                                </div>
45
                        </div>
46

47
                        <!-- 返回提示 -->
48
                        <div class="mt-8 text-50 text-sm">
49
                                <p class="flex items-center justify-center">
50
                                        <Icon name="fa6-solid:clock-rotate-left" class="mr-2" />
51
                                        您也可以使用浏览器的后退按钮返回上一页
52
                                </p>
53
                        </div>
54
                </div>
55
        </MainGridLayout>
56
</Layout>

BA周年庆直接9个彩

Thu, 07 Aug 2025 00:00:00 GMT

快哉快哉

亚子

日奈

还有我的支付宝和QQ主题😋

支付宝

fuwari接入评论功能

Mon, 04 Aug 2025 00:00:00 GMT

Giscus#

想要接入评论，肯定需要一个三方平台 Giscus Giscus就是一个非常合适的平台

配置Giscus#

首先去github创建一个存储库，一定要是公开库 然后在仓库设置中启用Discussion功能
前往https://giscus.app/zh-CN 在仓库一栏中点击第二步的蓝字安装giscus，最后填写自己的用户名及刚刚创建的仓库名称

映射#

我只建议使用pathname：以文章路径区分评论区，即使换域名也能匹配
其它映射可以看官方介绍
分类选择公告（announcements）
特性个人建议勾选1 3 4
主题默认即可，也可以尝试官方的其它主题
最后将给出的JS复制

配置fuwari#

在src/pages/posts/目录下找到[...slug].astro，在它的135行插入

1
<div id="giscus-comments" style="margin-top: 3rem;">
2
  你的JS
3
</div>

最后本地测试一下，没问题就可以部署到服务器了

edgeone加速worker

Tue, 29 Jul 2025 00:00:00 GMT

有人问：主包主包cloudflare worker访问速度太慢了，有没有更强势的访问速度呢？

有的兄弟，有的

去 edgeone 拿下不要钱的计划，添加你的域名，验证所有权，这步如果不会请退出

回到我们的cloudflare，选择你想加速的worker，添加自定义域，选择路由，选择你要加速的根域名，在你想要加速的子域+eo（方便区分），如我要加速www.91sssvip.top，就填wwweo.91sssvip.top/*，在去cloudflare添加dns解析A记录随便指向一个IP，但一定要开小黄云，保存回到edgeone

添加加速域名，我就填www，v6随便，我个人选择关闭，源站就写刚刚路由的域名协议https即可，回源Host头一定要选使用源站域名，最后保存就好啦

END