VuePress日常使用

本篇来讲解下更多关于 VuePress 的基本用法

配置首页

现在的页面太简单了,我们可以对项目首页进行配置,修改 docs/README.md (这些配置是什么后面会说):

---
home: true
heroImage: https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg
heroText: Hero标题
tagline: Hero副标题
actionText: 快速上手→
actionLink: /README.md
features:
- title: 简洁至上details: 以Markdown为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动details: 享受Vue+ webpack 的开发体验,在Markdown中使用Vue组件,同时可以使用Vue来开发自定义主题。
- title: 高性能details: VuePress为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: 粤ICP备2022067627号-1  粤公网安备 44011302003646号
---

以上内容使用 yaml 语法,读者修改的时候注意不要违反了 yaml 语法规则。

重新运行本项目,打开博客可以看到如下页面(已标注各个配置对应的内容):

​​

热更新

什么是热更新:如果我们已经运行了本项目,在我们修改文档时候,VuePress 能自动更新博客,不用重新运行也能看到修改后的博客的内容(相当于会自动编译运行,不用我们手工编译运行了)。

VuePress 本身是支持热更新的,但是有 bug……有时候会热更新失败

因此,想要做到热更新,得修改下命令,添加一个临时目录:

"docs:dev": "vuepress dev docs --temp .temp"

由于该临时目录只用于解决热更新失败的问题,我们在 .gitignore​ 也添加一条忽略的规则:

.temp

注意,我们修改了 package.json 文件,得重新运行本项目。

在后续的使用过程中,一般文档内容等会自动更新,但如果有修改什么配置文件,可能得重启;

如果还是遇到热更新失效的话,尝试重启看看。

如果你尝试添加多个文档,建议先停止运行后再重新编译。

导航栏配置

接下来我们来配置下导航栏。

新建 docs/.vuepress/config.js 配置文件,文件内容如下:

module.exports = {title: '网站标题',description: 'VuePress演示用'head: [['link', { rel: 'icon', href: 'https://s3.bmp.ovh/imgs/2023/02/15/16aa54f3ee84602e.webp' }]],themeConfig: {logo: 'https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg',nav: [{ text: '首页', link: '/' },{ text: '计算机基础', link: '/CouputerBasic' },{text: 'Java', items: [{ text: 'JavaSE', link: '/JavaSE' },{ text: 'JavaEE', link: 'https://www.peterjxl.com/JavaEE' }]},]}
}

效果如下:

​​​​​​​​

我们依次介绍下各个配置:

  • title​​:网站的标题,这会决定在浏览器标签页里显示的内容,并且在导航栏也会展示
  • description​:网站的描述,方便 SEO
  • head​​:可配置浏览器标签页的图标(icon)
  • themeConfig​:主题的配置,关于主题的内容我们后续会讲
  • themeConfig.logo​​:导航栏的 logo。一般来说,博客的标签页的图标和导航栏的图标是一样的
  • themeConfig.nav​​:导航栏的配置,其中 text 就是链接的文本,link 就是链接的地址,并且支持下拉框(当鼠标悬浮在文本上时出现)。关于链接地址,支持相对路径(当前域名 + 链接地址)和绝对路径,并且支持跳转到第三方网站等。

增加几篇博客

当前网站的内容还比较少,不能很好的展示 VuePress 的功能,因此我们来新增几篇博客吧!博客的内容可以简单写写。

我们的博客都是写在 docs 文件夹下的,我们新增两个目录:Basic 目录用于存放计算机基础的博客,Java 目录由于存放 Java 相关的博客,这样便于分类

我这里直接创建好,此时项目目录结构如下:

vuepress-learn
├── docs
│   ├── .vuepress
│   │   └── config.js
│   ├── Basic
│   │   ├── Basic1.md
│   │   └── Basic2.md
│   ├── Java
│   │   ├── JavaEE.md
│   │   └── JavaSE.md
│   └── README.md
├── package-lock.json
└── package.json

此时,对应文章的访问路径是这样的:网址 + 文件夹名字 + 文件名,例如:

  • http://localhost:8080/Basic/Basic1.html
  • http://localhost:8080/Basic/Basic2.html
  • http://localhost:8080/Java/JavaSE.html
  • http://localhost:8080/Java/JavaEE.html

如果直接访问网址 + 文件夹名字(例如 http://localhost:8080/Java),则默认访问文件夹下的 README.md

关于文章的内容:默认情况下,如果文档里有一级标题,则会用一级标题当作标签页的 Title:

# Basic1这里是计算机基础第一课!

也可用 yaml 语法来配置标题:

---
title: JavaEE
---

配置侧边栏

什么是侧边栏?简单来说就是读文章的时候,左侧的导航栏:

​​

我们还是在 config.js 里配置themeConfig.sidebar​:

module.exports = {title: '网站标题',head: [['link', { rel: 'icon', href: 'https://s3.bmp.ovh/imgs/2023/02/16/8d42caf2b4ba3334.png' }]],themeConfig: {logo: 'https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg',nav: [{ text: '首页', link: '/' },{ text: '计算机基础', link: '/CouputerBasic' },{text: 'Java', items: [{ text: 'JavaSE', link: '/JavaSE' },{ text: 'JavaEE', link: 'https://www.peterjxl.com/JavaEE' }]},],sidebar: [{title: 'Basic',path: '/Basic/',collapsable: false,    //不折叠sidebarDepth: 2,children: ['/Basic/Basic1','/Basic/Basic2']},{title: 'Java',path: '/Java/',collapsable: false,sidebarDepth: 2,children: ['/Java/JavaSE','/Java/JavaEE']}]}
}

配置后的效果:

​​

注意:侧边栏默认会读取 Markdown 文档里配置的标题,如果没有则会展示文档的访问路径(如上图,不美观)。

静态资源

有时候,一些图片是经常被用到的,我们可以将其放到一个公共文件夹里,这样就可以在不同的博客里都引用到了。

我们在 .vuepress 目录下新建 public 目录,然后放一个图片,例如 amiliya.jpg。此时文件夹目录结构如下:

vuepress-learn
├── .temp
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   │   └── amiliya.jpg
│   │   └── config.js
│   ├── Basic
│   │   ├── Basic1.md
│   │   └── Basic2.md
│   ├── Java
│   │   ├── JavaEE.md
│   │   └── JavaSE.md
│   └── README.md
├── package-lock.json
└── package.json

然后我们就可以在博客或配置文件里引用了。例如在 Basic1.md 里引用:

# Basic1![](/amiliya.jpg)这里是计算机基础第一课!

效果:

又或者在配置文件里访问图片:

module.exports = {themeConfig: {logo: '/re0.jpg',}
}

更多关于静态资源的说明,可参考官方文档:静态资源 | VuePress

如果遇到了困难

如果有遇到什么问题,除了在命令行里观察报错信息外,也可以在浏览器控制台里看有无报错信息

遇见了问题首先尝试自己解决他,利用你的翻译软件和搜索软件,找到问题的关键,处理它。实在不行就找人解决,例如在博客平台上提问或者咨询朋友等等。

获取源码

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 Gitee 和 GitHub 上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git​ (也可拉取 GitHub 的)
  3. 跳转目录:cd vuepress-learn
  4. 切换分支:git switch -c VuePressDemo2Basic origin/VuePressDemo2Basic
  5. 安装依赖:npm i
  6. 运行博客:npm run docs:dev

参考

  • 官网文档:快速上手 | VuePress,目录结构 | VuePress,静态资源 | VuePress
  • GET 新技能!自己的网站突然就不香了

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

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

相关文章

Mac可以读取NTFS吗 Mac NTFS软件哪个好 mac ntfs读写工具免费

在跨操作系统环境下使用外部存储设备时,特别是当Windows系统的U盘被连接到Mac电脑时,常常会遇到文件系统兼容性的问题。由于Mac OS原生并不完全支持对NTFS格式磁盘的读写操作,导致用户无法直接在Mac上向NTFS格式的U盘或硬盘写入数据。下面我们…

Scala入门学习

Scala是一种现代化的多范式编程语言,它结合了面向对象编程和函数式编程的特点,运行在Java平台上。Scala的语法简洁,同时提供了强大的类型系统和丰富的库支持。下面是一些Scala入门的基础知识点: ### 1. 安装Scala - 下载并安装Sc…

详细分析JVM的底层原理及语法分析,JVM如何进行精细化的调优?小白进阶必读精品

Java虚拟机(Java Virtual Machine,简称JVM)是Java程序运行的基础,它提供了一个运行Java字节码的环境。JVM的底层原理涉及多方面的内容,包括类加载、字节码执行、内存管理、垃圾回收、即时编译(JIT&#xff…

句柄数详解

目录 一. 什么是句柄二. 句柄书🟰文件打开数?三. 常用查看命令1. 查看当前系统中打开的文件数量(即文件句柄数)1)全局查看2)当前会话2. /proc/sys/fs/file-nr查看系统句柄数配置3. /proc/sys/fs/file-max查看系统支持的最大句柄数4. 显示当前会话中允许的最大句柄数量四…

揭示隐藏的模式:秩和检验和单因素方差分析的实战指南【考题】

1.研究一种新方法对于某实验结果准确性提高的效果,并将其与原有方法进行比较,结果见下表,请评价两者是否有不同? (行无序,列有序)-->单方向有序-->两独立样本的秩和检验) 如下图所示,先将相关数据导入spss。 图…

C# Modbus设备信息加载的实现方式(1)

Modbus设备信息加载的实现方式有很多种,这里讨论一种实现,思路比代码重要,具体类大家可以按自己的要求构建。 Load窗体事件中: GlobalProperties.Device LoadDevice(GroupPath, DevicePath, VariablePath); 具体的实现为&…

什么是指令微调(LLM)

经过大规模数据预训练后的语言模型已经具备较强的模型能力,能够编码丰富的世界知识,但是由于预训练任务形式所限,这些模型更擅长于文本补全,并不适合直接解决具体的任务。 指令微调是相对“预训练”来讲的,预训练的时…

SpringBoot3基础用法

技术和工具「!喜新厌旧」 一、背景 最近在一个轻量级的服务中,尝试了最新的技术和工具选型; 即SpringBoot3,JDK17,IDEA2023,Navicat16,虽然新的技术和工具都更加强大和高效,但是适应采坑的过程…

vue2 项目,一个方法还原data里所有的属性

在 Vue 2 中,如果你想要还原 data 对象里所有的属性到它们初始状态,可以利用 $options.data 方法来重新分配初始数据。以下是一种常见做法: methods: {resetData() {// 使用 $options.data 创建一个新的数据对象,这将会是组件初始…

简明system

参数详解 Unit模块 [Unit] 部分 Description:简短描述 Documentation:文档地址 Requires:当前 Unit 依赖的其他 Unit,如果它们没有运行,当前 Unit 会启动失败 Wants:与当前 Unit 配合的其他 Unit&#xf…

企业网络安全必知的三大访问控制模型

在当今信息化社会中,信息系统的安全性成为了组织和个人关注的焦点。随着信息技术的不断发展和应用,信息系统的复杂性和规模不断扩大,系统中存储和处理的信息量也日益增长。 一、引言 在当今信息化社会中,信息系统的安全性成为了组…

深入解析QPS和TPS:理解与优化系统性能

目录 QPS是什么? QPS的定义QPS的计算QPS的应用场景 TPS是什么? TPS的定义TPS的计算TPS的应用场景 QPS和TPS的区别如何提高QPS和TPS 系统架构优化数据库优化代码优化缓存机制负载均衡 QPS和TPS的监控与测试 监控工具测试工具测试方法 案例分析 高QPS系统…

【知识点篇]《计算机组成原理》之计算机系统概述

1.1 计算机发展历程 世界上第一台电子数字计算机 1946年,ENIAC(Electronic Numerical Integrator And Computer)在美国宾夕法尼亚大学研制成功。性能低,耗费巨大,但却是科学史上的一次划时代的创新,奠定了电子计算机的基础&#x…

Python api接口 异步

Python API接口异步编程简介 在现代的软件开发中,大多数应用都需要通过API接口与其他系统进行交互。Python是一种非常流行的编程语言,因此许多开发者选择使用Python来构建他们的API接口。在一些情况下,API接口需要进行异步编程,以…

stm32学习笔记---ADC模数转换器(理论部分)

目录 ADC简介 什么叫逐次逼近型? STM32 ADC框图 模数转换器外围线路 ADC基本结构图 输入通道 规则组的四种转换模式 第一种:单次转换非扫描模式 第二种:连续转换,非扫描模式 第三种:单次转换,扫描…

如何利用React和Python构建强大的网络爬虫应用

如何利用React和Python构建强大的网络爬虫应用 引言: 网络爬虫是一种自动化程序,用于通过互联网抓取网页数据。随着互联网的不断发展和数据的爆炸式增长,网络爬虫越来越受欢迎。本文将介绍如何利用React和Python这两种流行的技术&#xff0c…

5个大气的wordpress付费主题

Sesko赛斯科wordpress外贸主题 适合用于重型机械设备公司建外贸官方网站的橙红色wordpress外贸主题。 https://www.jianzhanpress.com/?p5886 Polar钋啦wordpress外贸主题 制造业wordpress网站模板,适合生产制造企业官方网站使用的wordpress外贸主题。 https:/…

Flask-Session使用Redis

Flask-Session使用Redis 一、介绍 在Flask中,session数据默认是以加密的cookie形式存储在用户的浏览器中的。但是,真正的session数据应该存储在服务器端。Django框架会将session数据存储在数据库的djangosession表中,而Flask则可以通过第三…

临时文件上传系统Plik

什么是 Plik ? Plik 是一个基于 Go 语言的可扩展且用户友好的临时文件上传系统(类似于 Wetransfer)。 软件主要特点: 强大的命令行客户端易于使用的 Web 用户界面多个数据后端:文件、OpenStack Swift、S3、Google Clo…

用pycharm进行python爬虫的步骤

使用 pycharm 进行 python 爬虫的步骤:下载并安装 pycharm。创建一个新项目。安装 requests 和 beautifulsoup 库。编写爬虫脚本,包括获取页面内容、解析 html 和提取数据的代码。运行爬虫脚本。保存和处理提取到的数据。 用 PyCharm 进行 Python 爬虫的…