虚无缥缈の小破站

掌握基本的 Linux 命令

Wed, 20 May 2026 00:00:00 GMT

🐧 掌握基本的 Linux 命令#

💡 核心理念：精心筛选出的那 20% 的核心 Linux 命令，决定你 80% 工作效率的关键。
遵循 帕累托法则（二八定律），把有限的学习时间投入到最高频、最实用的命令上。

📑 目录#

序号	章节	描述	难度
1	🚀 绝对核心	生存底线，每天必用	⭐
2	⚡ 高频利器	效率倍增器，进阶必备	⭐⭐
3	🛠️ 瑞士军刀	多功能工具，按需掌握	⭐⭐
4	☢️ 危险操作	权限管理，谨慎使用	⭐⭐⭐
5	📝 总结与建议	学习策略与路线图	—
6	📖 命令速查手册	实战场景代码示例	—

🚀 绝对核心#

🎯 生存底线：以下命令构成 Linux 操作的基础，每天高频使用，必须形成肌肉记忆。

命令	全称	功能	常用示例
`cd`	Change Directory	切换目录	`cd ~` · `cd ..` · `cd -` · `cd /path/to/dir`
`ls`	List	列出目录内容	`ls -l` (详情) · `ls -a` (隐藏文件) · `ls -lh` (人性化大小)
`pwd`	Print Working Directory	显示当前绝对路径	`pwd`
`cp`	Copy	复制文件/目录	`cp file1 file2` · `cp -r dir1 dir2` (递归)
`mv`	Move	移动 / 重命名	`mv oldname newname` · `mv file dir/`
`rm`	Remove	⚠️ 删除文件/目录	`rm file` · `rm -r dir` · `rm -i` (新手推荐)
`mkdir`	Make Directory	创建目录	`mkdir new_dir` · `mkdir -p parent/child`
`cat`	Catconcatenate	查看/合并小文件	`cat file.txt`
`less`	—	分页查看大文件	`less huge_log.log` (空格翻页, q退出)
`sudo`	SuperUser DO	管理员权限执行	`sudo apt update` · `sudo nano /etc/file`

⚡ 高频利器 - 效率倍增器#

🔥 进阶必备：掌握这些命令，你的效率将获得质的飞跃。

命令	全称	功能	常用示例
`grep`	Global Regular Expression Print	文本搜索	`grep "error" logfile` · `ps aux \| grep nginx`
`\|`	Pipe	管道：连接命令输出与输入	`command1 \| command2`
`man`	Manual	查看命令手册	`man ls` · `man grep`
`nano` / `vim`	—	文本编辑器	`nano filename.txt` (推荐新手)
`echo`	—	打印文本/变量	`echo "Hello"` · `echo $PATH`
`ps`	Process Status	查看进程	`ps aux` (显示所有进程详情)
`kill`	—	终止进程	`kill PID` (温和) · `kill -9 PID` (强制)

💡 小贴士：管道符 | 虽然不是独立命令，但绝对属于这 20%！它是 Linux 哲学的精髓——组合小工具完成复杂任务。

🛠️ 瑞士军刀 - 多功能工具#

🔧 按需掌握：功能强大，使用场景广泛，遇到问题时它们是救星。

命令	功能	常用示例
`find`	文件搜索（功能强大）	`find / -name "filename"` · `find . -type f -mtime -7`
`tar`	打包 / 解压压缩包	`tar -czvf archive.tar.gz files/` (创建) · `tar -xzvf archive.tar.gz` (解压)
`curl` / `wget`	网络下载 / API 交互	`curl -O https://example.com/file.zip` · `wget https://example.com/file.zip`

📌 建议：curl 和 wget 掌握一个即可，curl 功能更广，推荐优先学习。

☢️ 危险操作#

⚠️ 警告：以下命令可能造成数据丢失或系统故障，操作前务必三思！

命令	全称	功能	风险等级
`chmod`	Change Mode	修改文件/目录权限	🔴 高
`chown`	Change Owner	修改文件所有者/组	🔴 高
通配符 `*` `?` `[]`	—	批量匹配文件	🟡 中

权限数字对照表（chmod）：

数字	权限	字符	说明
`7`	读 + 写 + 执行	`rwx`	所有者常用
`5`	读 + 执行	`r-x`	目录/脚本常用
`4`	只读	`r--`	保护文件
`0`	无权限	`---`	完全禁止

🚨 绝对禁忌：sudo rm -rf / 会删除整个系统！永远不要执行！

📝 总结与建议#

🏆 Top 10 核心命令#

以下命令是 生存底线，请死磕到形成肌肉记忆：

1
cd  →  ls  →  pwd  →  cp  →  mv  →  rm  →  mkdir  →  cat/less  →  grep  →  sudo
2
                                          ↓
3
                              管道 |  +  man  =  无敌组合

📚 学习策略（6 步走）#

步骤	策略	说明
1️⃣	先死磕 Top 10	每天用，形成肌肉记忆
2️⃣	善用 `man` 和 `--help`	遇到不会的命令，第一时间查手册
3️⃣	*掌握管道 `\|` 和通配符 ``**	组合命令、批量操作的神器
4️⃣	谨慎使用 `rm` 和 `sudo`	操作前确认路径，新手用 `rm -i`
5️⃣	选一个编辑器学好	`nano` (简单) 或 `vim` (强大)
6️⃣	实践！实践！实践！	在虚拟机 / 云服务器 / Docker 中练习

🎯 进阶路线图#

1
✅ 当前阶段：掌握 20% 核心命令
2
       ↓
3
🔷 网络管理：ip / ping / ss / netstat
4
       ↓
5
🔷 系统监控：top / htop / df / du / free
6
       ↓
7
🔷 包管理器：apt (Debian) / yum (RHEL) / dnf / pacman
8
       ↓
9
🔷 Shell 脚本：bash 编程 / 自动化任务
10
       ↓
11
🔷 高级工具：awk / sed / xargs / tee / sort / uniq

💪 把这 20% 的核心命令练到炉火纯青，你在 Linux 命令行世界的工作效率就能轻松超越 80% 的用户！

📖 命令速查手册（按场景分类）#

1️⃣ 文件导航与查看#

📂 每天使用频率最高的操作

Terminal window展开收起

1
# 查看当前目录内容 (带文件大小和权限)
2
ls -lh
3
# -l: 详细信息 | -h: 人类可读大小
4

5
# 进入 Downloads 目录
6
cd ~/Downloads
7

8
# 显示当前路径
9
pwd  # 输出: /home/user/Downloads
10

11
# 查看文件内容 (适合小文件)
12
cat config.txt
13

14
# 分页查看日志 (空格翻页, q 退出)
15
less /var/log/syslog

展开收起

2️⃣ 文件操作#

📁 核心生存技能

Terminal window展开收起

1
# 复制文件并重命名
2
cp original.txt backup.txt
3

4
# 递归复制文件夹 (包含子目录)
5
cp -r project/ project_backup/
6

7
# 移动文件到目录
8
mv document.pdf ~/Documents/
9

10
# 重命名文件
11
mv oldname.txt newname.txt
12

13
# 创建目录树 (一次性创建多级目录)
14
mkdir -p project/{src,doc,test}
15

16
# 创建空文件
17
touch newfile.txt
18

19
# 删除文件 (谨慎！)
20
rm temporary.tmp
21

22
# 递归删除目录 (更谨慎！)
23
rm -r obsolete_code/  # -r: 递归删除

展开收起

💡 技巧：mkdir -p project/{src,doc,test} 利用花括号展开，一次创建完整目录树。

3️⃣ 文本处理#

🔍 数据处理利器

Terminal window

1
# 在文件中搜索 "error" (显示行号)
2
grep -n "error" server.log
3

4
# 递归搜索目录中的 Python 文件
5
grep -r "import numpy" ~/code/  # -r: 递归搜索
6

7
# 组合使用：查找进程 (管道符 | 是关键！)
8
ps aux | grep "nginx"
9

10
# 统计文件行数
11
wc -l data.csv  # 输出: 253 data.csv

4️⃣ 系统管理#

⚙️ 需要 sudo 权限的操作

Terminal window展开收起

1
# 更新软件包列表 (Ubuntu/Debian)
2
sudo apt update
3

4
# 安装软件
5
sudo apt install htop
6

7
# 修改文件所有者
8
sudo chown user:group file.txt
9

10
# 添加可执行权限
11
chmod +x script.sh  # +x: 添加执行权限
12

13
# 查看进程树
14
pstree  # 显示进程关系
15

16
# 结束进程 (先用 ps 查 PID)
17
kill 1234     # 温和终止
18
kill -9 5678  # 强制终止

展开收起

5️⃣ 网络操作#

🌐 故障排查必备

Terminal window

1
# 测试网络连通性
2
ping google.com  # Ctrl+C 停止
3

4
# 下载文件
5
curl -O https://example.com/file.zip
6

7
# 查看监听端口
8
ss -tuln  # -t: TCP -u: UDP -l: 监听 -n: 数字格式

6️⃣ 查找与帮助#

🔑 解决问题的钥匙

Terminal window

1
# 按名称查找文件
2
find ~/ -name "config*.json"  # 搜索家目录
3

4
# 查找最近修改的文件
5
find . -mtime -1  # 过去 24 小时修改的
6

7
# 查看命令手册
8
man grep  # 空格翻页, q 退出
9

10
# 快速帮助
11
ls --help  # 简洁版帮助

7️⃣ 组合技巧#

🚀 效率倍增器

Terminal window展开收起

1
# 搜索并删除临时文件 (谨慎！)
2
find . -name "*.tmp" -exec rm {} \;
3

4
# 统计错误日志出现次数
5
grep -c "ERROR" app.log
6

7
# 实时监控日志更新
8
tail -f /var/log/app.log  # -f: 跟随模式
9

10
# 打包压缩文件夹
11
tar -czvf backup.tar.gz project/
12
# c:创建  z:gzip压缩  v:显示进度  f:文件名
13

14
# 解压文件
15
tar -xzvf backup.tar.gz

展开收起

🎓 附录：常用参数速查#

`ls` 常用参数#

参数	全称	功能
`-l`	long	长格式显示（权限、所有者、大小、时间）
`-a`	all	显示隐藏文件（以 `.` 开头的文件）
`-h`	human-readable	人类可读的文件大小（KB/MB/GB）
`-t`	time	按修改时间排序
`-r`	reverse	反向排序

`grep` 常用参数#

参数	全称	功能
`-n`	line-number	显示行号
`-r`	recursive	递归搜索目录
`-i`	ignore-case	忽略大小写
`-c`	count	只输出匹配行数
`-v`	invert-match	反向匹配（显示不匹配的行）

`tar` 参数记忆法#

🧠 记忆口诀：Create / eXtract / Zip / Verbose / File

参数	全称	功能
`-c`	create	创建新归档
`-x`	extract	解压归档
`-z`	gzip	使用 gzip 压缩
`-v`	verbose	显示详细过程
`-f`	file	指定归档文件名

📜 最后的话#

“Linux 命令行的强大不在于单个命令，而在于它们能够通过管道 | 灵活组合，形成强大的处理流水线。”

记住：熟练掌握这 20% 的核心命令，比浅尝辄止地了解 100% 的命令更有价值。

加油！💪

📅 整理日期：2026-05-20 🏷️ 标签：Linux 命令行 效率工具 入门指南

待办

Sat, 09 May 2026 00:00:00 GMT

功能#

BUG#

修复生产环境下顶部滚动条刷新页面不显示
自定义Footer页面生产环境不显示主题版本号，本地环境显示
浏览量一直加载中…

优化#

右侧滚动条优化，和teek保持一致

快速开始

Tue, 05 May 2026 00:00:00 GMT

快速开始#

Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。

环境要求#

Node.js 22.0 或更高版本
pnpm 包管理器（推荐）
Git

安装#

克隆仓库

Terminal window

1
git clone https://github.com/CuteLeaf/Firefly.git
2
cd Firefly

安装依赖

Terminal window

1
pnpm install

启动开发服务器

Terminal window

1
pnpm dev

构建生产版本

Terminal window

1
pnpm build

项目结构#

1
Firefly/
2
├── src/
3
│   ├── config/          # 配置文件目录
4
│   ├── components/      # 组件目录
5
│   ├── content/         # 内容目录（文章、页面）
6
│   ├── layouts/         # 布局模板
7
│   ├── pages/           # 页面路由
8
│   └── types/           # 类型定义
9
├── public/              # 静态资源
10
└── astro.config.mjs     # Astro 配置

配置文件概览#

所有配置文件位于 src/config/ 目录下：

配置文件	说明	文档
`siteConfig.ts`	站点基础配置	站点配置
`navBarConfig.ts`	导航栏配置	导航栏
`sidebarConfig.ts`	侧边栏布局配置	侧边栏
`profileConfig.ts`	个人资料配置	个人资料
`backgroundWallpaper.ts`	背景壁纸配置	背景壁纸
`commentConfig.ts`	评论系统配置	评论系统
`musicConfig.ts`	音乐播放器配置	音乐播放器
`fontConfig.ts`	字体配置	字体
`coverImageConfig.ts`	封面图片配置	封面图片
`expressiveCodeConfig.ts`	代码块配置	代码块
`sakuraConfig.ts`	樱花特效配置	樱花特效
`announcementConfig.ts`	公告配置	公告
`footerConfig.ts`	页脚配置	页脚
`licenseConfig.ts`	许可证配置	许可证
`friendsConfig.ts`	友链配置	友链
`sponsorConfig.ts`	赞助配置	赞助
`adConfig.ts`	广告配置	广告
`pioConfig.ts`	Live2D/Spine 模型配置	看板娘

网工必看！1 个实验打通 8 大核心技能，搞定企业网络实战（附详细配置）

Fri, 24 Jul 2026 00:00:00 GMT

VLAN 会配、STP 会配、DHCP 也会配，为什么真让你从零搭建一个企业网络时，还是不知道从哪里下手？

很多刚入行的朋友都有这个困惑。

网工真正的分水岭，不只是会不会配置某个协议，而是能不能根据业务需求，把多个协议组合起来，搭建出一个完整、可靠且可维护的网络。

今天，我们通过一个完整实验，串联以下 8 项企业网核心技能：

链路聚合
VLAN 与三层互通
MSTP
VRRP
DHCP
NAT
静态路由
Telnet

花 30 分钟完整跑通一遍，你就能掌握小型企业网络从规划、配置到验证的基本思路。

一、模拟企业网络拓扑#

企业网络实验拓扑图

企业需求#

财务部与技术部使用 VLAN 实现二层隔离。
AGG 与 ACC 之间通过 MSTP 消除物理环路，并实现流量负载分担。
两台核心交换机 AGG 之间部署动态链路聚合，提高链路带宽与可靠性。
两台核心交换机部署 VRRP，实现网关冗余，并让两个部门的流量分担到不同设备。
两个部门的终端均通过 DHCP 自动获取 IP 地址。
出口路由器 R1 配置 NAT，使内网终端能够访问互联网。
R1 配置 Telnet，供内网管理员远程登录和维护设备。
R1 配置浮动静态路由：返回 VLAN 10 的流量优先经过 AGG1，返回 VLAN 20 的流量优先经过 AGG2，最终实现全网互通。

地址规划#

网络区域	网段或地址	说明
VLAN 10	`10.1.1.0/24`	财务部业务网段
VLAN 20	`20.1.1.0/24`	技术部业务网段
AGG1—R1	`100.1.1.0/24`	AGG1 上联出口网段
AGG2—R1	`200.1.1.0/24`	AGG2 上联出口网段
R1—ISP	`202.100.1.0/24`	企业出口公网网段
Internet 测试地址	`8.8.8.8/32`	ISP Loopback 0

二、核心技能配置#

技能 1：链路聚合——增加带宽与链路冗余#

AGG1 和 AGG2 之间使用两条物理链路互联，并将其捆绑成一条逻辑链路。这样既能提升带宽，也能避免单条链路故障导致核心互联中断。

AGG1#

1
[AGG1]interface Bridge-Aggregation 1
2
[AGG1-Bridge-Aggregation1]link-aggregation mode dynamic
3
[AGG1]interface range g1/0/1 g1/0/2
4
[AGG1-if-range]port link-aggregation group 1
5
[AGG1-if-range]qu

AGG2#

