文档站品牌定制

第十三章　静态技术文档站品牌修改

说明

这一章针对单独部署在 docs.example.com 的纯静态技术文档站，不是 TOTP Vault PHP 主站。

#72. 推荐目录

宝塔面板

🧰 执行位置：宝塔面板

#73. 文档站需要准备的品牌文件

服务器 SSH / 终端

🖥️ 执行位置：本地电脑 / Codex / 宝塔文件管理器

建议准备：

assets/brand-logo.svg
assets/favicon.svg

#74. 修改文档站网站名称

文档页面顶部原本类似：

<a class="brand" href="/">
  <span class="brand-mark">⌁</span>
  <span>TOTP Vault Docs<small>Deployment & Recovery</small></span>
</a>

替换为：

<a class="brand" href="/">
  <img class="brand-logo" src="/assets/brand-logo.svg" alt="Your Brand">
  <span>Your Brand Docs<small>Security & Operations</small></span>
</a>

CSS：

.brand-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 9px;
}

#75. 添加文档站 Favicon

每个 HTML 的 <head> 内加入：

<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">

同时修改：

<title>Your Brand Docs · 部署与运维文档</title>
<meta name="description" content="Your Brand 2FA 部署、备份、搬迁与恢复文档">
<meta name="theme-color" content="#你的品牌色">

#76. 修改文档站主题色

打开：

assets/style.css

顶部：

:root {
    --accent: #5b4cf0;
    --accent2: #785ff7;
    --accent-soft: #f0edff;
}

改成你的品牌颜色即可。

深色模式也有对应变量：

[data-theme="dark"] {
    --accent: ...;
    --accent2: ...;
    --accent-soft: ...;
}

#77. 文档站全局品牌替换检查

服务器 SSH / 终端

🖥️ 执行位置：服务器 SSH / 终端

例如文档站：

/www/wwwroot/docs.example.com

查找旧名称：

grep -RIn 'TOTP Vault Docs\|Deployment & Recovery\|TOTP Vault v1.1.0' \
/www/wwwroot/docs.example.com \
--exclude='*.md'

根据结果逐项修改。

修改完检查静态文件：

find /www/wwwroot/docs.example.com -type f | sort

文档站是静态 HTML/CSS/JS，所以正常情况下：

不需要重启 PHP
不需要数据库
不需要 Composer
不需要 npm build

Nginx 配置没有改时，甚至不需要 reload；如果改了 Nginx，再执行：

/www/server/nginx/sbin/nginx -t && /etc/init.d/nginx reload

#78. 给 Codex 的品牌修改提示词

Codex / 本地源码

💻 执行位置：Codex

直接把下面整段给 Codex，并把方括号内容替换成自己的品牌：

我有一个纯静态技术文档网站，根目录中包含多个 index.html、assets/style.css、assets/app.js 和 assets/search-index.json。

不要重构，不要引入 Node.js，不要引入框架，不要使用外部 CDN。

请只做全站品牌替换和必要的视觉适配。

我的品牌资料：
网站名称：[YOUR BRAND DOCS]
副标题：[YOUR SUBTITLE]
主站名称：[YOUR 2FA PRODUCT NAME]
品牌主色：[HEX]
品牌深色：[HEX]
品牌浅色背景：[HEX]
Logo 文件：[assets/brand-logo.svg]
Favicon 文件：[assets/favicon.svg]

要求：
1. 所有 HTML 顶部品牌名称统一替换；
2. 原来的文字图标 brand-mark 改为真实 Logo 图片；
3. 所有 HTML head 增加 favicon；
4. 更新 title、meta description、theme-color；
5. 首页 Hero Badge、主标题、介绍语改为我的品牌；
6. 页脚改为我的品牌版权；
7. style.css 只修改品牌变量，不破坏布局；
8. 保留顶部栏、左侧目录、右侧 TOC、代码复制、搜索、深浅色模式、手机端菜单；
9. 不改变任何部署命令和技术内容；
10. 搜索全项目确保旧品牌文字没有遗漏；
11. 不修改代码块里的域名占位符 2fa.example.com / docs.example.com，除非我明确要求；
12. 输出修改文件清单和 grep 检查命令。

修改完成后请执行静态检查，确保所有 HTML/CSS/JS 文件路径存在、内部链接没有 404。

上一章← 主站品牌定制下一章v1.2.0 最终验收 →