VuePress2.0构建项目文档系统

参考TerraMours 官网。https://terramours.site/

文件结构参考:

1.修改首页README.md

修改项目下的README.md,修改内容:

---home: trueheroImage: images/hero.pngheroText: TerraMoursactions:  - text: 快速开始    link: /guide/    type: primary  - text: 演示站点    link: http://43.134.164.127:8089/    type: secondaryfeatures:- 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 = falseexport default defineUserConfig({    // set site base to default value    base: '/',    // extra tags in ``    // 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