MkSaaS文档配置
学习如何配置您的 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 可以在客户端和服务器组件中使用，而其他配置文件只能在客户端组件中使用。
配置文件
配置文件用于定义网站的结构和内容。
网站配置
网站的核心设置
导航栏配置
配置头部导航菜单
页脚配置
设置网站页脚中的链接和部分
侧边栏配置
自定义仪表盘侧边栏导航
头像配置
配置用户头像下拉菜单
社交配置
管理社交媒体链接和分享选项
价格配置
定义订阅计划和定价选项
积分配置
定义积分计划和积分选项
共享类型
配置在不同菜单中使用一致的类型：
MenuItem 和 NestedMenuItem
具有以下属性的基本菜单项：
| 属性 | 类型 | 描述 |
|---|---|---|
title | string | 菜单项的显示文本 |
description | string | 下拉项的可选描述 |
icon | ReactNode | 可选图标组件 |
href | string | 链接 URL 目标 |
external | boolean | 链接是否在新标签页中打开 |
authorizeOnly | string[] | 可以看到此项的用户角色 |
items | MenuItem[] | 仅限 NestedMenuItem，可以有下拉菜单的子菜单项 |
最佳实践
- 使用
Routes对象（在src/routes.ts中）定义常用的链接，以确保一致性 - 将翻译保存在适当的语言环境文件 (例如，
messages/zh.json) 中并使用翻译函数 - 统一使用来自 Lucide 图标集 中的图标，以确保一致性
- 对于基于角色的菜单项，可以使用
authorizeOnly属性来限制可见性 - 客户端组件应使用函数（例如
getNavbarLinks()），而服务器端组件可以导入原始配置对象
视频教程
下一步
现在您了解了配置结构，请探索其他相关主题：