基于VitePress搭建静态文档系统

news2024/11/23 12:54:08

文章目录

  • 前言
  • 一、快速上手
  • 二、常用配置
    • 2.1 类Vue风格首页
    • 2.2 顶部导航配置themeConfig.nav
    • 2.3 侧边栏导航设置
    • 2.3 文档中的链接跳转
      • 2.3.1 上一页与下一页
      • 2.3.2 文档中链接
      • 2.3.3 生成成员页
    • 三、进阶配置
    • 四、参考代码

前言

vitePress:与vue press相似,是一个静态网站生成器,相较于vuepress而言,vitepress是基于vue3的,采用vite构建,拥有更轻量更优秀的性能。VitePress的目标是拥有编写文档所需的最低限度功能。其他功能放在主题中实现。另外一方面,VuePress有更多的现成功能,包括由它的插件的生态系统启用的功能。vuepress则是基于vue2.x通过webpack来构建的。

  • VitePress官方文档
  • VuePress官方文档

VitePress与VuePress区别总结:

  • vitePress基于 Vite ,VuePress基于 Webpack 所以更快的启动时间,热重载等
  • vitePress使用 Vue3 来减少 JS 的有效负载
  • vitepress目标是所减掉当前vuepress的复杂性并从极简主义的根源重新开始(配置更简单,轻量)
  • vitePress页面跳转没有用vue-router
  • vue 3 tree shaking+ Rollup 代码分离,打包更快,启动更快

一、快速上手

  • Step 1: 创建并进入一个目录
mkdir vitepress-pro && cd vitepress-pro
  • Step 2: 初始化
yarn init
  • Step 3: 本地安装 VitePress
yarn add --dev vitepress
  • Step 4: 创建第一篇文档
mkdir docs && echo '# Hello VitePress' > docs/index.md
  • Step 5: 在package.json中添加一些script
{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}
  • Step 6: 本地启动
yar docs:dev
  • 文档项目会在http://localhost:5173/中启动一个热重载的开发服务器。
  • 文档系统以/docs作为根目录,项目中所有相对路径都是相对于`/docs’而言

二、常用配置

为了更好的自定义你的静态网站,首先需要在/docs/目录下创建一个.vitepress目录,,所有相关配置文件都将会被放在这里。

├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
└─ package.json

站点必要的配置文件是.vitepress/config.js

module.exports = {
  title: '网站标题', // 浏览器页签标题
  description: '网站描述.' // <meta name="description" content="文档网站描述">
}

2.1 类Vue风格首页

  • 在docs/index.md中输入如下内容后,刷新首页。详细参见文档Layout
  • docs/index.md(默认首页)
---
layout: home
hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
    src: /avatar.png
    alt: VitePress
  actions:
    - theme: brand
      text: Get Started
      link: /
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
features:
  - icon: ⚡️
    title: Vite, The DX that can't be beat
    details: Lorem ipsum...
  - icon: 🖖
    title: Power of Vue meets Markdown
    details: Lorem ipsum...
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
---

关键词:

  • layout: 设定文档页风格
  • hero: 在layout设置为’home’时才生效,配置文档简要说明
  • features: 特性说明样式

2.2 顶部导航配置themeConfig.nav

在这里插入图片描述

  • 配置属性:顶部右侧导航——themeConfig.nav,顶部左侧标题Logo——themeConfig.title
  • 静态资源默认从/docs/public中去查找,如静态图片等
module.exports = {
  base: "", // 项目的基础路径
  title: "文档网站标题", // 文档的标题,会显示在
  description: "文档网站描述", // 文档描述
  themeConfig: {
    // 顶部左侧内容
    logo: "/avatar.png", // 对应docs/public中的图片。
    siteTitle: "文档系统标题",
    // 顶部右侧导航
    nav: [
      { text: "Home", link: "/" }, // 对应首页
      {
        text: "Foo",
        link: "/foo/", // 对应/foo/index.md
      },
      {
        text: "Bar",
        link: "/bar/", // 对应/bar/index.md
      },
      {
        text: "下拉菜单",
        items: [
          { text: "Item A", link: "/item-1" },
          { text: "Item B", link: "/item-2" },
          { text: "Item C", link: "/item-3" },
        ],
      },
    ],
   }
};

2.3 侧边栏导航设置

这里直接介绍分组侧边栏的配置(即:顶部导航作为一级菜单,侧边栏作为二级菜单的展示方式)

  • Step 1: 在docs目录下新建几个目录
├── docs
│   ├── .vitepress
│   │   ├── config.js	# 配置文件
│   ├── bar
│   │   ├── four.md
│   │   ├── index.md
│   │   └── three.md
│   ├── foo
│   │   ├── index.md	# 最终渲染成/foo/index.html
│   │   ├── one.md		# 最终渲染成/foo/one.html
│   │   └── two.md
│   ├── index.md
│   └── public
│       └── avatar.png
  • Step 2: 设置侧边栏
module.exports = {
  base: "", // 项目的基础路径
  title: "文档网站标题", // 文档的标题,会显示在
  description: "文档网站描述", // 文档描述
  themeConfig: {
    // 顶部左侧内容
    logo: "/avatar.png",
    siteTitle: "文档系统标题",
    // 顶部右侧导航
    nav: [
      { text: "Home", link: "/" },
      {
        text: "Foo",
        link: "/foo/",
      },
      {
        text: "Bar",
        link: "/bar/",
      },
      {
        text: "下拉菜单",
        items: [
          { text: "Item A", link: "/item-1" },
          { text: "Item B", link: "/item-2" },
          { text: "Item C", link: "/item-3" },
        ],
      },
    ],
    // 侧边栏
    sidebar: {
    // 对应Nav中foo菜单激活时显示的菜单
      "/foo/": [
        {
          text: "Foo",
          collapsible: true,
          items: [
            {text:"index",link:"/foo/"},
            { text: "one", link: "/foo/one" },
            { text: "two", link: "/foo/two" },
          ],
        },
      ],
      "/bar/": [{
        text: "Bar",
        items: [
            {text:"index",link:"/bar/"},
          { text: "san", link: "/bar/three" },
          { text: "si", link: "/bar/four" },
        ],
      }],
      "/": [
        {
            text: "首页",
            items:[
                {text:"home",link:"/"}
            ]
        }
      ],
    },
  },
};

2.3 文档中的链接跳转

2.3.1 上一页与下一页

在这里插入图片描述

上一页:在对应md头部写入 prev
下一页:默认情况下会根据对应md在文件夹中的排序来自动生成下一页链接

---
prev: 'Get Started | Markdown'
---

2.3.2 文档中链接

[Home](/) <!-- 跳转到根目录的index.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html-->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three) <!-- 你可以忽略扩展名 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾(推荐)-->
[bar - four](../bar/four.html) <!-- 也可以用 .html-->

2.3.3 生成成员页

vitePress中内置了成员页样式,有两种方式,一种是生成一整页的成员介绍页,一种是在局部添加成员介绍,以下通过/foo/two.md内容举例(整页成员介绍)。更多配置参见:官方文档

---
layout: page
---
<script setup>
import {
  VPTeamPage,
  VPTeamPageTitle,
  VPTeamMembers
} from 'vitepress/theme'

const members = [
  {
    avatar: 'https://www.github.com/yyx990803.png',
    name: 'Evan You',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>
      Our Team
    </template>
    <template #lead>
      The development of VitePress is guided by an international
      team, some of whom have chosen to be featured below.
    </template>
  </VPTeamPageTitle>
  <VPTeamMembers
    :members="members"
  />
</VPTeamPage>

三、进阶配置

通过以上步骤已经可以完成一个轻量的小文档系统的开发了,关于部署,官方文档里也有说明(部署在这里),剩下的进阶配置有空再更

进阶配置项:

  • 自定义文档系统风格
  • 配置文档搜索功能
  • 未完待续。。。

四、参考代码

参考代码:https://gitee.com/sophie-code-box/vitepress-demo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/108773.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring中自定义事件监听

目录 一、Spring中的事件监听 二、自定义事件监听 三、例子 1、事件 2、事件监听器 3、事件发布操作 三、测试注意 一、Spring中的事件监听 当处理完一段代码逻辑&#xff0c;后面需要同时执行多个任务&#xff0c;有什么好方法呢&#xff1f;如果在微服务项目中&…

【自用】VUE项目 宝塔部署 上线阿里云服务器CentOS7.6

一、给VUE项目打包 1.开始打包 运行命令&#xff1a; npm run build2.找到打包好的 dist 文件夹 要记住这个dist文件放在了哪儿&#xff0c;记住哦&#xff01; 二、服务器端安装宝塔面板 1.进入root用户并执行命令 yum install -y wget && wget -O install.…

Node基础——认识Node

什么是Node 首先JavaScript是一门编程语言&#xff0c;就像Java、Python、C#、GO一样&#xff0c;在Node出来之前&#xff0c;JavaScript主要运行于浏览器中&#xff0c;用来控制页面的展示逻辑&#xff0c;以及交互操作等。JavaScript之所以能够在浏览器中执行&#xff0c;是…

Docker搭建Mysql主主架构

文章目录mysql主从架构原理MySQL通用架构方案搭建步骤1. docker创建俩台mysql 端口&#xff1a;23306 和 333062. 创建my.cnf&#xff0c;并将my.cnf拷贝到docker容器中&#xff0c;并重启生效3. 配置完成&#xff0c;开始执行sql&#xff0c;设置主从主主同步mysql主从架构原理…

CSDN每日一练非负整数求和 C语言

题目名称&#xff1a;非负整数求和 时间限制&#xff1a;1000ms 内存限制&#xff1a;256M 题目描述&#xff1a; 给定两个字符串形式的非负整数 num1 和 num2 &#xff0c;计算它们的和。 注意&#xff1a; - num1 和 num2 的长度都小于 5100. - num1 和 num2 都只包含数字 0…

【圣诞节特辑】爱心代码(程序员的浪漫plus+)-李峋

2022年圣诞节到来啦&#xff0c;很高兴这次我们又能一起度过~ 唯有热爱&#xff0c;可抵岁月漫长&#xff0c;唯有热爱&#xff0c;不畏世间无常&#xff01; 一、前言 前段时间《点燃我温暖你》中李峋的爱心代码超级火&#xff0c;看着特别心动&#xff01;这不&#xff0c;圣…

贪心算法(Java版本)

一、贪心算法 1、算法描述 贪心算法&#xff08;Greedy algorithm&#xff09;&#xff0c;又叫做贪婪算法。 在对问题求解时&#xff0c;不从整体考虑&#xff0c;而是从问题的某一个初始解出发&#xff0c;每一步选择中都采取在当前状态下最好或最优的选择&#xff08;局部…

vcpkg踩坑记录

接触了vcpkg一段时间, 感觉在包管理方面确实很有帮助, 然而在使用中, 也碰到了各种各样的问题, 总结记录一下. vcpkg github: https://github.com/Microsoft/vcpkg 快速使用指南 To get started: > git clone https://github.com/Microsoft/vcpkg.git(也可以从下载地址直…

C语言—局部变量和全局变量

不同函数之间定义的变量是无法相互进行访问的&#xff1b; #include <stdio.h>void Test();int main() {int a 100;printf("%d", b); }void Test() {int b 200;printf("%d", a); } 在main函数中无法访问到Test中的变量b&#xff0c;同样&#xff…

2022吴恩达机器学习课程——第三课(非监督学习)

注&#xff1a;参考B站视频教程 视频链接&#xff1a;【(强推|双字)2022吴恩达机器学习Deeplearning.ai课程】 写在前面&#xff1a;文章只是为了记录学习课程的整个过程&#xff0c;方便以后查漏补缺&#xff0c;方便找到对应章节&#xff0c;希望看到这篇文章的同学能够认真的…

Numpy+PIL实现图片的自由旋转

1.内容简介 使用PIL和Numpy编程实现图片的自由旋转。 2.技术要点 &#xff08;1&#xff09;用Python PIL库将图片读取为NumPy 数组。 &#xff08;2&#xff09;采用旋转后图像幅面放大的图像旋转变换方式&#xff0c;根据旋转角度和原图像尺寸计算图像像素点的旋转变换矩阵…

MySQL中 java 的 JDBC 编程使用方法及驱动包的下载和使用

文章目录1.简介2.JDBC 的使用2.1 先安装对应数据库的驱动包~~2.2 把安装好的 jar 驱动包导入到项目中~~2.2.1 在项目中创建目录&#xff0c;把 jar 包拷贝进来。2.2.2 右键创建的目录3.编写数据库代码插入一个记录4.查看插入记录后的数据表5.如何编写代码实现查找操作1.简介 实…

数据库实验2 数据库安全性定义与检查

前言&#xff1a;记得验收时问了一个问题吧&#xff0c;就是用户和角色的区别是什么 实验2.1自主存取控制实验 1.实验目的 掌握自主存取控制权限的定义和维护方法。 2.实验内容和要求 定义用户、角色,分配权限给用户、角色,回收权限,以相应的用户名登录数据库验证权限分配…

分享巧记Linux命令的方法

最近有些学弟经常私信问我说&#xff0c;他们自己是Linux方面的小白&#xff0c;对于Linux的命令了解十分的少&#xff0c;虽然每次跟着我推荐的学习视频教程可以进行操作&#xff0c;但是离开了视频&#xff0c;就又是两眼抓瞎&#xff0c;什么也想不起来。不知道怎么样通过命…

【数据结构】队列与Queue接口

目录 一、队列 二、 Java里的Queue接口 1、概述 2、常用方法 1.入队 2.出队 3.获取队首元素 4、判空 三、单链表实现队列 1、准备字段 2、实现入队 3、实现出队 4、实现获取队首元素 5、实现判空 四、循环队列的实现 1、前言 2、字段准备 3、实现入队 4、实现…

一致性哈希

一、简介 这个算法是一种特殊的哈希算法&#xff0c;目的是解决分布式缓存的问题。 普通哈希算法在分布式存储具有较大的局限性&#xff0c;简单的讲就是难以扩展。 一致性哈希相对而言具有较好的容错性和可扩展性&#xff0c;更加适合现在的分布式存储。 二、经典哈希版本 …

SpringBoot+Vue项目实践课程教学管理平台

文末获取源码 开发语言&#xff1a;Java 使用框架&#xff1a;spring boot 前端技术&#xff1a;JavaScript、Vue.js 、css3 开发工具&#xff1a;IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库&#xff1a;MySQL 5.7/8.0 数据库管理工具&#xff1a;phpstudy/Navicat JD…

✿✿✿JavaScript --- JSON

目录 1.JSON的简介 2.JSON的语法规则 3.JSON 字符串转换为 JavaScript 对象 4.常用的JSON相关的函数 5.JSON对象的遍历 6.补充&#xff1a;JS中的this关键字 1.JSON的简介 JSON&#xff08; JavaScript Object Notation &#xff09; 是用于存储和传输数据的格式&#xf…

Android studio配置大内存,编译速度更快!

本文使用的是windows 10系统&#xff0c;Android studio 版本是Android Studio Chipmunk | 2021.2.1&#xff08;松鼠&#xff09; 目录为什么要配置大内存&#xff1f;默认内存是多少&#xff1f;如何扩大内存配置&#xff1f;这个配置保存在哪个文件&#xff1f;文件在哪里&a…

二叉树10:二叉树的最小深度

主要是我自己刷题的一些记录过程。如果有错可以指出哦&#xff0c;大家一起进步。 转载代码随想录 原文链接&#xff1a; 代码随想录 leetcode链接&#xff1a;111. 二叉树的最小深度 题目&#xff1a; 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近…