1
[AGG2]interface Bridge-Aggregation 1
2
[AGG2-Bridge-Aggregation1]link-aggregation mode dynamic
3
[AGG2]interface range g1/0/1 g1/0/2
4
[AGG2-if-range]port link-aggregation group 1
5
[AGG2-if-range]qu

技能 2：VLAN、三层互通与接口地址——隔离部门并打通网络#

先在核心交换机和接入交换机上创建 VLAN 10、VLAN 20，再根据链路用途配置 Trunk 或 Access 接口。

2.1 配置 VLAN 与接口类型#

AGG1#

1
[AGG1]vlan 10 20
2
[AGG1]interface range g1/0/4 g1/0/5 Bridge-Aggregation 1
3
[AGG1-if-range]port link-type trunk
4
[AGG1-if-range]port trunk permit vlan all

AGG2#

1
[AGG2]vlan 10 20
2
[AGG2]interface range g1/0/4 g1/0/5 Bridge-Aggregation 1
3
[AGG2-if-range]port link-type trunk
4
[AGG2-if-range]port trunk permit vlan all

ACC1#

1
[ACC1]vlan 10 20
2
[ACC1]interface range g1/0/1 g1/0/2
3
[ACC1-if-range]port link-type trunk
4
[ACC1-if-range]port trunk permit vlan all
5
[ACC1-if-range]qu
6
[ACC1]interface range g1/0/3 g1/0/4
7
[ACC1-if-range]port link-type access
8
[ACC1-if-range]port access vlan 10
9
[ACC1-if-range]qu

ACC2#

1
[ACC2]vlan 10 20
2
[ACC2]interface range g1/0/1 g1/0/2
3
[ACC2-if-range]port link-type trunk
4
[ACC2-if-range]port trunk permit vlan all
5
[ACC2-if-range]qu
6
[ACC2]interface range g1/0/3 g1/0/4
7
[ACC2-if-range]port link-type access
8
[ACC2-if-range]port access vlan 20
9
[ACC2-if-range]qu

2.2 配置 ISP 与 R1 的接口地址#

ISP#

1
[ISP]interface g0/0
2
[ISP-GigabitEthernet0/0]ip address 202.100.1.254 24
3
[ISP-GigabitEthernet0/0]qu
4
[ISP]interface loopback 0
5
[ISP-LoopBack0]ip address 8.8.8.8 32
6
[ISP-LoopBack0]qu

R1#

1
[R1]interface g0/0/0
2
[R1-GigabitEthernet0/0/0]ip address 100.1.1.254 24
3
[R1-GigabitEthernet0/0/0]qu
4
[R1]interface g0/0/1
5
[R1-GigabitEthernet0/0/1]ip address 200.1.1.254 24
6
[R1-GigabitEthernet0/0/1]qu
7
[R1]interface g0/0/2
8
[R1-GigabitEthernet0/0/2]ip address 202.100.1.1 24
9
[R1-GigabitEthernet0/0/2]qu

2.3 将 AGG 上联接口切换为三层接口#

WARNING

执行 port link-mode route 时，设备会提示接口配置将恢复为默认值。确认接口无须保留原有二层配置后，再输入 Y。

AGG1#

1
[AGG1]interface g1/0/3
2
[AGG1-GigabitEthernet1/0/3]port link-mode route
3
The configuration of the interface will be restored to the default. Continue? [Y/N]:y
4
[AGG1-GigabitEthernet1/0/3]ip address 100.1.1.1 24

AGG2#

1
[AGG2]interface g1/0/3
2
[AGG2-GigabitEthernet1/0/3]port link-mode route
3
The configuration of the interface will be restored to the default. Continue? [Y/N]:y
4
[AGG2-GigabitEthernet1/0/3]ip address 200.1.1.1 24
5
[AGG2-GigabitEthernet1/0/3]qu

2.4 配置 VLAN 三层接口#

AGG1#

1
[AGG1]interface Vlan-interface 10
2
[AGG1-Vlan-interface10]ip address 10.1.1.1 24
3
[AGG1-Vlan-interface10]qu
4
[AGG1]interface vlan-interface 20
5
[AGG1-Vlan-interface20]ip address 20.1.1.1 24
6
[AGG1-Vlan-interface20]qu

AGG2#

1
[AGG2]interface vlan-interface 10
2
[AGG2-Vlan-interface10]ip address 10.1.1.2 24
3
[AGG2-Vlan-interface10]qu
4
[AGG2]interface vlan-interface 20
5
[AGG2-Vlan-interface20]ip address 20.1.1.2 24
6
[AGG2-Vlan-interface20]qu

技能 3：MSTP——消除环路并实现负载分担#

将 VLAN 10 映射到实例 10，将 VLAN 20 映射到实例 20：

实例 10：AGG1 为主根，AGG2 为备根。
实例 20：AGG2 为主根，AGG1 为备根。

这样可以让 VLAN 10 的二层流量优先经过 AGG1，让 VLAN 20 的二层流量优先经过 AGG2。

IMPORTANT

所有交换机的 MSTP 域属性必须完全一致，包括域名、实例与 VLAN 的映射关系。

3.1 配置 MSTP 域#

AGG1#

1
[AGG1]stp region-configuration
2
[AGG1-mst-region]region-name HSC
3
[AGG1-mst-region]instance 10 vlan 10
4
[AGG1-mst-region]instance 20 vlan 20
5
[AGG1-mst-region]active region-configuration
6
[AGG1-mst-region]qu

AGG2#

1
[AGG2]stp region-configuration
2
[AGG2-mst-region]region-name HSC
3
[AGG2-mst-region]instance 10 vlan 10
4
[AGG2-mst-region]instance 20 vlan 20
5
[AGG2-mst-region]active region-configuration
6
[AGG2-mst-region]qu

ACC1#

1
[ACC1]stp region-configuration
2
[ACC1-mst-region]region-name HSC
3
[ACC1-mst-region]instance 10 vlan 10
4
[ACC1-mst-region]instance 20 vlan 20
5
[ACC1-mst-region]active region-configuration

ACC2#

1
[ACC2]stp region-configuration
2
[ACC2-mst-region]region-name HSC
3
[ACC2-mst-region]instance 10 vlan 10
4
[ACC2-mst-region]instance 20 vlan 20
5
[ACC2-mst-region]active region-configuration

3.2 配置各实例的根桥#

AGG1#

1
[AGG1]stp instance 10 root primary
2
[AGG1]stp instance 20 root secondary
3
[AGG1]stp instance 0 root primary

AGG2#

1
[AGG2]stp instance 10 root secondary
2
[AGG2]stp instance 20 root primary
3
[AGG2]stp instance 0 root secondary

企业网络实验拓扑图

技能 4：VRRP——实现网关冗余与流量分担#

VLAN 10 使用虚拟网关 10.1.1.254，AGG1 的优先级更高；VLAN 20 使用虚拟网关 20.1.1.254，AGG2 的优先级更高。

AGG1#

1
[AGG1]interface vlan-interface 10
2
[AGG1-Vlan-interface10]vrrp vrid 10 virtual-ip 10.1.1.254
3
[AGG1-Vlan-interface10]vrrp vrid 10 priority 120
4
[AGG1-Vlan-interface10]qu
5
[AGG1]interface vlan-interface 20
6
[AGG1-Vlan-interface20]vrrp vrid 20 virtual-ip 20.1.1.254
7
[AGG1-Vlan-interface20]qu

AGG2#

1
[AGG2]interface vlan-interface 10
2
[AGG2-Vlan-interface10]vrrp vrid 10 virtual-ip 10.1.1.254
3
[AGG2-Vlan-interface10]qu
4
[AGG2]interface vlan-interface 20
5
[AGG2-Vlan-interface20]vrrp vrid 20 virtual-ip 20.1.1.254
6
[AGG2-Vlan-interface20]vrrp vrid 20 priority 120
7
[AGG2-Vlan-interface20]qu

企业网络实验拓扑图

技能 5：DHCP——自动分配终端地址#

两台 AGG 都创建 VLAN 10 和 VLAN 20 的 DHCP 地址池，并通过排除地址的方式划分各自负责分配的地址范围，避免地址冲突。

AGG1#

AGG1 为两个网段分配 .151 至 .253 的地址：

1
[AGG1]dhcp enable
2
[AGG1]dhcp server ip-pool vlan10
3
[AGG1-dhcp-pool-hx]network 10.1.1.0 24
4
[AGG1-dhcp-pool-hx]gateway-list 10.1.1.254
5
[AGG1-dhcp-pool-hx]dns-list 114.114.114.114
6
[AGG1-dhcp-pool-hx]qu
7
[AGG1]dhcp server ip-pool vlan20
8
[AGG1-dhcp-pool-xh]network 20.1.1.0 24
9
[AGG1-dhcp-pool-xh]gateway-list 20.1.1.254
10
[AGG1-dhcp-pool-xh]dns-list 114.114.114.114
11
[AGG1-dhcp-pool-xh]qu
12
[AGG1]dhcp server forbidden-ip 10.1.1.1 10.1.1.150
13
[AGG1]dhcp server forbidden-ip 20.1.1.1 20.1.1.150

AGG2#

AGG2 为两个网段分配 .1 至 .150 中未被占用的地址：

1
[AGG2]dhcp enable
2
[AGG2]dhcp server ip-pool vlan10
3
[AGG2-dhcp-pool-hx]network 10.1.1.0 24
4
[AGG2-dhcp-pool-hx]gateway-list 10.1.1.254
5
[AGG2-dhcp-pool-hx]dns-list 114.114.114.114
6
[AGG2-dhcp-pool-hx]qu
7
[AGG2]dhcp server ip-pool vlan20
8
[AGG2-dhcp-pool-xh]network 20.1.1.0 24
9
[AGG2-dhcp-pool-xh]gateway-list 20.1.1.254
10
[AGG2-dhcp-pool-xh]dns-list 114.114.114.114
11
[AGG2-dhcp-pool-xh]qu
12
[AGG2]dhcp server forbidden-ip 10.1.1.151 10.1.1.253
13
[AGG2]dhcp server forbidden-ip 20.1.1.151 20.1.1.253

配置完成后，PC 即可通过 DHCP 自动获取 IP 地址、默认网关和 DNS 服务器地址。

技能 6：NAT——让内网访问互联网#

在 R1 上创建 ACL 3000 匹配内网流量，并在连接 ISP 的出接口上配置 Easy IP。

1
[R1]acl advanced 3000
2
[R1-acl-ipv4-adv-3000]rule permit ip
3
[R1-acl-ipv4-adv-3000]qu
4
[R1]interface g0/0/2
5
[R1-GigabitEthernet0/0/2]nat outbound 3000
6
[R1-GigabitEthernet0/0/2]qu

技能 7：静态路由——打通内外网并控制回程路径#

7.1 配置默认路由#

AGG1 与 AGG2 的默认路由指向 R1，R1 的默认路由指向 ISP。

1
[AGG1]ip route-static 0.0.0.0 0 100.1.1.254
2
[AGG2]ip route-static 0.0.0.0 0 200.1.1.254
3
[R1]ip route-static 0.0.0.0 0 202.100.1.254

7.2 配置浮动静态路由#

通过不同的 Preference 值控制回程流量：

返回 VLAN 10 的流量优先经过 AGG1，AGG2 作为备份路径。
返回 VLAN 20 的流量优先经过 AGG2，AGG1 作为备份路径。
Preference 值越小，路由优先级越高。

1
[R1]ip route-static 10.1.1.0 24 100.1.1.1 preference 30
2
[R1]ip route-static 10.1.1.0 24 200.1.1.1 preference 90
3
[R1]ip route-static 20.1.1.0 24 100.1.1.1 preference 90
4
[R1]ip route-static 20.1.1.0 24 200.1.1.1 preference 30

技能 8：Telnet——实现 R1 远程管理#

在 R1 上创建本地管理用户，允许其通过 Telnet 登录，并授予网络管理员权限。

1
[R1]local-user dajie class manage
2
[R1-luser-manage-hx]password simple 123456.com
3
[R1-luser-manage-hx]service-type telnet
4
[R1-luser-manage-hx]authorization-attribute user-role network-admin
5
[R1]user-interface vty 0 4
6
[R1-line-vty0-4]authentication-mode scheme
7
[R1]telnet server enable

CAUTION

Telnet 以明文方式传输账号和密码，仅建议在隔离的实验环境中使用。生产网络应优先使用 SSH，并配置强密码和访问控制策略。

三、验证实验效果#

配置完成后，建议按以下顺序检查：

PC 是否能通过 DHCP 获取正确的 IP 地址、网关和 DNS。
VLAN 10 与 VLAN 20 的终端是否能够互通。
PC 是否能够 Ping 通 R1 的内网接口。
PC 是否能够 Ping 通 ISP 的测试地址 8.8.8.8。
MSTP 各实例的根桥和阻塞端口是否符合规划。
VLAN 10 的 VRRP Master 是否为 AGG1。
VLAN 20 的 VRRP Master 是否为 AGG2。
断开一条聚合成员链路后，核心互联是否仍然正常。
模拟主路径故障后，浮动静态路由是否能够接管流量。
内网 PC 是否能够通过 Telnet 登录 R1。

企业网络实验拓扑图

四、写在最后#

这个实验覆盖了企业网络中最常用的 8 项核心技能。真正有价值的地方，不是把每条命令背下来，而是理解它们如何协同工作：

VLAN 负责业务隔离；
MSTP 负责二层防环与路径分担；
链路聚合负责提升核心互联的带宽与可靠性；
VRRP 负责网关冗余；
DHCP 负责终端地址自动分配；
静态路由负责三层选路；
NAT 负责内网访问互联网；
Telnet 负责实验环境中的远程管理。

建议先在 H3C 模拟器中完整搭建一遍，再尝试主动断开链路、关闭设备或修改优先级，观察网络如何收敛与切换。能独立完成配置、排错和验证，才算真正掌握了这个实验。

STP 生成树原理及应用场景

Wed, 22 Jul 2026 00:00:00 GMT

STP 与 RSTP 生成树拓扑及保护机制示意图

一句话理解

生成树的本质：物理链路保留冗余，逻辑转发保持无环。 正常情况下阻塞一部分链路；主链路故障后，再让备用链路接替转发。

本文将从三个问题展开：

为什么二层网络需要生成树？
STP 与 RSTP 的收敛机制有什么区别？
根保护、BPDU 保护和 TC 保护应该部署在哪里？

为什么需要生成树#

在二层交换网络中，为了提高可靠性，交换机之间通常会部署冗余链路。但二层以太网帧没有类似 IP 数据包中 TTL 的机制，如果所有冗余链路同时转发流量，可能产生广播风暴、MAC 地址表漂移和重复帧等问题。

生成树协议（Spanning Tree Protocol，STP）通过逻辑阻塞部分冗余链路，将存在环路的物理拓扑裁剪成一棵无环的逻辑树。当正在使用的链路发生故障时，被阻塞的冗余链路可以重新参与计算并恢复转发。

flowchart LR A["交换机 A 根桥"] ---|"转发链路"| B["交换机 B"] A ---|"转发链路"| C["交换机 C"] B -.-|"阻塞链路 备用路径"| C classDef root fill:#f59e0b,color:#fff,stroke:#d97706,stroke-width:2px classDef switch fill:#3b82f6,color:#fff,stroke:#2563eb,stroke-width:2px class A root class B,C switch

没有生成树会发生什么？

广播帧可能在环路中不断复制，交换机反复学习同一 MAC 地址，最终出现广播风暴、MAC 地址漂移和重复帧，严重时会导致整个二层网络不可用。

STP 的选举过程#

STP 通过交换 BPDU（Bridge Protocol Data Unit，网桥协议数据单元）选举根桥并计算无环路径。其基本过程如下：

选举根桥（Root Bridge）：Bridge ID 最小的交换机成为根桥。Bridge ID 由桥优先级和 MAC 地址组成，优先比较优先级，越小越优。
选举根端口（Root Port，RP）：每台非根桥上，到达根桥路径开销最小的端口成为根端口。每台非根桥通常只有一个根端口。
选举指定端口（Designated Port，DP）：每个二层网段上，到达根桥路径最优的端口成为该网段的指定端口。根桥上的活动端口通常都是指定端口，但指定端口并不只存在于根桥上。
阻塞其他端口：既不是根端口也不是指定端口的端口进入阻塞状态，从而消除二层环路。

flowchart LR START(["开始选举"]) --> ROOT["比较 Bridge ID 选出根桥"] ROOT --> RP["非根桥比较根路径开销 选出根端口 RP"] RP --> DP["每个网段比较最优 BPDU 选出指定端口 DP"] DP --> BLOCK["其余冗余端口阻塞 形成无环逻辑树"] classDef key fill:#8b5cf6,color:#fff,stroke:#7c3aed,stroke-width:2px class ROOT,RP,DP key

记忆顺序

先选根桥，再选根端口，然后选指定端口，最后阻塞剩余端口。

关于“备用根桥”

STP 标准本身没有单独定义“备份根桥”这一运行角色，但工程中可以通过设置次低优先级，预先指定一台交换机作为备用根桥。

传统 STP 的五种端口状态#

IEEE 802.1D STP 定义了五种端口状态：

状态	是否转发数据	是否学习 MAC	说明
Disabled（禁用）	否	否	端口关闭，或没有参与生成树计算
Blocking（阻塞）	否	否	接收并处理 BPDU，但不转发普通数据帧
Listening（侦听）	否	否	参与生成树计算，等待拓扑稳定，默认持续 15 秒
Learning（学习）	否	是	开始学习源 MAC 地址，默认持续 15 秒
Forwarding（转发）	是	是	正常转发数据帧并学习 MAC 地址

flowchart LR DIS["Disabled 禁用"] --> BLO["Blocking 阻塞"] BLO --> LIS["Listening 15 秒"] LIS --> LEA["Learning 15 秒"] LEA --> FOR["Forwarding 转发"] classDef inactive fill:#64748b,color:#fff,stroke:#475569 classDef waiting fill:#f59e0b,color:#fff,stroke:#d97706 classDef active fill:#22c55e,color:#fff,stroke:#16a34a class DIS,BLO inactive class LIS,LEA waiting class FOR active

传统 STP 的端口从阻塞状态恢复到转发状态，通常需要经历 Listening 和 Learning 两个阶段，默认共约 30 秒。

如果故障不能由端口物理状态直接感知，交换机还需要等待旧 BPDU 信息老化。默认 Max Age 为 20 秒，因此极端情况下收敛时间可能达到约 50 秒：

1
20 秒（等待 BPDU 老化）+ 15 秒（Listening）+ 15 秒（Learning）= 50 秒

这些数值是基于默认计时器的典型结果，实际时间会受拓扑、设备实现和计时器配置影响。

两类收敛时间

直接故障通常可由端口状态立即感知，典型收敛约 30 秒；间接故障还可能需要等待 20 秒 BPDU 老化，极端情况下约 50 秒。

STP 的拓扑变化通知#

在传统 STP 中，非根桥检测到拓扑变化后，会通过根端口向上游发送 TCN BPDU。上游交换机逐级确认并继续向根桥转发通知。根桥收到通知后，在配置 BPDU 中设置 TC 标志，并向整个生成树传播拓扑变化信息，使交换机缩短相关 MAC 地址表项的老化时间。

传统 STP 没有标准化的边缘端口角色。厂商提供的 PortFast 等机制可以让终端接入端口快速进入转发状态，但它们属于增强特性。

RSTP 的改进#

RSTP（Rapid Spanning Tree Protocol，IEEE 802.1w，后并入 IEEE 802.1D）在兼容 STP 基本思想的同时，重新设计了端口状态、端口角色和协商机制，显著缩短了收敛时间。

三种端口状态#

RSTP 将 STP 的 Disabled、Blocking 和 Listening 合并为 Discarding 状态：

状态	是否转发数据	是否学习 MAC	对应传统 STP 状态
Discarding（丢弃）	否	否	Disabled、Blocking、Listening
Learning（学习）	否	是	Learning
Forwarding（转发）	是	是	Forwarding

flowchart LR DIS["Discarding 丢弃"] --> LEA["Learning 学习"] --> FOR["Forwarding 转发"] OLD["STP 的 Disabled Blocking Listening"] -.->|"合并"| DIS classDef inactive fill:#64748b,color:#fff,stroke:#475569 classDef waiting fill:#f59e0b,color:#fff,stroke:#d97706 classDef active fill:#22c55e,color:#fff,stroke:#16a34a class DIS,OLD inactive class LEA waiting class FOR active

端口角色#

RSTP 常见的端口角色包括：

Root Port（RP，根端口）：非根桥到达根桥的最佳路径。
Designated Port（DP，指定端口）：所在网段上到达根桥路径最优的端口。
Alternate Port（AP，替代端口）：根端口的备用路径。当前根端口故障后，替代端口可以快速接替。
Backup Port（BP，备份端口）：同一交换机连接到同一共享网段时，指定端口的备用端口，实际网络中较少见。
Disabled Port（禁用端口）：未参与生成树的端口。

Alternate Port 和 Backup Port 在正常情况下都处于 Discarding 状态，但它们备份的对象不同。

AP 与 BP 不要混淆

Alternate Port 备份根端口，Backup Port 备份指定端口。 实际组网中更常见的是 Alternate Port。

快速收敛机制#

RSTP 的快速收敛主要依靠以下机制：

为根端口提供 Alternate Port 作为快速备份；
点到点链路上的指定端口通过 Proposal/Agreement（P/A）机制快速进入转发状态；
边缘端口可以直接进入 Forwarding 状态；
每台交换机都主动周期性发送 RST BPDU，不再只是简单转发根桥生成的 BPDU；
连续三个 Hello Time 没有收到预期 BPDU 时，可以快速判断邻居信息失效。默认 Hello Time 为 2 秒，因此通常为 6 秒。

RSTP 没有一个适用于所有拓扑的固定“1 秒收敛”结论。在满足点到点链路、角色明确且 P/A 协商正常等条件时，切换可以在很短时间内完成；实际收敛时间仍取决于故障类型、链路类型和设备实现。

sequenceDiagram participant U as 上游指定端口 participant D as 下游交换机 U->>D: Proposal（提议） Note over D: 阻塞其他非边缘指定端口 完成同步 D-->>U: Agreement（同意） Note over U,D: 相关端口快速进入 Forwarding

RSTP 的拓扑变化通知#

RSTP 不再使用传统的 TCN BPDU逐级通知机制。非边缘端口进入 Forwarding 状态时，检测到变化的交换机会在自己的 RST BPDU 中设置 TC 标志，并从根端口和指定端口向外传播。其他交换机收到后会清除相关端口学习到的动态 MAC 地址，并继续传播 TC 信息。

因此，“只有根桥才能发送 TC 信息”并不适用于 RSTP。

STP 与 RSTP 对比#

对比项	STP	RSTP
标准	IEEE 802.1D	IEEE 802.1w，后并入 802.1D
端口状态	5 种	3 种
备用路径	通过重新计算启用	Alternate/Backup 角色提供快速切换
快速协商	无	P/A 机制
边缘端口	标准中无此角色	原生支持
拓扑变化通知	TCN BPDU 逐级上报根桥	检测设备直接在 RST BPDU 中设置 TC 标志并扩散
收敛速度	通常较慢，默认可能为 30～50 秒	通常为秒级，部分故障可更快

工程应用与安全保护#

命令说明

以下命令以华为 VRP 风格为例。不同厂商、设备型号和系统版本的命令可能不同，部署前应以对应设备文档为准。

保护机制	主要防范的问题	推荐部署位置
Root Protection	非法或误配置设备抢占根桥	面向下级交换机的指定端口
BPDU Protection	边缘端口误接交换机、私接环路或 BPDU 攻击	连接电脑、服务器等终端的边缘端口
TC Protection	大量 TC 报文导致 MAC 表频繁刷新	全局配置，限制 TC 报文处理速率

1. 根保护（Root Protection）#

假设现网已经完成生成树规划，核心交换机 LSW1 是根桥。LSW3 的下联接口未来可能接入新的交换机 LSW4。为了避免 LSW4 发送更优 BPDU 并抢占根桥，可在 LSW3 面向 LSW4 的指定端口上配置根保护：

1
[LSW3-GigabitEthernet0/0/4] stp root-protection

启用根保护后，如果该端口收到更优 BPDU，端口会进入丢弃状态，防止它成为根端口；更优 BPDU 消失一段时间后，端口通常可以自动恢复。

部署原则

根保护应部署在不应该出现根桥的下联方向，不能配置在正常的根端口上。

2. BPDU 保护（BPDU Protection）#

边缘端口通常连接电脑、服务器等终端，正常情况下不应收到 BPDU。如果有人误接交换机、私接设备形成环路，或者向网络发送伪造 BPDU，可能引起生成树重新计算。

可以全局启用 BPDU 保护，并将终端接入端口设置为边缘端口：

1
[Switch] stp bpdu-protection
2
[Switch-GigabitEthernet0/0/1] stp edged-port enable

受到保护的边缘端口一旦收到 BPDU，设备会将端口置为 Error-Down，从而隔离风险。若业务允许自动恢复，可以配置恢复原因和时间，例如：

1
[Switch] error-down auto-recovery cause bpdu-protection interval 30

谨慎配置自动恢复

如果环路或攻击源仍然存在，端口恢复后可能再次被关闭。边缘端口本身主要用于快速上线并避免终端状态变化触发拓扑变更，BPDU 保护才负责在收到 BPDU 时关闭端口。

3. TC 保护（TC Protection）#

攻击者或异常设备持续发送大量拓扑变化报文，可能导致交换机频繁刷新 MAC 地址表，增加未知单播泛洪并消耗设备资源。TC 保护用于限制单位时间内处理 TC 报文的次数。

华为设备上的配置示例：

1
[Switch] stp tc-protection interval 2
2
[Switch] stp tc-protection threshold 3

上述配置表示以 2 秒为一个保护周期，周期内即时处理的 TC 报文数量阈值为 3。超出阈值的报文如何延后处理，应以具体设备版本的实现为准。

4. 配置主根桥和备用根桥#

为了保持二层拓扑稳定，应主动规划根桥位置，而不是完全依赖默认 Bridge ID 选举。通常将性能较高、位置靠近网络中心的核心交换机设置为主根桥，将另一台核心或汇聚交换机设置为备用根桥：

主根桥：

1
[Core-1] stp root primary

备用根桥：

1
[Core-2] stp root secondary

这些命令本质上通过调整桥优先级影响根桥选举。这样即使设备重启或新交换机接入，根桥位置也不容易意外变化，从而减少拓扑震荡。

常见应用场景#

生成树协议常用于以下场景：

园区网接入与汇聚层冗余：接入交换机双上联到两台汇聚交换机，链路故障时由备用路径接替。
服务器或存储网络的二层冗余：在必须保留二层网络的环境中防止冗余链路形成环路。
核心与汇聚层的环形或网状连接：通过阻塞部分链路构建无环逻辑拓扑。
临时网络和实验环境：降低误接网线或私接交换机引发广播风暴的风险。

在规模较大的网络中，单实例 STP/RSTP 可能造成部分链路长期闲置。此时可以根据设备能力和设计目标选择 MSTP、按 VLAN 运行的生成树协议，或通过链路聚合、堆叠、M-LAG、三层路由等技术优化拓扑。

选型建议

小型二层网络可优先使用 RSTP；需要多个生成树实例或按 VLAN 分担链路时可考虑 MSTP。更大规模的网络应尽量缩小二层故障域，并评估三层到接入、堆叠或 M-LAG 等架构。

总结#

STP 的核心目标是在保留物理冗余的同时消除二层环路。传统 STP 依赖计时器逐步完成状态切换，收敛速度较慢；RSTP 通过新增端口角色、P/A 协商、边缘端口和更直接的拓扑变化传播机制，实现了更快的故障恢复。

实际部署时，除了理解选举和收敛原理，还应主动规划主、备用根桥，并结合根保护、BPDU 保护和 TC 保护约束网络边界，避免错误接线或异常 BPDU 破坏现网拓扑。

MySQL 命令最全详解

Mon, 20 Jul 2026 00:00:00 GMT

🗄️ MySQL 命令最全详解#

💡 本文目标：系统梳理 MySQL 最核心的命令，覆盖从登录连接到性能优化的完整链路。
无论你是开发还是运维，这份速查手册都能帮助你在日常工作中快速定位所需命令。

📑 目录#

序号	命令	描述	使用频率
1	`mysql`	登录数据库	⭐⭐⭐
2	`SHOW DATABASES`	查看所有数据库	⭐⭐⭐
3	`CREATE DATABASE`	创建数据库	⭐⭐
4	`USE`	切换数据库	⭐⭐⭐
5	`SHOW TABLES`	查看所有表	⭐⭐⭐
6	`CREATE TABLE`	创建数据表	⭐⭐
7	`INSERT`	插入数据	⭐⭐⭐
8	`SELECT`	查询数据	⭐⭐⭐
9	`UPDATE`	修改数据	⭐⭐⭐
10	`DELETE`	删除数据	⭐⭐
11	`ALTER TABLE`	修改表结构	⭐⭐
12	`DROP`	删除数据库对象	⭐
13	`EXPLAIN`	SQL 执行计划	⭐⭐⭐

1. mysql（登录数据库）#

进入 MySQL 的入口命令。

本地登录#

Terminal window

1
mysql -u root -p

输入密码即可登录。

远程登录#

Terminal window

1
mysql -h 192.168.10.100 -P 3306 -u root -p

参数说明#

参数	说明
`-h`	主机 IP
`-P`	端口
`-u`	用户名
`-p`	密码

⚠️ 注意：-p 与密码之间没有空格，如果直接在命令行输入密码会有安全风险，建议只写 -p 然后回车输入。

2. SHOW DATABASES#

查看所有数据库。

1
SHOW DATABASES;

输出示例：

1
mysql
2
information_schema
3
performance_schema
4
sys
5
order_db

🔍 线上排查数据库时经常使用，快速确认目标数据库是否存在。

3. CREATE DATABASE#

创建数据库。

基本创建#

1
CREATE DATABASE order_db;

指定字符集#

1
CREATE DATABASE order_db
2
CHARACTER SET utf8mb4;

✅ 最佳实践：推荐统一使用 utf8mb4，支持完整的 Unicode 字符（包括 Emoji），避免乱码问题。

4. USE#

切换数据库。

1
USE order_db;

查看当前所在数据库：

1
SELECT DATABASE();

📌 开发过程中几乎每天都会使用。

5. SHOW TABLES#

查看数据库中的所有表。

1
SHOW TABLES;

输出示例：

1
user
2
order
3
product

查看表结构#

1
DESC user;

查看建表语句#

1
SHOW CREATE TABLE user;

🔍 线上迁移数据库时经常需要查看完整的建表语句。

6. CREATE TABLE#

创建数据表。

1
CREATE TABLE user (
2
    id          BIGINT PRIMARY KEY AUTO_INCREMENT,
3
    username    VARCHAR(50),
4
    age         INT,
5
    create_time DATETIME
6
);

查看建表语句#

1
SHOW CREATE TABLE user;

📌 线上迁移数据库时经常需要。

7. INSERT#

插入数据。

单条插入#

1
INSERT INTO user (username, age)
2
VALUES ('Tom', 20);

批量插入#

1
INSERT INTO user (username, age)
2
VALUES
3
    ('Tom', 20),
4
    ('Jack', 22),
5
    ('Lucy', 18);

⚡ 性能提示：批量插入性能远高于循环单条插入，大批量数据导入时务必使用批量方式。

8. SELECT#

MySQL 最核心命令。

查询全部#

1
SELECT * FROM user;

条件查询#

1
SELECT *
2
FROM user
3
WHERE age > 20;

排序#

1
SELECT *
2
FROM user
3
ORDER BY age DESC;

分页#

1
SELECT *
2
FROM user
3
LIMIT 0, 10;

聚合统计#

1
SELECT COUNT(*)
2
FROM user;

📊 SELECT 是线上出现频率最高的命令，掌握各种查询语法是 MySQL 的基本功。

9. UPDATE#

修改数据。

单条更新#

1
UPDATE user
2
SET age = 25
3
WHERE id = 1;

批量更新#

1
UPDATE user
2
SET age = age + 1
3
WHERE age < 18;

⚠️ 危险操作#

1
UPDATE user
2
SET age = 25;

🚨 没有 WHERE 条件会修改整张表！这是线上事故高发区。
安全建议：

更新前先用 SELECT 查出受影响的数据

确认 WHERE 条件无误后再执行 UPDATE

生产环境建议加 LIMIT 限制影响行数

10. DELETE#

删除数据。

删除指定记录#

