2 Star 37 Fork 9

DotNet-MoYu / Vitepress-Template

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

说明

一个VitePress的项目模版,可以通过脚本自动构建sidebar配置,只需要维护一份映射文件即可,非常方便。 img.png

目录结构

│  index.md                 # 首页配置

├─.vitepress                # vitepress文件夹
│  │  config.mts            # vitepress配置导航栏和侧边栏等配置
│  ├─components             # 存放组件
│  └─theme                  # 主题配置
│      │  index.ts          # 配置主题
│      │ 
│      └─styles             # 存放样式
│              index.scss   # 自定义主题样式

├─guide                     # 存放页面文件夹
│  │  GenerateMapping.ps1   # 生成映射文件脚本
│  │  mapping.json          # 映射文件
│  │  set_sidebar.mts       # 设置侧边栏脚本
│  │
│  ├─configs                # 配置页面文件夹
│  │      config.md         # 配置页面markdown文件
├─public                    # 存放静态资源

└─sponsor                   # 捐赠页面文件夹

生成映射文件

在guide文件夹下,使用powershell运行GenerateMapping.ps1脚本,会自动扫描guide文件夹下的所有文件夹和文件,生成mapping.json文件。 在mapping.json文件中,可以配置每个文件夹下的文件,以及文件夹的标题信息。比如:

{
	"configs":  "配置",
	"docs":  "文档",
	"introduce":  "指引",
	"config.md":  "配置内容",
	"doc.md":  "文档内容",
	"quickstart":  "快速开始",
	"demo.md":  "示例",
	"introduce.md":  "介绍",
	"get-start.md":  "入门"
}

在config.mts,我们不需要手动配置侧边栏,只需调用set_sidebar方法即可。

import { set_sidebar } from './guide/set_sidebar.mts'

//侧边栏配置
sidebar: {
	"/guide/introduce/": set_sidebar('/guide/introduce'),
	"/guide/docs/": set_sidebar('/guide/docs'),
}

配置主题色

theme/styles/index.scss文件中,可以配置主题色,比如:

:root {
	--vp-c-brand: #DB3C19;
	--vp-c-brand-light:#EF4619;
	--vp-c-brand-lighter:#FA6037;
	--vp-c-brand-lightest: #F6785D;
	--vp-c-brand-dark: #F14619;
	--vp-c-brand-darker: #FF3803;
	--vp-c-brand-dimm: #7B1803;
}

具体可以参考vitepress官方文档:https://vitepress.dev/zh/guide/extending-default-theme

本地运行

# 安装依赖
npm install

# 本地浏览
npm run docs:dev 

发布部署

npm run docs:build 
MIT License Copyright (c) 2024 DotNet-MoYu Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一个VitePress的项目模版,可以通过脚本自动构建sidebar配置,只需要维护一份映射文件即可,非常方便。 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/dotnetmoyu/Vitepress-Template.git
git@gitee.com:dotnetmoyu/Vitepress-Template.git
dotnetmoyu
Vitepress-Template
Vitepress-Template
master

搜索帮助