Typecho 主题从 Initial 升级到 Initial-M 记录

在长期使用 Initial 主题并做了一些个性化定制后，决定将其升级到功能更丰富的 fork 版本 Initial-M。本文记录升级过程中的思路和操作，供有同样需求的朋友参考。

为什么升级

Initial 是一款非常优秀的 Typecho 简约主题，但原作者已很久未更新。Initial-M 在此基础上做了大量增强：

• SEO 优化 — 自动生成 Description、Canonical URL、Open Graph 和 Schema.org 结构化数据
• 回复可见 — 原生支持 [hidden] 标签，评论后可查看隐藏内容
• 封面图系统 — 文章可设置封面图，首页和默认页也有独立封面设置
• 文章过期提醒 — 可配置 N 天未更新则显示提醒
• 站点统计 — 文章数、评论数、运行天数、总码字数
• 多套配色 — 后台一键切换主题配色
• 公安备案支持 — 增加公安备案字段
• 打赏功能 — 内置微信/支付宝收款码
• 广告位系统 — 支持 Google AdSense 及自定义广告代码
• 自定义代码嵌入 — 灵活的位置控制（侧栏各处、页脚等）
• 响应式表格 — 自动包裹 table 为可滚动容器

梳理已有的自定义改动

在升级前，先梳理了当前主题上做的个性化修改，共 7 项：

1. Pangu.js 自动中英文间距 — 页面加载后自动在中英文之间插入空格
2. 波浪动画页脚 — 底部 SVG 波浪动画效果
3. 归档下拉菜单 — 将归档列表改为 select 下拉选择月份
4. 登录后快捷编辑链接 — 文章页显示「文章编辑」「评论编辑」链接
5. Bangumi 追番挂件 — 侧栏显示 Bangumi 动画追踪图片
6. 页脚自定义文字 — 增加站点副标题和旧站链接
7. 移除单栏模式 — 强制固定显示侧边栏

升级流程

1. 获取新基准

# 在服务器上下载 Initial-M
curl -sL https://github.com/YuYisir/Initial-M/archive/refs/heads/master.tar.gz -o initial-m.tar.gz
tar xzf initial-m.tar.gz --strip-components=1 -C initial-m

2. 逐项应用自定义改动

核心思路：保留 Initial-M 的新功能，只叠加自己的个性化定制，不盲目覆盖。

改动涉及 4 个文件：

header.php — Pangu.js

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/pangu/4.0.7/pangu.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        pangu.spacingPage();
    });
</script>

footer.php — 波浪动画

在 </body> 前插入 SVG 波浪：

<div class="wave"><svg class="editorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
  <defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /></defs>
  <g class="parallax">
    <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
    <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
    <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
  </g>
</svg></div>
<style type="text/css">
.parallax > use{animation: move-forever 12s linear infinite;}
.parallax > use:nth-child(1){animation-delay: -2s;}
.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}
.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}
@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}
.wave{width:100%;height:40px;position:relative;overflow:hidden;z-index:1;background:#fff;opacity:.7;}
.editorial{display:block;width:100%;height:40px;margin:0;}
</style>

3. 部署

由于博客运行在 Docker 中，主题目录在数据卷内，需部署到正确位置：

# 备份旧主题
cp -a /path/to/usr/themes/initial /path/to/usr/themes/initial-backup-$(date +%Y%m%d)

# 部署新主题
cp -a /tmp/initial-m-custom /path/to/usr/themes/initial

验证

部署后用 curl 验证首页正常返回 HTTP 200，且页面中包含所有自定义元素：

curl -sL https://your-blog.com/ | grep -c "pangu"      # Pangu.js 已加载
curl -sL https://your-blog.com/ | grep -c "wave"        # 波浪动画
curl -sL https://your-blog.com/ | grep -c "Bangumi"     # 追番挂件

注意事项

1. Docker 部署注意路径 — 如果 Typecho 跑在容器内，主题文件需放到容器数据卷对应目录，而非宿主机 Nginx 根目录
2. Initial-M 配置项增多 — 部署后建议进入后台 → 设置外观，浏览新增配置项（封面图、配色方案等）
3. 单栏模式保留 — Initial-M 保留了 OneCOL 配置选项，可根据需要开启或关闭
4. 备份先行 — 任何主题升级前务必备份旧版本

升级后博客在保留原有个性化风格的同时，获得了 SEO、Schema 结构化数据、回复可见等大量新特性，整体体验明显提升。