钟神秀

测试 Timeline.astro 组件

钟神秀 — Fri, 23 Jan 2026 23:00:00 GMT

import Timeline from '../../components/mdx/TimeLine.astro';

测试 Timeline.astro 组件

这篇文章用来测试我新创建的 Timeline.astro 组件，该组件实现了时间线展示功能。

基本使用

2025 年 12 月

完成 Astro 博客搭建

使用 Astro 框架搭建了个人博客，支持 MDX 组件和响应式设计。

2025 年 11 月

学习 React 19

深入学习了 React 19 的新特性，包括并发渲染和自动批处理。

学习了 React 19 的核心概念
实践了多个 React 19 项目
撰写了 React 19 学习笔记

2025 年 10 月

参与开源项目

为多个开源项目贡献代码，包括 Astro 和 React 生态系统。

主要贡献了以下内容：

修复了 Astro 组件的 bug
为 React 库添加了新功能
改进了文档和示例

多个时间线

2026 年 1 月

创建 Timeline 组件

成功创建了 Timeline.astro 组件，支持时间线展示和深色模式。

2026 年 2 月（计划）

学习 TypeScript 5.5

计划学习 TypeScript 5.5 的新特性，提升代码质量和开发效率。

2026 年 3 月（计划）

开发新的博客主题

计划为博客开发一个新的主题，支持更多自定义选项和动画效果。

复杂内容支持

2025 年 9 月

复杂内容测试

Timeline 组件支持复杂的内容结构，包括：

标题和段落
有序和无序列表
图片和链接
代码块

<h4>代码示例</h4>
```javascript
// 这是一段 JavaScript 代码
function hello() {
  console.log("Hello, Timeline!");
}

hello();
```

<h4>图片示例</h4>
<img src="https://60s.kemeow.top/v2/bing?encoding=image" alt="复杂内容图片" style="width: 100%; max-width: 500px; border-radius: 8px; margin-top: 0.5rem;" data-zoom-alt="复杂内容图片" />

深色模式适配

主题适配

深色模式支持

Timeline 组件已经完全适配了博客的深色模式，在不同主题下都能提供良好的视觉体验。

主要适配内容包括：

背景色和边框色的调整
文字颜色的适配
阴影效果的调整

响应式设计

响应式测试

响应式布局

Timeline 组件采用了响应式设计，在不同屏幕尺寸下都能正常显示。

主要特点：

在桌面端展示完整的时间线效果
在移动端自动调整布局，确保良好的阅读体验
图片自动适应容器宽度

结论

Timeline.astro 组件已经成功实现了时间线展示功能，支持：

基本的时间线展示
多个时间线并列使用
复杂内容结构
深色模式适配
响应式设计

该组件完全适配了博客的布局和样式，使用了与博客一致的 CSS 变量和设计规范，确保了整体风格的统一性。

测试 Quote.astro 组件

钟神秀 — Fri, 23 Jan 2026 22:00:00 GMT

import Quote from '../../components/mdx/Quote.astro';

测试 Quote.astro 组件

这篇文章用来测试我新创建的 Quote.astro 组件，该组件实现了引用展示功能。

基本使用

这是一个基本的引用示例，没有指定来源。

自定义图标

令图标有所指，引用亦有中心。

图标插槽示例

