文章

Footer 配置

通过 zship.app.json 配置 Footer 品牌文案、联系邮箱、社交链接、导航列、法律文案与版权信息。

web-sveltekit 的 Footer 是配置驱动的。请编辑 apps/web-sveltekit/zship.app.json，并把 Footer 相关内容放在顶层 footer 对象里。

不要在 SiteFooter.svelte 中硬编码文案、链接或法律声明。组件只应渲染 siteConfig.footer。

{
  "footer": {
    "brandDisplay": "logo-and-site-name",
    "contactEmail": "support@example.com",
    "description": [
      {
        "en": "Short product promise for the footer.",
        "zh-CN": "底部展示的简短产品说明。"
      }
    ],
    "socialLinks": [
      {
        "labelKey": "footer_github",
        "to": "https://github.com/your-org/your-repo",
        "external": true,
        "icon": "i-simple-icons-github"
      }
    ],
    "sections": [
      {
        "titleKey": "footer_section_product",
        "items": [
          {
            "labelKey": "nav_pricing",
            "to": "/pricing"
          }
        ]
      }
    ],
    "disclaimer": [
      {
        "en": "Optional legal or trademark disclaimer.",
        "zh-CN": "可选的法律或商标免责声明。"
      }
    ],
    "copyright": "© {year} {siteName}"
  }
}

字段说明

  • brandDisplay：控制品牌展示。可用 logo-and-site-name、logo-only、site-name-only。
  • contactEmail：Footer 专用邮箱。设为空字符串可隐藏邮箱行；省略时回退到顶层 contactEmail。
  • description：一行或多行说明，支持本地化对象。
  • socialLinks：可选社交按钮。每项需要 to，以及 labelKey 或本地化 label。空数组表示隐藏。
  • sections：导航列。每列用 titleKey 或 label，每项用 labelKey 或 label 加 to。
  • disclaimer：底部法律/商标声明，空数组表示隐藏。
  • copyright：左下版权文案，支持 {year}、{siteName}、{brandName}。空字符串表示隐藏。

标签与本地化

已有翻译建议复用 apps/web-sveltekit/src/lib/i18n.ts 中的 footer labels：

{
  "labelKey": "footer_support",
  "to": "/docs/support-and-refund"
}

应用专属链接可用本地化 label：

{
  "label": {
    "en": "Changelog",
    "zh-CN": "更新日志"
  },
  "to": "/blog/changelog"
}

本地化对象可包含 en、zh-CN、zh-TW 或 default。当前语言缺失时，会回退到默认语言或第一个非空值。

链接规则

  • 内部路由应以 / 开头，例如 /pricing 或 /docs/quick-start。
  • 锚点可用 /#section-id。
  • 外链应设置 "external": true。
  • /llms.txt 等非页面资源可设 "localize": false 保持原 URL。
  • 允许 mailto:，但联系邮箱通常更适合走 footer.contactEmail。

上线检查清单

发布前确认：

  • footer.description 在产品改名后不再引用模板文案。
  • footer.contactEmail 指向真实支持邮箱。
  • 每个 footer.sections[].items[].to 路由真实存在。
  • 外链打开正确的品牌账号。
  • footer.disclaimer 符合法律与商标策略。
  • 执行 pnpm --filter @zship/web-sveltekit check。
上一篇 下一篇