站点、导航与元数据
配置站点元数据、导航与品牌信息。
全站设置位于 src/config。这些纯 TypeScript 模块负责品牌、导航、社交链接与
路由,而页面元数据(标题、描述、metadataBase)则在根语言布局中设置。
重要文件
| 文件 | 作用 |
|---|---|
src/config/website-config.ts | 社交账号 + 邮件(fromEmail、supportEmail) |
src/config/social-config.ts | 根据 website-config 构建社交链接列表 |
src/config/footer-config.ts | 页脚分栏(通过 next-intl 翻译) |
src/config/route-config.ts | Routes 枚举——所有内部路径 |
src/config/user-sidebar-config.ts | 仪表盘侧边栏导航(区分角色) |
src/config/docs-sidebar-config.ts | 手动配置的文档侧边栏链接 |
src/app/[locale]/layout.tsx | <head> 元数据 + metadataBase |
src/app/[locale]/(marketing)/opengraph-image.tsx | 社交分享图 |
品牌与联系方式:website-config.ts
这是重塑品牌时首先要编辑的文件。它存放社交主页 URL,以及用于收发邮件的地址:
export const websiteConfig: WebsiteConfig = {
metadata: {
social: {
github: "https://github.com/your-username",
twitter: "https://twitter.com/your-username",
// linkedin, facebook, instagram, tiktok, telegram…
},
},
mail: {
provider: "resend",
fromEmail: "SoarStarter <noreply@mail.soarstarter.com>",
supportEmail: "contact@soarstarter.com",
},
};social-config.ts 读取这些值,并只返回已设置的链接,因此删除某个账号即可
移除其图标。fromEmail/supportEmail 供邮件流程使用。
导航
- 页脚——
footer-config.ts导出getFooterLinks(t),将链接分为 产品 / 资源 / 公司 / 法律 几栏。它接收一个 next-intl 翻译函数t,因此 分栏与链接文案来自messages/*.json;而 href 来自Routes枚举。 - 路由——
route-config.ts将每条内部路径集中为Routes枚举 (Routes.Pricing、Routes.AuthLogin、Routes.Dashboard等)。请引用枚举 而非硬编码字符串,以保持路径一致。 - 仪表盘侧边栏——
user-sidebar-config.ts导出getSidebarLinks(),其中 含区分角色的项(roles: ["admin"])。当NEXT_PUBLIC_IS_DEMO为true时,管理员链接会向所有人展示以便演示。
元数据
页面元数据定义在语言根布局中,而非配置文件里:
export const metadata: Metadata = {
metadataBase: new URL(
process.env.NEXT_PUBLIC_SITE_URL ?? "https://soarstarter.com",
),
title: "SoarStarter Next",
description:
"SoarStarter is a production-oriented SaaS template built with Next.js…",
};metadataBase 用于解析相对的 Open Graph / 规范 URL,因此生产环境务必设置
NEXT_PUBLIC_SITE_URL。各页面可导出自己的
metadata 或 generateMetadata 来覆盖标题与描述。
Open Graph 图片并未集中管理。 社交分享卡片是独立文件
(marketing)/opengraph-image.tsx,用 next/og 渲染——编辑
website-config.ts 或布局都不会改变它。请单独更新该组件(或换成静态的
opengraph-image.png)。
重塑品牌清单
名称与文案
在 src/app/[locale]/layout.tsx 设置 title/description,并更新
messages/en.json 与 messages/zh.json 中面向用户的字符串。
链接与联系方式
在 website-config.ts 更新社交账号与 fromEmail/supportEmail。若分栏不同,
在 footer-config.ts 调整页脚分栏。
URL
设置 NEXT_PUBLIC_SITE_URL,确保 metadataBase 与绝对链接正确。
分享图与图标
编辑 (marketing)/opengraph-image.tsx,并替换 src/app/[locale] / public/
下的图标。