ヾ(•ω•`)o 图标插槽也可以是 Emoji 或颜文字，或者英文装饰。

图标插槽 - Emoji

😊 使用 Emoji 作为图标，让引用更加生动有趣。

图标插槽 - 英文装饰

❝ 使用英文装饰作为图标，让引用更加国际化。

带有来源

<Quote source="阿尔伯特·爱因斯坦"

想象力比知识更重要，因为知识是有限的，而想象力概括着世界上的一切，推动着进步，并且是知识进化的源泉。

长引用

<Quote source="史蒂夫·乔布斯"

你的时间有限，所以不要为别人而活。不要被教条所限，不要活在别人的观念里。不要让别人的意见左右自己内心的声音。最重要的是，勇敢的去追随自己的心灵和直觉，只有自己的心灵和直觉才知道你自己的真实想法，其他一切都是次要。

哲学引用

<Quote source="苏格拉底"

我知道我一无所知。

文学引用

<Quote source="鲁迅"

真正的勇士，敢于直面惨淡的人生，敢于正视淋漓的鲜血。

科学引用

<Quote source="牛顿"

如果说我看得比别人更远些，那是因为我站在巨人的肩膀上。

自定义类名

<Quote source="自定义样式" className="custom"

这是一个使用了自定义样式的引用示例。自定义样式可以让引用看起来更加独特，你可以根据自己的喜好调整样式。

多段落引用

<Quote source="尼采"

每一个不曾起舞的日子，都是对生命的辜负。

那些杀不死我的，终将使我更强大。

响应式设计

<Quote source="响应式设计"

这个引用组件在不同屏幕尺寸下都能正常显示，具有良好的响应式设计。在移动设备上，引用的样式会自动调整，确保良好的阅读体验。

深色模式适配

<Quote source="深色模式"

这个引用组件支持深色模式，会根据系统主题自动调整样式。在深色模式下，引用的背景色和边框色会相应变化，确保良好的可读性。

结论

Quote.astro 组件已经成功实现了引用展示功能。

组件特性

基本功能：显示引用内容
来源支持：可以添加引用来源
自定义类名：支持通过 CSS 类名自定义样式
响应式设计：在不同设备上都能正常显示
深色模式适配：适配博客的明暗主题
装饰性引号：添加了装饰性引号，提升视觉效果
优雅的排版：使用合适的字体和行高，提高可读性

组件优势

提升视觉效果：引用展示更加美观，吸引读者注意
统一设计风格：组件样式与博客的整体风格保持一致
易于使用：API 简单直观，使用方便
响应式设计：在不同设备上都能正常显示
灵活的布局：支持多种引用格式和长度
良好的可读性：合适的字体和行高，提高阅读体验

通过使用 Quote.astro 组件，你可以在博客文章中更好地展示引用，提升文章的视觉效果和用户体验。

测试 Poetry.astro 组件

钟神秀 — Fri, 23 Jan 2026 21:00:00 GMT

import Poetry from '../../components/mdx/Poetry.astro';

测试 Poetry.astro 组件

这篇文章用来测试我新创建的 Poetry.astro 组件，该组件实现了诗歌展示功能。

基本使用

床前明月光疑是地上霜举头望明月低头思故乡

带有标题和作者

<Poetry title="静夜思" author="李白"

床前明月光疑是地上霜举头望明月低头思故乡

现代诗歌

<Poetry title="断章" author="卞之琳"

你站在桥上看风景看风景的人在楼上看你明月装饰了你的窗子你装饰了别人的梦

长诗歌

<Poetry title="再别康桥" author="徐志摩"

轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。

那河畔的金柳，是夕阳中的新娘；波光里的艳影，在我的心头荡漾。

软泥上的青荇，油油的在水底招摇；在康河的柔波里，我甘心做一条水草！

那榆荫下的一潭，不是清泉，是天上虹；揉碎在浮藻间，沉淀着彩虹似的梦。

寻梦？撑一支长篙，向青草更青处漫溯；满载一船星辉，在星辉斑斓里放歌。

但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！

悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩。

自定义类名

<Poetry title="自定义样式诗歌" author="测试作者" className="custom"

这是一首使用了自定义样式的诗歌自定义样式可以让诗歌看起来更加独特你可以根据自己的喜好调整样式让诗歌在页面中更加突出

散文诗句

<Poetry title="春" author="朱自清"

盼望着，盼望着，东风来了，春天的脚步近了。

一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。

外国诗歌

<Poetry title="Stopping by Woods on a Snowy Evening" author="Robert Frost"

Whose woods these are I think I know. His house is in the village though; He will not see me stopping here To watch his woods fill up with snow.

My little horse must think it queer To stop without a farmhouse near Between the woods and frozen lake The darkest evening of the year.

He gives his harness bells a shake To ask if there is some mistake. The only other sound's the sweep Of easy wind and downy flake.

The woods are lovely, dark and deep, But I have promises to keep, And miles to go before I sleep, And miles to go before I sleep.

结论

Poetry.astro 组件已经成功实现了诗歌展示功能。

组件特性

基本功能：显示诗歌内容
标题支持：可以添加诗歌标题
作者支持：可以添加诗歌作者
自定义类名：支持通过 CSS 类名自定义样式
响应式设计：在不同设备上都能正常显示
深色模式适配：适配博客的明暗主题
装饰性引号：添加了装饰性引号，提升视觉效果
优雅的排版：使用合适的字体和行高，提高可读性

组件优势

提升视觉效果：诗歌展示更加美观，吸引读者注意
统一设计风格：组件样式与博客的整体风格保持一致
易于使用：API 简单直观，使用方便
响应式设计：在不同设备上都能正常显示
灵活的布局：支持多种诗歌格式和长度
良好的可读性：合适的字体和行高，提高阅读体验

通过使用 Poetry.astro 组件，你可以在博客文章中更好地展示诗歌，提升文章的视觉效果和用户体验。

测试 Pic.astro 组件

钟神秀 — Fri, 23 Jan 2026 20:00:00 GMT

import Pic from '../../components/mdx/Pic.astro';

测试 Pic.astro 组件

这篇文章用来测试我新创建的 Pic.astro 组件，该组件实现了带有标题和描述的图片展示功能。

基本使用

带有标题

带有自定义宽度

带有 CSS 类名

半宽图片

三分之一宽度图片

四分之一宽度图片

多种宽度组合

响应式设计

深色模式适配

图片说明文字

结论

Pic.astro 组件已经成功实现了带有标题和描述的图片展示功能。

组件特性

基本功能：显示图片和替代文本
标题支持：可以添加图片标题
自定义宽度：支持通过 width 属性或 CSS 类名设置图片宽度
多种宽度类：内置 w-full、w-half、w-third、w-quarter 等类名
响应式设计：在移动设备上自动调整为全宽
深色模式适配：适配博客的明暗主题
悬停效果：鼠标悬停时显示动画效果
无障碍支持：添加了适当的 alt 属性，提高可访问性

组件优势

提升视觉效果：带有标题的图片比普通图片更专业
提供更多信息：可以同时显示图片和详细描述
统一设计风格：组件样式与博客的整体风格保持一致
易于使用：API 简单直观，使用方便
响应式设计：在不同设备上都能正常显示
灵活的布局：支持多种宽度设置，适应不同的布局需求

通过使用 Pic.astro 组件，你可以在博客文章中更好地展示图片，提升文章的视觉效果和用户体验。

测试 LinkCard.astro 组件

钟神秀 — Fri, 23 Jan 2026 19:00:00 GMT

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

测试 LinkCard.astro 组件

这篇文章用来测试我新创建的 LinkCard.astro 组件，该组件实现了带有背景图片、标题和描述的链接卡片功能。

基本使用

带有背景图片

自动获取域名

带有自定义描述

长标题和描述

响应式设计

深色模式适配

网格布局

结论

LinkCard.astro 组件已经成功实现了带有背景图片、标题和描述的链接卡片功能。

组件特性

基本功能：显示链接、标题和描述
背景图片：支持添加背景图片
自动域名获取：如果没有提供描述，会自动从链接中提取域名
响应式设计：适配不同屏幕尺寸
深色模式适配：适配博客的明暗主题
悬停效果：鼠标悬停时显示动画效果
网格布局：支持在网格布局中展示多个卡片
无障碍支持：添加了适当的 title 属性，提高可访问性

组件优势

提升视觉效果：带有背景图片的链接卡片比普通链接更吸引眼球
提供更多信息：可以同时显示标题、描述和链接，让读者更好地了解链接内容
统一设计风格：组件样式与博客的整体风格保持一致
易于使用：API 简单直观，使用方便
响应式设计：在不同设备上都能正常显示
支持网格布局：可以在一行中展示多个链接卡片，节省页面空间

通过使用 LinkCard.astro 组件，你可以在博客文章中更好地展示外部链接，提升文章的视觉效果和用户体验。

测试 LinkBanner.astro 组件

钟神秀 — Fri, 23 Jan 2026 18:00:00 GMT

import LinkBanner from '../../components/mdx/LinkBanner.astro';

测试 LinkBanner.astro 组件

这篇文章用来测试我新创建的 LinkBanner.astro 组件，该组件实现了带有背景图片、标题和描述的链接横幅功能。

基本使用

带有背景图片

自动获取域名

带有自定义描述

长标题和描述

响应式设计

深色模式适配

结论

LinkBanner.astro 组件已经成功实现了带有背景图片、标题和描述的链接横幅功能。

组件特性

基本功能：显示链接、标题和描述
背景图片：支持添加背景图片，带有渐变遮罩效果
自动域名获取：如果没有提供描述，会自动从链接中提取域名
响应式设计：适配不同屏幕尺寸
深色模式适配：适配博客的明暗主题
悬停效果：鼠标悬停时显示动画效果
无障碍支持：添加了适当的 title 属性，提高可访问性

组件优势

提升视觉效果：带有背景图片的链接横幅比普通链接更吸引眼球
提供更多信息：可以同时显示标题、描述和链接，让读者更好地了解链接内容
统一设计风格：组件样式与博客的整体风格保持一致
易于使用：API 简单直观，使用方便
响应式设计：在不同设备上都能正常显示中好地展示外部链接，提升文章的视觉效果和用户体验。

测试 Folding.astro 组件

钟神秀 — Thu, 22 Jan 2026 18:00:00 GMT

import Folding from '../../components/mdx/Folding.astro';

测试 Folding.astro 组件

这篇文章用来测试我新创建的 Folding.astro 组件，该组件实现了可折叠内容的功能。

基本使用

这是一个基本的折叠面板，点击标题可以展开或折叠内容。

默认打开

这是一个默认打开的折叠面板，你可以直接看到里面的内容。

不同类型

成功类型

这是一个成功类型的折叠面板，左侧有一个绿色的边框。

警告类型

这是一个警告类型的折叠面板，左侧有一个黄色的边框。

错误类型

这是一个错误类型的折叠面板，左侧有一个红色的边框。

信息类型

这是一个信息类型的折叠面板，左侧有一个蓝色的边框。

包含 Markdown 内容

### 这是一个标题

这是一段粗体文本，这是一段斜体文本。

列表

项目 1
项目 2
项目 3

有序列表

第一项
第二项
第三项

引用

这是一段引用内容

链接

Astro 官方网站

包含代码块

```javascript // 这是一段 JavaScript 代码 function hello() { console.log('Hello, World!'); }

hello();


```python
# 这是一段 Python 代码
def hello():
    print("Hello, World!")

hello()

<!-- 这是一段 HTML 代码 -->
<div class="container">
  <h1>Hello, World!</h1>
</div>

嵌套使用

这是外层折叠面板的内容。这是内层折叠面板的内容，Folding 组件支持嵌套使用。这是最内层折叠面板的内容。

长内容测试

这是一段很长的内容，用来测试折叠面板在处理长内容时的表现。

当内容很长时，折叠面板会自动调整高度，确保内容可以完整显示，同时保持良好的性能。

标题 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

标题 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

标题 3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

结论

Folding.astro 组件已经成功实现了可折叠内容的功能，支持多种配置选项和内容类型。

组件特性

基本折叠功能：点击标题可以展开或折叠内容
默认状态：支持设置默认打开或关闭状态
多种类型：支持 success、warning、error、info 四种类型，每种类型有不同的边框颜色
Markdown 支持：支持在折叠内容中使用 Markdown 语法
代码块支持：支持在折叠内容中使用代码块，并带有语法高亮
嵌套使用：支持嵌套使用，可以创建多层折叠结构
长内容处理：能够良好地处理长内容，保持良好的性能
明暗模式适配：适配博客的明暗主题
响应式设计：适配不同屏幕尺寸

组件优势

提高内容组织性：可以将相关内容组织在一起，减少页面复杂度
提升阅读体验：用户可以根据需要展开或折叠内容，只查看感兴趣的部分
节省页面空间：长内容可以折叠起来，减少页面滚动
增强交互性：通过点击操作增强用户与页面的交互
易于使用：API 简单直观，使用方便

通过使用 Folding.astro 组件，你可以在博客文章中更好地组织和展示内容，提升文章的可读性和交互性，为读者带来更好的阅读体验。

测试 Chat.astro 组件

钟神秀 — Thu, 22 Jan 2026 17:00:00 GMT

import Chat from '../../components/mdx/Chat.astro';

测试 Chat.astro 组件

这篇文章用来测试我新创建的 Chat.astro 组件，该组件实现了 QQ 聊天的样式效果，左边是对方，右边是我。

测试 QQ 聊天样式

测试连续消息

测试长消息

测试 Markdown 支持

<Chat messages={[ { id: '1', side: 'left', content: '这是一条包含 **Markdown** 的消息\n\n- 列表项 1\n- 列表项 2\n- 列表项 3\n\n> 这是一段引用\n\n行内代码\n\njavascript\n// 这是一段代码块\nconsole.log(\"Hello, World!\");\n', author: '小王', date: '2026-01-22 17:00', }, { id: '2', side: 'right', content: '这是一条回复，也支持 Markdown\n\n## 标题\n\n链接\n\n', author: '我', date: '2026-01-22 17:01', }, ]} />

测试特殊消息类型

测试带头像的消息

测试效果说明

基本聊天功能：支持左边对方消息和右边自己消息的显示，符合 QQ 聊天习惯
消息气泡样式：带有圆角和小三角指示，区分发送方向
连续消息：同一发送者的连续消息会正确显示，间距合理
长消息：自动换行，不会溢出，保持良好的阅读体验
Markdown 支持：支持 Markdown 语法，包括标题、列表、引用、代码块等
代码高亮：使用 highlight.js 实现代码高亮，支持多种语言
特殊消息类型：支持撤回消息和删除消息的显示
头像支持：支持自定义头像，也可以使用默认头像
日期显示：支持显示消息日期和时间
明暗模式适配：适配博客的明暗主题
响应式设计：适配不同屏幕尺寸，在手机和电脑上都有良好的显示效果

结论

Chat.astro 组件已经成功实现了 QQ 聊天的样式效果，左边是对方，右边是我，带有消息气泡和小三角指示，符合 QQ 聊天的视觉习惯。组件支持多种聊天场景，包括私聊、连续消息、长消息、Markdown 消息等，能够满足各种聊天需求。

组件采用了基于 messages 数组的 API，使用更加灵活和强大，可以轻松实现复杂的聊天场景。同时，组件支持 Markdown 语法和代码高亮，为博客文章增添了更多的互动性和趣味性。

组件的样式与博客的整体风格保持一致，支持明暗主题适配，能够很好地融入博客的设计体系。它的响应式设计确保了在不同设备上都有良好的显示效果。

通过使用 Chat.astro 组件，你可以在博客文章中轻松创建各种聊天场景，增强文章的可读性和互动性，为读者带来更好的阅读体验。

测试 Blur.astro 组件

钟神秀 — Thu, 22 Jan 2026 16:00:00 GMT

import Blur from '../../components/mdx/Blur.astro';

测试 Blur.astro 组件

这篇文章用来测试我新创建的 Blur.astro 组件，该组件复刻了 Vue 博客中的 Blur 组件功能。

测试基本用法

测试使用插槽

这是通过插槽传递的模糊文本，鼠标悬停时会显示清晰内容

测试在段落中使用

这是一个普通的段落，其中包含一段模糊文本，鼠标悬停时会显示清晰内容。

测试在列表中使用

列表项 1
列表项 2，包含模糊文本
列表项 3

测试在标题中使用

模糊的标题

这是一个二级标题，其中包含模糊文本。

测试嵌套使用

外层模糊文本，包含内层模糊文本

测试效果说明

基本用法：鼠标悬停时，模糊文本会逐渐清晰显示
过渡效果：模糊到清晰的过渡时间为 0.2 秒，使用 ease 缓动函数
光标样式：鼠标悬停时显示指针光标
灵活使用：可以通过 text 属性或插槽传递文本
嵌套使用：支持嵌套使用，内层和外层可以独立触发模糊效果

结论

Blur.astro 组件已经成功实现了预期功能，完全适配了博客的布局和样式。组件支持多种使用方式，可以灵活地嵌入到各种文本内容中。

你可以通过修改组件的样式来调整模糊程度、过渡时间和其他视觉效果。

测试 BlogHeader.astro 组件

钟神秀 — Thu, 22 Jan 2026 15:00:00 GMT

import BlogHeader from '../../components/mdx/BlogHeader.astro';

测试 BlogHeader.astro 组件

这篇文章用来测试我新创建的 BlogHeader.astro 组件，该组件复刻了 Vue 博客中的 BlogHeader 组件功能。

测试默认用法

测试自定义属性

测试隐藏标题

测试自定义图标

测试效果说明

默认样式：显示博客 logo、标题和副标题，带有动画效果
自定义属性：支持自定义标题、副标题和 emoji 尾缀
隐藏标题：可以选择隐藏标题，只显示 logo
自定义图标：支持使用自定义图片作为 logo
动画效果：鼠标悬停时触发文字和 emoji 的动画效果
响应式设计：适配不同屏幕尺寸

结论

BlogHeader.astro 组件已经成功实现了预期功能，完全适配了博客的布局和样式。组件支持多种配置选项，可以根据需要灵活调整。

你可以通过修改组件的属性来定制不同的博客头部效果，例如更换 logo、修改标题和副标题、调整 emoji 尾缀等。

测试 Badge.astro 组件

钟神秀 — Thu, 22 Jan 2026 14:00:00 GMT

import Badge from '../../components/mdx/Badge.astro';

测试 Badge.astro 组件

这篇文章用来测试我新创建的 Badge.astro 组件，该组件复刻了 Vue 博客中的 Badge 组件功能。

测试基本用法

测试链接功能

测试带图标的徽章

GitHub 用户徽章

网站徽章

自定义图片

测试圆形和方形样式

有图默认圆形

有图强制方形

无图默认方形

无图强制圆形

测试效果说明

基本徽章：显示文本，无链接
链接徽章：显示文本和链接，悬停显示域名
GitHub 用户徽章：自动获取 GitHub 头像
网站徽章：自动获取网站 favicon
自定义图片：显示自定义图片
圆形样式：根据图片自动调整，也可手动指定
响应式设计：适配不同屏幕尺寸

结论

Badge.astro 组件已经成功实现了预期功能，完全适配了博客的布局和样式。组件支持多种使用方式，可以根据需要灵活配置，提升了博客内容的表现力和视觉效果。

测试 ProseA.astro 组件

钟神秀 — Thu, 22 Jan 2026 12:00:00 GMT

测试 ProseA.astro 组件

这篇文章用来测试我新创建的 ProseA.astro 组件，该组件复刻了 Vue 博客中的 ProseA 组件功能。

测试内部链接

内部链接测试：给博客加一个外链安全中转页

测试外部链接

GitHub 链接

GitHub 项目链接

Astro 官网

Vue 官网

React 官网

Bilibili 视频

Bilibili 视频链接

测试自定义图标

自定义图标链接

测试长链接

长链接测试

测试效果说明

内部链接：显示完整链接路径，鼠标悬停时显示完整 URL
外部链接：显示域名，鼠标悬停时显示域名，自动添加 target="_blank" 和 rel="noopener noreferrer"
特定域名：自动匹配对应图标
自定义图标：支持手动指定图标
悬停效果：带有渐变下划线和背景色变化

结论

ProseA.astro 组件已经成功实现了预期功能，完全适配了博客的布局和样式。

2025年终总结

钟神秀 — Wed, 31 Dec 2025 16:00:28 GMT

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

一年马上要结束了，终于到我写年末总结了！我的年末总结大体还是总结我今年做了什么和明年的展望吧。

import Poetry from '../../components/mdx/Poetry.astro';

<Poetry title="归去来兮辞" author="陶渊明"

往者不可谏，来者犹可追。

总结

import Quote from '../../components/mdx/Quote.astro';

今年算是没什么起色，依旧彷徨不定的一年吧。

2025.1

年初考试，被早早结束甚至连复习作业都没有的电机与电气控制成功背刺，差两分过关。然后就是寒假学车，速成5天去考试，这次一次过，成功拿证！然后算是恶补准备开学补考，然后算是去实践了一段时间。之后就是年底过年，没什么好说的，近些年年味是越来越少，最多也就是去舅舅或者外婆家吃饭了，然后就和普通放假没区别。

import Badge from '../../components/mdx/Badge.astro';

2025.2

到了2月份，陪妈妈出去玩了几天，我不是个喜欢外出的人，而且社恐，不过陪妈妈出去玩还是乐意的。然后在11号下午逛Github时看到了大佬的博客项目，很好看，于是使用！然后开始我正式学习修改博客的旅程。接下来几天就算是练手和尝试不同的博客，然后开始随便写写。后来时不时分享来自电报的项目在我的频道上时不时分享我找到的资源。

很快就开学了，开学正常准备补考，期间还看到4级裸考过关了。然后就是补考过关，然后在26号开始想写写日记，在obs和思源上，基本上一直在坚持，距今基本写了10个月，虽然文笔不怎么样，但一直在坚持。

2025.3

3月份开始我就在不断地尝试各种博客和逛友链，上课等等循环，仔细想想，好久不玩游戏了。期间说实话没什么好写的，同质化严重。

2025.4

4月份又写了些文章，然后忙于学业，同时对博客也一直不是很满意，尝试了很多，同时晚上活动添加一：看LOL比赛。其实也不算看，我有个不算习惯的习惯，干什么事耳朵总想听些东西。

2025.5

年后第一次回家就在劳动节，5天回去转了转，然后就回来实训，准备期末等等，期间发现了不少好的博客主题，不在一一列举。然后在账号等继续测试，选中了好看的solitude主题 ^1，以及后台Qexo ^1。然后在开始了typecho和WordPress博客的搭建。由于我的需求不大，最后选择了typecho。

2025.6

6月份开始，电脑出了点问题，反复进BIOS，初步推断是硬盘的问题，但是当时期末有PLC的课，实在不好去修，于是先将就着，然后那段时间就不改项目和写日记了。顺便裸考了一次六级卖，有一说一，感觉和四级差不多难度🤔。然后考完了期末，放假。

回了家去给电脑清个灰，加了点内存，然后那个问题就不在出现了。

2025.7

暑假第一个月其实就是在实践和休息里面度过，陪老妈转了几天，然后我就肾结石了。

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

少喝饮料多运动！睡醒痛的我死去活来，感人人要没了，后来去医院检查，差点动手术，后面吃药自然排出了。

月底的时候搞了台服务器，然后玩了几天Halo，动态的博客还是不大适应，一般般吧，后面就放弃了，然后部署了Ech0、Moments等服务，挺有意思的。

2025.8

8月份其实没什么，着重来说就是新开了个号，然后就是继续玩各种项目和实践。20号一看，六级裸考过关了。

2025.9

开学后继续改博客，然后上课，看比赛然后就是搞了些许项目。后面电脑的问题又出来了，但是被我倒腾了一段时间就好了。

2025.10

国庆在家瘫了7天，然后继续改博客，写博客，回来后就是上课，解决了宽禁带半导体的2万多字的论文和排版，恶心坏我了。在月底的鸭科夫时又出现了那个问题，初步确定是系统盘的问题，拿去售后换了个盘，修了下一些成年旧事。

2025.11

这个月搞好后重新搞环境等等，上课什么的，没什么好说的。月底开始实训，是关于水净化系统的编程，前三天画图，后面那B系统已经绝版，全世界估计就那一间实验室还在用的老古董，能不能用全看天，哪天能用全看天，没什么好说的，因此就是没什么急迫感。

2025.12

这个月就是继续完成实训，上课，再战六级，同样裸考，随便玩玩，反正过了。然后月底再次重搞blog-v3，每次打开项目还是有新的想法还是不错的。

总结

今年还是那咸鱼样，摆烂惯了，总体来说比去年这时候肯定是进步的，还是希望明年更好吧。

展望

不算什么展望吧，希望明年会的更多，解决更多的问题，过得越来越好吧。

给博客加一个外链安全中转页（/go）

钟神秀 — Wed, 10 Dec 2025 12:00:00 GMT

::alert 这篇文章来自AI整理！ ::

想做一个类似 hexo-safego 的外链安全检测 / 中转效果，于是在自己的 Nuxt 博客里加了一个 /go 页面，用来统一接住外链，给用户一个“即将离开本站”的提醒和手动确认。

这篇文章记录一下整个实现过程：从需求拆解，到 go.vue 的实现，再到 Markdown 外链、友链卡片接入中转页，以及中途踩到的几个小坑。

背景 & 需求

需求最初很简单：

站内所有外链（包括 Markdown 正文里的链接、友链页里的链接），点击时不要直接打开目标网站；
先跳到一个中转页 /go?url=...：
- 提示“即将离开本站”；
- 显示目标链接和域名；
- 提供「继续访问」和「返回上一页」两个按钮；
- 支持几秒钟的倒计时，自动跳转；
内部链接（例如 /posts/...、/about）保持原样，不走 /go。

最后确定的范围是：

Markdown 渲染组件 ProseA.vue（文章正文中的链接）；
友链页使用的 FriendLinkCard.vue（link.vue 页面中的友链卡片）。

实现 `/go` 页面

首先在 app/pages/go.vue 新增一个页面，对应路由 /go。这个页面做几件事：

从 query 参数里拿到原始链接 url；
做一层解码和合法性判断；
展示信息 + 倒计时；
处理手动「继续访问」和「返回上一页」。

解析 URL 与合法性判断

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

// 原始 query 参数
const rawUrl = computed(() => (route.query.url as string) || '')

// 解码后的 URL：优先 decode，失败就回退到原始字符串，保证按钮始终有值可用
const decodedUrl = computed(() => {
  if (!rawUrl.value)
    return ''
  try {
    return decodeURIComponent(rawUrl.value)
  }
  catch {
    // 如果解码失败，回退使用原始字符串，保证按钮依然可用
    return rawUrl.value
  }
})

// 检查是否是一个合法的 http/https 外链
const isValidExternal = computed(() => {
  if (!decodedUrl.value)
    return false
  try {
    const u = new URL(decodedUrl.value)
    return u.protocol === 'http:' || u.protocol === 'https:'
  }
  catch {
    return false
  }
})

// 提取域名用于展示
const domain = computed(() => {
  if (!isValidExternal.value)
    return ''
  try {
    return new URL(decodedUrl.value).hostname
  }
  catch {
    return ''
  }
})

这里有一个小细节：

一开始如果 decodeURIComponent 失败，直接返回空字符串会导致后面一系列逻辑都认为“无效链接”，按钮会被禁用，看起来像“点不了”；
后来改为失败回退到 rawUrl ，只要 query 里有东西，最终就有一个可用字符串。

倒计时和自动跳转

const countdownSeconds = 5
const countdown = ref(countdownSeconds)
let countdownTimer: number | null = null

onMounted(() => {
  if (!isValidExternal.value)
    return

  countdown.value = countdownSeconds

  countdownTimer = window.setInterval(() => {
    if (countdown.value <= 1) {
      clearCountdown()
      proceed()
    }
    else {
      countdown.value -= 1
    }
  }, 1000)
})

onUnmounted(() => {
  clearCountdown()
})

function clearCountdown() {
  if (countdownTimer != null) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
}

设计思路：

只要判断为合法外链，就从设定的秒数开始倒计时；
每秒减 1，减到 1 时自动调用 proceed() ；
页面销毁（路由离开）时清理定时器，避免内存泄漏或误触发。

手动跳转和返回逻辑

function proceed() {
  const target = decodedUrl.value || rawUrl.value
  if (!target)
    return

  clearCountdown()
  window.location.href = target
}

function goBack() {
  clearCountdown()

  // 1. 如果是通过 window.open 打开的新标签页，优先尝试关闭自己
  if (window.opener && window.opener !== window) {
    window.close()
    return
  }

  // 2. 有历史记录就正常返回
  if (history.length > 1) {
    history.back()
    return
  }

  // 3. 没有历史时，尝试根据同源 referrer 返回
  if (document.referrer) {
    try {
      const ref = new URL(document.referrer)
      if (ref.origin === window.location.origin) {
        router.push(ref.pathname + ref.search + ref.hash)
        return
      }
    }
    catch {
      // ignore
    }
  }

  // 4. 兜底：回首页
  router.push('/')
}
</script>

这里对「返回上一页」做了比较细的兼容：

友链卡片那种新标签页场景：通过 window.open('/go?url=...', '_blank') 打开的 /go 页面，其实没有历史记录，这时 history.back() 是无效的，于是我们优先检测 window.opener ，直接 window.close() ，让原来的标签页停留在友链页不动；
同标签页场景：有历史记录就走 history.back() ，行为和用户点浏览器后退按钮一致；
没有历史、没有同源 referrer 的极端场景：最后才兜底跳首页。

模板和样式

模板部分主要就是展示提示、链接、按钮和倒计时：

<template>
  <div class="go-page">
    <div class="go-card">
      <h1 class="go-title">即将离开本站</h1>
      <p class="go-desc">
        你将要访问的外部链接：
      </p>
      <p v-if="isValidExternal" class="go-url">{{ decodedUrl }}</p>
      <p v-else class="go-url invalid">链接无效或缺失</p>

      <p v-if="isValidExternal" class="go-domain">
        目标站点：<strong>{{ domain }}</strong>
      </p>

      <div class="go-actions">
        <button type="button" class="btn secondary" @click="goBack">
          返回上一页
        </button>
        <button
          type="button"
          class="btn primary"
          @click="proceed"
        >
          继续访问<span v-if="domain"> {{ domain }}</span>
        </button>
      </div>

      <p v-if="isValidExternal" class="go-countdown">
        {{ countdown }} 秒后将自动跳转，如不希望跳转，请点击「返回上一页」
      </p>

      <p class="go-tip">
        外部网站内容与本博客无关，请注意辨别信息和账号安全。
      </p>
    </div>
  </div>
</template>

样式部分使用了博客现有的变量（ var(--c-text)、 var(--ld-bg-card) 等），整体就是一个居中的卡片，这里不赘述。

接入 Markdown 外链：改造 ProseA.vue 博客的 Markdown 链接渲染组件是 app/components/content/ProseA.vue ，原来大致是：

根据 href 判断是否外链；
用 UtilLink 渲染；
用 v-tip 显示域名或完整地址。

为了让 Markdown 外链走 /go ，改动非常小，只需要在这里统一改造 href 即可：

const props = defineProps<{
  href: string
  icon?: string
}>()

const icon = computed(() => props.icon || getDomainIcon(props.href))
const isExternal = computed(() => isExtLink(props.href))

// 外链统一改成指向 /go?url=encodeURIComponent(href)
const resolvedHref = computed(() => (
  isExternal.value ? `/go?url=${encodeURIComponent(props.href)}` : props.href
))

const tip = computed(() => ({
  content: isExternal.value ? getDomain(props.href) : decodeURIComponent(props.href),
  inlinePositioning: true,
}))

模板：

<template>
  <UtilLink v-tip="tip" class="z-link" :to="resolvedHref">
    <Icon v-if="icon" class="domain-icon" :name="icon" />
    <slot />
  </UtilLink>
</template>

这样一来：

Markdown 里写的 https://xxx 外链 → 页面中变成指向 /go?url=... 的链接；
内部链接（ /about 、 /posts/... ）仍然直接跳内部路由，不走 /go 。

接入友链卡片：改造 FriendLinkCard.vue
友链页 link.vue 使用的是 app/components/partial/FriendLinkCard.vue 这张卡片。原来的跳转逻辑是直接打开站点：

function navigateToSite() {
  if (props.siteUrl) {
    window.open(props.siteUrl, '_blank')
  }
}

改造后统一走 /go ：

function navigateToSite() {
  if (!props.siteUrl)
    return

  const target = `/go?url=${encodeURIComponent(props.siteUrl)}`
  window.open(target, '_blank')
}

效果：

友链页面点“前往网站”时，不再直接打开友链，而是新开一个 /go 标签页；
/go 负责显示提示、倒计时和跳转；
返回时能够区分“新开标签页”这个场景，优先关闭自己，不干扰原来的 link.vue 页面滚动位置。

一些踩坑 & 调整

在实现过程中踩了几个小坑，顺手记一下。

1. 链接合法性校验过于严格导致按钮点不了
一开始「继续访问」按钮的禁用逻辑是：

<button
  :disabled="!isValidExternal"
  @click="proceed"
>
  继续访问
</button>

而 isValidExternal 是通过 new URL(decodedUrl) + 协议判断实现的。这样做的初衷是安全：

URL 缺失、编码错误、协议不是 http/https → 认为不安全，按钮禁用。但实际使用时：

我们对外链统一做了 encodeURIComponent ；中间一旦出现编码/解码上的处理差异， isValidExternal 就可能是 false ；结果就是：页面能显示链接，倒计时能自动跳转，但按钮一直是禁用状态，用户手动点不了。后面改成：

isValidExternal 只用于显示信息（例如显示域名、显示“链接无效或缺失”）；
按钮本身不再绑定禁用条件，始终可点，真正的兜底放在proceed()里：

function proceed() {
  const target = decodedUrl.value || rawUrl.value
  if (!target)
    return

  clearCountdown()
  window.location.href = target
}

这样既保留了一定的安全感知，又不至于影响正常访问。

2. 返回上一页导致滚动位置混乱
友链卡片是通过 window.open 新开 /go 标签页的，但 /go 一开始是这么写的：

function goBack() {
  if (history.length > 1)
    history.back()
  else
    router.push('/')
}

新标签页基本没有历史，所以会直接 router.push('/') 跳首页。视觉体验就是：

你明明是从 link.vue 底部的友链区域点过来的；
点了「返回上一页」却去了首页，原来的页面滚动位置也被重置，看起来像是“底部组件跑到顶部”。

重写后的 goBack 逻辑就解决了这个体验问题：

新标签页优先 window.close() ；
同标签页用 history.back() ；
实在没有历史才兜底根据 document.referrer / 首页处理。

总结

通过这次改造，博客里所有指定范围的外链都统一走了 /go 中转页，达到了类似 hexo-safego 的效果：

用户在点击外链前会看到明确的提示；
可以手动选择继续访问或返回；
也支持倒计时自动跳转；
Markdown 正文和友链页都接入了这套逻辑。

整体实现成本并不高，但能明显提升外链安全感知和交互体验。如果以后需要更严格的策略（例如只允许白名单域名、记录访问日志等），也可以在 /go 这个集中入口上继续扩展。

关于github-issues当做动态的想法

钟神秀 — Wed, 24 Sep 2025 20:56:28 GMT

起源于在不同博客游览间，看到了一篇文章，感觉很有搞头，然后到了博主的GitHub仓库，然后有了些感受。

优点

有不少的博客基于github-issues，包括etheral、Gmeek等等，当然，除了当博客，你也可以使用其来搞博客。

很好的一种博客写作方式，理论上GitHub不倒，这个方式可以一直使用。

手机上有GitHub的APP，你可以比较简单地在手机上发布动态。

这种方式可以被用来在各种博客里使用，包括Hugo、astro等等。

大致的工作流如下:

// .github/workflows/issue.yml

name: Trigger Empty Commit on Issue UppubDate

on:
  issue_comment:
    types: [created, edited]
  workflow_dispatch:  # 手动触发入口

jobs:
  trigger-empty-commit:
    runs-on: ubuntu-latest
    steps:
      - name: Check trigger type and prepare commit message
        id: check-trigger
        run: |
          # 处理手动触发
          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
            echo "should_trigger=true" >> $GITHUB_OUTPUT
            echo "commit_msg='[Manual] Trigger uppubDate from moments/issues/1'" >> $GITHUB_OUTPUT
          # 处理issue评论事件
          elif [ "${{ github.event.issue.number }}" -eq 1 ]; then
            echo "should_trigger=true" >> $GITHUB_OUTPUT
            echo "commit_msg='Trigger uppubDate from moments/issues/1'" >> $GITHUB_OUTPUT
          else
            echo "should_trigger=false" >> $GITHUB_OUTPUT
            echo "commit_msg=''" >> $GITHUB_OUTPUT
          fi

      - name: Trigger empty commit in lawtee.github.io
        if: steps.check-trigger.outputs.should_trigger == 'true'
        uses: actions/github-script@v6
        env:
          PAT: ${{ secrets.PAT }}
        with:
          script: |
            const { execSync } = require('child_process');
            const repo = 'h2dcc/lawtee.github.io';
            const token = process.env.PAT;
      
            // 从步骤输出获取提交信息
            const commitMsg = `${{ steps.check-trigger.outputs.commit_msg }}`;

            try {
              const repoUrl = `https://x-access-token:${token}@github.com/${repo}.git`;
              execSync(`git clone ${repoUrl}`, { stdio: 'inherit' });
              process.chdir('lawtee.github.io');

              execSync('git config user.name "github-actions[bot]"', { stdio: 'inherit' });
              execSync('git config user.email "41898282+github-actions[bot]@users.noreply.github.com"', { stdio: 'inherit' });

              // 安全执行空提交
              execSync(`git commit --allow-empty -m "${commitMsg.replace(/"/g, '\\"')}"`, { stdio: 'inherit' });
              execSync(`git push ${repoUrl} master`, { stdio: 'inherit' });
              console.log('✅ Empty commit pushed successfully!');
            } catch (error) {
              console.error('❌ Error:', error.message);
              process.exit(1);
            }

