📋 这篇文章展示了所有内容机制

🔗 超链接

网站文章支持三种超链接风格：

• 普通行内链接：返回首页
• 带"外链"箭头的跳转：GitHub 主页
• 卡片式链接（适合重要资源）：

文章列表页   网站状态页   隐私政策

---

🖱️ 按钮

基础按钮

尺寸变体

有实际功能的按钮

---

🏷️ 徽章 / 标签

粉色  蓝色  成功  警告  默认

NEW  已完成  进行中  已废弃

---

💬 提示框 / Callout

代码改变世界，但世界不会因此变得更简单——只是变得更有趣。

— ciallo0721-cmd，某个凌晨调完 bug 之后

---

📊 表格

文章页面特性对比

访问量（虚构测试数据）

---

📶 进度条

可以用来展示技能熟练度、项目完成度、测试通过率等：

• HTML / CSS95%
• JavaScript80%
• Python72%
• GitHub Actions60%
• Unity C#38%

---

📈 图表

使用纯 Canvas + 原生 JS 绘制，无需引入第三方图表库：

---

💻 代码块

行内代码（悬停揭示）

鼠标悬停在下方黑色方块上可以看到内容：document.documentElement.style.filter = "grayscale(1)"，这就是哀悼日灰度注入的核心代码。

代码区块

<!-- 哀悼日灰度注入标记 -->
<!-- MEMORIAL-DAY-GRAYSCALE -->
<script>document.documentElement.style.filter="grayscale(1)";</script>
<!-- /MEMORIAL-DAY-GRAYSCALE -->

# GitHub Actions 工作流片段 (memorial-day-grayscale.yml)
on:
  schedule:
    - cron: '0 0 18 9 *'   # 9月18日 00:00 UTC
    - cron: '0 0 13 12 *'  # 12月13日 00:00 UTC
  workflow_dispatch:

jobs:
  add-grayscale:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: 注入灰度样式
        run: |
          sed -i 's|</body>|<!-- MEMORIAL-DAY-GRAYSCALE -->\n<script>document.documentElement.style.filter="grayscale(1)";</script>\n<!-- /MEMORIAL-DAY-GRAYSCALE -->\n</body>|' index.html
      - name: 提交推送
        run: |
          git config user.name "github-actions[bot]"
          git add index.html
          git diff --cached --quiet || git commit -m "🕯️ 哀悼日：启用全站灰度模式" && git push

键盘快捷键

按 ESC 关闭弹窗或返回首页，按 Ctrl + S 保存……好吧这是网页，没法 Ctrl+S 啦喵。

---

🖼️ 图片 / 音频 / 视频

图片（点击放大）

音频播放器

视频播放器

---

📄 PDF 阅读器

基于 PDF.js 实现的内嵌 PDF 阅读器，支持本地上传或输入 URL 加载 PDF，可翻页、缩放、滚动查看。

✍️ 排版杂项

折叠区域

剧透警告：点击展开隐藏内容

这里是折叠起来的内容，适合放剧透、答案、详细说明等读者可以选择是否查看的内容喵～

也可以放比较长的代码或日志，避免撑开页面。

技术实现细节（展开查看）

使用原生 HTML <details> + <summary> 元素实现，配合 CSS transition 和 ::before 伪元素旋转箭头。无需 JavaScript。

分隔线

行内高亮文字

使用 粉色高亮 标记重要词汇，使用 蓝色高亮 标记技术术语，适合在正文中强调关键词。

有序 / 无序列表

---

🕯️ 哀悼日灰度说明

技术实现方式：通过 GitHub Actions 定时工作流，在 index.html 的 </body> 前注入一段 JS：

document.documentElement.style.filter = "grayscale(1)";

使用 HTML 注释标记 包裹，便于次日工作流精确识别并移除。工作流文件存放于 .github/workflows/memorial-day-grayscale.yml 和 memorial-day-remove-grayscale.yml，支持手动触发（workflow_dispatch）用于测试。

点击下方按钮可以在本页面预览灰度效果：