当前位置: 首页 > news >正文

深入指南:VitePress 如何自定义样式


在这里插入图片描述
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。
在这里插入图片描述

  • 推荐:「stormsha的主页」👈,持续学习,不断总结,共同进步,为了踏实,做好当下事儿~

  • 专栏导航

    • Python系列: Python面试题合集,剑指大厂
    • Git系列: Git操作技巧
    • GO系列: 记录博主学习GO语言的笔记,该笔记专栏尽量写的试用所有入门GO语言的初学者
    • 数据库系列: 详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
    • 运维系列: 总结好用的命令,高效开发
    • 算法与数据结构系列: 总结数据结构和算法,不同类型针对性训练,提升编程思维

    非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

    💖The Start💖点点关注,收藏不迷路💖

    📒文章目录

      • VitePress 简介
      • 自定义样式的基础
        • 1. 配置文件
        • 2. 全局样式文件
        • 3. Vue 组件
      • 使用技巧
        • 1. 利用 CSS 预处理器
        • 2. 利用 CSS 模块
        • 3. 使用 PostCSS
        • 4. 主题定制


在这里插入图片描述
在现代前端开发中,文档和网站的内容展示越来越重要。VitePress 是一个基于 Vite 和 Vue 的静态站点生成器,它不仅提供了快速的开发体验,还支持高度的自定义。对于中高级开发者来说,掌握如何自定义 VitePress 的样式是提升项目专业性的关键。本文将深入探讨 VitePress 自定义样式的技巧和方法。

VitePress 简介

VitePress 是一个基于 Vue 3 的静态站点生成器,它利用 Vite 的强大功能,实现了快速的热更新和构建。VitePress 的设计哲学是简单易用,同时提供足够的灵活性,让开发者能够根据需要定制自己的文档站点。

自定义样式的基础

在开始自定义样式之前,我们需要了解 VitePress 的基本结构。VitePress 的项目结构通常包括以下几个部分:

  • .vitepress:存放 VitePress 相关的配置和构建文件。
  • public:存放静态资源,如图片、样式文件等。
  • src:存放源码文件,包括 Markdown 文件和 Vue 组件。

1. 配置文件

.vitepress 目录下,config.js 是配置文件的核心。这里可以设置主题、插件等。要自定义样式,我们可以在这里引入全局样式文件。

// .vitepress/config.js
export default {title: 'My Site',description: 'My awesome site',themeConfig: {// 引入全局样式styles: '/styles.css',},
}

2. 全局样式文件

public 目录下创建一个全局样式文件,比如 styles.css。这里可以定义一些基本的样式,这些样式将应用到整个站点。

/* public/styles.css */
body {font-family: 'Arial', sans-serif;background-color: #f4f4f4;
}h1, h2, h3, h4, h5, h6 {color: #333;
}

3. Vue 组件

除了 CSS,我们还可以在 Vue 组件中定义样式。VitePress 允许在 Markdown 文件中嵌入 Vue 组件,这为我们提供了极大的灵活性。

<!-- src/components/MyComponent.vue -->
<template><div class="my-component"><h1>My Component</h1><p>This is a custom component with styles.</p></div>
</template><style scoped>
.my-component {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

使用技巧

1. 利用 CSS 预处理器

VitePress 支持 CSS 预处理器,如 Sass 和 Less。通过配置 Vite,我们可以轻松地在项目中使用这些预处理器。

// vite.config.js
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { defineConfig } from 'vite';export default defineConfig({plugins: [vue(), vueJsx()],resolve: {alias: {'@': '/src',},},css: {preprocessorOptions: {scss: {additionalData: `@use "sass:math";`,},},},
});

2. 利用 CSS 模块

CSS 模块是一种将 CSS 封装在组件内部的方法,避免全局样式冲突。VitePress 支持 CSS 模块,只需在样式文件的名称中添加 .module 后缀即可。

/* src/components/MyComponent.module.scss */
.my-component {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

3. 使用 PostCSS

PostCSS 是一个强大的工具,可以让我们使用插件来处理 CSS。通过配置 Vite,我们可以轻松地在项目中使用 PostCSS。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postcss from 'vite-plugin-postcss';export default defineConfig({plugins: [vue(),postcss({plugins: [require('autoprefixer')({overrideBrowserslist: ['last 2 versions', '> 1%', 'ie >= 11'],}),],}),],
});

4. 主题定制

VitePress 提供了主题定制的功能,我们可以通过修改 .vitepress/theme/index.js 文件来定制主题。

// .vitepress/theme/index.js
import { defaultTheme } from 'vitepress/theme';
import './styles.css';export default {...defaultTheme,enhanceApp({ app, router, siteData }) {// 自定义应用逻辑},
};

🔥🔥🔥道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙

💖The End💖点点关注,收藏不迷路💖

相关文章:

深入指南:VitePress 如何自定义样式

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

逃离的日常:自闭症孩子的课堂小插曲

自闭症孩子在课堂上突然离座&#xff0c;是一个复杂而多面的现象&#xff0c;背后往往隐藏着他们独特的情感表达与需求未被充分理解的现状。自闭症&#xff0c;作为一种神经发展性障碍&#xff0c;影响着孩子的社交互动、沟通能力及行为模式。在课堂上&#xff0c;这些差异可能…...

LLM模型与实践之基于MindSpore的GPT2文本摘要

前言 安装环境 !pip install tokenizers0.15.0 -i https://pypi.tuna.tsinghua.edu.cn/simple # 该案例在 mindnlp 0.3.1 版本完成适配&#xff0c;如果发现案例跑不通&#xff0c;可以指定mindnlp版本&#xff0c;执行!pip install mindnlp0.3.1 !pip install mindnlp 数据加…...

【Android】使用视图绑定ViewBinding来代替findViewById

文章目录 介绍作用用法开启ViewBinding功能自动生成绑定类在Activity中使用访问视图控件 区别 介绍 ViewBinding 是 Android 开发中的一个功能&#xff0c;它简化了访问视图的过程&#xff0c;避免了使用 findViewById 的繁琐步骤。它通过生成与布局文件相对应的绑定类&#xf…...

字符的统计——423、657、551、696、467、535

423. 从英文中重建数字 最初思路 首先要有一个指针&#xff0c;对于3/4/5为一组地跳跃。起初想的是后瞻性&#xff0c;如果符合0-9任意&#xff0c;则更换index、跳跃。此时写了一个函数&#xff0c;用来判断s的截取段和0-9中有无符合。这个思路并没有进行下去&#xff0c;虽然…...

pytest+allure

安装 下载&#xff1a;github win环境下载zip 环境变量&#xff1a; pycharm&#xff1a; pip install allure-pytest 验证安装 生成结果&#xff1a; if __name__ __main__:pytest.main([-s,test_createTag2.py,--alluredir,result]) 生成报告&#xff1a; allure gener…...

【数据结构】AVL树(平衡二叉搜索树)

文章目录 1.AVL树1.1 AVL树的概念1.2 AVL树节点的定义1.3 AVL树的插入1.4 AVL树的旋转1.4.1 左单旋1.4.2 右单旋1.4.3 右左双旋1.4.4 左右双旋 1.5 AVL树的平衡验证1.6 AVL树的删除1.7 AVL树的性能 1.AVL树 在前面&#xff0c;我们已经介绍过了二叉搜索树&#xff0c;也了解到…...

ASP.NET Web Api 使用 EF 6,DateTime 字段如何取数据库服务器当前时间

前言 在做数据库设计时&#xff0c;为了方便进行数据追踪&#xff0c;通常会有几个字段是每个表都有的&#xff0c;比如创建时间、创建人、更新时间、更新人、备注等&#xff0c;在存储这些时间时&#xff0c;要么存储 WEB 服务器的时间&#xff0c;要么存储数据库服务器的时间…...

【HarmonyOS】应用设置屏幕常亮

【HarmonyOS】应用设置屏幕常亮 一、问题背景&#xff1a; 金融类或钱包场景的应用APP&#xff0c;对于付款码&#xff0c;扫一扫等场景都会对屏幕设置常亮。防止屏幕长时间不操作&#xff0c;自动息屏。 目前这种场景的需求也是非常有必要的&#xff0c;也是行业内默认的处理…...

Docker部署Elasticsearch8.6.0 Kibana8.6.0

&#xff08;1&#xff09;Docker部署Elasticsearch8.5.3&#xff08;失败…&#xff09; 为了匹配springboot3.0.x&#xff0c;安装Elasticsearch:8.5.3 拉取镜像&#xff0c;遇到问题&#xff01; [rootserver01 ~]# docker pull elasticsearch:8.5.3 8.5.3: Pulling from…...

第四篇论文小记

一、第一次投稿 期刊&#xff1a;《Remote Sensing》 研究方向&#xff1a;人工智能应用 投稿结果&#xff1a;已投被拒 投稿周期&#xff1a;3天 最后更新时间&#xff1a;19 July 2024 投稿流程&#xff1a; 状态时间Pending review16 July 2024Reject by editor19 July …...

python使用 tkinter 生成随机颜色

先看效果: 只要不停点击底部的按钮&#xff0c;每次都会生成新的颜色。炫酷啊。 import random import tkinter import tkinter.messagebox from tkinter import Button# todo """ 1. 设置一个按钮&#xff0c;来让用户选择是否显示颜色值 2. 把按钮换成 Label…...

【Linux学习 | 第1篇】Linux介绍+安装

文章目录 Linux1. Linux简介1.1 不同操作系统1.2 Linux系统版本 2. Linux安装2.1 安装方式2.2 网卡设置2.3 安装SSH连接工具2.4 Linux和Windows目录结构对比 Linux 1. Linux简介 1.1 不同操作系统 桌面操作系统 Windows (用户数量最多)MacOS ( 操作体验好&#xff0c;办公人…...

设计模式-抽象工厂

抽象工厂属于创建型模式。 抽象工厂和工厂设计模式的区别&#xff1a; 工厂模式的是设计模式中最简单的一种设计模式&#xff0c;主要设计思想是&#xff0c;分离对象的创建和使用&#xff0c;在Java中&#xff0c;如果需要使用一个对象时&#xff0c;需要new Class()&#xff…...

Ubunton-24.04 简单配置使用

目录 1.设置 root 密码 2. 防火墙设置 1. 安装防火墙 2. 开启和关闭防火墙 3. 开放端口和服务规则 4. 关闭端口和删除服务规则 5 查看防火墙状态 3. 设置网络 1.设置 root 密码 1. 切换到 root 用户&#xff0c;并输入当前登录账号的密码 sudo -i 2. 设置新密码&#xf…...

什么是STP环路保护

在运行生成树协议的网络中&#xff0c;根端口和其他阻塞端口状态是依靠不断接收来自上游设备的BPDU维持。当由于链路拥塞或者单向链路故障导致这些端口收不到来自上游交换设备的BPDU时&#xff0c;设备会重新选择根端口。原先的根端口会转变为指定端口&#xff0c;而原先的阻塞…...

Python算法基础:解锁冒泡排序与选择排序的奥秘

在数据处理和算法设计中&#xff0c;排序是一项基础且重要的操作。本文将介绍两种经典的排序算法&#xff1a;冒泡排序&#xff08;Bubble Sort&#xff09;和选择排序&#xff08;Selection Sort&#xff09;。我们将通过示例代码来演示这两种算法如何对列表进行升序排列。 一…...

QtCMake工程提升类后找不到头文件

链接&#xff1a; QtCMake工程提升类后找不到头文件_qt提升类找不到头文件-CSDN博客 重点&#xff1a; 1.原因&#xff1a;出现问题的原因是Qt creator通过ui文件生成的程序和存放头文件的目录不在一起&#xff0c;但是生成的程序里会在生成目录下找头文件&#xff0c;所以肯…...

Docker核心技术:Docker原理之Cgroups

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Docker核心技术 系列文章&#xff1a;Docker原理之Cgroups&#xff0c;其他文章快捷链接如下&#xff1a; 应用架构演进容器技术要解决哪些问题Docker的基本使用Docker是如何实现的 Docker核心技术&#xff1a;…...

union的特性和大小端

一、union在c和c语言中的特性 1.共享内存空间&#xff1a;union的所有成员共享同一块内存空间。意味着在同一时刻&#xff0c;union 只能存储其成员 中的一个值。当你修改了union中的一个成员&#xff0c;那么其它成员的值也会被改变&#xff0c;因为它们实际上都是指向同一块…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...