你需要的，是搞个公开的仓库(私有仓库不能使用非远程图片)，然后准备上述的工作流，然后在 Github 账号设置 Personal access tokens 中添加一个 token , 勾选 repo 权限，复制到说说仓库 secrets and variables - action 中，名称为 PAT 。

发布说说

这一步需要的是开启一个issue，然后在这个issue里面不断发布评论来当做动态，然后就是把这个issue的链接如https://github.com/h2dcc/moments/issues/1，改为类似https://api.github.com/repos/microsoft/vscode/issues/519/comments，如果你要在前端展示，你需要一个密钥，要有repo权限，你才能正常使用，否则会有较大的限制。关于这个，我觉得要在cloudflare里搞个worker然后再worker的环境变量里添加上面的密钥，大致worker代码如下：

// CF Worker 入口
export default {
  async fetch(req, env) {
    return await handle(req, env);
  }
};

async function handle(req, env) {
  const url = new URL(req.url);

  // 只代理 /api/comments
  if (url.pathname !== '/api/comments') {
    return new Response('Not Found', { status: 404 });
  }

  const upstream = 'https://api.github.com/repos/microsoft/vscode/issues/519/comments';

  const res = await fetch(upstream, {
    headers: {
      'Authorization': 'token ' + env.GH_TOKEN, // ✅ 正确读取环境变量
      'User-Agent': 'CF-Worker-Giscus-Proxy'
    }
  });

  const headers = new Headers(res.headers);
  headers.set('Access-Control-Allow-Origin', '*');

  return new Response(res.body, {
    status: res.status,
    statusText: res.statusText,
    headers
  });
}

然后再搞个自定义域名，然后在后面加后缀/api/comments，你就能比较不受限制的观看动态了，

前端

接下来就是我自己搞的一个html的简单前端，靠着AI完善了一下，可以参考参考:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="icon" type="image/png"
    href="https://img.314926.xyz/images/2025/09/20/zsx-avatar.webp " 
    sizes="32x32">
    <meta charset="UTF-8">
    <title>钟神秀的瞬间</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :root {
            --bg: #f5f5f5;
            --fg: #333333;
            --card: #ffffff;
            --link: #576b95;
            --border: #e1e1e1;
            --avatar-border: #f0f0f0;
            --time-color: #888888;
            --like-color: #ff2442;
            --comment-bg: #f7f7f7;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            --active-page-bg: #576b95;
            --active-page-fg: #ffffff;
            --action-btn-color: #7d7d7d;
            --divider-color: #f0f0f0;
            --header-image-height: 180px;
            --content-max-width: 600px;
        }
        [data-theme="dark"] {
            --bg: #1a1a1a;
            --fg: #e6e6e6;
            --card: #242424;
            --link: #7d9fd3;
            --border: #3a3a3a;
            --avatar-border: #3a3a3a;
            --time-color: #a0a0a0;
            --like-color: #ff5c7a;
            --comment-bg: #2d2d2d;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            --active-page-bg: #7d9fd3;
            --active-page-fg: #ffffff;
            --action-btn-color: #a0a0a0;
            --divider-color: #3a3a3a;
            --header-image-height: 200px;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            background: var(--bg);
            color: var(--fg);
            line-height: 1.6;
            transition: background .3s, color .3s;
            padding-bottom: 40px;
        }
        a {
            color: var(--link);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--card);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }
        .nav-left {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 18px;
        }
        .icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }
        #theme-toggle {
            cursor: pointer;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--fg);
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .header-image {
            width: 100%;
            max-width: var(--content-max-width);
            height: var(--header-image-height);
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            position: relative;
            overflow: hidden;
            margin: 0 auto 15px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }
        .header-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://img.314926.xyz/images/2025/09/22/20250922193025414.webp ') center/cover;
            opacity: 0.9;
        }
        .header-title {
            position: absolute;
            left: 20px;
            bottom: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            z-index: 2;
        }
        .header-info {
            position: absolute;
            right: 20px;
            bottom: 20px;
            color: white;
            z-index: 2;
            cursor: pointer;
            font-size: 20px;
        }
        @media (max-width: 640px) {
            .header-image {
                border-radius: 0;
                margin-bottom: 10px;
            }
            :root {
                --header-image-height: 160px;
            }
            [data-theme="dark"] {
                --header-image-height: 180px;
            }
        }
        .info-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .info-content {
            background: var(--card);
            padding: 20px;
            border-radius: 12px;
            max-width: 80%;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            position: relative;
        }
        .close-modal {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
        }
        main {
            max-width: var(--content-max-width);
            margin: 0 auto;
            padding: 0 10px;
            width: 100%;
        }
        .moment-article {
            background: var(--card);
            border-radius: 12px;
            padding: 0;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        .article-header {
            display: flex;
            align-items: center;
            padding: 12px 15px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            border: 2px solid var(--avatar-border);
            object-fit: cover;
        }
        .user-info {
            flex: 1;
        }
        .user-name {
            font-weight: 500;
            font-size: 16px;
            margin-bottom: 2px;
        }
        .post-time {
            font-size: 12px;
            color: var(--time-color);
        }
        .moment-content {
            padding: 0 15px 15px 15px;
            margin-left: 52px;
            margin-top: -10px;
            font-size: 15px;
            line-height: 1.5;
        }
        .moment-content p {
            margin-bottom: 10px;
        }
        .moment-content pre {
            background: var(--bg);
            padding: 12px;
            border-radius: 6px;
            overflow: auto;
            font-size: 14px;
            margin: 10px 0;
        }
        .moment-content blockquote {
            border-left: 3px solid var(--border);
            padding-left: 12px;
            margin: 10px 0;
            color: var(--fg);
            opacity: .8;
            font-size: 14px;
            background: var(--comment-bg);
            border-radius: 0 6px 6px 0;
            padding: 8px 12px;
        }
        .moment-content code {
            background-color: var(--bg);
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 14px;
        }
        .moment-content img {
            max-width: 100%;
            border-radius: 6px;
            margin: 8px 0;
        }
        .error, .no-content {
            text-align: center;
            margin-top: 40px;
            font-size: 16px;
            color: var(--time-color);
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            gap: 8px;
        }
        .page-btn {
            padding: 6px 12px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--fg);
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .page-btn:hover {
            background: var(--bg);
        }
        .page-btn.active {
            background: var(--active-page-bg);
            color: var(--active-page-fg);
            border-color: var(--active-page-bg);
        }
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .giscus-container {
            max-width: var(--content-max-width);
            margin: 30px auto 0 auto;
            padding: 0 10px;
        }
        .loading {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .loading-spinner {
            width: 24px;
            height: 24px;
            border: 3px solid var(--border);
            border-top-color: var(--link);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        /* 右下角编辑按钮 */
        .edit-btn {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--card);
            color: var(--fg);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            transition: all .3s;
            z-index: 999;
        }
        .edit-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
        }
        /* 手机端缩小一点 */
        @media (max-width: 640px) {
            .edit-btn {
                width: 44px;
                height: 44px;
                font-size: 18px;
                right: 16px;
                bottom: 16px;
            }
        }
    </style>
</head>
<body>
    <nav>
        <div class="nav-left">
            <svg class="icon" viewBox="0 0 16 16">
                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
                         0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
                         1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
                         0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0
                         1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0
                         3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
            <span>钟神秀的瞬间</span>
        </div>
        <button id="theme-toggle" aria-label="切换主题">
            <span id="theme-icon">🌙</span>
            <span>切换主题</span>
        </button>
    </nav>

    <div class="header-image">
        <div class="header-title">即刻短文</div>
        <div class="header-info" id="info-button">❗</div>
    </div>

    <div class="info-modal" id="info-modal">
        <div class="info-content">
            <div class="close-modal" id="close-modal">×</div>
            <h3>钟神秀的瞬间记录</h3>
            <p>这里收录了我的生活随笔、技术思考和灵感闪现。每一段文字都是时光的切片，记录当下的真实感受。</p>
        </div>
    </div>

    <main id="main-container">
        <div class="loading">
            <div class="loading-spinner"></div>
        </div>
    </main>

    <div id="pagination-container" style="display: none;"></div>

    <div class="giscus-container"></div>

    <a href="https://github.com/zsxjun/github-issues-moments/issues/1" target="_blank" class="edit-btn" title="添加/编辑说说">✏️</a>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js "></script>
    <script>
        /* ---------- 主题切换 + Giscus 重载 ---------- */
        const toggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const html = document.documentElement;

        function loadGiscus(theme) {
            const container = document.querySelector('.giscus-container');
            container.innerHTML = '';
            const script = document.createElement('script');
            script.src = 'https://giscus.app/client.js ';
            script.async = true;
            script.setAttribute('crossorigin', 'anonymous');
            script.setAttribute('data-repo', 'zsxjun/github-issues-moments');
            script.setAttribute('data-repo-id', 'R_kgDOP0jWOA');
            script.setAttribute('data-category', 'Announcements');
            script.setAttribute('data-category-id', 'DIC_kwDOP0jWOM4Cvv6S');
            script.setAttribute('data-mapping', 'pathname');
            script.setAttribute('data-strict', '0');
            script.setAttribute('data-reactions-enabled', '1');
            script.setAttribute('data-emit-metadata', '0');
            script.setAttribute('data-input-position', 'top');
            script.setAttribute('data-lang', 'zh-CN');
            script.setAttribute('data-theme', theme);
            container.appendChild(script);
        }

        (function initTheme() {
            const saved = localStorage.getItem('theme');
            const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const initialTheme = (saved === 'dark' || (!saved && preferDark)) ? 'dark' : 'light';
            html.setAttribute('data-theme', initialTheme);
            themeIcon.textContent = initialTheme === 'dark' ? '☀️' : '🌙';
            loadGiscus(initialTheme);
        })();

        toggle.addEventListener('click', () => {
            const current = html.getAttribute('data-theme');
            const next = current === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', next);
            localStorage.setItem('theme', next);
            themeIcon.textContent = next === 'dark' ? '☀️' : '🌙';
            loadGiscus(next);
        });

        /* ---------- 信息模态框 ---------- */
        const infoButton = document.getElementById('info-button');
        const infoModal = document.getElementById('info-modal');
        const closeModal = document.getElementById('close-modal');
        infoButton.addEventListener('click', () => infoModal.style.display = 'flex');
        closeModal.addEventListener('click', () => infoModal.style.display = 'none');
        infoModal.addEventListener('click', e => {
            if (e.target === infoModal) infoModal.style.display = 'none';
        });

        /* ---------- 数据加载 & 分页 ---------- */
        const container = document.getElementById('main-container');
        const paginationContainer = document.getElementById('pagination-container');
        const url = 'https://example.com/api/comments '; /* 替换为你的 API URL */
        let allComments = [];
        let currentPage = 1;
        const itemsPerPage = 10;

        const headers = new Headers();
        headers.append('Accept', 'application/vnd.github.v3+json');
        headers.append('User-Agent', 'Hugo Static Site Generator');

        fetch(url, { headers })
            .then(r => {
                if (!r.ok) throw new Error('网络错误 ' + r.status);
                return r.json();
            })
            .then(list => {
                if (!Array.isArray(list) || list.length === 0) {
                    container.innerHTML = '<p class="no-content">暂无动态</p>';
                    return;
                }
                allComments = list.reverse();
                initPagination(allComments.length);
                displayPage(1);
            })
            .catch(err => {
                container.innerHTML = `<p class="error">⚠️ 无法获取动态：${err.message}</p>`;
            });

        function initPagination(totalItems) {
            const totalPages = Math.ceil(totalItems / itemsPerPage);
            if (totalPages <= 1) {
                paginationContainer.style.display = 'none';
                return;
            }
            let html = `
                <div class="pagination">
                    <button class="page-btn prev-btn" onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>上一页</button>
            `;
            const max = 5, half = Math.floor(max / 2);
            let start, end;
            if (totalPages <= max) { start = 1; end = totalPages; }
            else if (currentPage <= half + 1) { start = 1; end = max; }
            else if (currentPage >= totalPages - half) { start = totalPages - max + 1; end = totalPages; }
            else { start = currentPage - half; end = currentPage + half; }
            for (let i = start; i <= end; i++) {
                html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
            }
            html += `<button class="page-btn next-btn" onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>下一页</button></div>`;
            paginationContainer.innerHTML = html;
            paginationContainer.style.display = 'block';
        }

        function displayPage(page) {
            const start = (page - 1) * itemsPerPage, end = Math.min(start + itemsPerPage, allComments.length);
            const html = allComments.slice(start, end).map(c => `
                <article class="moment-article">
                    <header class="article-header">
                        <img class="avatar" src="${c.user.avatar_url}" alt="${c.user.login}" onerror="this.src='https://avatars.githubusercontent.com/u/0?s=80&v=4 '">
                        <div class="user-info">
                            <div class="user-name">钟神秀@zsxjun</div>
                            <div class="post-time">${formatTime(c.created_at)}</div>
                        </div>
                    </header>
                    <section class="moment-content">${marked.parse(c.body)}</section>
                </article>
            `).join('');
            container.innerHTML = `<div class="moments-feed">${html}</div>`;
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        window.changePage = function (page) {
            const total = Math.ceil(allComments.length / itemsPerPage);
            if (page < 1 || page > total || page === currentPage) return;
            currentPage = page;
            displayPage(page);
            initPagination(allComments.length);
        };

        function formatTime(pubDateStr) {
            const pubDate = new pubDate(pubDateStr), now = new pubDate(), diff = (now - pubDate) / 1000;
            if (diff < 60) return '刚刚';
            if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`;
            if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`;
            if (diff < 2592000) return `${Math.floor(diff / 86400)}天前`;
            return pubDate.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
        }
    </script>
</body>
</html>

大致就是这样了，以上就是我肤浅的理解，希望能帮到你~

Hexo备忘

钟神秀 — Sat, 16 Aug 2025 22:11:28 GMT

Hexo 备忘

我的配置

Hexo 版本: hexo-cli: 4.3.2, hexo: 7.3.0(当前最新)
Node.js 版本: 22.16.0
Git 版本: 2.47.0.sindows.2
PNPM 版本: 10.12.4
Windows 版本: 11

安装 Node.js

在官网安装 LTS 版本，电脑一般来说内存足够直接在 C 盘即可，当然，换路径也可以，我反正正常下载换路径，没什么问题。
安装完成后，检查是否安装成功。在键盘按下 win + R 键，输入 CMD，然后回车，打开 CMD 窗口，执行 node -v 命令，看到版本信息，则说明安装成功。

安装 Git

在官网安装最新版本的 64-bit Git for Windows Setup 安装包。

安装完成后，在命令行输入 git --version，如果显示版本号，则说明安装成功。

常用命令

git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

配置 Git 用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

安装包管理器

安装 npm 为一切的基石，一般来说，你安装了 node，也相当于你安装了 npm，通过一下命令来验证：

npm -v
node -v

修改 npm 源。npm 下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成淘宝镜像。打开 CMD 窗口，运行如下命令:

npm config set registry https://registry.npm.taobao.org

安装 pnpm

pnpm 是一个快速、节省磁盘空间的包管理器，类似于 npm 和 yarn。安装 pnpm 可以通过以下命令：

npm install -g pnpm

为什么选择 pnpm？因为它的安装速度快，依赖管理更高效，且相对于 npm，我使用 npm 容易失败且慢，pnpm 给我的体验更好。

安装 Hexo

在 Git BASH 输入如下命令安装 Hexo：

pnpm install -g hexo-cli

安装完后输入 hexo -v 验证是否安装成功。

Github配置

上述操作是前提，接下来是配置 Github。

创建仓库

登录 GitHub，点击右上角的 + 号，选择 New repository。
填写仓库名称，建议使用 <username>.github.io 格式（例如：yourusername.github.io），这样可以直接作为个人主页。

这里我不准备直接使用常规的 hexo deploy 命令来部署到 GitHub Pages，因为当你的文章一多，生成时间就会繁琐，这里的建议是使用 Github Actions 来自动部署。

这一部分的教程是源于店长的文章，但是有点老旧了，于是我做了点更改（这里的图片来源于安知鱼）：

首先要创建一个放置源码的私有仓库，以下称之为 hexo-source，
然后要生成一个 Github 密钥：

访问 Github-> 头像（右上角）-> Settings-> Developer Settings-> Personal access tokens-> generate new token, 创建的 Token 名称随意，但必须勾选 repo 项和 workflows 项。

点击链接前往生成

[!NOTE]

!!! token 只会显示这一次，之后将无法查看，所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

在 hexo-source 仓库中的设置里点击设置 -> action -> General -> 工作流程权限
- 勾选 Read and write permissions，并且勾选 Allow all actions and reusable workflows。
在设置里 -> Secrets and variables -> Actions -> New repository secret 添加

GITHUBTOKEN：放置你刚才生成的 Token。

上述是前置条件，接下来要先部署 hexo，你才好继续下一步。

初始化 Hexo

在本地新建一个文件夹，例如 hexo-solitude。
这里我是用的是 vscode 打开该文件夹，然后在终端输入以下命令来初始化 Hexo：

hexo init (项目名称)

我一般都不填，直接在文件下下就可以开始，如果你添加了项目名称，那么下一步就是：

cd (项目名称)

安装依赖包：

pnpm install

然后就是选择你想要的主题，这里我使用的是Solitude，具体的配置不细讲，我只讲一部分：

首先就是基本的安装，这里还是选择git clone没有别的原因，主要还是会改点源码，不想改的直接pnpm下载即可：

// git安装
git clone -b dev https://github.com/everfu/hexo-theme-solitude.git themes/solitude

// pnpm 安装
pnpm i hexo-theme-solitude

然后在_config.yml里修改成：

theme: solitude

配置

下列代码是我的备忘：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 喵落阁
subtitle: '克喵的博客'
description: '愿你看清一切真相后，依旧热爱你的家人和朋友。'
keywords: 克喵,kemiao,博客
author: 克喵爱吃卤面
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: # 填网站地址
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by pubDate descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -pubDate

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# pubDate / Time format
## Hexo uses Moment.js to parse and display pubDate
## You can customize the pubDate format as defined in
## http://momentjs.com/docs/#/displaying/format/
pubDate_format: YYYY-MM-DD
time_format: HH:mm:ss
## updatedDate_option supports 'mtime', 'pubDate', 'empty'
updatedDate_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include: []
exclude: []
ignore: []

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: solitude

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com-xx:kemiaofxjun/kemiaofxjun.github.io.git
  branch: main

# RSS Feed 配置
feed:
  type: atom          # 生成 atom.xml
  path: atom.xml      # 输出文件名
  limit: 20           # 最多显示文章数 (0=全部)
  hub:                # PubSubHubbub 中心 (可选)
  content: true       # 是否包含全文内容 (true=是, false=仅摘要)
  content_limit: 140  # 摘要长度（当 content=false 时生效）
  content_limit_delim: ' '  # 截断分隔符
  order_by: -pubDate     # 按日期倒序排列
  autodiscovery: true # 在 HTML 头部添加自动发现标签

# 数学公式渲染配置
markdown:
  preset: 'default' # 使用的 MD 语法，默认使用的 GFM
  render:
    html: true # 渲染 html
    xhtmlOut: false
    langPrefix: 'language-' # 在代码块的类名中添加前缀（指定语言时）。
    breaks: true
    linkify: true # 如果你写了一个链接而不是 [name](link) 方式，会自动识别为链接并渲染。
    typographer: true # 将替换常见的印刷元素。
    quotes: '“”‘’' # 替换文章张的 "" '' 号
  enable_rules:
  disable_rules:
  plugins: # 使用插件
  anchors:
    level: 2 # 渲染标题的级别（h1,h2,h3）
    collisionSuffix: ''
    permalink: true
    permalinkClass: 'headerlink'
    permalinkSide: 'left'
    permalinkSymbol: ''
    case: 0
    separator: '-'
  images: # 图片的一些编译
    lazyload: true # 是否需要渲染 lazyload
    prepend_root: false
    post_asset: false
  inline: false

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

# 文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink
abbrlink:
    alg: crc16   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex

# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  rel: false
  tags: true
  categories: true

algolia:
  appId: ""
  apiKey: ""
  adminApiKey: ""
  chunkSize: 5000
  indexName: "index-name"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 从新窗口打开跳转页面

  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 结构
      - 'data-fancybox'

  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径

  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名，通过字符串匹配实现
      - "kemeow.top"
      - "kemiaosw.top"
      - "050815.xyz"
      - "314926.xyz"
      - "051531.xyz"

  # 页面外观设置
  appearance:
    avatar: https://img.314926.xyz/images/2025/08/13/no-background-kemiaofxjun.webp   # 跳转页面头像路径
    title: "喵洛阁"            # 跳转页面标题
    subtitle: "安全中心"         # 跳转页面副标题
    darkmode: auto              # 是否启用深色模式
    countdowntime: 4            # 跳转页面倒计时秒数，如果设置为负数则为不自动跳转

  # 调试设置
  debug:
    enable: false               # 启用调试模式

# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
  enable: true
  source: bili
  path: 
  vmid: 3546643173477234
  title: "追番列表"
  quote: "生命不息，追番不止！"
  show: 1
  lazyload: false
  loading:
  showMyComment: true
  pagination: false
  extra_options:
    top_img: false
    lazyload:
      enable: false

博客的其他修改基本就是来自教程和一些博主的网站。

插件

基础依赖 hexo-renderer-pug

pnpm i hexo-renderer-pug

字数统计 hexo-wordcount

pnpm i hexo-wordcount

配置里修改：

# --------------------------- start ---------------------------
# Word count
# 字数统计
# warning: Please install the hexo-wordcount plugin first.
# 警告: 请先安装 hexo-wordcount 插件。
wordcount: false
# --------------------------- end ---------------------------

数学公式 卸载 hexo-render-marked

npm un hexo-renderer-marked

安装 hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

pnpm i hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

配置里修改

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: false
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: false
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------

添加以下内容到 _config.yml

markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
    - '@renbaoshuo/markdown-it-katex'
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false
  inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

开启配置项

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: true
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: true
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------

PWA 安装 hexo-swpp 和 swpp-backends 插件

在博客根目录执行

pnpm i hexo-swpp 

pnpm i swpp-backends

开启配置

# 大约在773行
# --------------------------- start ---------------------------
# PWA
# Progressive Web App
pwa:
  enable: true
  manifest: /manifest.json # manifest.json
  theme_color: "#006a73" # Theme color
  mask_icon: /img/pwa/favicon.png # Mask icon
  apple_touch_icon: /img/pwa/favicon.png # Apple touch icon
  bookmark_icon: /img/pwa/favicon.png # Bookmark icon
  favicon_32_32: /img/pwa/favicon_32.png # 32x32 icon
  favicon_16_16: /img/pwa/favicon_16.png # 16x16 icon
# --------------------------- end ---------------------------

在_config.yml里添加swpp配置

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

在 source 目录中创建 manifest.json 文件

{
    "name": "网站名称",
    "short_name": "网站名称缩写",
    "theme_color": "#006a73",
    "background_color": "#006a73",
    "display": "fullscreen",
    "scope": "/",
    "start_url": "/",
    "id": "/",
    "icons": [
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "maskable"
      }
    ],
    "splash_pages": null
}

在博客根目录创建一个 sw-rules.js 文件

module.exports.config = {
  /** @type {?ServiceWorkerConfig|boolean} */
  serviceWorker: {
    escape: 1,
    cacheName: 'SolitudeCache',
    debug: false,
  },
  register: {
    onsuccess: undefined,
    onerror: () =>
      console.error(
        'Service Worker 注册失败！可能是由于您的浏览器不支持该功能！'
      ),
    builder: (root, framework, pluginConfig) => {
      const { onerror, onsuccess } = pluginConfig.register;
      return `
            <script>
                (() => {
                    const sw = navigator.serviceWorker;
                    const error = ${onerror && onerror.toString()};
                    if (!sw?.register('${new URL(root).pathname}sw.js')
                        ${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
                        ?.catch(error)
                    ) error()
                })()
            </script>`;
    },
  },
  /** @type {?DomConfig|boolean} */
  dom: {
    /** @type {?VoidFunction} */
    onsuccess: () => {
      caches
        .match('https://id.v3/')
        .then((res) => {
          if (res)
            res.json().then((json) => {
              utils &&
                utils.snackbarShow(
                  `已刷新缓存，更新为${json.escape + '.' + json.global + '.' + json.local
                  }版本最新内容`,
                  false,
                  2500
                );
            });
          else console.info('未找到缓存');
        })
        .catch((error) => console.error('缓存匹配出错', error));
    },
  },
  /** @type {?VersionJsonConfig|boolean} */
  json: {
    /** @type {number} */
    maxHtml: 15,
    /** @type {number} */
    charLimit: 1024,
    /** @type {string[]} */
    merge: [],
    exclude: {
      /** @type {RegExp[]} */
      localhost: [],
      /** @type {RegExp[]} */
      other: [],
    },
  },
  /** @type {?ExternalMonitorConfig|boolean} */
  external: {
    /** @type {number} */
    timeout: 5000,
    /** 拉取文件时地并发限制 */
    concurrencyLimit: 100,
    /** @type {({head: string, tail: string}|function(string):string[])[]} */
    js: [],
    /** @type {RegExp[]} */
    stable: [
      /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
    ],
    replacer: (srcUrl) => {
      if (srcUrl.startsWith('https://cdn.jsdelivr.net/npm/')) {
        const pathname = new URL(srcUrl).pathname;
        return [
          srcUrl,
          `https://cdn.cbd.int/${pathname}`,
          `https://npm.elemecdn.com/${pathname}`,
          `https://fastly.jsdelivr.net/npm/${pathname}`,
        ];
      } else {
        return srcUrl;
      }
    },
  },
};

module.exports.cacheRules = {
  simple: {
    clean: true,
    search: false,
    match: (url, $eject) =>
      url.host === $eject.domain && ['/404.html'].includes(url.pathname),
  },
  cdn: {
    clean: true,
    match: (url) =>
      [
        'cdn.cbd.int',
        'lf26-cdn-tos.bytecdntp.com',
        'lf6-cdn-tos.bytecdntp.com',
        'lf3-cdn-tos.bytecdntp.com',
        'lf9-cdn-tos.bytecdntp.com',
        'cdn.staticfile.org',
        'npm.elemecdn.com',
      ].includes(url.host) &&
      url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
  },
};

module.exports.getSpareUrls = (srcUrl) => {
  if (srcUrl.startsWith('https://npm.elemecdn.com')) {
    return {
      timeout: 3000,
      list: [
        srcUrl,
        `https://fastly.jsdelivr.net/${new URL(srcUrl).pathname}`,
      ],
    };
  }
};

module.exports.ejectValues = (hexo, rules) => {
  return {
    domain: {
      prefix: 'const',
      value: new URL(hexo.config.url).host,
    },
  };
};

module.exports.skipRequest = (request) => request.url.startsWith("https://i0.hdslb.com") ||
  request.url.startsWith('https://meting.qjqq.cn') ||
  request.url.startsWith('https://api.i-meto.com');

hexo-deploy-git 提交到git的插件

pnpm i hexo-deploy-git --save

hexo-generator-feed hexo的rss插件

pnpm i hexo-generator-feed --save

hexo 的短链接: hexo-abbrlink

pnpm i hexo-abbrlink --save

在_config.yml里修改：

permalink: posts/:abbrlink/ 
# or
permalink: posts/:abbrlink.html

添加:

# abbrlink config
abbrlink:
  alg: crc32      # Algorithm used to calc abbrlink. Support crc16(default) and crc32
  rep: hex        # Representation of abbrlink in URLs. Support dec(default) and hex
  drafts: false   # Whether to generate abbrlink for drafts. (false in default)
  force: false    # Enable force mode. In this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had an abbrlink. (false in default)
  writeback: true # Whether to write changes to front-matters back to the actual markdown files. (true in default)

博客的sitemap : hexo-generator-sitemap

pnpm i hexo-generator-sitemap --save

在_config.yml里添加配置：

sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

使用algolia搜索 : hexo-algoliasearch

注册algolia：

注册地址：dashboard.algolia.com/users/sign_up

创建应用：

注册成功后创建应用：dashboard.algolia.com/account/plan/create?from=dashboard

search -> configure -> index添加index_name即可

在博客执行命令：

pnpm i hexo-algoliasearch --save

_config.yml里添加

algolia:
  appId: "Z7A3XW4R2I"
  apiKey: "12db1ad54372045549ef465881c17e743"
  adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
  chunkSize: 5000
  indexName: "my-hexo-blog"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

[!NOTE]

!!!配置完成后记得运行 hexo clean

在hexo g 后实行下列代码：

hexo algolia

**hexo-safego**安全跳转插件

使用该插件之前，需要先安装 cheerio，cheerio 是一个轻量级的库，用于在服务器端快速、灵活地实现 jQuery 核心功能。在 hexo-safego 插件中，cheerio 被用来解析和操作生成的静态 HTML 内容，类似于在浏览器中使用 jQuery 处理 DOM 元素。这使得插件能够在生成静态页面时，处理和替换外部链接，增强博客的安全性，而不需要在客户端引入 jQuery。Hexo 一般都有这个插件，可以在 node_modules 查看，如果没有，请先执行：

pnpm i cheerio --save

然后即可安装该插件：

pnpm i hexo-safego --save

在hexo根目录的_config.yml文件中添加以下配置：

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 打开新窗口
  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 属性
      - 'data-fancybox'
  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径
  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名
      - "qyliu.top"
      - "liushen.fun"
  # 页面外观设置
  appearance:
    avatar: /info/avatar.ico    # 头像路径
    title: "清羽飞扬"            # 页面标题
    subtitle: "安全中心"         # 页面副标题
    darkmode: true              # 是否启用深色模式
    countdowntime: -1           # 倒计时秒数
  # 调试设置
  debug:
    enable: false               # 启用调试模式

hexo的追番页面：hexo-bilibili-bangumi

pnpm i hexo-bilibili-bangumi --save

在_config.yml配置：

bangumi: # 追番设置
  enable: true           # 是否启用
  source: bili          # 数据源
  path: bangumis/index.html  # 页面路径
  vmid:                 # 用户ID
  title: '追番列表'      # 页面标题
  quote: '生命不息，追番不止！' # 页面引言
  show: 1              # 初始显示页面: 0=想看, 1=在看, 2=看过
  lazyload: true       # 是否启用图片懒加载
  metaColor:           # meta 信息字体颜色
  color:               # 简介字体颜色
  webp: true          # 是否使用 webp 格式图片
  progress: true      # 是否显示进度条

cinema: # 追剧设置
  enable: true           # 是否启用
  source: bili

game: # 游戏设置，仅支持source: bgmv0
  enable: true           # 是否启用
  source: bgmv0

还在更新中。。。

Github action配置

承接段落的继续吧，未来会在出水一期。

接下来就是创建一个私有仓库，根据大佬的文章，是为了保护Token，见仁见智。

这个私有仓库的建立是存储Hexo博客代码，如果你要使用Qexo

，这也是必不可少的！

创建完成后，需要把博客的源码 push 到这里。首先获取远程仓库地址，此处虽然 SSH 和 HTTPS 均可。SSH 在绑定过 ssh key 的设备上无需再输入密码，HTTPS 则需要输入密码，但是 SSH 偶尔会遇到端口占用的情况。请自主选择。

[!TIP]

这里之所以是私有仓库，是因为在接下来的配置中会用到 Token，如果 Token 被盗用，别人可以肆意操作你的 github 仓库内容，为了避免这一风险，才选择的博客源码闭源。

配置 Github Action

在[Blogroot]新建.github文件夹,注意开头是有个.的。然后在.github 内新建 workflows 文件夹，再在 workflows 文件夹内新建 autodeploy.yml,在[Blogroot]/.github/workflows/autodeploy.yml 里面输入

# 当有改动推送到 main 分支时，启动 Action
name: 自动部署

on:
  push:
    branches:
      - main # 自选分支

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v4
        with:
          ref: main # 自选分支

      - name: 安装 Node
        uses: actions/setup-node@v4
        with:
          node-version: "22.x" # node版本

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g
          npm install yamljs --save

      - name: 缓存 Hexo
        uses: actions/cache@v4
        id: cache
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install --save
          npm install hexo-algoliasearch --save
          npm install hexo-bilibili-bangumi --save

      - name: 生成静态文件
        run: |
          node ./link.js
          hexo clean
          hexo generate
          hexo bangumi -u
          hexo algolia

      - name: 部署
        run: |
          cd ./public
          git init -b main
          git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
          git config --global user.email '${{ secrets.GITHUBEMAIL }}'
          git add .
          git commit -m "${{ github.event.head_commit.message }} $(pubDate +"%Z %Y-%m-%d %A %H:%M:%S") updatedDate by GitHub Actions"
          git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main

上述代码是来自店长的修改自用，为什么不用安知鱼的？

首先把Token直接放在仓库的文件里还是不太好。
像我这种在本地搞的，推不到仓库里，因为这里的token不能直接上传，所以改成环境变量来引入，但是依旧有各种问题，相反使用了店长的代码后，就大差不差，询问AI后就得到目前的代码，也就可以正式上传了。（无拉踩的意思）
之后需要自己到仓库的 Settings->Secrets->actions 下添加环境变量，变量名参考脚本中出现的，依次添加。

重新设置远程仓库和分支

🍼第一次使用git管理博客源码

删除或者先把[Blogroot]/themes/solitude/.git移动到非博客文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目，从而无法被上传到源码仓库。
在博客根目录[Blogroot]路径下运行指令:

git init #初始化
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致

添加屏蔽项

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。 4. 之后再运行 git 提交指令，将博客源码提交到 github 上。

git add .
git commit -m "github action uppubDate"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改

此时你的主题文件夹若已经被正常上传，并且你也添加了主题文件夹下的.git 文件夹的屏蔽项。那你可以考虑把第二步移走或删除的.git放回来，用作以后升级。（不禁怀疑真的有人会去用这个方式来升级吗）

🍾曾经做过git管理源码的操作

添加屏蔽项

因为能够使用指令进行安装的内容不包括在需要提交的源码内，所有我们需要将这些内容添加到屏蔽项，表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。打开[Blogroot]/.gitignore,输入以下内容：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。

提交源码到私有仓库[SourceRepo] 在博客根目录[Blogroot]下启动终端，使用 git 指令重设仓库地址。这样在新建仓库，我们仍旧可以保留珍贵的 commit history，便于版本回滚。

git remote rm origin # 删除原有仓库链接
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为新的存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致
git add .
git commit -m "github action uppubDate"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改

可能遇到的 bug 因为 solitude 主题文件夹下的.git 文件夹的存在，那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项，但是还是无法正常上传主题文件夹的情况。请先将本地源码中的 themes 文件夹移动到别的目录下。然后 commit 一次。接着将 themes 文件夹移动回来，再 commit 一次。

[!IMPORTANT]

要是还不行，那就删了 solitude 主题文件夹下的.git 文件夹，然后再重复上述的 commit 操作。

挖坑

大致写到这，未来或许会有~~下一章~~挖坑？但是目前通用的就到这，然后后续会写Qexo的简单使用方法、solitude的一些配置更改和我踩坑经历吧。

Markdown 强调语法

钟神秀 — Thu, 17 Jul 2025 18:11:28 GMT

原文链接: https://markdown.com.cn/basic-syntax/emphasis.html

Markdown 强调语法

通过将文本设置为粗体或斜体来强调其重要性。

粗体（Bold）

要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

Markdown语法	HTML	预览效果
`I just love bold text.`	`I just love <strong>bold text</strong>.`	I just love bold text.
`I just love __bold text__.`	`I just love <strong>bold text</strong>.`	I just love bold text.
`Loveisbold`	`Love<strong>is</strong>bold`	Love is bold

粗体（Bold）用法最佳实践

Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑，在单词或短语中间部分加粗的话，请使用星号（asterisks）。

✅ Do this	❌ Don't do this
`Loveisbold`	`Love__is__bold`

斜体（Italic）

要用斜体显示文本，请在单词或短语前后添加一个星号（asterisk）或下划线（underscore）。要斜体突出单词的中间部分，请在字母前后各添加一个星号，中间不要带空格。

Markdown语法	HTML	预览效果
`This text is *really important*.`	`This text is <strong><em>really important</em></strong>.`	This text is really important.
`This text is ___really important___.`	`This text is <strong><em>really important</em></strong>.`	This text is really important.
`This text is __really important__.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This text is _really important_.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important*.
`This is really*very*important text.`	`This is really<strong><em>very</em></strong>important text.`	This is really very important text.

粗体（Bold）和斜体（Italic）用法的最佳实践

Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性，请使用星号将单词或短语的中间部分加粗并以斜体显示，以示重要。

✅ Do this	❌ Don't do this
`This is really*very*important text.`	`This is really___very___important text.`

Markdown 换行语法

钟神秀 — Sat, 28 Jun 2025 22:11:28 GMT

原文链接: https://markdown.com.cn/basic-syntax/line-breaks.html

Markdown 换行语法

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行( )。

Markdown语法	HTML	预览效果
`This is the first line.` `And this is the second line.`	`This is the first line.<br>` `And this is the second line.`	This is the first line. And this is the second line.

换行（Line Break）用法的最佳实践

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为 结尾空格（trailing whitespace) 的方式，但这是有争议的，因为很难在编辑器中直接看到空格，并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因，你可能要使用除结尾空格以外的其它方式来换行。幸运的是，几乎每个 Markdown 应用程序都支持另一种换行方式：HTML 的   标签。

为了兼容性，请在行尾添加“结尾空格”或 HTML 的   标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\) 的方式实现换行，但是并非所有 Markdown 应用程序都支持此种方式，因此从兼容性的角度来看，不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容，只须键入回车键（return）即可实现换行。

✅ Do this	❌ Don't do this
`First line with two spaces after.` `And the next line.`	`First line with a backslash after.\` `And the next line.`
`First line with the HTML tag after.<br>` `And the next line.`	`First line with nothing after.` `And the next line.`

资源分享：涂鹿Toolooz

钟神秀 — Mon, 19 May 2025 23:11:28 GMT

涂鹿Toolooz：曲线文字绘制设计工具，轻松创建沿任意路径排布的精美文字

　　涂鹿Toolooz，在线曲线文字绘制工具，可使文字沿任意路径排列，打造独特视觉效果。为您的徽标、标题、艺术作品赋予生命力与创意。

　　支持自定义画布尺寸、文本内容、字体、间距、颜色、描边等，还支持多个绘图工具和选择文本是否重复，可导出为 PNG、WebP 和 SVG 格式，免费使用，无需注册。

网站介绍

截图

特色

自由绘制路径

　　使用鼠标或触控笔自由绘制路径，或选择预设形状如圆形、方形、椭圆等，轻松创建文字轨迹。

文本样式丰富

　　自定义字体、大小、颜色、间距等属性，支持文本背景带，打造丰富多样的文字效果。

交互式编辑

　　直观的选择、移动、缩放和旋转功能，让您精确控制每个文字路径的位置和外观。

灵活配置

　　自定义画布尺寸、背景色、缩放级别等，适应各种设计场景和需求。

多格式导出

　　将设计导出为PNG、SVG或WEBP格式，可自定义分辨率和尺寸，轻松应用于各种场景。

模板库

　　内置多种精美模板，一键应用，快速开始您的创意设计项目

应用场景

　　涂鹿曲线文字绘制设计工具适用于多种创意设计

　　创建独特的环形或自定义形状品牌徽标，增强品牌视觉识别度。#社交媒体 #创意设计

　　为社交媒体平台设计吸引眼球的曲线文字图片，提高内容吸引力。创意海报设计

　　创建个性化海报和宣传材料，为活动和产品增添创意元素。

网站链接

　　https://toolooz.com

原文链接

　　https://www.appmiao.com/836/

来将 Telegram 当音乐播放器吧！

钟神秀 — Thu, 15 May 2025 19:11:28 GMT

来将 Telegram 当音乐播放器吧！（寻找音乐、即时歌词、无损音乐不失真压缩）

步骤一：到 @music_v1bot 下载歌曲，并找到歌词

　　输入指令： /search （你想要的歌名）

步骤二：下载 MT 管理器（点我）

开启：下载好的歌词文件

步骤三：最右上角、搜索>勾选正则化，替换（全部替换）

输入：[(\d{2}:\d{2}).\d+]

替换：$1

注意："$1"后面要加一个空格(英文)。

代码作者：Aric

　　并将选取好的歌词，粘贴到音乐文件就完成了。

（我是范例-点我查看）

须知

使用：“.FLAC“格式的音乐文件，有时候不能正常显示歌词时间轴，是正常的，所以你可能要转换特定的格式，如.mp3，或是.ogg 或.m4a 的歌曲。

　　→ 如果你对音乐品质有极致追求，也有电脑 🖥️，我个人极度推荐使用 dBpowerAMP 这类型工具，将无损音乐格式转换成 m4a （水果的算法：QAAC 编码的音乐），目前可以算是当今世界上最好的压缩算法，在通讯界享有盛名，且压缩后可以到接近百分之百还原。（甚至连对音乐/声学研究的职业工作者都讚叹不已）笔者强烈推荐，只叹手机没有类似的软件。专门转成 QAAC 编码的。

🖥️ 电脑版 dBpowerAMP 下载/教学请点我

拓展

　　以上是原文内容，如果你改了音乐格式失去了原本的封面，歌手等等东西，一般来说是不妨碍什么的，如果你一定要改的话，可以使用音乐标签。具体使用很简单，我不多赘述，给个视频你就大致明白了：

　　同时，如果你想更换音乐格式，有很多种方法，以下给一个网站。

原文链接

　　https://telegra.ph/Telegram-Real-Time-sync-lyrics-05-14

　　‍

DROP：便捷大文件分享与托管网站，免费享10GB空间免费部署

钟神秀 — Fri, 09 May 2025 21:24:28 GMT

网站简介

DROP 是一个便捷的文件分享与托管平台，云存储工具，提供免费10GB的存储空间，支持大文件的快速上传与分享。

支持上传图片、视频、压缩文件和PDF，选择适合文件的文档后，点击拷贝链接即可直接获得分享链接。采用AI驱动技术，确保文件传输的高效性和安全性，同时提供简洁直观的用户界面，方便用户管理和分享文件。DROP 适用于个人用户和创作者，可轻松展示和分发作品

截图

功能特色

免费10GB存储：新用户可免费享受10GB的存储空间，满足日常文件分享需求。
大文件支持：支持大文件的快速上传与分享，适合分享高清视频、大型文档等。
AI驱动：采用AI技术优化文件传输和管理，提升用户体验。
隐私保护：提供文件访问控制，保护用户隐私和数据安全。
简洁界面：直观的用户界面，易于上手，方便文件管理。
多平台支持：支持多种设备和操作系统，方便随时随地访问文件。

网站地址

https://drop.space/

原文链接: https://www.appmiu.com/31115.html

tgtalk免费部署

钟神秀 — Sun, 04 May 2025 21:01:28 GMT

部署 API

访问 Gist 并获取其中所有代码

需要注意，本 API Worker 脚本基于 ChenYFan 修改，包含了本项目需要使用的功能，请勿随意更改脚本内容 TGTalker-Frontend V2 的 API 不兼容 V1

进入 Cloudflare 仪表盘

选择创建应用程序 -> 创建 Worker -> 修改名称（部署）-> 编辑代码

在其中粘贴你复制的所有代码，并且修改 ChannelName 为你的频道名称，部署并访问 Worker 查看是否能正确返回内容

接着你可以为你的 Worker 绑定一个域名

保存，然后将你绑定的域名填入配置中的 api 项即可。

Umami博客访问统计Vercel+Cloudflare Wokers部署

钟神秀 — Mon, 07 Apr 2025 17:11:28 GMT

第一部分：Vercel+Umami

第一步 1.1 Forkumami到自己的Github仓库

1.2 创建项目

index.mdx 2. 第二步

　2.1 创建Vercel账号，这里我就省略了，因为GitHub可以直接进行授权即可。

2.2 在你授权以后，首先创建Postgres数据库，直接一路下一步，创建好就行，可以给下面的连接复制出来

　　点击Copy Snippet,就可以，记住在粘贴的时候是我画线里面的部分，双引号都不需要，因为要设置环境变量。

　　 2.3 在创建好数据库以后，回到主页面的Overview，然后右上角有一个Add New选择添加Project，选择你Fork的umami，添加即可。 2.4 设置环境变量，DATABASE_URL和HASH_SALT和TRACKER_SCRIPT_NAME，其中DATABASE_URL的值就是上面划线的部分，其他的两个环境变量都是对应的值是String自己可以随意定义。　　 2.5 设置好以后点击Deploy，等待大约两分钟左右，自动部署完成，部署完成以后可以通过下图种面板上面给的链接可以直接访问。

　　 2.6 打开以后会跳出登录地址，默认的登录密码是adminumami，登录进去以后，设置给自己密码修改了，然后就是设置里面添加网站，给你要统计的网站添加进去，到此，别人访问你的网站你可以通过面板看到统计数据了。

第二部分：Umami+Cloudflare worker

这一部分主要是让你的博客上面能展示的访问数据，效果如下：

　　部署以后，进去点击编辑代码，将里面的代码进行替换：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = 'https://umami.yourdomain.com';  // 替换你的刚才部署的umami的域名
const TOKEN = 'your_token'; // 获取的token
const WEBSITE_ID = 'your_website_id'; // 在umami添加网站的 webstie id
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`Error fetching data: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = pubDate.now();
  const todayStart = new pubDate(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new pubDate(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new pubDate(now).setMonth(new pubDate(now).getMonth() - 1);
  const lastYearStart = new pubDate(now).setFullYear(new pubDate(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}

　　但是里面有几个比较重要的参数需要修改API_BASE_URL、TOKEN、WEBSITE_ID其中API_BASE_URL和WEBSITE_ID已经是有的，WEBSITE_ID在umami中的设置，选择你已经添加好的网站，点击编辑，会出现网站的WEBSITE_ID：

　　 2.2 获取token，在想api测试网站，hoppscotch，跳转到这个页面以后，如下图所示

　　 2.2.1 请求方式选择post，链接填写方式是：

https://你的umami域名或者是链接/api/auth/login

　　 2.2.2 请求体选择Body参数格式选择application/json

{
 "username":"用户名",
 "password":"密码"
}

　　 2.2.3 返回结果中token里面的内容就是需要的token

{
  "token": "你的token", # 你需要记录下来的内容
  "user": {
    "id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
    "username": "admin",
    "role": "admin",
    "createdAt": "2024-11-12T09:18:12.766Z",
    "isAdmin": true
  }
}

　　到这里，你部署api所需要的所有参数内容都已经有了，给替换进去即可。

　　 2.3 测试在你部署好以后，会有一个链接，当然你如果是用cloudflare代理你的域名，可以直接进行关联。

　　然后点击或则是复制粘贴到浏览器，请求以后会出来下面的结果：

　　如果没有结果，建议你先去你部署的umami面板里面看看有没有数据，有数据的情况下，这里请求都会有数据的，清理浏览器缓存开代理在测试。

第三部分：添加博客统计

　　将数据添加到about页面

tj: # 统计
  provider: custom # custom
  url: 你的数据接口地址
  img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
  desc: # 卡片左下角描述

　　配置完成~

　　感谢starsharbor大佬博客的指导，原文

作者原文

作者: Couture 链接: https://www.coutures.top/posts/27233.html 来源: Couture 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Git 同步上游仓库的更新

钟神秀 — Fri, 04 Apr 2025 22:16:21 GMT

Git 同步上游仓库的更新

　　使用一个 Github Template 创建了我自己的仓库，需要同步一下补丁更新，总不能自己手抄一遍吧，搜了一下解决方案。

　　记录一下。

添加上游仓库

　　给上游仓库取个名字，如果将命名为 upstream ，可以在本地仓库中运行以下命令：

git remote add upstream https://github.com/$<upstream-repo>.git

获取上游仓库的更改

　　运行以下命令以获取上游仓库中的所有分支和提交：

git fetch upstream

合并上游更改

　　现在，将上游 main 分支的更改合并到您的本地 main 分支：

git merge upstream/main --allow-unrelated-histories

　　如果只需要合并特定的 commit ：

git cherry-pick <commit-hash>

　　也可以使用

gcp <commit-hash>

　　commit-hash 可以直接从 github 网页上复制。

　　这时 commit 的作者是源仓库的作者， Vercel 提示我 Build 失败，需要升级到 Pro，可以再修改一个文件，自己添加一条 commit 。

　　当然这很不优雅，可以使用下面的命令获取更改到文件，但是不会提交 commit ，

git cherry-pick <commit-hash> --no-commit

　　然后手动提交一下

git commit -m "commit information"

解决冲突

　　如何自己已经修改过源代码，在合并过程中可能发生冲突，需要手动解决。
Git 也会进行提示，手动编辑冲突文件并保存，然后再提交更改。

批量提交

git cherry-pick <起始提交>^..<结束提交>

　　如果有冲突会按照顺序处理，然后执行， continue 直到结束

git cherry-pick --continue

<起始提交>：范围的开始点（不包含此提交，除非用 <起始提交>~ 或 <起始提交>^）。
<结束提交>：范围的结束点（包含此提交）。
^ 是 Git 的语法，用于指定“之前的提交”。
.. 表示范围。

推送

git push origin main

　　当然默认来说，并不会推送到新加入的 upstream ，直接 git push 即可

　　如果不再需要同步，可以删除上游的仓库

git remote remove upstream

Markdown 段落语法

钟神秀 — Thu, 13 Feb 2025 18:11:28 GMT

原文位置: https://markdown.com.cn/basic-syntax/paragraphs.html

Markdown 段落

要创建段落，请使用空白行将一行或多行文本进行分隔。

Markdown语法	HTML	预览效果
`I really like using Markdown.`	`<p>I really like using Markdown.</p>`	I really like using Markdown.
`I think I'll use it to format all of my documents from now on.`	`<p>I think I'll use it to format all of my documents from now on.</p>`	I think I'll use it to format all of my documents from now on.

段落（Paragraph）用法的最佳实践

不要用空格（spaces）或制表符（ tabs）缩进段落。

✅ Do this	❌ Don't do this
`Don't put tabs or spaces in front of your paragraphs.`	`This can result in unexpected formatting problems.`
`Keep lines left-aligned like this.`	`Don't add tabs or spaces in front of paragraphs.`

Markdown-标题语法 | 技术分享

钟神秀 — Wed, 12 Feb 2025 18:56:28 GMT

原文位置: https://markdown.com.cn/basic-syntax/headings.html

Markdown 标题语法

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

Markdown语法	HTML	预览效果
`# Heading level 1`	<h1>Heading level 1</h1>	Heading level 1
`## Heading level 2`	<h2>Heading level 1</h2>	Heading level 2
`### Heading level 3`	<h3>Heading level 1</h3>	Heading level 3
`#### Heading level 4`	<h4>Heading level 1</h4>	Heading level 4
`##### Heading level 5`	<h5>Heading level 1</h5>	Heading level 5
`###### Heading level 6`	<h6>Heading level 1</h6>	Heading level 6

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。

Markdown语法	HTML	预览效果
`Heading level 1` `===============`	<h1>Heading level 1</h1>	Heading level 1
`Heading level 2` `---------------`	<h2>Heading level 2</h2>	Heading level 2

最佳实践

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

✅ Do this	❌ Don't do this
`# Here's a Heading`	`#Here's a Heading`

Markdown-速查表

钟神秀 — Tue, 11 Feb 2025 18:11:28 GMT

原文位置: https://markdown.com.cn/cheat-sheet.html#%E6%80%BB%E8%A7%88

总览

Markdown 速查表提供了所有 Markdown 语法元素的基本解释。如果你想了解某些语法元素的更多信息，请参阅更详细的 基本语法 和 扩展语法.

基本语法

这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown 应用程序都支持这些元素。

元素	Markdown 语法
标题（Heading）	\ # H1 一级标题 \ ## H2 二级标题 \ ### H3 三级标题
粗体（Bold）	bold text
斜体（Italic）	italicized text
引用块（Blockquote）	> blockquote
有序列表（Ordered List）	1. First item 2. Second item 3. Third item
无序列表（Unordered List）	- First item - Second item - Third item
代码（Code）	`code`
分隔线（Horizontal Rule）	—
链接（Link）	[title](https://www.example.com)
图片（Image）	![alt text](image.jpg)

扩展语法

这些元素通过添加额外的功能扩展了基本语法。但是，并非所有 Markdown 应用程序都支持这些元素。

元素	Markdown 语法
表格（Table）	`\| Syntax \| Description \|` `\| ----------- \| ----------- \|` `\| Header \| Title \|` `\| Paragraph \| Text \|`
代码块（Fenced Code Block）	``` `{` `"firstName": "John",` `"lastName": "Smith",` `"age": 25` `}` ```
脚注（Footnote）	Here’s a sentence with a footnote.`[^1]` `[^1]`: This is the footnote.
标题编号（Heading ID）	\ ### My Great Heading{#custom-id}
定义列表（Definition List）	term : definition
任务列表（Task List）	`- [x] Write the press release` `- [ ] UppubDate the website` `- [ ] Contact the media`