LogoMkSaaS文档

配置

学习如何配置您的 MkSaaS 网站

本文档提供了配置您的 MkSaaS 网站的详细参考。

配置结构

配置被分割到 src/config 目录中的几个文件中,每个文件负责网站的特定方面。

website.tsx
navbar-config.tsx
footer-config.tsx
sidebar-config.tsx
avatar-config.tsx
social-config.tsx
price-config.tsx
credits-config.tsx

问:src/config/website.tsx 中的网站配置和 src/config/xxx.tsx 中的其他配置文件有什么区别?

答:website.tsx 文件定义了网站的核心设置,不包括特定于语言环境的信息,而其他配置文件用于定义网站的特定于语言环境的内容

这么做的原因是,WebsiteConfig 可以在客户端和服务器组件中使用,而其他配置文件只能在客户端组件中使用。

配置文件

配置文件用于定义网站的结构和内容。

共享类型

配置在不同菜单中使用一致的类型:

具有以下属性的基本菜单项:

属性类型描述
titlestring菜单项的显示文本
descriptionstring下拉项的可选描述
iconReactNode可选图标组件
hrefstring链接 URL 目标
externalboolean链接是否在新标签页中打开
authorizeOnlystring[]可以看到此项的用户角色
itemsMenuItem[]仅限 NestedMenuItem,可以有下拉菜单的子菜单项

最佳实践

  1. 使用 Routes 对象(在 src/routes.ts 中)定义常用的链接,以确保一致性
  2. 将翻译保存在适当的语言环境文件 (例如, messages/zh.json) 中并使用翻译函数
  3. 统一使用来自 Lucide 图标集 中的图标,以确保一致性
  4. 对于基于角色的菜单项,可以使用 authorizeOnly 属性来限制可见性
  5. 客户端组件应使用函数(例如 getNavbarLinks()),而服务器端组件可以导入原始配置对象

视频教程

下一步

现在您了解了配置结构,请探索其他相关主题: