VuePress安装及使用

2023-12-18 17:20
文章标签 安装 使用 vuepress

本文主要是介绍VuePress安装及使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 前言
  • 一、依赖环境
  • 二、vuepress 安装和使用
    • 1.初始化
    • 2.将 VuePress 安装为本地依赖
    • 3. package.json 中添加脚本
    • 4. 新建 docs 文件夹
    • 5.启动
    • 6. 效果
  • 三、进阶使用
    • 1.新增配置文件
    • 2.安装搜索插件
    • 3.config.js 中增加配置
    • 4.效果展示
    • 5.注意

前言

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。

例如:JavaFX 前言

这个博客网站就是使用 VuePress 生成的,你只需要使用 Markdown 来书写文章内容,其他的 VuePress 帮你搞定。

VuePress 相比于其他以 Markdown 为中心的静态网站生成器,如 mdBook 、GitBook、Hexo、Nuxt、VitePress、Docsify 、Docute 更加简单方便,如果你会前端你还可以自己定制主题。

一、依赖环境

  • Node.js ,版本需要大于等于 18.16.0
  • 包管理器,如 npm 或者 pnpm、yarn 等。

若你还没安装 Node.js,可以参考 Node.js安装与配置 进行下载安装。

二、vuepress 安装和使用

1.初始化

新建一个文件夹,我这里新建的文件夹叫 vuepress ,打开 cmd 窗口进入 vuepress 文件夹所在路径。

然后 cmd 命令行中输入下面的命令,将初始化生成一个 package.json 文件:

npm init -y

2.将 VuePress 安装为本地依赖

npm install -D vuepress@next

3. package.json 中添加脚本

package.json 中的 scripts 里添加两行启动脚本

	"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"

最终的 package.json 长这样:

{"name": "vuepress","version": "1.0.0","description": "","main": "index.js","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": "^2.0.0-rc.0"}
}

4. 新建 docs 文件夹

vuepress 文件夹下新建 docs 文件夹,用于存放所有的 Markdown 文件。

docs 文件夹下新建 README.md 文件,你可以在 README.md 写点内容。

5.启动

执行如下命令启动,启动成功后,会在 docs 下自动生成 .vuepress 文件夹,用于配置。

npm run docs:dev

启动后,你可以浏览器打开http://localhost:8080/ 查看刚才的 README.md 渲染效果 。

6. 效果

在这里插入图片描述

三、进阶使用

假如你有很多文章,其中一些是 java 相关的,其中一些是 python 相关的,那怎么让左边的侧边栏分类并只显示文章名称呢?

另外,怎么给最上面的导航栏加上自己的头像、昵称、文章搜索框、和其他导航呢?

1.新增配置文件

vuepress/docs/.vuepress/ 下新建 config.js 文件。该配置文件用于配置插件、主题、导航栏、侧边栏等。

vuepress/docs/.vuepress/ 下新建 public 文件夹 ,public 文件夹 下 再新建 images 文件夹,把你的头像 logo 图片放里面。

2.安装搜索插件

vuepress 目录下,命令行执行如下命令安装搜索插件:

npm i -D @vuepress/plugin-search@next

3.config.js 中增加配置

下面是我的配置,可参考修改使用。

import { defaultTheme } from 'vuepress'
import { searchPlugin } from '@vuepress/plugin-search'export default{title: '山下海棠',description: '山下海棠',theme: defaultTheme({logo: "/images/head.jpg", //头像logo,默认使用 public 文件夹下的资源,所以路径里不用加 public//头部导航栏配置。可使用link方式来自动扫描对应路径下的Markdown文章;也可以使用 children 方式手动向数组中加入文章navbar: [  {text: 'java',link: '/java/',},{text: 'python',children: ['/python/JSON.md', '/python/openpyxl.md', '/python/spider.md'],}],sidebarDepth: 0, //设置为0,左侧侧边栏文章下不显示标题列表sidebar: [       //sidebar控制左边侧边栏{text: "🧭 java",collapsible: true, //可折叠children: ["/java/socketAndNetty.md","/java/stream.md",],},{text: "☕ python",collapsible: true,	//可折叠children: ["/python/JSON.md","/python/openpyxl.md","/python/spider.md",],}]}),plugins: [searchPlugin({locales: {'/': {placeholder: '搜索文章',},},}),],
}

最终,我的文件目录结构如下:

(如果你的 Markdown 文章里要插入图片,可以在 docs 文件夹下新建 images 文件夹,把图片都放里面,然后在 Markdown 文章里使用相对路径来插入图片)

└─ docs└─ .vuepress│    ├─ public│    │   └─ images│    │	     └─ head.jpg│    └─ config.js  ├─ java │    ├─ socketAndNetty.md│    └─ stream.md├─ python│    ├─ JSON.md│    ├─ openpyxl.md│    └─ spider.md└─ README.md

4.效果展示

在这里插入图片描述

5.注意

在 markdown 语法里:
# 表示一级标题
## 表示二级标题
### 表示三级标题
而 vuepress 在解析渲染的时候会把 markdown 文章里第一个出现的 # 作为文章名,所以建议
文章中第一行使用 # 来作为文章名,使用 ## 作为一级标题 ,使用 ### 作为二级标题。

例如:
就像上面效果展示里,我的 python中JSON使用 这篇文章 markdown 是这样写的:

# python中JSON使用
::: details 目录[[toc]]:::## 一、字典(JSON 对象)与JSON字符串的转换### 1.字典转JSON字符串......省略代码块### 2.JSON字符串转字典......省略代码块

此外,vuepress 增加了一些对 Markdown 的语法扩展,可参考官网:Markdown 语法扩展

这篇关于VuePress安装及使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/509210

相关文章

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7

Centos7安装Mongodb4

1、下载源码包 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.2.1.tgz 2、解压 放到 /usr/local/ 目录下 tar -zxvf mongodb-linux-x86_64-rhel70-4.2.1.tgzmv mongodb-linux-x86_64-rhel70-4.2.1/

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

Centos7安装JDK1.8保姆版

工欲善其事,必先利其器。这句话同样适用于学习Java编程。在开始Java的学习旅程之前,我们必须首先配置好适合的开发环境。 通过事先准备好这些工具和配置,我们可以避免在学习过程中遇到因环境问题导致的代码异常或错误。一个稳定、高效的开发环境能够让我们更加专注于代码的学习和编写,提升学习效率,减少不必要的困扰和挫折感。因此,在学习Java之初,投入一些时间和精力来配置好开发环境是非常值得的。这将为我

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma