配置
学习如何配置您的 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()
),而服务器端组件可以导入原始配置对象
视频教程
下一步
现在您了解了配置结构,请探索其他相关主题: