VitePress美化

参考资料:
https://blog.csdn.net/weixin_44803753/article/details/130903396
https://blog.csdn.net/qq_30678861/category_12467776.html

站点信息修改

首页部分的修改基本都在.vitepress/config.mts,这个文件内修改。

  • title 站点名称

  • description 描述

top导航栏修改

nav内容比较多,我们另起一个文件,现在不用管

// 头部导航config.mts
import topNav from "./topNav";//需要注意的是import { pythonNote }中的pythonNote名称要和sideBar目录内的函数名一直
import { pythonNote } from "./sideBar/pythonBar";
import { linuxNote }  from "./sideBar/linuxBar";
import { dockerNote }  from "./sideBar/dockerBar";
import { route_swc }  from "./sideBar/route_swc";
import { ospf }  from "./sideBar/ospfBar";
import { bgp }  from "./sideBar/bgpBar";export default {title: "亦良笔记",description: "开发学习笔记网站",// 打包目录 outDir: "./dist",head: [// 添加图标["link", { rel: "icon", href: "/favicon.ico" }],],// 主题配置themeConfig: {// 导航上的logologo: "/logo.png",// 隐藏logo右边的标题,不需要的话写falsesiteTitle: "亦良笔记",// 头部导航栏配置nav: topNav,  //nav另起文件了,所以调用它search: {provider: 'local'},//这里是导航栏的二级菜单sidebar: {"/python/": pythonNote,"/linux/linux基础/": linuxNote,"/linux/docker/": dockerNote,"/HCIE/路由与交换/": route_swc,"/HCIE/OSPF笔记/": ospf,"/HCIE/BGP笔记/": bgp},
//github的小图标socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }, // 右上角github图标]}
};

新建目录topNav,在下面新建index.js

