🏷️ 白标与定制指南 (从这里开始)

目标： 将 "Instant Ship™" 脚手架转变为您的产品。 预计时间： 15-30 分钟。

本指南提供了一个分步检查清单，以剥离原始品牌，应用您的身份，并为您的特定业务逻辑准备架构。

阶段一：品牌注入 (“皮肤”)

步骤 1: 全局配置 (`site.config.ts`)

此文件是您网站身份的“大脑”。

更改名称和域名: 更新 name、domain (您的生产 URL)。
更新社交链接: 将 author 对象替换为您的姓名和社交链接。
分析: 清除或替换 analytics 中的 ID (或使用 .env)。
清理路由: 如果您不需要 /manifesto 或 /pricing，请从 routes 数组中移除它们。

步骤 2: 视觉识别 (`tailwind.config.js`)

通过更新调色板即时更改外观和感觉。

主色: 找到 theme.extend.colors.primary。将 #135bec 更改为您的品牌颜色。
- 提示: 同时更新 primary.dark 用于悬停状态。
字体: 如果您想更改 Inter，请更新 index.html (Google Fonts) 和 tailwind.config.js 中的 font-family。

步骤 3: 文本与文案 (`i18n.ts`)

这是 "Instant Ship" 文本所在的地方。

查找和替换: 搜索 "Instant Ship" 并替换为您的产品名称。
导航链接: 如果您在步骤1中更改了路由，请更新 nav 对象。
落地页: 重写 welcome、audience 和 workflow 部分以匹配您产品的价值主张。
移除创始人故事: 找到 identity 和 manifesto 键。重写它们以讲述您的故事，或从主页组件中移除这些部分。

步骤 4: 应用清单 (`public/manifest.json`)

确保您的 PWA 在移动设备上看起来像您的应用。

更新名称: 更改 name 和 short_name。
更新图标: 将 picsum.photos 链接替换为您的实际 logo 路径 (例如, /assets/icon-192.png)。
主题颜色: 将此颜色与您新的 Tailwind 主色匹配。

阶段二：结构清理 (“身体”)

默认脚手架包含特定于“100产品挑战”的部分。您可能希望移除它们。

步骤 1: 清理主页 (`routes/$lang.index.tsx`)

移除组件: 如果它们不符合您的叙述，删除 <FounderIdentity />、<ShippingRitual /> 或 <Manifesto />。
更新英雄区: 确保 <Hero /> 为您的新产品传递正确的翻译键。

步骤 2: 页脚清理 (`routes/__root.tsx`)

移除“挑战”链接: 在 <footer> 中，除非您正在参与，否则移除链接到“100产品挑战”的部分。
版权: 验证动态年份和品牌名称是否自动更新 (它从 siteConfig 读取)。

阶段三：添加新功能 (“扩展”)

现在网站看起来像您的了，以下是如何添加新功能页面 (例如, "工具" 页面)。

步骤 1: 创建路由

创建一个文件：routes/$lang.tools.tsx。


tsx
import { createFileRoute } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';

export const Route = createFileRoute('/$lang/tools')({
  component: ToolsPage,
});

function ToolsPage() {
  const { t } = useTranslation();
  return (
    <div class="py-20 animate-fade-in">
      <h1>{t('tools.title')}</h1>
      {/* 在此放置您的功能组件 */}
    </div>
  );
}

步骤 2: 为 SEO 注册 (`site.config.ts`)

关键： 如果不这样做，页面将没有标题标签或 sitemap 条目。


typescript
routes: [
  // ... existing
  { path: "/tools", titleKey: "tools.title", descriptionKey: "tools.desc" }
]

步骤 3: 添加翻译 (`i18n.ts`)


typescript
{
  translation: {
    tools: {
      title: "AI 工具套件",
      desc: "为您的工作流提供强大的生成器。"
    }
  }
}

步骤 4: 添加到导航 (`routes/__root.tsx`)

找到 <nav> 部分并添加您的链接：


tsx
<Link to={getLocalizedPath('/tools')} ... >
  {t('tools.title')}
</Link>

阶段四：发布准备 (“点火”)

步骤 1: 环境变量

在本地创建 .env 文件或在 Cloudflare Pages 中配置：

VITE_GA_ID (您的 Google Analytics)
VITE_CLARITY_ID (您的 Clarity 项目)
API_KEY (用于 SEO 优化脚本的 Gemini API，可选)

步骤 2: GitHub Actions

确保在您的仓库设置中为 github/workflows/ci-suite.yml 启用了写入权限 (Settings > Actions > General > Read and write permissions)。

步骤 3: 构建与测试

运行 npm run build。

检查 dist/sitemap.xml: 它是否包含您的新路由？
检查 dist/index.html: 标题标签是否正确？

🏷️ 白标与定制指南 (从这里开始)

阶段一：品牌注入 (“皮肤”)

步骤 1: 全局配置 (site.config.ts)

步骤 2: 视觉识别 (tailwind.config.js)

步骤 3: 文本与文案 (i18n.ts)

步骤 4: 应用清单 (public/manifest.json)