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构建项目文档系统的更多相关文章

  1. 使用Mkdocs构建你的项目文档

    使用Mkdocs构建你的项目文档 环境搭建 安装必需软件 作者是在windows下安装的,如果是linux或mac用户,官网有更详细的安装说明. windows 10 x64 当然还有广大的windo ...

  2. 基于WPF系统框架设计(5)-Ribbon整合Avalondock 2.0实现多文档界面设计(二)

    AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件.最新发布的版本原生支持MVVM框架.Aero Snap特效并具有更好的性能. Ava ...

  3. vuepress+gitee 构建在线项目文档

    目录 快速入门 在现有vue项目中安装本地开发依赖vuepress 在现有vue项目根目录下创建docs目录 创建并配置文档首页内容 运行,查看效果 可能会出现vue和vue-server-rende ...

  4. MkDocs项目文档生成器

    简介 安装 我的配置 Chocolatey 简介 - Windows的包管理器 官方网址 安装 注意事项 Python 简介 安装 Pip 简介-Python的包管理器 升级 MkDocs的安装 使用 ...

  5. 一文搭建自己博客/文档系统：搭建，自动编译和部署，域名，HTTPS，备案等

    本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 第一部分 - 博客/文档系统的搭建 搭建博客有很多选择,平台性的比如: 知名的CSDN, 博客园, 知乎,简 ...

  6. Spring Boot中使用Swagger2构建API文档

    程序员都很希望别人能写技术文档,自己却很不愿意写文档.因为接口数量繁多,并且充满业务细节,写文档需要花大量的时间去处理格式排版,代码修改后还需要同步修改文档,经常因为项目时间紧等原因导致文档滞后于代码 ...

  7. 通过VuePress管理项目文档(一)

    VuePress 相关链接 完整的Vue组件代码以及完整的文档,仅适用于个人参考学习: 文档预览地址:预览链接 使用VuePress编辑文档的代码访问:组件文档 完整代码:组件代码 Vue组件开发 这 ...

  8. springboot+mybatis-puls利用swagger构建api文档

    项目开发常采用前后端分离的方式.前后端通过API进行交互,在Swagger UI中,前后端人员能够直观预览并且测试API,方便前后端人员同步开发. 在SpringBoot中集成swagger,步骤如下 ...

  9. 如何在ASP.NET Core 中快速构建PDF文档

    比如我们需要ASP.NET Core 中需要通过PDF来进行某些简单的报表开发,随着这并不难,但还是会手忙脚乱的去搜索一些资料,那么恭喜您,这篇帖子会帮助到您,我们就不会再去浪费一些宝贵的时间. 在本 ...

  10. springboot利用swagger构建api文档

    前言 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容,见参考资料. S ...

随机推荐

  1. .NET/C#操作Redis的简单方法

    本文属于Redis初级应用,只起初步引路作用,高手们可略过. 支持.Net Core(2.0及以上)/.Net Framework(4.5及以上),可以部署在Docker, Windows, Linu ...

  2. （原创）【B4A】一步一步入门08：ListView，列表、单行、双行、双行带图片、列表项样式（控件篇04）

    一.前言 本篇教程,我们来讲一下常用的控件:ListView(列表控件). 目前官方已经不推荐使用默认的ListView控件,而是推荐另一款功能更强大的ListView:xCustomListView ...

  3. Latex符号

    上标 $\hat{x}$ : \(\hat{x}\) $\widehat{x}$ : \(\widehat{x}\) $\tilde{x}$ : \(\tilde{x}\) $\widetilde{x ...

  4. MySQL 高级查询截取分析

    慢日志分析流程如下:[1]观察(至少跑一天),看看生产慢 SQL 情况.[2]开启慢查询日志,设置阈值,比如对超过5秒的 SQL 语句进行抓取.[3]explain+慢 SQL 分析.[4]show ...

  5. 华为Sound Joy用后感

    在买华为Sound Joy音响前,我就在几个相似的音响之中衡量,其中有MIFA WildRod和JBL 万花筒6做了对比,在经过一系列的对比(网上查阅资料)之后,我最终选择了华为的Sound Joy这 ...

  6. 《HelloGitHub》第 84 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  7. Let和Const区别，详细版本

    let:声明的是变量1.不存在变量提升 // var 的情况 console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log( ...

  8. AIArena Frontend 初步练习

    尝试对starter项目的页面进行改变 修改侧边栏,只留下最上面的「仪表盘」和「列表页」两个大模块 in SideNav.vue the code for the sidebar menu is: & ...

  9. tcp，udp tcp三次握手四次挥手，基于套接字进行简单通信

    1.应用层: 应用层功能:规定应用程序的数据格式. 例:TCP协议可以为各种各样的程序传递数据,比如Email.WWW.FTP等等.那么,必须有不同协议规定电子邮件.网页.FTP数据的格式,这些应用程 ...

  10. java基础--lambda表达式

    lambda表达式,一种常见用法,就是简化匿名内部类.使用前提条件:如果一个方法A(),只涉及一个抽象方法待实现,那么使用A()时,涉及到匿名内部类,就可以简化为 lambda 表达式 lambda表 ...