CitrusGrid

更新1.0.1

Thu, 03 Sep 2026 19:54:11 GMT

1.0.1 更新

修复 visitor-stats 插件一次大量读取导致统计服务429报错问题

1、修复 visitor-stats 插件的同时对项目 visitor-stats 进行了一次更新，使用 /total 来一次获取全部数据，使用 localStorage 来缓存数据。

流程：

访问 /total 接口，获取全部数据
缓存数据到 localStorage 中
从 localStorage 中读取数据，避免重复请求（TTL 为 5 分钟，过期后重新请求）。

2、修复了其他一些小问题，如路由缓存策略、URL 规范等。

统一路由尾斜杠格式，前端路由的缓存策略与托管平台（Cloudflare Pages）的 URL 规范严格对齐

在进行页面切换时发现了多次重复请求预取的问题，导致页面流量异常，经排查为预取请求与 Canonical URL 不一致造成的，现在已修复。

MarkDown元数据说明

Thu, 03 Sep 2026 00:06:34 GMT

文章 Frontmatter

字段	是否必填	示例	描述
`title`	是	"example"	文章标题
`slug`	是	example	运行时自动生成，可手动填写，使用`-`分隔单词
`index`	是	0	默认为0不置顶，大于0的整数置顶，数值越大越靠前
`description`	是	"展示 Markdown 语法的各种类型和示例"	文章描述
`category`	是	"示例"	文章分类
`tags`	是	[Markdown]	文章标签，多个标签用逗号隔开
`published`	是	2026-01-01 00:01:02	文章发布时间，格式为`YYYY-MM-DD HH:mm:ss`，脚本生成自带
`updated`	否	2026-01-01 00:01:03	文章更新时间，格式为`YYYY-MM-DD HH:mm:ss`，不自动生成
`draft`	否	false	是否草稿，不自动生成

请根据以上表格，填写文章的 Frontmatter。

Markdown语法样例

Tue, 03 Jun 2025 00:44:37 GMT

1. 标题

markdown
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果：

三级标题

四级标题

五级标题

六级标题

悬停标题会显示 # 锚点，点击可跳转到该标题。

2. 段落与换行

markdown

1234

这是第一段。  
这是第二段（行尾加两个空格实现换行）。

这是新段落（空一行分隔）。

效果：

这是第一段。
这是第二段（行尾加两个空格实现换行）。

这是新段落（空一行分隔）。

3. 文字强调

markdown
*斜体* 或 _斜体_
**粗体** 或 __粗体__
***粗斜体*** 或 ___粗斜体___
~~删除线~~
~单波浪删除线~

效果：

斜体或斜体
粗体或粗体
粗斜体 或 粗斜体
~~删除线~~
~~单波浪删除线~~

4. 列表

无序列表

markdown
- 项目1
- 项目2
  - 嵌套项目（缩进2或4个空格）
* 也可以用星号
+ 或者加号

效果：

项目1
项目2
- 嵌套项目（缩进2或4个空格）

也可以用星号

或者加号

有序列表

markdown
第一项
第二项
嵌套有序项（缩进）
第三项

效果：

第一项
第二项
1. 嵌套有序项（缩进）
第三项

任务列表

markdown

- [x] 已完成任务
- [ ] 未完成任务

效果：

已完成任务
未完成任务

5. 链接

markdown
[行内链接](https://example.com "可选标题")
[引用式链接][引用]
文章末尾添加：[引用]: https://example.com "标题" 
[空链接]<> 或 <https://example.com>（自动链接）

效果：

行内链接
 引用式链接
 https://example.com（自动链接）

外部链接自动在新窗口打开。

6. 图片

markdown
![替代文字](https://xxxxx "可选标题")
![引用式图片][img]
[img]: https://xxxxx "标题"
# 或者本地图片
![本地图片](../images/logo.webp "本地图片")

效果：

点击图片可打开灯箱放大预览。

7. 引用块

markdown
> 这是一段引用。
> 可以跨多行。
>> 嵌套引用。

效果：

这是一段引用。
可以跨多行。

嵌套引用。

8. 代码

行内代码

markdown

使用 `print()` 函数输出。

效果：使用 print() 函数输出。

代码块

markdown
```
普通代码块
```
```python
# 语法高亮
print("Hello, World!")
```
缩进4个空格或一个制表符：
    def foo():
        return "bar"

效果：

text

普通代码块

python
# 语法高亮
print("Hello, World!")

diff 高亮

markdown
```diff
+ 新增的行
- 删除的行
```

效果：

diff
+ 新增的行
- 删除的行

注意：代码块自带行号、复制按钮与语言标识；支持 python / bash / go / rust / sql / diff 等常用语言，未知语言按纯文本渲染。请勿使用缩进4个空格或一个制表符来创建代码块，因为不会显示。

9. 水平线

markdown

--- 或 *** 或 ___

效果：

---：

***：

___：

10. 表格

markdown
| 左对齐------ | ------居中------ | ------右对齐 |
|:-------|:----:|-------:|
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

效果：

左对齐------	------居中------	------右对齐
单元格	单元格	单元格
单元格	单元格	单元格

11. 脚注

markdown
这是一个句子[^1]。
[^1]: 脚注内容。

效果：

这是一个句子¹。

12. 提示容器

markdown

1234567891011

:::tip 提示标题
这是一个提示容器。
:::

:::warning
支持 info / tip / warning / danger / details 五种类型。
:::

:::details 点击展开
details 容器默认折叠，点击标题展开。
:::

效果：

提示标题

这是一个提示容器。

warning

支持 info / tip / warning / danger / details 五种类型。

点击展开

details 容器默认折叠，点击标题展开。

13. 内联 HTML

markdown
<kbd>Ctrl</kbd> + <kbd>C</kbd>  
<span style="color:red;">红色文字</span>

效果：

Ctrl + C
红色文字

14. 转义字符

markdown

\*不会变成斜体\*
\# 不是标题

效果：

*不会变成斜体*
# 不是标题

15. 表情符号

markdown

:smile: :heart: :+1:

效果：

😄 ❤️ 👍

16. 自动链接

markdown
<https://example.com>
<user@example.com>
www.example.com（GFM 自动识别）

效果：

https://example.com
user@example.com
www.example.com

17. 数学公式

markdown

1234

$E=mc^2$
$$
\int_{a}^{b} f(x) dx
$$

效果：

$E=mc^2$

\int_{a}^{b} f(x) dx

脚注内容。 ↩

添加自定义图标

Thu, 03 Sep 2026 01:20:02 GMT

如何添加新图标

图标库来自 MDI（Pictogrammers），共三步：

第一步：复制 SVG 路径到 `src/lib/icons.ts`

在 MDI 图标库搜索并选中图标，复制其 SVG path 代码，在 src/lib/icons.ts 顶部按字母顺序粘贴为导出常量：

ts
export const mdiAbTesting =
  'M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z'

第二步：注册到 `icons` 映射表

在同文件底部的 icons 对象中添加条目（key 为 kebab-case 全名）：

ts
export const icons = {
  // ...
  'mdi-ab-testing': mdiAbTesting,
}

第三步：在组件中导入并使用

在 .astro 组件的 frontmatter 里按名导入，然后用 Icon 组件渲染：

astro

123456

---
import Icon from '@/components/Icon.astro'
import { mdiAbTesting } from '@/lib/icons'
---

<Icon d={mdiAbTesting} class="text-sm" />

首页卡片平台图标

在 src\components\ProfileCard.astro 中参考其他图标导入添加即可。

为什么硬编码图标

答：为了做到零网络请求、零依赖、极致的性能，缺点是添加新图标比较麻烦。

CitrusGrid

更新1.0.1

1.0.1 更新

修复 visitor-stats 插件一次大量读取导致统计服务429报错问题

统一路由尾斜杠格式，前端路由的缓存策略与托管平台（Cloudflare Pages）的 URL 规范严格对齐

MarkDown元数据说明

文章 Frontmatter

Markdown语法样例

1. 标题

三级标题

四级标题

五级标题

六级标题

2. 段落与换行

3. 文字强调

4. 列表

无序列表

有序列表

任务列表

5. 链接

6. 图片

7. 引用块

8. 代码

行内代码

代码块

diff 高亮

9. 水平线

10. 表格

11. 脚注

12. 提示容器

13. 内联 HTML

14. 转义字符

15. 表情符号

16. 自动链接

17. 数学公式

脚注

添加自定义图标

如何添加新图标

第一步：复制 SVG 路径到 src/lib/icons.ts

第二步：注册到 icons 映射表

第三步：在组件中导入并使用

首页卡片平台图标

为什么硬编码图标

第一步：复制 SVG 路径到 `src/lib/icons.ts`

第二步：注册到 `icons` 映射表