import { text } from "stream/consumers";export default [//导航栏的设置
// 严格区分大小写{ text: "首页", link: "/" },{ text: "Python", link: "/python/index" },{text: "Linux",items: [{ text: "linux基础", link: "/linux/linux基础/index" },{ text: "deocker", link: "/linux/docker/index" },{ text: "kubernetes", link: "/kubernetes/index" },],},
//有多级菜单的情况{text: "华为HCIE",items:[{text: "路由与交换", link: "/HCIE/路由与交换/index"},    {text: "OSPF", link: "/HCIE/OSPF笔记"},{text: "BGP", link: "/HCIE/BGP笔记"}]},//仅有一级菜单的情况{ text: "Web前端", link: "/HTML/index" },{ text: "MySQL", link: "/mysql/index" },{text:"个人生活",items:[{ text: "近期行动清单", link: "https://pokes.notion.site/11b643489e76439c89efb5d5062d7999" },{ text: "苏州·游记", link: "https://pokes.notion.site/c2d938c54072497797805c9d7ff11a80" },{ text: "学习炒菜", link: "https://pokes.notion.site/8b664ba3b7714cb9a478361e28d9cfa5" },{ text: "摄影·走到哪拍到哪", link: "https://pokes.notion.site/d426eac42fb34ff39c9e36291031c813?pvs=74" },{ text: "看书", link: "https://pokes.notion.site/3c01d20de51e477cab6e6ab461f266f1" },]}];

左侧菜单栏修改

我们想要的结果是:

  • 点击top导航栏,每个栏目的左侧菜单栏是不同的这是一点。
  • 如下图所示,无论我点击python笔记下面任何一个文章,左侧菜单栏一直在。
    在这里插入图片描述
    而官方默认,当点击首页旁边的python时,左侧是在的,但是当我再次点击python02时,左侧就消失了。

所以我们如下解决

新建目录sideBar,在目录内新建文件:pythonBar.js


// python技术笔记左侧导航栏
export const pythonNote = [{text: "python笔记",items: [{text: "1.python01",link: "/python/python01",},{text: "2.python02",link: "/python/python02",},{text: "03.python转码代码笔记汇总",link: "/python/python转码代码笔记汇总",},]}];

注意:pythonNote 是和config.mts中 import 名称对应的。

效果:
在这里插入图片描述
修改的步骤:

首先在config.mfs中,引入:

  • 在config.mts中,添加 import { route_swc } from "./sideBar/route_swc";
  • sidebar中写入路由

然后新建route_swc.js:


// 路由与交换:左侧导航栏
export const route_swc = [{text: "路由与交换基础",items: [{text: "01.route001",link: "/HCIE/路由与交换/route001",},{text: "02.route002",link: "/HCIE/路由与交换/route002"}]}];

目录结构:

在这里插入图片描述

docHCIE路由与交换index.mdroute001.mdroute002.md	

剩下的就是导入文档了。

整体体验就是比较麻烦,左侧栏需要手动添加,如果文档多的话,会很痛苦。网上说的自动添加左侧栏,我没有成功!

给大家介绍几个做的比较好的blog:

陌生人做的
https://msyuan.github.io/vitePress-project/

官网
https://vitepress.dev/zh/

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

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

相关文章

Java springboot校园管理系统源码

Java springboot校园管理系统源码-014 下载地址:https://download.csdn.net/download/xiaohua1992/89364089 技术栈 运行环境:jdk8 tomcat9 mysql5.7 windows10 服务端技术:Spring Boot Mybatis VUE 使用说明 1.使用Navicati或者其它工…

Midjourney 如何使用参考图像来提升图像的准确性和相似度?

🧙🏼图像提示 🧙🏼‍♂️ 您可以使用图像作为提示的一部分来影响作业的构图、样式和颜色。图像提示可以单独使用,也可以与文本提示一起使用 - 尝试组合具有不同样式的图像以获得最令人兴奋的结果。 🛠️实际图像提示操作步骤 点击加号按钮,双击上传文件,把小黄猫…

ePTFE膜(膨体聚四氟乙烯膜)应用前景广阔 本土企业技术水平不断提升

ePTFE膜(膨体聚四氟乙烯膜)应用前景广阔 本土企业技术水平不断提升 ePTFE膜全称为膨体聚四氟乙烯膜,指以膨体聚四氟乙烯(ePTFE)为原材料制成的薄膜。ePTFE膜具有耐化学腐蚀、防水透气性好、耐候性佳、耐磨、抗撕裂等优…

Web美食分享平台的系统-计算机毕业设计源码45429

基于Web美食分享平台的系统设计与实现 摘 要 本研究基于Spring Boot框架,设计并实现了一个Web美食分享平台,旨在为用户提供一个交流分享美食体验的社区平台。该平台涵盖了用户注册登录、美食制作方法分享发布、点赞评论互动等功能模块,致力于…

3D Web轻量化平台HOOPS Web Platform的功能与应用分析

随着3D技术在多个行业的广泛应用,对于3D模型轻量化的需求日益增长。HOOPS Web Platform作为一个先进的3D模型轻量化平台,为开发人员提供了一整套工具来构建和部署基于Web的工程应用程序。本文将分析HOOPS Web Platform的核心功能和它在不同领域的应用情况…

软件工程学面向对象

一、面向对象方法学概述 传统的生命周期方法学在消除软件非结构化、促进软件开发工程化方面起了积极的作用,但仍有许多不足,存在的主要问题有:①生产率提高的幅度不能满足需要; ②软件重用程度很低; ③软件很难维护&a…

硬件开发工具Arduino IDE

招聘信息共享社群 关联上篇文章乐鑫ESPRESSIF芯片开发简介 Arduino IDE(集成开发环境)是为Arduino硬件开发而设计的一款软件,它提供了一个易于使用的图形界面,允许用户编写、编辑、编译和上传代码到Arduino开发板。Arduino IDE的…

深入分析 Android BroadcastReceiver (八)

文章目录 深入分析 Android BroadcastReceiver (八)1. 系统与自定义实现1.1 系统广播机制1.1.1 系统广播的实现原理1.1.2 系统广播的源码分析 1.2 自定义广播机制1.2.1 自定义广播的实现步骤1.2.2 自定义广播的源码分析 2. 广播机制设计的初衷与优势2.1 设计初衷2.2 优势 3. 总…

有了提示词框架的鸡,你就能让AI下提示词的蛋~

我们在问AI问题的时候,是不是经常感觉AI的回答没有别人的那么好? 难道别人的AI更加聪明? 很可能是因为我们的提示词没写好,那么,写出好的提示词很难吗? 一点都不难,其实这都是有套路的&#…

NSSCTF-Web题目24(RCE-空格绕过、过滤绕过)

目录 [MoeCTF 2021]babyRCE 1、题目 2、知识点 3、思路 [SWPUCTF 2022 新生赛]funny_web 4、题目 5、知识点 6、思路 [MoeCTF 2021]babyRCE 1、题目 2、知识点 空格绕过、过滤绕过 3、思路 出现源码,进行代码审计 需要我们GET方式上传一个rce变量&#x…

[FreeRTOS 功能应用] 互斥量 功能应用

文章目录 一、基础知识点二、代码讲解三、结果演示四、代码下载 一、基础知识点 [FreeRTOS 基础知识] 互斥量 概念 [FreeRTOS 内部实现] 互斥量 本实验是基于STM32F103开发移植FreeRTOS实时操作系统,互斥量实战操作。 使用工具:Keil、串口工具 二、代码…

Rust变量绑定

变量绑定 Rust 通过静态类型确保类型安全。变量绑定可以在声明时说明类型,不过在多数情况下,编译器能够从上下文推导出变量的类型,从而大大减少了类型说明的工作。 使用 let 绑定操作可以将值(比如字面量)绑定&#…

全面解析智慧校园行政办公的协作日程功能

在智慧校园的行政办公生态系统中,协作日程功能成为促进团队互动与工作同步的桥梁,它超越了传统个人日程的范畴,强调的是集体效率与信息的无缝对接。这一功能设计的核心,在于创造一个开放而有序的平台,让教育工作者们能…

2-4 Softmax 回归的从零开始实现

就像我们从零开始实现线性回归一样, 我们认为softmax回归也是重要的基础,因此应该知道实现softmax回归的细节。 本节我们将使用刚刚在2-3节中引入的Fashion-MNIST数据集, 并设置数据迭代器的批量大小为256。 import torch from IPython impo…

主从复制原理及操作

主从复制的概念 主从复制是一种在数据库系统中常用的数据备份和读取扩展技术,通过将一个数据库服务器(主服务器)上的数据变更自动同步到一个或多个数据库服务器(从服务器)上,以此来实现数据的冗余备份、读…

dtpay聚合支付系统在跨境支付场景中技术及业务方案

1 什么是跨境支付 我们从两个维度来分析什么是跨境支付,第一个维度我们从资金流向分析,国内的消费者在境外进行消费对于国内资金流来说这属于资金流出,这是跨境支付的第一种应用场景。第二个场景国外游客在国内进行消费,这属于资…

昇思25天学习打卡营第11天 | LLM原理和实践:基于MindSpore实现BERT对话情绪识别

1. 基于MindSpore实现BERT对话情绪识别 1.1 环境配置 # 实验环境已经预装了mindspore2.2.14,如需更换mindspore版本,可更改下面mindspore的版本号 !pip uninstall mindspore -y !pip install -i https://pypi.mirrors.ustc.edu.cn/simple mindspore2.2…

js的作用域链

function test(){} 运行期上下文:当函数执行时,会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境,函数每次执行时对应的执行上下文都是 独一无二的,所以多次调用一个函数对导致创建多个执行上下…

springboot集成tika解析word,pdf,xls文件文本内容

介绍 Apache Tika 是一个开源的内容分析工具包,用于从各种文档格式中提取文本和元数据。它支持多种文档类型,包括但不限于文本文件、HTML、PDF、Microsoft Office 文档、图像文件等。Tika 的主要功能包括内容检测、文本提取和元数据提取。 官网 https…

基于STM32F407ZG的FreeRTOS移植

1.从FreeRTOS官网中下载源码 2、简单分析FreeRTOS源码目录结构 2.1、简单分析FreeRTOS源码根目录 (1)Demo:是官方为一些单片机移植FreeRTOS的例程 (2)License:许可信息 (3)Sourc…