当前位置: 首页 > 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;因为它们实际上都是指向同一块…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

Java并发编程实战 Day 11:并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

Qt Quick Controls模块功能及架构

Qt Quick Controls是Qt Quick的一个附加模块&#xff0c;提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中&#xff0c;这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构&#xff0c;与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...