VuePress2.0构建项目文档系统
VuePress2.0构建项目文档系统
参考TerraMours 官网。https://terramours.site/
文件结构参考：
1.修改首页README.md
修改项目下的README.md，修改内容：
---
home: true
heroImage: images/hero.png
heroText: TerraMours
actions:
- text: 快速开始
link: /guide/
type: primary
- text: 演示站点
link: http://43.134.164.127:8089/
type: secondary
features:
- title: 简洁高效
details: TerraMours 采用了 Masa的MinimalAPI，通过极简的代码实现了高效的 HTTP API 接口的同时，提供更高的性能和更低的延迟。
- title: 领域驱动设计(DDD)
details: TerraMours 框架实现领域驱动设计(DDD)的落地，提供更好的业务识别和管理，更好的模块划分，更好的数据映射，更好的维护性和可扩展性。
- title: 扩展开发
details: TerraMours 已经实现了用户管理、权限验证、日志管理等基础功能，开发者可以根据业务需求快速开发相关业务系统。
footer: MIT Licensed | Copyright (c) 2023 firstsaofan
---
2.修改package.json
添加脚本：
{
"name": "TerraMours-Starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"homepage": "https://github.com/vuepress",
"bugs": {
"url": "https://github.com/vuepress/vuepress-next/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vuepress/vuepress-next.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@vuepress/client": "2.0.0-beta.62",
"@vuepress/plugin-docsearch": "2.0.0-beta.62",
"vue": "^3.3.4",
"vuepress": "2.0.0-beta.62"
}
}
3.补全.vuepress
在.vuepress下补全配置文件
1.创建配置文件
在.vuepress文件夹下创建文件config.js，内容：
import { defaultTheme } from 'vuepress'
import { docsearchPlugin } from '@vuepress/plugin-docsearch'
import { defineUserConfig} from 'vuepress'
import {
navbarEn,
navbarZh,
sidebarEn,
sidebarZh,
} from './configs/index.js'
// const isProd = process.env.NODE_ENV === 'production'
const isProd = false
export default defineUserConfig({
// set site base to default value
base: '/',
// extra tags in `<head>`
// head,
// site-level locales config
locales: {
'/': {
lang: 'zh-CN',
title: 'TerraMours',
description: 'TerraMours 开源项目',
},
'/en/': {
lang: 'en-US',
title: 'TerraMours',
description: 'TerraMours FrameWork',
},
},
// configure default theme
theme: defaultTheme({
logo: '/images/hero.png',
repo: 'firstsaofan/TerraMours',
docsDir: 'docs',
// theme-level locales config
locales: {
/**
* English locale config
*
* As the default locale of @vuepress/theme-default is English,
* we don't need to set all of the locale fields
*/
'/': {
// navbar
navbar: navbarZh,
selectLanguageName: '简体中文',
selectLanguageText: '选择语言',
selectLanguageAriaLabel: '选择语言',
// sidebar
sidebar: sidebarZh,
// page meta
editLinkText: '在 GitHub 上编辑此页',
lastUpdatedText: '上次更新',
contributorsText: '贡献者',
// custom containers
tip: '提示',
warning: '注意',
danger: '警告',
// 404 page
notFound: [
'这里什么都没有',
'我们怎么到这来了？',
'这是一个 404 页面',
'看起来我们进入了错误的链接',
],
backToHome: '返回首页',
// a11y
openInNewWindow: '在新窗口打开',
toggleColorMode: '切换颜色模式',
toggleSidebar: '切换侧边栏',
},
/**
* Chinese locale config
*/
'/en/': {
// navbar
navbar: navbarEn,
// sidebar
sidebar: sidebarEn,
// page meta
editLinkText: 'Edit this page on GitHub',
},
},
themePlugins: {
// only enable git plugin in production mode
git: isProd,
// use shiki plugin in production mode instead
prismjs: !isProd,
},
}),
// use plugins
plugins: [
docsearchPlugin({
appId: '34YFD9IUQ2',
apiKey: '9a9058b8655746634e01071411c366b8',
indexName: 'vuepress',
searchParameters: {
facetFilters: ['tags:v2'],
},
locales: {
'/': {
placeholder: '搜索文档',
translations: {
button: {
buttonText: '搜索文档',
buttonAriaLabel: '搜索文档',
},
modal: {
searchBox: {
resetButtonTitle: '清除查询条件',
resetButtonAriaLabel: '清除查询条件',
cancelButtonText: '取消',
cancelButtonAriaLabel: '取消',
},
startScreen: {
recentSearchesTitle: '搜索历史',
noRecentSearchesText: '没有搜索历史',
saveRecentSearchButtonTitle: '保存至搜索历史',
removeRecentSearchButtonTitle: '从搜索历史中移除',
favoriteSearchesTitle: '收藏',
removeFavoriteSearchButtonTitle: '从收藏中移除',
},
errorScreen: {
titleText: '无法获取结果',
helpText: '你可能需要检查你的网络连接',
},
footer: {
selectText: '选择',
navigateText: '切换',
closeText: '关闭',
searchByText: '搜索提供者',
},
noResultsScreen: {
noResultsText: '无法找到相关结果',
suggestedQueryText: '你可以尝试查询',
reportMissingResultsText: '你认为该查询应该有结果？',
reportMissingResultsLinkText: '点击反馈',
},
},
},
},
},
}),
],
})
2.添加public文件夹
存放一些公共文件，比如图标，xml等
1.添加images文件夹
保存图片，将logo放在文件夹下
3.添加configs文件夹
存放配置
1.添加navbar文件夹
导航栏配置
1.添加zh.ts(中文配置)
内容：
import type { NavbarConfig } from 'vuepress'
export const navbarZh: NavbarConfig =[
{
text: '指南',
link: '/guide/',
},
{
text: '项目开发者',
children: [
{
text:"firstsaofan",
link:"https://www.firstsaofan.top/"
},
{
text:"raokun",
link:"https://www.raokun.top/"
}
],
},
]
2.添加index.ts（配置引用）
内容：
export * from './en.js'
export * from './zh.js'
3.添加en.ts（英文配置）
同zh.ts
2.添加sidebar文件夹
侧边栏配置
1.添加zh.ts(中文配置)
2.添加index.ts（配置引用）
3.添加en.ts（英文配置）
同zh.ts
4.创建md文件
参考结构图，新增自己的MD文件，然后在sidebar的配置中添加对应的文件路径配置
5.启动项目命令
pnpm docs:dev
6.项目展示
参考TerraMours 官网。https://terramours.site/
额外配置：全局查找
https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html
使用方法
pnpm i -D @vuepress/plugin-docsearch@next
import { docsearchPlugin } from '@vuepress/plugin-docsearch'
export default {
plugins: [
docsearchPlugin({
// 配置项
}),
],
}
阅读如遇样式问题，请前往个人博客浏览： https://www.raokun.top
拥抱ChatGPT：https://ai.terramours.site
开源项目地址：https://github.com/firstsaofan/TerraMours
VuePress2.0构建项目文档系统的更多相关文章
- 使用Mkdocs构建你的项目文档
使用Mkdocs构建你的项目文档 环境搭建 安装必需软件 作者是在windows下安装的,如果是linux或mac用户,官网有更详细的安装说明. windows 10 x64 当然还有广大的windo ...
- 基于WPF系统框架设计(5)-Ribbon整合Avalondock 2.0实现多文档界面设计(二)
AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件.最新发布的版本原生支持MVVM框架.Aero Snap特效并具有更好的性能. Ava ...
- vuepress+gitee 构建在线项目文档
目录 快速入门 在现有vue项目中安装本地开发依赖vuepress 在现有vue项目根目录下创建docs目录 创建并配置文档首页内容 运行,查看效果 可能会出现vue和vue-server-rende ...
- MkDocs项目文档生成器
简介 安装 我的配置 Chocolatey 简介 - Windows的包管理器 官方网址 安装 注意事项 Python 简介 安装 Pip 简介-Python的包管理器 升级 MkDocs的安装 使用 ...
- 一文搭建自己博客/文档系统：搭建，自动编译和部署，域名，HTTPS，备案等
本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 第一部分 - 博客/文档系统的搭建 搭建博客有很多选择,平台性的比如: 知名的CSDN, 博客园, 知乎,简 ...
- Spring Boot中使用Swagger2构建API文档
程序员都很希望别人能写技术文档,自己却很不愿意写文档.因为接口数量繁多,并且充满业务细节,写文档需要花大量的时间去处理格式排版,代码修改后还需要同步修改文档,经常因为项目时间紧等原因导致文档滞后于代码 ...
- 通过VuePress管理项目文档(一)
VuePress 相关链接 完整的Vue组件代码以及完整的文档,仅适用于个人参考学习: 文档预览地址:预览链接 使用VuePress编辑文档的代码访问:组件文档 完整代码:组件代码 Vue组件开发 这 ...
- springboot+mybatis-puls利用swagger构建api文档
项目开发常采用前后端分离的方式.前后端通过API进行交互,在Swagger UI中,前后端人员能够直观预览并且测试API,方便前后端人员同步开发. 在SpringBoot中集成swagger,步骤如下 ...
- 如何在ASP.NET Core 中快速构建PDF文档
比如我们需要ASP.NET Core 中需要通过PDF来进行某些简单的报表开发,随着这并不难,但还是会手忙脚乱的去搜索一些资料,那么恭喜您,这篇帖子会帮助到您,我们就不会再去浪费一些宝贵的时间. 在本 ...
- springboot利用swagger构建api文档
前言 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容,见参考资料. S ...
随机推荐
- computed的setter妙用
使用场景:当我们用v-model绑定了一个计算属性,想直接设置计算属性时,就要利用到setter demo: <template> <div> <div>First ...
- CPU内部的奥秘：代码是如何被执行的？
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:景明 我们以一段 C 代码为例,来看一下代码被编译成二进制 ...
- C#中event和delegate的区别
event是一种特殊签名格式的delegate,event的定义必须在类内,delegate可以脱离类的存在. event的引发是通过调用委托实现的,而委托不仅仅用来实现事件的引发. 通过加入even ...
- 企业什么喜欢做电视看板，电视看板浏览网页的必备工具 电视看板浏览器 电视看板自动打开网页 电视看板必备APP
企业喜欢做电视看板主要是因为它可以提供以下几个方面的优势: 增强企业形象:电视看板可以将企业的信息和广告以更加生动.直观的方式呈现出来,提高企业形象和知名度. 提高工作效率:电视看板可以在企业内部作为 ...
- Low-Code，一定“low”吗？
作者:京东保险 吴凯 前言 低代码是一组数字技术工具平台,基于图形化拖拽.参数化配置等更为高效的方式,实现快速构建.数据编排.连接生态.中台服务.通过少量代码或不用代码实现数字化转型中的场景应用创新. ...
- IPv4已正式用尽
网际协议版本4 (英语:Internet Protocol version 4,缩写:IPv4,又称互联网通信协议第四版)是网际协议开发过程中的第四个修订版本,也是此协议第一个被广泛部署和使用的版本. ...
- [大数据]sqoop安装与运用
1 文由 项目使用场景:OLTP Oracle 数据导入到 OLAP HIVE 2 Sqoop简述 Apache Sqoop(TM) 是一款开源的ETL工具,设计用于在 Apache Hadoop和结 ...
- PMD插件：你必须掌握的代码质量工具！
当今的软件开发需要使用许多不同的工具和技术来确保代码质量和稳定性.PMD是一个流行的静态代码分析工具,可以帮助开发者在编译代码之前发现潜在的问题.在本文中,我们将讨论如何在Gradle中使用PMD,并 ...
- oracle删除一张表后，索引，同义词，视图，约束会被删除么
问题描述:看到有一道题,说删除一张表之后,什么会被关联删除 进行测试,看看一张表什么会被关联删除,进行scoot下的EMP进行测试 一.创建测试需求用例 表结构: SQL> desc emp; ...
- [Go] 递归获取目录下的文件
操作示例: ./scan /Document/dir 代码: // 定义递归文件树结构体 type treeList struct { Path string `json:"path&quo ...