1
DELETE FROM user
2
WHERE id = 1;

删除全部#

1
DELETE FROM user;

危险操作#

1
DELETE FROM user
2
WHERE 1 = 1;

🚨 生产环境必须谨慎执行！

DELETE 删除的数据可以通过事务回滚（如果未提交）

如果要清空整张表，TRUNCATE TABLE 更快（但不可回滚）

删除前务必确认 WHERE 条件

11. ALTER TABLE#

修改表结构。线上版本迭代最常见命令之一。

新增字段#

1
ALTER TABLE user
2
ADD email VARCHAR(100);

修改字段#

1
ALTER TABLE user
2
MODIFY email VARCHAR(200);

删除字段#

1
ALTER TABLE user
2
DROP COLUMN email;

添加索引#

1
ALTER TABLE user
2
ADD INDEX idx_username (username);

⚠️ 线上注意：ALTER TABLE 在大表上可能锁表，生产环境建议在低峰期执行或使用 pt-online-schema-change 等工具。

12. DROP#

删除数据库对象。

删除表#

1
DROP TABLE user;

删除数据库#

1
DROP DATABASE order_db;

🚨 执行前建议先确认：
1
SHOW TABLES;
确认后再操作，DROP 不可回滚。

13. EXPLAIN#

SQL 优化最重要命令。

查看执行计划#

1
EXPLAIN
2
SELECT *
3
FROM user
4
WHERE username = 'Tom';

典型结果#

字段	含义
`type`	访问类型
`key`	使用的索引
`rows`	扫描行数
`Extra`	额外信息

重点关注#

`type` — 访问类型#

type 值	性能	说明
`system`	最好	表只有一行
`const`	极好	主键 / 唯一索引等值查询
`eq_ref`	极好	关联查询使用主键或唯一索引
`ref`	好	非唯一索引等值查询
`range`	较好	索引范围扫描
`index`	一般	扫描整个索引树
`ALL`	最差	全表扫描，性能最差

🚨 type = ALL 表示全表扫描，是优化的首要目标。

`rows` — 扫描行数#

扫描数据量越大越慢，应通过索引将 rows 降到最低。

`Extra` — 额外信息#

Extra 值	说明
`Using index`	✅ 覆盖索引，无需回表
`Using filesort`	⚠️ 额外排序，需优化
`Using temporary`	⚠️ 使用临时表，需优化
`Using where`	使用 WHERE 过滤

🎯 Using filesort 和 Using temporary 是优化的重点对象。

📝 总结#

场景	推荐命令
日常查询	`SELECT` / `WHERE` / `ORDER BY` / `LIMIT`
数据变更	`INSERT` / `UPDATE` / `DELETE`
表结构管理	`CREATE TABLE` / `ALTER TABLE` / `DROP`
性能排查	`EXPLAIN`
安全操作	先 `SELECT` 再 `UPDATE` / `DELETE`

💡 核心原则：写 SQL 前，先想清楚你要操作哪些数据；执行前，先确认条件是否正确。

集成朋友圈与笔记本功能

Sun, 21 Jun 2026 00:00:00 GMT

提示

本文是在博主团子和蛋糕文章：用 GitHub Gist 做博客后端：零成本的说说与笔记方案基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

目录结构#

以下是朋友圈和笔记本功能相关的核心目录结构：

1
Firefly-hyde/
2
├── astro.config.mjs                                    # 修改 - 添加路径别名
3
│
4
├── src/
5
│   ├── components/
6
│   │   └── moments/                                    # 新增目录
7
│   │       ├── MomentCard.astro                       # 新增 - 朋友圈卡片组件
8
│   │       └── MomentsCover.astro                     # 新增 - 朋友圈封面组件
9
│   │
10
│   ├── config/
11
│   │   ├── externalMomentsConfig.ts                   # 新增 - 朋友圈配置
12
│   │   ├── externalNotebooksConfig.ts                 # 新增 - 笔记本配置
13
│   │   ├── navBarConfig.ts                            # 修改 - 添加导航链接
14
│   │   └── siteConfig.ts                              # 修改 - 添加封面配置
15
│   │
16
│   ├── content/
17
│   │   ├── config.ts                                  # 修改 - 添加moments集合
18
│   │   └── moments/                                    # 新增目录
19
│   │       └── *.md                                   # 新增 - 本地朋友圈内容文件
20
│   │
21
│   ├── data/
22
│   │   └── moments.ts                                 # 新增 - 获取远程朋友圈数据脚本
23
│   │
24
│   ├── pages/
25
│   │   ├── admin/                                     # 新增目录
26
│   │   │   ├── index.astro                           # 新增 - 登录页
27
│   │   │   ├── moments.astro                         # 新增 - 朋友圈管理
28
│   │   │   └── notebooks.astro                       # 新增 - 笔记本管理
29
│   │   ├── life/notebooks/
30
│   │   │   └── remote-entry.astro                    # 新增 - 远程笔记页
31
│   │   ├── moments.astro                              # 新增 - 朋友圈主页
32
│   │   └── moments/
33
│   │       └── pinned.astro                           # 新增 - 精选朋友圈
34
│   │
35
│   ├── types/
36
│   │   └── siteConfig.ts                              # 修改 - 添加momentsCover类型
37
│   │
38
│   └── utils/
39
│       ├── content-utils.ts                           # 修改 - 添加数据获取
40
│       └── gist-api.ts                                # 新增 - Gist API工具
41
└──

展开收起

新增朋友圈/封面卡片组件#

文件路径：src/components/moments/MomentCard.astro和src/components/moments/MomentsCover.astro

完整代码：MomentCard.astro

完整代码：MomentsCover.astro

创建 Gist API 工具文件#

文件路径: src/utils/gist-api.ts

完整代码: gist-api.ts

创建朋友圈配置#

文件路径: src/config/externalMomentsConfig.ts

1
// 外部朋友圈数据源配置（基于 GitHub Gist，完全免费）
2
// 数据存储在 GitHub Gist 中，通过 GitHub API 读写
3

4
export const externalMomentsConfig = {
5
    // 是否启用外部朋友圈数据源
6
    enable: true,
7

8
    // GitHub Gist ID（创建 Gist 后从 URL 中获取）
9
    // 替换为你的 Gist ID。https://gist.github.com/Seasir-Hyde/xxxx，其中 xxxx 即为 Gist ID
10
    gistId: "替换为你的 Gist ID",
11

12
    // Gist 中的文件名
13
    fileName: "moments.json",
14

15
    // 默认作者信息
16
    defaultAuthor: "Hyde",
17
    defaultAvatar: "https://你的头像URL.jpg",
18

19
    // 后台登录密码的 SHA-256 哈希
20
    // 生成方式：在线工具:https://www.strongpasswordgenerator.org/zh-cn/sha256-hash-generator/
21
    adminPasswordHash:
22
        "b5d9ded2ab2812e8653f06fc4d3246a4b13642e8371bc74a7f1003eb4fb4e637",
23

24
    // GitHub Token（优先从环境变量 GITHUB_TOKEN 读取）
25
    githubToken: process.env.GITHUB_TOKEN || "",
26
};

展开收起

创建笔记本配置#

文件路径: src/config/externalNotebooksConfig.ts

1
// 外部笔记数据源配置（基于 GitHub Gist）
2
// 每个笔记本有独立的 Gist 仓库
3

4
export const externalNotebooksConfig = {
5
    // 是否启用外部笔记数据源
6
    enable: true,
7

8
    // 每个笔记本对应的 Gist ID
9
    // 在 https://gist.github.com 创建 Secret Gist，文件名 notebooks-entries.json，内容 []
10
    notebookGists: {
11
        "每日总结": "your-gist-id-here",
12
        "日记": "your-gist-id-here",
13
        "日常琐记": "your-gist-id-here",
14
        "学习笔记": "your-gist-id-here",
15
    } as Record<string, string>,
16

17
    // 笔记模板（Admin 页面快速选择）
18
    // {name} 会被替换为今天的日期
19
    templates: [
20
        {
21
            id: "daily",
22
            icon: "📝",
23
            name: "每日总结",
24
            title: "{name} 每日总结",
25
            content: "📍今天做了什么：\n📅今日感想：\n🔮明日计划：",
26
        },
27
        {
28
            id: "diary",
29
            icon: "📔",
30
            name: "日记",
31
            title: "{name}",
32
            content: "## 天气\n\n## 今天发生了什么\n\n## 心情\n\n",
33
        },
34
        {
35
            id: "reading",
36
            icon: "📚",
37
            name: "读书笔记",
38
            title: "",
39
            content: "## 📚 书籍信息\n\n- 书名：\n- 作者：\n\n## 核心观点\n\n## 我的感想\n\n",
40
        },
41
        {
42
            id: "free",
43
            icon: "📄",
44
            name: "空白",
45
            title: "",
46
            content: "",
47
        },
48
    ] as Array<{
49
        id: string;
50
        icon: string;
51
        name: string;
52
        title: string;
53
        content: string;
54
    }>,
55

56
    // 后台登录密码的 SHA-256 哈希（与朋友圈后台共用同一密码）
57
    adminPasswordHash:
58
        "b5d9ded2ab2812e8653f06fc4d3246a4b13642e8371bc74a7f1003eb4fb4e637",
59

60
    // GitHub Token
61
    githubToken: process.env.GITHUB_TOKEN || "",
62
};

展开收起

修改站点配置#

文件路径: src/config/siteConfig.ts

操作: 添加朋友圈封面配置

插入位置: 在 defaultAvatar 配置之后

添加代码:

1
// 朋友圈页面封面配置（微信朋友圈风格）
2
momentsCover: {
3
    enable: true,
4
    image: "https://你的封面图片URL.jpg",
5
},

修改类型定义#

文件路径: src/types/siteConfig.ts

1
// 朋友圈页面封面配置
2
momentsCover: {
3
    enable: boolean;
4
  image?: string;
5
},

修改导航栏配置#

文件路径: src/config/navBarConfig.ts

修改1 - 添加朋友圈链接:

在导航链接列表中添加：

1
LinkPresets.Moments,

修改2 - 定义链接预设:

在 LinkPresets 对象中添加：

1
Moments: {
2
  name: "朋友圈",
3
  url: "/moments/",
4
  icon: "mdi:wechat",
5
},

修改3 - 添加登录链接:

文件路径：src/components/layout/Navbar.astro

1
<LightDarkSwitch client:load></LightDarkSwitch>
2
    <a aria-label="Admin" href="/admin/" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90">
3
        <Icon is:inline name="material-symbols:account-circle" class="text-[1.25rem]"></Icon>
4
    </a>

修改内容配置#

文件路径: src/content.config.ts

1
// 朋友圈集合
2
const momentsCollection = defineCollection({
3
    loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/moments" }),
4
    schema: ({ image }) =>
5
        z.object({
6
            author: z.string().optional().default(""),
7
            avatar: z.string().optional().default(""),
8
            pinned: z.boolean().optional().default(false),
9
            published: z.date(),
10
            images: z
11
                .array(image().or(z.string()))
12
                .or(z.string())
13
                .optional()
14
                .default([]),
15
            tags: z.array(z.string()).optional().default([]),
16
            location: z.string().optional().default(""),
17
            device: z.string().optional().default(""),
18
        }),
19
});
20

21
// 导出朋友圈集合
22
export const collections = {
23
    posts: postsCollection,
24
    spec: specCollection,
25
    ziyuan: ziyuanCollection,
26
    moments: momentsCollection,  // 朋友圈集合
27
};

展开收起

创建朋友圈数据获取脚本#

文件路径: src/data/moments.ts

提示

此脚本从布局文件抽离，便于维护。负责从 GitHub Gist 加载朋友圈数据并动态插入页面。

完整代码: moments.ts

创建精选朋友圈页面#

文件路径: src/pages/moments/pinned.astro

完整代码: pinned.astro

Admin 管理后台#

创建登录页#

文件路径: src/pages/admin/index.astro

核心功能: SHA-256 密码验证，登录成功后存储 token 到 localStorage

完整代码: index.astro

创建朋友圈管理页#

文件路径: src/pages/admin/moments.astro

核心功能:

从 Gist 读取朋友圈数据
新增/编辑/删除朋友圈
支持图片上传（转为 base64）
支持置顶、标签、位置

完整代码: moments.astro

创建笔记本管理页#

文件路径: src/pages/admin/notebooks.astro

核心功能:

多笔记本支持
笔记模板选择
Markdown 编辑
时间线展示

完整代码: notebooks.astro

环境变量配置#

文件路径: .env

1
# GitHub Token（用于 Gist API 认证）
2
# 获取方式：https://github.com/settings/tokens
3
# 需要 gist 权限
4
GITHUB_TOKEN=your_github_token_here

路径别名配置#

修改 Astro 配置#

文件路径: astro.config.mjs

1
import { defineConfig } from 'astro/config';
2

3
export default defineConfig({
4
    vite: {
5
        resolve: {
6
            alias: {
7
                "@": "./src",
8
                "@components": "./src/components",
9
                "@layouts": "./src/layouts",
10
                "@config": "./src/config",
11
                "@utils": "./src/utils",
12
                "@data": "./src/data",
13
            },
14
        },
15
    },
16
});

展开收起

文件清单#

文件路径	操作	说明
`src/utils/gist-api.ts`	新建	Gist API 工具函数
`src/config/externalMomentsConfig.ts`	新建	朋友圈配置
`src/config/externalNotebooksConfig.ts`	新建	笔记本配置
`src/config/siteConfig.ts`	修改	添加封面配置
`src/config/navBarConfig.ts`	修改	添加导航链接
`src/types/siteConfig.ts`	修改	添加类型定义
`src/content.config.ts`	修改	添加 moments 集合
`src/data/moments.ts`	新建	朋友圈数据获取脚本
`src/utils/content-utils.ts`	修改	添加数据获取
`src/components/moments/MomentCard.astro`	新建	朋友圈卡片组件
`src/components/moments/MomentsCover.astro`	新建	朋友圈封面组件
`src/pages/moments.astro`	新建	朋友圈主页
`src/pages/moments/pinned.astro`	新建	精选朋友圈
`src/pages/admin/index.astro`	新建	登录页
`src/pages/admin/moments.astro`	新建	朋友圈管理
`src/pages/admin/notebooks.astro`	新建	笔记本管理
`src/pages/life/notebooks/remote-entry.astro`	新建	远程笔记页
`.env`	新建	环境变量配置
`astro.config.mjs`	修改	添加路径别名

隐藏封面图

Wed, 03 Jun 2026 00:00:00 GMT

添加类型定义#

文件路径：src/types/config.ts

1
// 文章列表布局配置
2
  postListLayout: {
3
    allowCoverSwitch?: boolean; // 是否允许用户切换文章封面图显示
4
    showCover?: boolean; // 默认是否显示文章封面图
5
  };

添加配置项#

文件路径：src/config/siteConfig.ts

1
postListLayout: {
2
  allowCoverSwitch: true,  // 新增：允许切换封面图显示
3
  showCover: true,         // 新增：默认显示封面图
4
},

设置工具函数#

文件路径：src/utils/setting-utils.ts

1
// 获取默认封面图显示状态
2
export function getDefaultPostCoverImageEnabled(): boolean {
3
  return siteConfig.postListLayout.showCover ?? true;
4
}
5

6
// 从localStorage读取封面图显示状态
7
export function getStoredPostCoverImageEnabled(): boolean {
8
  if (
9
    typeof localStorage === "undefined" ||
10
    typeof localStorage.getItem !== "function"
11
  ) {
12
    return getDefaultPostCoverImageEnabled();
13
  }
14
  const stored = localStorage.getItem("postCoverImageEnabled");
15
  if (stored === null) {
16
    return getDefaultPostCoverImageEnabled();
17
  }
18
  return stored === "true";
19
}
20

21
// 设置封面图显示状态
22
export function setPostCoverImageEnabled(enabled: boolean): void {
23
  if (
24
    typeof localStorage === "undefined" ||
25
    typeof localStorage.setItem !== "function"
26
  ) {
27
    return;
28
  }
29
  localStorage.setItem("postCoverImageEnabled", String(enabled));
30
  applyPostCoverImageEnabledToDocument(enabled);
31
  if (typeof window !== "undefined") {
32
    window.dispatchEvent(
33
      new CustomEvent("postCoverImageChange", {
34
        detail: { enabled },
35
      }),
36
    );
37
  }
38
}
39

40
// 将封面图状态应用到文档
41
export function applyPostCoverImageEnabledToDocument(enabled: boolean): void {
42
  if (typeof document === "undefined") {
43
    return;
44
  }
45
  document.documentElement.setAttribute(
46
    "data-post-cover-enabled",
47
    String(enabled),
48
  );
49
}

展开收起

添加设置面板开关#

文件路径：src/components/controls/DisplaySettingsIntegrated.svelte

导入相关函数#

在文件顶部导入新添加的工具函数：

1
import {
2
  // ... 其他导入
3
  getDefaultPostCoverImageEnabled,
4
  getStoredPostCoverImageEnabled,
5
  setPostCoverImageEnabled,
6
  applyPostCoverImageEnabledToDocument,
7
} from "@utils/setting-utils";

添加状态变量#

在脚本部分添加以下状态变量：

1
const defaultPostCoverImageEnabled = getDefaultPostCoverImageEnabled();
2
const isPostCoverImageSwitchable = siteConfig.postListLayout.allowCoverSwitch ?? true;
3
let postCoverImageEnabled = $state(true);

添加切换函数#

添加切换封面图状态的函数：数：

1
function togglePostCoverImageEnabled() {
2
  postCoverImageEnabled = !postCoverImageEnabled;
3
  setPostCoverImageEnabled(postCoverImageEnabled);
4
}

在 onMount 中初始化状态#

1
// 从localStorage读取文章封面图状态
2
postCoverImageEnabled = getStoredPostCoverImageEnabled();
3
// 将状态应用到文档
4
applyPostCoverImageEnabledToDocument(postCoverImageEnabled);

添加开关 UI#

在 HTML 模板部分（布局切换区域后）添加：

1
<!-- Post Cover Image Switch Section -->
2
{#if isPostCoverImageSwitchable}
3
  <div class="mt-2 mb-2">
4
    <div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3 mb-2
5
        before:w-1 before:h-4 before:rounded-md before:bg-(--primary)
6
        before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2"
7
    >
8
      {i18n(I18nKey.postCoverImage)}
9
      <button aria-label="Reset to Default" class="btn-regular w-7 h-7 rounded-md active:scale-90"
10
              class:opacity-0={postCoverImageEnabled === defaultPostCoverImageEnabled}
11
              class:pointer-events-none={postCoverImageEnabled === defaultPostCoverImageEnabled}
12
              onclick={() => {
13
                postCoverImageEnabled = defaultPostCoverImageEnabled;
14
                setPostCoverImageEnabled(defaultPostCoverImageEnabled);
15
              }}>
16
        <div class="text-(--btn-content)">
17
          <Icon icon="fa7-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
18
        </div>
19
      </button>
20
    </div>
21
    <div class="space-y-1">
22
      <button
23
        class="w-full btn-regular rounded-md py-2 px-3 flex items-center gap-3 text-left active:scale-95 transition-all relative overflow-hidden"
24
        class:bg-(--btn-regular-bg-hover)={postCoverImageEnabled}
25
        onclick={togglePostCoverImageEnabled}
26
      >
27
        <Icon icon="material-symbols:image" class="text-[1.25rem] shrink-0"></Icon>
28
        <span class="text-sm flex-1">{i18n(I18nKey.postCoverImage)}</span>
29
        <div class="w-10 h-5 rounded-full transition-all duration-200 relative"
30
             class:bg-(--primary)={postCoverImageEnabled}
31
             class:bg-(--btn-regular-bg-active)={!postCoverImageEnabled}>
32
          <div class="absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-all duration-200"
33
               class:left-0.5={!postCoverImageEnabled}
34
               class:left-5={postCoverImageEnabled}></div>
35
        </div>
36
      </button>
37
    </div>
38
  </div>
39
{/if}

展开收起

添加样式控制#

文件路径：src/components/layout/PostCard.astro

1
/* === Hide Post Cover Image === */
2
/* 当 data-post-cover-enabled="false" 时隐藏封面图 */
3
:global([data-post-cover-enabled="false"]) .post-card-image {
4
  display: none !important;
5
}
6

7
:global([data-post-cover-enabled="false"]) .has-cover {
8
  &.post-card-wrapper {
9
    .post-card-content {
10
      width: calc(100% - 52px - 12px) !important;
11
    }
12
  }
13
}
14

15
:global([data-post-cover-enabled="false"]) .has-cover .post-card-enter-btn {
16
  display: flex !important;
17
}

展开收起

语言配置#

文件路径：src/i18n/i18nKey.ts

1
postCoverImage = "postCoverImage",

文件路径：src/i18n/languages/en.ts

1
[Key.postCoverImage]: "Post Cover Image",

文件路径：src/i18n/languages/ja.ts

1
[Key.postCoverImage]: "記事のカバー画像",

文件路径：src/i18n/languages/ru.ts

1
[Key.postCoverImage]: "Обложка поста",

文件路径：src/i18n/languages/zh_CN.ts

1
[Key.postCoverImage]: "文章封面图",

文件路径：src/i18n/languages/zh_TW.ts

1
[Key.postCoverImage]: "文章封面圖",

归档统计

Tue, 02 Jun 2026 00:00:00 GMT

获取归档列表#

文件路径：src/pages/archive.astro

1
---
2
import { getSortedPostsList } from "@/utils/content-utils";  // [!code --]
3
const sortedPostsList = await getSortedPostsList();     // [!code --]
4
<ArchivePanel sortedPosts={sortedPostsList} client:only="svelte" /> // [!code --]
5

6
import { getArchiveList } from "@/utils/content-utils";
7

8
// 获取归档列表（posts + moments + bangumi + life）
9
const archiveList = await getArchiveList();
10

11
// 计算各类型数量
12
const postsCount = archiveList.filter(item => item.type === "post").length;
13
const momentsCount = archiveList.filter(item => item.type === "moment").length;
14
const bangumiCount = archiveList.filter(item => item.type === "bangumi").length;
15
const lifeCount = archiveList.filter(item => item.type === "life").length;
16
const totalCount = postsCount + momentsCount + bangumiCount + lifeCount;
17
---
18

19
<MainGridLayout title={i18n(I18nKey.archive)}>
20
      <!-- 统计信息 -->
21
    <div class="card-base px-8 py-6 mb-6">
22
        <div class="flex flex-wrap gap-6 justify-center text-center">
23
            <div class="flex flex-col">
24
                <span class="text-3xl font-bold text-amber-500">{postsCount}</span>
25
                <span class="text-sm text-30 mt-1">{i18n(I18nKey.postList)}</span>
26
            </div>
27
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
28
            <div class="flex flex-col">
29
                <span class="text-3xl font-bold text-(--primary)">{momentsCount}</span>
30
                <span class="text-sm text-30 mt-1">{i18n(I18nKey.moments)}</span>
31
            </div>
32
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
33
            <div class="flex flex-col">
34
                <span class="text-3xl font-bold text-red-500 dark:text-red-400">{bangumiCount}</span>
35
                <span class="text-sm text-30 mt-1">{i18n(I18nKey.bangumi)}</span>
36
            </div>
37
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
38
            <div class="flex flex-col">
39
                <span class="text-3xl font-bold text-emerald-600 dark:text-emerald-400">{lifeCount}</span>
40
                <span class="text-sm text-30 mt-1">生活</span>
41
            </div>
42
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
43
            <div class="flex flex-col">
44
                <span class="text-3xl font-bold text-(--primary)">{totalCount}</span>
45
                <span class="text-sm text-30 mt-1">总计</span>
46
            </div>
47
        </div>
48
    </div>
49
  <ArchivePanel sortedPosts={archiveList} client:only="svelte" />
50
</MainGridLayout>

展开收起

更新内容工具函数文件#

文件路径：src/utils/content-utils.ts

1
---
2
import { getCategoryUrl, getPostUrlBySlug } from "@utils/url-utils";
3
import { getDiaryList } from "@/data/diary"
4
---
5

6
export interface ArchiveItem {
7
  id: string;
8
  type: "post" | "moment" | "bangumi" | "life";
9
  link?: string;
10
  data: {
11
    title: string;
12
    published: Date;
13
    tags: string[];
14
    category?: string | null;
15
  };
16
}
17

18
export async function getArchiveList(): Promise<ArchiveItem[]> {
19
  const posts = await getCollection("posts", ({ data }) => {
20
    return import.meta.env.PROD ? data.draft !== true : true;
21
  });
22
  const diaryList = getDiaryList();
23

24
  const postItems: ArchiveItem[] = posts.map((post) => ({
25
    id: post.id,
26
    type: "post",
27
    link: getPostUrlBySlug(post.id),
28
    data: {
29
      title: post.data.title,
30
      published: post.data.published,
31
      tags: post.data.tags,
32
      category: post.data.category || null,
33
    },
34
  }));
35

36
  // 将日记数据转换为归档项
37
  const momentItems: ArchiveItem[] = diaryList.map((diary) => {
38
    let title = diary.content || "";
39
    title = title.replace(/[#*`]/g, "").trim();
40
    if (title.length > 50) title = `${title.substring(0, 50)}...`;
41
    if (!title) title = i18n(I18nKey.moments) || "日常动态";
42

43
    return {
44
      id: String(diary.id),
45
      type: "moment",
46
      link: "/diary/",
47
      data: {
48
        title: title,
49
        published: new Date(diary.date),
50
        tags: diary.tags || [],
51
        category: null,
52
      },
53
    };
54
  });
55

56
  // 空数组，用于保持接口兼容性
57
  const bangumiItems: ArchiveItem[] = [];
58
  const lifeItems: ArchiveItem[] = [];
59

60
  return [...postItems, ...momentItems, ...bangumiItems, ...lifeItems].sort((a, b) => {
61
    const timeA = a.data.published.getTime();
62
    const timeB = b.data.published.getTime();
63
    return timeB - timeA;
64
  });
65
}

展开收起

定义类型#

文件路径：src/components/controls/ArchivePanel.svelte

1
interface Post {
2
  id: string;
3
  type?: "post" | "moment" | "bangumi" | "life";
4
  link?: string;
5
  data: {
6
    title: string;
7
    tags: string[];
8
    category?: string | null;
9
    published: Date;
10
  };
11
}
12

13
{@const postLink = post.link || getPostUrlBySlug(post.id)}
14
<a
15
  href={getPostUrlBySlug(post.id)}  // [!code --]
16
    href={postLink}  // [!code ++]
17
  aria-label={post.data.title}
18
  class="group btn-plain block! h-10 w-full rounded-lg hover:text-[initial]"
19
>
20

21
<div
22
                class="w-[70%] md:max-w-[65%] md:w-[65%] text-left font-bold
23
                     group-hover:translate-x-1 transition-all group-hover:text-(--primary)
24
                     text-75 pr-8 whitespace-nowrap text-ellipsis overflow-hidden flex items-center gap-2"
25
            >
26
              {#if post.type === 'post'}
27
                <span class="px-1.5 py-0.5 text-[10px] bg-amber-500 text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
28
                  文章
29
                </span>
30
              {:else if post.type === 'moment'}
31
                <span class="px-1.5 py-0.5 text-[10px] bg-(--primary) text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
32
                  {i18n(I18nKey.moments) || 'Moment'}
33
                </span>
34
              {:else if post.type === 'bangumi'}
35
                <span class="px-1.5 py-0.5 text-[10px] bg-red-500 text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
36
                  {i18n(I18nKey.bangumi) || 'Record'}
37
                </span>
38
              {:else if post.type === 'life'}
39
                <span class="px-1.5 py-0.5 text-[10px] bg-emerald-600 text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
40
                  生活
41
                </span>
42
              {/if}
43
              <span class="truncate">{post.data.title}</span>
44
            </div>

展开收起

语言配置#

文件路径：src/i18n/i18nKey.ts

1
moments = "moments",

文件路径：src/i18n/languages/en.ts

1
[Key.moments]: "Dynamic",

文件路径：src/i18n/languages/ja.ts

1
[Key.moments]: "ダイナミック",

文件路径：src/i18n/languages/ru.ts

1
[Key.moments]: "Динамика",

文件路径：src/i18n/languages/zh_CN.ts

1
[Key.moments]: "动态",

文件路径：src/i18n/languages/zh_TW.ts

1
[Key.moments]: "動態",

给博客增加单个和全部分类页面

Tue, 02 Jun 2026 00:00:00 GMT

文件目录#

1
src/
2
├── components/
3
│   └── layout/
4
│       ├── CategoryBar.astro          [分类栏组件：显示主页、归档、分类按钮，支持横向滚动]
5
├── config/
6
│   └── navBarConfig.ts                [导航栏配置：动态生成导航链接，添加分类菜单项]
7
├── i18n/
8
│   ├── i18nKey.ts                     [国际化键定义：新增 allCategories 和 searchAlbums 键]
9
│   └── languages/
10
│       ├── en.ts                      [英文翻译文件]
11
│       ├── ja.ts                      [日文翻译文件]
12
│       ├── ru.ts                      [俄文翻译文件]
13
│       ├── zh_CN.ts                   [简体中文翻译文件]
14
│       └── zh_TW.ts                   [繁体中文翻译文件]
15
├── pages/
16
│   ├── categories.astro               [全部分类页面：显示所有分类卡片列表（新增）]
17
│   └── categories/
18
│       └── [category].astro           [单个分类详情页：显示该分类文章和标签筛选（新增）]
19
└── utils/
20
    └── url-utils.ts                   [URL工具函数：新增分类相关URL生成函数]

展开收起

创建全部分类页面#

文件路径：src/pages/categories.astro

1
---
2
import { Icon } from "astro-icon/components";
3
import MainGridLayout from "@layouts/MainGridLayout.astro";
4
import { getCategoryList } from "@/utils/content-utils";
5
import I18nKey from "@i18n/i18nKey";
6
import { i18n } from "@i18n/translation";
7

8
const categories = await getCategoryList();
9
const totalPosts = categories.reduce((sum, cat) => sum + cat.count, 0);
10
---
11

12
<MainGridLayout title={i18n(I18nKey.categories)}>
13
    <!-- 页面标题 -->
14
    <div class="card-base px-8 py-6 mb-6">
15
        <h1 class="text-2xl font-bold text-(--primary) mb-2">
16
            {i18n(I18nKey.categories)}
17
        </h1>
18
        <p class="text-30 text-sm">
19
            {i18n(I18nKey.allCategories)} · {totalPosts} {i18n(I18nKey.postsCount)}
20
        </p>
21
    </div>
22

23
    <!-- 分类卡片列表 -->
24
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
25
        {
26
            categories.map((category, index) => (
27
                <a
28
                    href={category.url}
29
                    class="card-base p-6 flex items-center gap-4 transition-all duration-300
30
                           hover:scale-[1.02] hover:shadow-lg active:scale-[0.98]
31
                           onload-animation"
32
                    style={`animation-delay: calc(var(--content-delay) + ${index * 50}ms);`}
33
                >
34
                    <div class="flex-shrink-0 w-12 h-12 rounded-full bg-(--primary)/10 flex items-center justify-center">
35
                        <Icon
36
                            name="material-symbols:folder-open"
37
                            class="text-2xl text-(--primary)"
38
                        />
39
                    </div>
40
                    <div class="flex-1 min-w-0">
41
                        <h2 class="text-lg font-bold text-90 truncate">
42
                            {category.name}
43
                        </h2>
44
                        <p class="text-sm text-30 mt-1">
45
                            {category.count} {i18n(I18nKey.postsCount)}
46
                        </p>
47
                    </div>
48
                    <div class="flex-shrink-0">
49
                        <Icon
50
                            name="material-symbols:chevron-right-rounded"
51
                            class="text-2xl text-30 transition-transform duration-200 group-hover:translate-x-1"
52
                        />
53
                    </div>
54
                </a>
55
            ))
56
        }
57
    </div>
58

59
    <!-- 空状态 -->
60
    {
61
        categories.length === 0 && (
62
            <div class="card-base px-8 py-12 text-center">
63
                <Icon
64
                    name="material-symbols:folder-off"
65
                    class="text-5xl text-30 mx-auto mb-4"
66
                />
67
                <p class="text-30">{i18n(I18nKey.bangumiNoData)}</p>
68
            </div>
69
        )
70
    }
71
</MainGridLayout>
72

73
<style>
74
    .card-base {
75
        background: var(--card-bg);
76
        border: 1px solid var(--card-border);
77
        border-radius: var(--radius-large);
78
    }
79

80
    a.card-base:hover {
81
        border-color: var(--primary);
82
    }
83

84
    a.card-base:active {
85
        background: var(--card-bg-active);
86
    }
87
</style>

展开收起

创建单个分类详情页#

文件路径：src/pages/categories/[category].astro

1
---
2
import type { GetStaticPaths } from "astro";
3
import type { CollectionEntry } from "astro:content";
4
import { getCollection } from "astro:content";
5
import { Icon } from "astro-icon/components";
6
import PostCard from "@/components/layout/PostCard.astro";
7
import MainGridLayout from "@layouts/MainGridLayout.astro";
8
import { getCategoryList } from "@/utils/content-utils";
9
import { getTagUrl, getCategoryPageUrl, getPostUrlBySlug } from "@/utils/url-utils";
10
import I18nKey from "@i18n/i18nKey";
11
import { i18n } from "@i18n/translation";
12
import { siteConfig } from "@/config";
13

14
type PostEntry = CollectionEntry<"posts">;
15

16
interface Props {
17
  categoryName: string;
18
  posts: PostEntry[];
19
  totalPosts: number;
20
  tags: { name: string; count: number }[];
21
}
22

23
export const getStaticPaths = (async () => {
24
  const categories = await getCategoryList();
25
  const allPosts = await getCollection("posts", ({ data }) => {
26
    return import.meta.env.PROD ? data.draft !== true : true;
27
  }) as PostEntry[];
28

29
  const paths: any[] = [];
30

31
  for (const category of categories) {
32
    // 过滤该分类下的文章
33
    const categoryPosts = allPosts.filter((post) => {
34
      const postCategory = post.data.category?.trim() || "";
35
      const uncategorized = i18n(I18nKey.uncategorized).toLowerCase();
36

37
      if (!category.name || category.name.toLowerCase() === uncategorized) {
38
        // 未分类：没有分类或分类为空/未分类
39
        return !postCategory || postCategory.toLowerCase() === uncategorized;
40
      }
41
      return postCategory === category.name;
42
    });
43

44
    // 按日期排序
45
    categoryPosts.sort((a, b) => {
46
      if (a.data.pinned && !b.data.pinned) return -1;
47
      if (!a.data.pinned && b.data.pinned) return 1;
48
      return new Date(b.data.published).getTime() - new Date(a.data.published).getTime();
49
    });
50

51
    // 收集该分类下所有标签
52
    const tagCountMap: Record<string, number> = {};
53
    categoryPosts.forEach((post) => {
54
      (post.data.tags || []).forEach((tag: string) => {
55
        tagCountMap[tag] = (tagCountMap[tag] || 0) + 1;
56
      });
57
    });
58
    const tags = Object.entries(tagCountMap)
59
      .sort((a, b) => b[1] - a[1])
60
      .map(([name, count]) => ({ name, count }));
61

62
    paths.push({
63
      params: { category: category.name },
64
      props: {
65
        categoryName: category.name,
66
        posts: categoryPosts,
67
        totalPosts: categoryPosts.length,
68
        tags,
69
      },
70
    });
71
  }
72

73
  return paths;
74
}) satisfies GetStaticPaths;
75

76
const { categoryName, posts, totalPosts, tags } = Astro.props;
77

78
// 解码分类名称
79
const decodedCategory = decodeURIComponent(categoryName);
80

81
let delay = 0;
82
const interval = 50;
83

84
const masonryEnabled = siteConfig.postListLayout.grid.masonry;
85
const columnWidth = siteConfig.postListLayout.grid.columnWidth || 280;
86

87
const defaultLayout = siteConfig.postListLayout.defaultMode || "list";
88
const mobileDefaultLayout =
89
  siteConfig.postListLayout.mobileDefaultMode || defaultLayout;
90
const initialLayoutClass =
91
  defaultLayout === "grid"
92
    ? "post-grid-auto grid-mode"
93
    : "flex flex-col gap-4 md:gap-4 list-mode";
94
---
95

96
<MainGridLayout title={`${decodedCategory} - ${i18n(I18nKey.categories)}`}>
97
    <!-- 面包屑导航 -->
98
    <div class="card-base px-6 py-4 mb-6">
99
        <nav class="flex items-center gap-2 text-sm text-30">
100
            <a href="/" class="hover:text-(--primary) transition-colors">
101
                <Icon name="material-symbols:home" class="inline-block align-middle" />
102
            </a>
103
            <span class="opacity-50">/</span>
104
            <a href={getCategoryPageUrl()} class="hover:text-(--primary) transition-colors">
105
                {i18n(I18nKey.categories)}
106
            </a>
107
            <span class="opacity-50">/</span>
108
            <span class="text-90 font-medium">{decodedCategory}</span>
109
        </nav>
110
    </div>
111

112
    <!-- 分类标题 -->
113
    <div class="card-base px-8 py-6 mb-6">
114
        <div class="flex items-center gap-4">
115
            <div class="w-14 h-14 rounded-full bg-(--primary)/10 flex items-center justify-center flex-shrink-0">
116
                <Icon name="material-symbols:folder-open" class="text-3xl text-(--primary)" />
117
            </div>
118
            <div>
119
                <h1 class="text-2xl font-bold text-90">{decodedCategory}</h1>
120
                <p class="text-sm text-30 mt-1">
121
                    {totalPosts} {i18n(I18nKey.postsCount)}
122
                </p>
123
            </div>
124
        </div>
125
    </div>
126

127
    <!-- 标签筛选区域 -->
128
    {
129
        tags.length > 0 && (
130
            <div class="card-base px-6 py-5 mb-6">
131
                <div class="flex items-center gap-3 mb-3">
132
                    <Icon name="material-symbols:label" class="text-lg text-(--primary)" />
133
                    <span class="text-sm font-medium text-90">{i18n(I18nKey.tags)}</span>
134
                    <span class="text-xs text-30">({tags.length})</span>
135
                </div>
136
                <div class="flex flex-wrap gap-2">
137
                    {tags.map((tag: { name: string; count: number }) => (
138
                        <a
139
                            href={getTagUrl(tag.name)}
140
                            class="btn-regular px-3 py-1.5 text-sm rounded-md
141
                                     transition-all duration-200
142
                                     hover:scale-105 hover:bg-(--primary)/20
143
                                     active:scale-95"
144
                        >
145
                            #{tag.name}
146
                            <span class="ml-1 text-xs opacity-60">({tag.count})</span>
147
                        </a>
148
                    ))}
149
                </div>
150
            </div>
151
        )
152
    }
153

154
    <!-- 文章列表 -->
155
    <div
156
        id="post-list-container"
157
        class={`transition-all duration-500 ease-in-out mb-4 ${initialLayoutClass}`}
158
        data-default-layout={defaultLayout}
159
        data-mobile-default-layout={mobileDefaultLayout}
160
        data-masonry-enabled={masonryEnabled}
161
        data-column-width={columnWidth}
162
        style={`--post-card-min-width: ${columnWidth}px;`}
163
    >
164
        {
165
            posts.length > 0 ? (
166
                posts.map((entry: PostEntry, index: number) => (
167
                    <PostCard
168
                        entry={entry}
169
                        title={entry.data.title}
170
                        tags={entry.data.tags}
171
                        category={entry.data.category}
172
                        published={entry.data.published}
173
                        updated={entry.data.updated}
174
                        url={getPostUrlBySlug(entry.id)}
175
                        image={entry.data.image}
176
                        description={entry.data.description}
177
                        draft={entry.data.draft}
178
                        pinned={entry.data.pinned}
179
                        password={!!entry.data.password}
180
                        loading={index < 2 ? "eager" : "lazy"}
181
                        class:list="onload-animation post-card-item"
182
                        style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
183
                    />
184
                ))
185
            ) : (
186
                <div class="card-base px-8 py-12 text-center w-full">
187
                    <Icon name="material-symbols:article" class="text-5xl text-30 mx-auto mb-4" />
188
                    <p class="text-30">{i18n(I18nKey.bangumiNoData)}</p>
189
                </div>
190
            )
191
        }
192
    </div>
193
</MainGridLayout>
194

195
<script is:inline define:vars={{ defaultLayout, mobileDefaultLayout, columnWidth }}>
196
    (function() {
197
        const savedLayout = localStorage.getItem('postListLayout');
198
        const effectiveDefault = window.innerWidth < 780 ? mobileDefaultLayout : defaultLayout;
199
        const effectiveLayout = window.innerWidth < 380 ? 'grid' : (savedLayout || effectiveDefault);
200

201
        if (effectiveLayout !== defaultLayout) {
202
            const container = document.getElementById('post-list-container');
203

204
            if (container) {
205
                container.style.transition = 'none';
206
                container.classList.remove('list-mode', 'grid-mode', 'post-grid-auto', 'flex', 'flex-col', 'gap-4', 'md:gap-4');
207

208
                if (effectiveLayout === 'grid') {
209
                    container.classList.add('grid-mode', 'post-grid-auto');
210
                } else {
211
                    container.classList.add('list-mode', 'flex', 'flex-col', 'gap-4', 'md:gap-4');
212
                }
213

214
                container.offsetHeight;
215
                container.style.transition = '';
216
            }
217
        }
218
    })();
219
</script>
220

221
<script>
222
    function initLayout() {
223
        const postListContainer = document.getElementById("post-list-container");
224
        if (!postListContainer) return;
225

226
        const savedLayout = localStorage.getItem("postListLayout");
227
        const defaultLayout =
228
            postListContainer.getAttribute("data-default-layout") || "list";
229
        const mobileDefaultLayout =
230
            postListContainer.getAttribute("data-mobile-default-layout") || defaultLayout;
231

232
        const effectiveDefault = window.innerWidth < 780 ? mobileDefaultLayout : defaultLayout;
233
        let currentLayout = savedLayout || effectiveDefault;
234

235
        if (window.innerWidth < 380) {
236
            currentLayout = "grid";
237
        }
238

239
        updatePostListLayout(currentLayout);
240
    }
241

242
    function updatePostListLayout(layout: string) {
243
        const postListContainer = document.getElementById("post-list-container");
244
        if (!postListContainer) return;
245

246
        const isCurrentGrid = postListContainer.classList.contains("grid-mode");
247
        const isCurrentList = postListContainer.classList.contains("list-mode");
248
        const currentLayout = isCurrentGrid ? "grid" : (isCurrentList ? "list" : null);
249

250
        const masonryEnabled = postListContainer.getAttribute("data-masonry-enabled") === "true";
251

252
        const applyClasses = () => {
253
            postListContainer.classList.remove("list-mode", "grid-mode", "post-grid-auto");
254
            if (layout === "grid") {
255
                postListContainer.classList.add("grid-mode");
256
                postListContainer.classList.remove("flex", "flex-col");
257
                if (masonryEnabled) {
258
                    postListContainer.classList.remove("post-grid-auto");
259
                    applyMasonryLayout();
260
                } else {
261
                    postListContainer.classList.add("post-grid-auto");
262
                    resetMasonryLayout();
263
                }
264
            } else {
265
                postListContainer.classList.add("list-mode");
266
                postListContainer.classList.add("flex", "flex-col", "gap-4", "md:gap-4");
267
                postListContainer.classList.remove("post-grid-auto");
268
                resetMasonryLayout();
269
            }
270
        };
271

272
        if (!currentLayout) {
273
            applyClasses();
274
            return;
275
        }
276

277
        if (currentLayout === layout) {
278
            if (layout === "grid" && masonryEnabled) {
279
                applyMasonryLayout();
280
            }
281
            return;
282
        }
283

284
        postListContainer.classList.add("layout-switching");
285

286
        setTimeout(() => {
287
            applyClasses();
288

289
            requestAnimationFrame(() => {
290
                postListContainer.classList.remove("layout-switching");
291
            });
292
        }, 200);
293
    }
294

295
    function resetMasonryLayout() {
296
        const container = document.getElementById("post-list-container");
297
        if (!container) return;
298

299
        container.style.height = "";
300
        container.style.position = "";
301
        container.style.display = "";
302

303
        const items = container.querySelectorAll(".post-card-item");
304
        items.forEach((item) => {
305
            // @ts-ignore
306
            item.style.position = "";
307
            // @ts-ignore
308
            item.style.top = "";
309
            // @ts-ignore
310
            item.style.left = "";
311
            // @ts-ignore
312
            item.style.width = "";
313
        });
314
    }
315

316
    function applyMasonryLayout() {
317
        const container = document.getElementById("post-list-container");
318
        if (!container) return;
319

320
        const masonryEnabled = container.getAttribute("data-masonry-enabled") === "true";
321
        if (!masonryEnabled) return;
322

323
        if (!container.classList.contains("grid-mode")) return;
324

325
        const items = Array.from(container.querySelectorAll(".post-card-item"));
326
        if (items.length === 0) return;
327

328
        const gap = 16;
329
        const columnWidth = parseInt(container.getAttribute("data-column-width") || "280");
330

331
        container.style.position = "relative";
332
        container.style.display = "block";
333

334
        const containerWidth = container.offsetWidth;
335
        const colCount = Math.max(1, Math.floor((containerWidth + gap) / (columnWidth + gap)));
336
        const itemWidth = (containerWidth - (colCount - 1) * gap) / colCount;
337

338
        const colHeights = new Array(colCount).fill(0);
339

340
        items.forEach((item) => {
341
            const colIndex = colHeights.indexOf(Math.min(...colHeights));
342
            // @ts-ignore
343
            item.style.position = "absolute";
344
            // @ts-ignore
345
            item.style.width = `${itemWidth}px`;
346
            // @ts-ignore
347
            item.style.setProperty('height', 'auto', 'important');
348

349
            // @ts-ignore
350
            const height = item.offsetHeight;
351
            const top = colHeights[colIndex];
352
            const left = colIndex * (itemWidth + gap);
353

354
            // @ts-ignore
355
            item.style.top = `${top}px`;
356
            // @ts-ignore
357
            item.style.left = `${left}px`;
358

359
            colHeights[colIndex] += height + gap;
360
        });
361

362
        container.style.height = `${Math.max(...colHeights)}px`;
363
    }
364

365
    document.addEventListener("DOMContentLoaded", function () {
366
        setTimeout(initLayout, 50);
367

368
        const imgs = document.querySelectorAll('#post-list-container img');
369
        imgs.forEach(img => {
370
            // @ts-ignore
371
            if(img.complete) return;
372
            img.addEventListener('load', () => {
373
                applyMasonryLayout();
374
            });
375
        });
376
    });
377

378
    document.addEventListener("visibilitychange", function () {
379
        if (!document.hidden) {
380
            setTimeout(initLayout, 100);
381
        }
382
    });
383

384
    window.addEventListener("layoutChange", function (event) {
385
        // @ts-ignore
386
        const newLayout = event.detail.layout;
387
        const postListContainer = document.getElementById("post-list-container");
388
        if (!postListContainer) return;
389

390
        updatePostListLayout(newLayout);
391
    });
392

393
    let resizeTimeout: any;
394
    window.addEventListener("resize", function () {
395
        clearTimeout(resizeTimeout);
396
        resizeTimeout = setTimeout(function () {
397
            initLayout();
398
        }, 250);
399
    });
400

401
    document.addEventListener("astro:page-load", function () {
402
        setTimeout(initLayout, 50);
403

404
        const imgs = document.querySelectorAll('#post-list-container img');
405
        imgs.forEach(img => {
406
            // @ts-ignore
407
            if(img.complete) return;
408
            img.addEventListener('load', () => {
409
                applyMasonryLayout();
410
            });
411
        });
412
    });
413

414
    document.addEventListener("astro:after-swap", function () {
415
        setTimeout(initLayout, 50);
416
    });
417

418
    setTimeout(initLayout, 0);
419
</script>
420

421
<style is:global>
422
    .post-grid-auto {
423
        display: grid;
424
        grid-template-columns: repeat(auto-fill, minmax(var(--post-card-min-width, 320px), 1fr));
425
        gap: 1rem;
426
    }
427

428
    @media (max-width: 767px) {
429
        .list-mode .post-meta-root {
430
            transform: scale(0.72) !important;
431
            transform-origin: top left !important;
432
            margin-bottom: 0.25rem !important;
433
            width: 139% !important;
434
        }
435
        .list-mode :global(.post-meta) {
436
            margin-bottom: 0.25rem !important;
437
            gap: 0.25rem !important;
438
        }
439
    }
440
</style>
441

442
<style>
443
    #post-list-container {
444
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
445
                    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
446
    }
447

448
    #post-list-container > :global(*) {
449
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
450
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
451
    }
452

453
    #post-list-container {
454
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
455
    }
456

457
    #post-list-container.layout-switching {
458
        opacity: 0;
459
        transform: translateY(10px);
460
    }
461

462
    #post-list-container.grid-mode :global(.post-card-wrapper) {
463
        flex-direction: column-reverse !important;
464
    }
465

466
    #post-list-container.grid-mode :global(.post-card-image) {
467
        width: 100% !important;
468
        position: relative !important;
469
        top: auto !important;
470
        right: auto !important;
471
        bottom: auto !important;
472
        border-radius: var(--radius-large) var(--radius-large) 0 0 !important;
473
    }
474

475
    #post-list-container.grid-mode :global(.post-card-content) {
476
        width: 100% !important;
477
        padding: 1rem !important;
478
    }
479

480
    #post-list-container.grid-mode :global(.no-cover .post-card-content) {
481
        padding-right: 4.5rem !important;
482
    }
483

484
    #post-list-container.grid-mode :global(.post-card-title) {
485
        font-size: 1.35rem !important;
486
        line-height: 1.75rem !important;
487
        margin-bottom: 0.5rem !important;
488
    }
489

490
    #post-list-container.grid-mode :global(.post-card-title::before) {
491
        display: none !important;
492
    }
493

494
    #post-list-container.grid-mode :global(.post-meta) {
495
        margin-bottom: 0.5rem !important;
496
        gap: 0.5rem !important;
497
    }
498

499
    #post-list-container.grid-mode :global(.post-meta .text-xl) {
500
        font-size: 1rem !important;
501
        line-height: 1.25rem !important;
502
    }
503

504
    #post-list-container.grid-mode :global(.meta-icon) {
505
        width: 1.5rem !important;
506
        height: 1.5rem !important;
507
        margin-right: 0.25rem !important;
508
    }
509

510
    #post-list-container.grid-mode :global(.post-meta .text-sm) {
511
        font-size: 0.75rem !important;
512
        line-height: 1rem !important;
513
    }
514

515
    #post-list-container.grid-mode :global(.post-meta .pinned-btn) {
516
        padding: 0.25rem 0.375rem !important;
517
    }
518
</style>

展开收起

创建URL工具函数#

文件路径：src/utils/url-utils.ts

1
export function getCategoryUrl(category: string | null): string {
2
  if (
3
    !category ||
4
    category.trim() === "" ||
5
    category.trim().toLowerCase() === i18n(I18nKey.uncategorized).toLowerCase()
6
  )
7
    return url("/categories/uncategorized/");
8
  return url(`/categories/${encodeURIComponent(category.trim())}/`);
9
}
10

11
export function getCategoryPageUrl(): string {
12
  return url("/categories/");
13
}

更新分类栏组件#

文件路径：src/components/layout/CategoryBar.astro

1
---
2
import { url, getCategoryPageUrl } from "@/utils/url-utils";
3
const categoriesUrl = getCategoryPageUrl();
4
---
5

6
<a
7
      href={categoriesUrl}
8
      class="category-pill text-sm px-3 py-1 rounded-lg whitespace-nowrap flex-shrink-0
9
             transition-colors duration-200 flex items-center justify-center"
10
      data-category-name="__categories__"
11
    >
12
      {i18n(I18nKey.categories)}
13
      <span class="text-xs opacity-60 ml-1">{categories.length}</span>
14
</a>

导航栏配置#

文件路径：src/config/navBarConfig.ts

1
// 根据页面开关动态生成导航栏配置
2
const getDynamicNavBarConfig = (): NavBarConfig => {
3
  // 基础导航栏链接
4
  const links: (NavBarLink | LinkPreset)[] = [
5
    // 主页
6
    LinkPreset.Home,
7

8
    // 文章分类
9
    {
10
      name: "分类",
11
      url: "/categories/",
12
      icon: "material-symbols:folder-open",
13
    },
14

15
    // 归档
16
    LinkPreset.Archive,
17
  ];
18
}

展开收起

语言配置#

文件路径：src/i18n/i18nKey.ts

1
allCategories = "allCategories",

文件路径：src/i18n/languages/en.ts

1
[Key.allCategories]: "All Categories",

文件路径：src/i18n/languages/ja.ts

1
[Key.allCategories]: "すべてのカテゴリ",

文件路径：src/i18n/languages/ru.ts

1
[Key.allCategories]: "Все категории",

文件路径：src/i18n/languages/zh_CN.ts

1
  [Key.allCategories]: "全部分类",

文件路径：src/i18n/languages/zh_TW.ts

1
  [Key.allCategories]: "全部分類",

恋爱计时组件

Tue, 02 Jun 2026 00:00:00 GMT

创建组件#

文件路径：src/components/widget/RelationshipTimer.astro

1
<!-- 恋爱倒计时组件 -->
2
---
3
import WidgetLayout from "@/components/common/WidgetLayout.astro";
4
import { relationshipConfig } from "@/config/relationshipConfig";
5

6
const config = relationshipConfig;
7

8
interface Props {
9
  class?: string;
10
  style?: string;
11
}
12
const className = Astro.props.class;
13
const style = Astro.props.style;
14
---
15

16
<WidgetLayout
17
  name={config.title || "恋爱时光"}
18
  id="relationship"
19
  class={className}
20
  style={style}
21
>
22
  <div class="flex flex-col items-center p-2">
23
    <!-- 顶部名称栏 -->
24
    <div class="flex items-center justify-center gap-2 mb-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
25
      <span>{config.name1}</span>
26
      <span class="text-red-500 animate-pulse">❤️</span>
27
      <span>{config.name2}</span>
28
    </div>
29

30
    <!-- 头像和爱心 -->
31
    <div class="flex items-center justify-center gap-4 mb-6">
32
      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white dark:border-neutral-800 shadow-md transition-transform hover:scale-110">
33
        <img src={config.avatar1} alt={config.name1} class="w-full h-full object-cover" />
34
      </div>
35
      <div class="text-2xl text-red-500 transform transition-all hover:scale-125 hover:rotate-12 cursor-pointer">
36
        ❤️
37
      </div>
38
      <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white dark:border-neutral-800 shadow-md transition-transform hover:scale-110">
39
        <img src={config.avatar2} alt={config.name2} class="w-full h-full object-cover" />
40
      </div>
41
    </div>
42

43
    <!-- 计时器 -->
44
    <div class="relationship-timer flex items-center justify-center gap-x-1 text-sm whitespace-nowrap overflow-x-auto">
45
      <span class="timer-num" data-timer-years>0</span><span class="timer-unit bg-red-400">年</span>
46
      <span class="timer-num" data-timer-months>0</span><span class="timer-unit bg-red-300">月</span>
47
      <span class="timer-num" data-timer-days>0</span><span class="timer-unit bg-blue-400">天</span>
48
      <span class="timer-num" data-timer-hours>0</span><span class="timer-unit bg-orange-400">时</span>
49
      <span class="timer-num" data-timer-minutes>0</span><span class="timer-unit bg-blue-500">分</span>
50
      <span class="timer-num" data-timer-seconds>00</span><span class="timer-unit bg-purple-400">秒</span>
51
    </div>
52
  </div>
53
</WidgetLayout>
54

55
<style>
56
  @reference "tailwindcss";
57

58
  .timer-num {
59
    @apply font-bold text-neutral-700 dark:text-neutral-200 min-w-[0rem] text-center;
60
    color: var(--primary);
61
  }
62
  .timer-unit {
63
    @apply px-1 py-0.5 rounded text-[10px] text-white font-medium shrink-0;
64
  }
65
</style>
66

67
<script is:inline define:vars={{ startDateStr: config.startDate }}>
68
  function updateRelationshipTimer() {
69
    const startDate = new Date(startDateStr);
70
    const now = new Date();
71

72
    let diff = now.getTime() - startDate.getTime();
73

74
    if (diff < 0) return;
75

76
    // 计算年月日时分秒的差值
77
    let years = now.getFullYear() - startDate.getFullYear();
78
    let months = now.getMonth() - startDate.getMonth();
79
    let days = now.getDate() - startDate.getDate();
80
    let hours = now.getHours() - startDate.getHours();
81
    let minutes = now.getMinutes() - startDate.getMinutes();
82
    let seconds = now.getSeconds() - startDate.getSeconds();
83

84
    // 处理借位逻辑
85
    if (seconds < 0) {
86
      seconds += 60;
87
      minutes--;
88
    }
89
    if (minutes < 0) {
90
      minutes += 60;
91
      hours--;
92
    }
93
    if (hours < 0) {
94
      hours += 24;
95
      days--;
96
    }
97
    if (days < 0) {
98
      const lastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
99
      days += lastMonth.getDate();
100
      months--;
101
    }
102
    if (months < 0) {
103
      months += 12;
104
      years--;
105
    }
106

107
    // 更新所有实例，避免移动端和电脑端 ID 冲突
108
    const update = (attr, value) => {
109
      const elements = document.querySelectorAll(`[data-timer-${attr}]`);
110
      elements.forEach(el => {
111
        el.innerText = value;
112
      });
113
    };
114

115
    update('years', years);
116
    update('months', months);
117
    update('days', days);
118
    update('hours', hours);
119
    update('minutes', minutes);
120
    update('seconds', seconds.toString().padStart(2, '0'));
121
  }
122

123
  // 立即运行并每秒更新
124
  updateRelationshipTimer();
125
  if (!window.relationshipTimerInterval) {
126
    window.relationshipTimerInterval = setInterval(updateRelationshipTimer, 1000);
127
  }
128

129
  // 监听 Swup 页面切换
130
  document.addEventListener('swup:content:replace', updateRelationshipTimer);
131
</script>

展开收起

注册组件#

文件路径：src/components/layout/SideBar.astro

1
---
2
import RelationshipTimer from "@/components/widget/RelationshipTimer.astro";  // 引入恋爱计时组件
3
---
4

5
// 组件映射表
6
const componentMap = {
7
    <!-- 恋爱计时组件 -->
8
  relationship: RelationshipTimer,
9
} satisfies Record<WidgetComponentType, typeof Profile>;

启用组件#

文件路径：src/config/sidebarConfig.ts

右侧边栏配置

1
{
2
  type: "relationship",    // 组件类型，与 componentMap 中的 key 对应
3
  enable: true,            // 是否启用
4
  position: "top",         // 组件位置：top（固定顶部）或 sticky（粘性定位）
5
  showOnPostPage: true,    // 是否在文章详情页显示
6
},

移动端配置

1
{
2
// 组件类型：恋爱计时小组件
3
type: "relationship",
4
// 是否启用该组件
5
enable: true,
6
// 是否在文章详情页显示
7
showOnPostPage: true,
8
},

配置类型定义#

文件路径：src/types/config.ts

1
// 组件配置类型定义
2
export type WidgetComponentType =
3
  | "relationship";

双方信息配置#

文件路径：src/config/relationshipConfig.ts

1
import type { RelationshipConfig } from "../types/config";
2

3
export const relationshipConfig: RelationshipConfig = {
4
  // 恋爱开始日期
5
  startDate: "2026-01-06",
6
  // 双方名称
7
  name1: "---------TSH",
8
  name2: "CXY---------",
9
  // 双方头像
10
  avatar1: "https://re.tsh520.cn/zl/tsh.jpg",
11
  avatar2: "https://re.tsh520.cn/zl/cxy.jpg",
12
  // 小组件标题
13
  title: "我和宝宝在一起已经",
14
};

Umami 访问统计卡片

Tue, 02 Jun 2026 00:00:00 GMT

提示

本文是在博主 THW 文章：为 Fuwari 添加 Umami 访问统计卡片基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

开始#

对于静态博客而言，了解访客来源与流量趋势是很有必要的。在不自建服务器的前提下，配置简单，功能强大的 Umami 往往是我们的首选。

然而，直接挂载 Umami 的分享外链不够直观且破坏页面一致性。本文将教你如何将 Umami 的统计数据以原生组件的形式集成到 Firefly 主题的侧边栏中，让你的博客实时展示访问数据。

Umami 访问统计卡片

准备工作#

一个已部署好的Firefly博客
无服务器部署Umami统计教程：Vercel 部署
启用Umami统计的站点

获取数据#

为了获取到图中的这些数据，我们需要启用 Umami 统计的分享 URL。

你应该会得到一个类似 https://umami.seasir.top/share/xxxxxxxxxxxx 格式的链接。记下这个链接，现在我们只需要它就能完成所有配置。

alt text

创建组件#

文件路径：src/components/widget/UmamiStats.astro

1
---
2
import WidgetLayout from "@/components/common/WidgetLayout.astro";
3

4
interface Props {
5
  class?: string;
6
  style?: string;
7
}
8
const { class: className, style } = Astro.props;
9
---
10

11
<WidgetLayout id="umami-stats" name="统计" class:list={["umami-stats-container", className, "cursor-pointer transition-opacity active:scale-95"]} {style}>
12
    <a target="_blank" rel="noopener noreferrer" class="block umami-link">
13
        <div class="text-center py-2">
14
            <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-pageviews">-</div>
15
            <div class="text-sm text-neutral-500 dark:text-neutral-400">总浏览量</div>
16
        </div>
17
        <div class="grid grid-cols-2 divide-x divide-neutral-200 dark:divide-neutral-700 text-center pt-2">
18
            <div class="px-2">
19
                <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-visits">-</div>
20
                <div class="text-sm text-neutral-500 dark:text-neutral-400">访问数</div>
21
            </div>
22
            <div class="px-2">
23
                <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-visitors">-</div>
24
                <div class="text-sm text-neutral-500 dark:text-neutral-400">游客数</div>
25
            </div>
26
        </div>
27
    </a>
28
</WidgetLayout>
29

30
<script>
31
const UMAMI_CONFIG = {
32
    shareUrl: 'https://umami.seasir.top/share/xxxxxxxxxxxx',
33
};
34

35
let __UMAMI_INTERNAL = {
36
    baseUrl: '',
37
    websiteId: '',
38
    shareToken: '',
39
    shareId: '',
40
    isReady: false
41
};
42

43
const FALLBACK_STATS = {
44
    pageviews: 1000,
45
    visits: 1000,
46
    visitors: 1000,
47
};
48

49
async function initUmamiConfig() {
50
    try {
51
        const sharePath = UMAMI_CONFIG.shareUrl.split('/share/')[1];
52
        if (!sharePath) throw new Error('Invalid Umami Share URL');
53

54
        let apiBase = '';
55
        if (UMAMI_CONFIG.shareUrl.includes('cloud.umami.is') || UMAMI_CONFIG.shareUrl.includes('analytics.umami.is')) {
56
            const region = UMAMI_CONFIG.shareUrl.includes('/analytics/eu/') ? 'eu' : 'us';
57
            apiBase = `https://cloud.umami.is/analytics/${region}/api`;
58
        } else {
59
            const urlObj = new URL(UMAMI_CONFIG.shareUrl);
60
            apiBase = `${urlObj.origin}/api`;
61
        }
62

63
        const res = await fetch(`${apiBase}/share/${sharePath}`);
64
        if (!res.ok) throw new Error(`Failed to fetch share config: ${res.status}`);
65
        const data = await res.json();
66

67
        __UMAMI_INTERNAL = {
68
            baseUrl: apiBase,
69
            websiteId: data.websiteId,
70
            shareToken: data.token,
71
            shareId: data.shareId,
72
            isReady: true
73
        };
74

75
        const links = document.querySelectorAll('.umami-link');
76
        links.forEach(link => link.setAttribute('href', UMAMI_CONFIG.shareUrl));
77

78
    } catch (e) {
79
        console.error('Umami Config Init Failed:', e);
80
    }
81
}
82

83
function formatNumber(num: number): string {
84
    if (num >= 1000000) {
85
        return (num / 1000000).toFixed(1) + 'M';
86
    } else if (num >= 1000) {
87
        return (num / 1000).toFixed(1) + 'K';
88
    }
89
    return Math.round(num).toString();
90
}
91

92
function setStats(values: { pageviews: number; visits: number; visitors: number }) {
93
    const pageviewsElements = document.querySelectorAll('.umami-total-pageviews');
94
    const visitsElements = document.querySelectorAll('.umami-total-visits');
95
    const visitorsElements = document.querySelectorAll('.umami-total-visitors');
96

97
    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
98
    const animHandles = new Map<HTMLElement, number>();
99

100
    const animateStat = (el: HTMLElement | null, to: number, duration = 2000) => {
101
        if (!el) return;
102

103
        const prev = animHandles.get(el);
104
        if (prev) cancelAnimationFrame(prev);
105

106
        const from = 0;
107
        const startTime = performance.now();
108

109
        const tick = (now: number) => {
110
            const elapsed = now - startTime;
111
            const progress = Math.min(1, elapsed / duration);
112
            const easedProgress = easeOutCubic(progress);
113

114
            const current = from + (to - from) * easedProgress;
115
            el.textContent = formatNumber(current);
116

117
            if (progress < 1) {
118
                animHandles.set(el, requestAnimationFrame(tick));
119
            }
120
        };
121
        animHandles.set(el, requestAnimationFrame(tick));
122
    };
123

124
    pageviewsElements.forEach(el => animateStat(el as HTMLElement, values.pageviews));
125
    visitsElements.forEach(el => animateStat(el as HTMLElement, values.visits));
126
    visitorsElements.forEach(el => animateStat(el as HTMLElement, values.visitors));
127
}
128

129
async function fetchUmamiStats() {
130
    if (!__UMAMI_INTERNAL.isReady) {
131
        await initUmamiConfig();
132
    }
133

134
    if (!__UMAMI_INTERNAL.isReady) {
135
        setStats(FALLBACK_STATS);
136
        return;
137
    }
138

139
    try {
140
        const endAt = Date.now();
141
        const startAt = 0;
142
        const url = `${__UMAMI_INTERNAL.baseUrl}/websites/${__UMAMI_INTERNAL.websiteId}/stats?startAt=${startAt}&endAt=${endAt}&unit=hour&timezone=Asia%2FShanghai`;
143

144
        const response = await fetch(url, {
145
            headers: {
146
                'x-umami-share-context': '1',
147
                'x-umami-share-token': __UMAMI_INTERNAL.shareToken
148
            }
149
        });
150

151
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
152
        const data = await response.json();
153
        const getValue = (field: any) => (typeof field === 'object' ? field?.value : field) || 0;
154

155
        setStats({
156
            pageviews: getValue(data.pageviews),
157
            visits: getValue(data.visits),
158
            visitors: getValue(data.visitors),
159
        });
160

161
    } catch (error) {
162
        console.error('Umami Fetch Failed:', error);
163
        setStats(FALLBACK_STATS);
164
    }
165
}
166

167
let __umamiStatsStarted = false;
168
function startUmamiStats() {
169
    if (__umamiStatsStarted) return;
170
    __umamiStatsStarted = true;
171
    fetchUmamiStats();
172
}
173

174
function initUmamiStatsVisibility() {
175
    const containers = document.querySelectorAll('.umami-stats-container');
176
    const io = new IntersectionObserver((entries) => {
177
        let isAnyVisible = false;
178
        entries.forEach(entry => {
179
            if (entry.isIntersecting) isAnyVisible = true;
180
        });
181

182
        if (isAnyVisible) {
183
            startUmamiStats();
184
            io.disconnect();
185
        }
186
    }, { threshold: 0.1 });
187

188
    containers.forEach(container => io.observe(container));
189
}
190

191
initUmamiStatsVisibility();
192

193
if (window.swup) {
194
    window.swup.hooks.on('page:view', () => {
195
        __umamiStatsStarted = false;
196
        initUmamiStatsVisibility();
197
    });
198
}
199
</script>

展开收起

配置参数#

在代码文件的 script 部分，填入你的分享链接：

1
const UMAMI_CONFIG = {
2
    shareUrl: 'https://umami.seasir.top/share/xxxxxxxxxxxx',  // ← 这里改成你自己的
3
};

系统会自动解析 API 路径、Website ID 和验证 Token。

注册组件#

文件路径：src/components/layout/SideBar.astro

1
---
2
import UmamiStats from "@/components/widget/UmamiStats.astro";  // 引入 Umami 组件
3
---
4

5
// 组件映射表
6
const componentMap = {
7
  umamiStats: UmamiStats,
8
} satisfies Record<WidgetComponentType, typeof Profile>;

配置侧边栏#

文件路径：src/config/sidebarConfig.ts

1
{
2
    // 组件类型：Umami 统计组件
3
    type: "umamiStats",
4
    // 是否启用该组件
5
    enable: true,
6
    // 组件位置
7
    position: "top",
8
    // 是否在文章详情页显示
9
    showOnPostPage: true,
10
},

修改统计周期#

默认为所有时间，如果你想要调整浏览量统计的时间范围，可以修改 fetchUmamiStats 函数内的 startAt 参数。

常用时间周期公式（单位：毫秒）：

24小时：24 * 60 * 60 * 1000 = 86400000

最近30天：30 * 24 * 60 * 60 * 1000 = 2592000000

最近90天：90 * 24 * 60 * 60 * 1000 = 7776000000

修改示例（例如改为最近 30 天）：

1
try {
2
    const endAt = Date.now();
3
    const startAt = 0; // [!code --]
4
    const startAt = Date.now() - 2592000000; //[!code ++]
5
}

这将从 30 天前开始统计浏览量。

##配置备用数据

如果遇到 API 请求失败，全新的组件会显示你配置的备用数据以保持 UI 美观。你可以在 FALLBACK_STATS 对象中修改这些数值（默认为1000）：

1
const FALLBACK_STATS = {
2
    pageviews: 1000, // 备用总浏览量
3
    visits: 1000,    // 备用访问数
4
    visitors: 1000,  // 备用游客数
5
};

结尾#

通过以上步骤，你就成功为 Fuwari 添加了具有丰富交互感、自动解析配置且支持点击查看详情的 Umami 统计卡片。

欢迎提示组件

Tue, 02 Jun 2026 00:00:00 GMT

提示

本文是在博主年华文章：Firefly 主题 WelcomeToast 组件分析基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

欢迎提示组件

创建组件#

文件路径：src/components/widget/WelcomeToast.astro

src/components/WelcomeToast.astro展开收起

1
<script>
2
    // const VISIT_SESSION_KEY = 'blog_visit_flag';
3
    let hasShownToast = false;
4

5
    function createWelcomeToast() {
6
        const toast = document.createElement('div');
7
        toast.id = 'welcome-toast';
8
        // Tailwind 样式控制：自动适配深色模式
9
        toast.className = 'fixed bottom-4 right-4 z-50 transform translate-y-full opacity-0 transition-all duration-500 ease-out';
10

11
        //使用 bg-white dark:bg-zinc-800 强制适配颜色
12
        toast.innerHTML = `
13
            <div class="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg p-4 max-w-xs">
14
                <div class="flex items-start gap-3">
15
                    <div class="flex-shrink-0 text-2xl">👋</div>
16
                    <div class="flex-1 min-w-0">
17
                        <p id="welcome-message" class="text-sm font-semibold text-gray-900 dark:text-gray-100">
18
                            正在加载...
19
                        </p>
20
                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-2 italic">
21
                            欢迎来到我的博客
22
                        </p>
23
                    </div>
24
                    <button
25
                        onclick="closeWelcomeToast()"
26
                        class="flex-shrink-0 text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
27
                        aria-label="关闭"
28
                    >
29
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
30
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
31
                        </svg>
32
                    </button>
33
                </div>
34
            </div>
35
        `;
36
        document.body.appendChild(toast);
37
        return toast;
38
    }
39

40
    function closeWelcomeToast() {
41
        const toast = document.getElementById('welcome-toast');
42
        if (toast) {
43
            toast.classList.add('translate-y-full', 'opacity-0');
44
            toast.classList.remove('translate-y-0', 'opacity-100');
45
            setTimeout(() => { toast.remove(); }, 500);
46
        }
47
    }
48

49
    async function fetchLocation() {
50
        try {
51
            const response = await fetch('https://v2.xxapi.cn/api/ip');
52
            const data = await response.json();
53
            if (data.code === 200 && data.data) {
54
                const locationText = `你好，来自${data.data.address}的朋友`;
55
                const messageEl = document.getElementById('welcome-message');
56
                if (messageEl) messageEl.textContent = locationText;
57
            }
58
        } catch (error) {
59
            const messageEl = document.getElementById('welcome-message');
60
            if (messageEl) messageEl.textContent = '你好，欢迎来到我的博客';
61
        }
62
    }
63

64
    async function showWelcomeToast() {
65
        if (hasShownToast) return;
66
        const toast = createWelcomeToast();
67
        setTimeout(() => {
68
            toast.classList.remove('translate-y-full', 'opacity-0');
69
            toast.classList.add('translate-y-0', 'opacity-100');
70
        }, 100);
71
        hasShownToast = true;
72
        await fetchLocation();
73
        setTimeout(() => { closeWelcomeToast(); }, 5000);
74
    }
75

76
    function initWelcome() {
77
        // 检查是否已显示过欢迎弹窗
78
        // if (!sessionStorage.getItem(VISIT_SESSION_KEY)) {
79
        //     sessionStorage.setItem(VISIT_SESSION_KEY, 'true');
80
        //     showWelcomeToast();
81
        // }
82
        // 显示欢迎弹窗
83
        showWelcomeToast();
84
    }
85

86
    if (document.readyState === 'loading') {
87
        document.addEventListener('DOMContentLoaded', initWelcome);
88
        document.addEventListener('astro:page-load', initWelcome);
89
    } else {
90
        initWelcome();
91
    }
92

93
    (window as any).closeWelcomeToast = closeWelcomeToast;
94
</script>
95

96
<style>
97
    /* 样式保持不变 */
98
    #welcome-toast { max-width: calc(100vw - 2rem); }
99
    @media (max-width: 640px) {
100
        #welcome-toast {
101
            top: auto; bottom: 1rem; left: 50%; right: auto;
102
            transform: translateX(-50%) translateY(100%);
103
            width: 90%; max-width: none;
104
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
105
        }
106
        #welcome-toast.translate-y-0 { transform: translateX(-50%) translateY(0); }
107
        #welcome-toast.translate-y-full { transform: translateX(-50%) translateY(100%); }
108
    }
109
</style>

展开收起

使用组件#

文件路径：src/layouts/MainGridLayout.astro

1
---
2
import WelcomeToast from "@components/widget/WelcomeToast.astro"; //欢迎提示组件
3
---
4

5
<!-- 欢迎提示组件 -->
6
<WelcomeToast></WelcomeToast>

显示逻辑配置#

访客只在首次访问时显示欢迎弹窗（原作者）

1
    function initWelcome() {
2
        // 检查是否已显示过欢迎弹窗
3
        if (!sessionStorage.getItem(VISIT_SESSION_KEY)) {
4
            sessionStorage.setItem(VISIT_SESSION_KEY, 'true');
5
            showWelcomeToast(); // 显示欢迎弹窗
6
        }
7
    }

访客只会在首页刷新时显示，非首页刷新不会显示（正在使用）

1
    function initWelcome() {
2
        // 检查是否为首页（路径为 "/" 或 "/index.html"）
3
        const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html';
4

5
        // 只在首页显示欢迎弹窗
6
        if (isHomePage) {
7
            showWelcomeToast();
8
        }
9
    }

访客每次刷新页面时，欢迎提示组件会重新显示，不限于文章页。

1
    function initWelcome() {
2
        // 显示欢迎弹窗
3
        showWelcomeToast();
4
    }

年轻的时候是旅游重要还是攒钱重要？

Thu, 30 Apr 2026 00:00:00 GMT

独特价值#

18岁时，我们揣着打工兼职存下的钱，就能在绿皮火车的硬座上熬一整夜

住青旅像回到大学宿舍般自在，和萍水相逢的陌生人聊起梦想，眼睛里都闪着光

那时的快乐很简单：有耗不尽的体力，特种兵旅行一整天，到第二天还有精力继续开启旅行

少年心气是不可再生之物，一场说走就走的旅行，一次毫不犹豫的出发，都是青春最滚烫的印记

人生有无数个夏天，却只有一次少年的烟火人间

我们只来一次，不如真诚一点，过得肆意，活成自己并永远热烈且自由

旅行心境#

或许到了30多岁，我们终于有能力选择喝着咖啡在沙滩边看日出日落、睡一觉就能抵达异国他乡的飞机，去往年轻时日思夜想的雪山

可站在山脚下的那一刻，却少了当年的激动，多了几分家里的柴米油盐和下班的疲惫

不再忙着打卡拍照发朋友圈，只想独自坐在山顶晒晒太阳发着呆

原来，最好的旅行从来不是在准备和计划中，而是在出发的那一刻

感悟人生#

大家常说：“欲买桂花同载酒，终不似少年游”

可也别忘了，“莫道桑榆晚，为霞尚满天”

人生还很长，一程有一程的风景

20岁没有完成的事情，30岁去完成也没关系；

就算是朝花夕拾，你觉得没有意义了，那也无所谓

人生于天地间，若白驹过隙，忽然而已

所以岁月不待人，及时当勉励，重在的是”诗酒趁年华”

遗憾错过#

你一生追求的东西，其实一开始就有

18岁的你想去旅行，可你囊中羞涩，止于心动

20岁的你，朋友都叫你出去玩，可你说学业要紧，止于行动

我们总说来日方长，却忘了人只活这一次

很多事情错过一次，可能就再也没有机会了；很多远方，错过一次就再也去不成了

所有的错过，最终都成为这辈子难以忘怀的遗憾；

或许等我老了，躺在床上回想起这一生，要是因为一些事而一次次错过自己的梦想与决定，那我该多懊悔啊！

出发勇气#

很多幸福和快乐都是后知后觉，当我们身在其中的时候，或许觉得并没有什么，但过了很久以后，就会开始怀念

在所有不确定的时间里，好好珍惜当下才是最珍贵的

愿你我永远有出发的勇气和说走就走的行动力，并一直朝着梦想远航

虚无缥缈の小破站

掌握基本的 Linux 命令

🐧 掌握基本的 Linux 命令#

📑 目录#

🚀 绝对核心#

⚡ 高频利器 - 效率倍增器#

🛠️ 瑞士军刀 - 多功能工具#

☢️ 危险操作#

📝 总结与建议#

🏆 Top 10 核心命令#

📚 学习策略（6 步走）#

🎯 进阶路线图#

📖 命令速查手册（按场景分类）#

1️⃣ 文件导航与查看#

2️⃣ 文件操作#

3️⃣ 文本处理#

4️⃣ 系统管理#

5️⃣ 网络操作#

6️⃣ 查找与帮助#

7️⃣ 组合技巧#

🎓 附录：常用参数速查#

ls 常用参数#

grep 常用参数#

tar 参数记忆法#

📜 最后的话#

待办

功能#

BUG#

优化#

快速开始

快速开始#

环境要求#

安装#

项目结构#

配置文件概览#

网工必看！1 个实验打通 8 大核心技能，搞定企业网络实战（附详细配置）

一、模拟企业网络拓扑#

企业需求#

地址规划#

二、核心技能配置#

技能 1：链路聚合——增加带宽与链路冗余#

AGG1#

AGG2#

技能 2：VLAN、三层互通与接口地址——隔离部门并打通网络#

2.1 配置 VLAN 与接口类型#

AGG1#

AGG2#

ACC1#

ACC2#

2.2 配置 ISP 与 R1 的接口地址#

ISP#

R1#

2.3 将 AGG 上联接口切换为三层接口#

AGG1#

AGG2#

2.4 配置 VLAN 三层接口#

AGG1#

AGG2#

技能 3：MSTP——消除环路并实现负载分担#

3.1 配置 MSTP 域#

AGG1#

AGG2#

ACC1#

ACC2#

3.2 配置各实例的根桥#

AGG1#

AGG2#

技能 4：VRRP——实现网关冗余与流量分担#

AGG1#

AGG2#

技能 5：DHCP——自动分配终端地址#

AGG1#

AGG2#

技能 6：NAT——让内网访问互联网#

技能 7：静态路由——打通内外网并控制回程路径#

7.1 配置默认路由#

7.2 配置浮动静态路由#

技能 8：Telnet——实现 R1 远程管理#

三、验证实验效果#

四、写在最后#

`ls` 常用参数#

`grep` 常用参数#

`tar` 参数记忆法#

`type` — 访问类型#

`rows` — 扫描行数#

`Extra` — 额外信息#