简单介绍下 VitePress 中的 vp-doc 和 vp-raw

news2024/12/23 16:45:53

VitePress 是一个轻量级的静态网站生成器,专为快速构建文档网站而设计。它是基于 ViteVue 3 构建的,旨在提供快速的开发体验和高效的构建过程。

存在两个需要注意的点:vp-doc 和 vp-raw,它们代表了不同的 CSS 样式类和用途,涉及页面内容的呈现方式。

1. vp-doc 的含义与用法

1.1 含义

vp-doc 是 VitePress 用来构建文档页面时,应用于整个页面布局的一种 CSS 样式类。它是 VitePress 内部定义的一个类,作为页面的根容器元素,包含了文档的结构样式,确保文档内容的排版、间距、背景色等统一性。

1.2 用法

vp-doc 作为文档页面的根容器,包含了所有文档内容。它通常用于包裹整个文档站点的 HTML 结构。

通过对 vp-doc 类样式进行修改,可以自定义整个文档站点的布局和样式。

在 VitePress 中,vp-doc 是自动添加的,无需手动去创建这个类。它作为 VitePress 渲染文档的一个基础,控制页面的整体布局。

因此,当遇到自定义样式不生效时,需要考虑是否优先使用了 vp-doc 样式。

举个 🌰

当编写一个 table 组件时,展示为:

代码为:

import { defineComponent } from "vue";
import { ElButton, ElTable, ElTableColumn } from "element-plus";
import "./index.less";

export default defineComponent({
  setup() {
    const tableData = [
      { name: 'Sophia', age: 18, country: '美国' },
      { name: 'William', age: 20, country: '新加坡' },
      { name: 'Alice', age: 25, country: '中国' },
      { name: 'Evelyn', age: 30, country: '法国' },
      { name: 'Emma', age: 10, country: '俄罗斯' },
    ];

    return () => (
      <div class="table-container">
        <ElTable data={tableData} style={{ width: '100%' }} border stripe>
          <ElTableColumn prop="name" label="姓名" />
          <ElTableColumn prop="age" label="年龄" />
          <ElTableColumn prop="country" label="国家" />
          <ElTableColumn min-width="120" label="操作">
            {{
              default: () => (
                <div class="operation">
                  <ElButton link type="primary" size="default">查看</ElButton>
                  <ElButton link type="primary" size="default">编辑</ElButton>
                  <ElButton link type="primary" size="default">删除</ElButton>
                </div>
              )
            }}
          </ElTableColumn>
        </ElTable>
      </div>
    );
  }
});

问题来了:为什么表格展示有问题呢?

翻看一下元素就明白了,vp-doc 样式起作用,全部注释掉之后,就恢复为正常表格。

也就是给属性默认值:

.vp-doc table:not(:where(.vp-raw, .vp-raw *)) {
  border-collapse: initial;
  margin: 0 auto;
  display: table;
}

注意📢:这个样式的位置要考虑全面,避免影响到全局。 

正常展示为:

遇到其余类似情况,也是一样的处理。 

1.3 注意事项

vp-doc 是 VitePress 内部使用的一个类,通常不需要直接去修改它,除非需要全局定制样式。它是页面的主要结构,包含了 VitePress 的默认布局,除非有特殊的需求,通常不建议直接去删除或修改这个类的结构。

2. vp-raw 的含义与用法

2.1 含义

vp-raw 是 VitePress 中用于处理原始 HTML 或未经过解析的内容的一个特殊类。它允许用户在文档中插入原始 HTML 或其他不会被 VitePress 处理的内容。

2.2 用法

vp-raw 通常与 VitePress 渲染过程中需要“原生”呈现的内容结合使用。

举个 🌰

在 VitePress 中,使用普通 class 类名和 vp-raw 类名直接插入 HTML 代码块的区别。

普通 class

<div class="custom-html">
  <p>This content is implemented using a regular class name.</p>
</div>

vp-raw 类

<div class="vp-raw">
  <p>This content is implemented using the vp-raw class name.</p>
</div>

区别:二者的 p 元素样式是不同的。

2.3 意义

vp-raw 类的关键在于,它可以防止内容在渲染过程中被 VitePress 进一步解析,保留其原始形式。这样可以让开发者插入非 Markdown 或非 VitePress 处理的内容。

注意:尽量避免过度使用 vp-raw,因为直接插入 HTML 可能会破坏 VitePress 的一致性和文档结构。只有在必要时,才建议使用该类。

2.4 特别使用

当项目中不想使用额外的 vp-doc 的样式,也就是 VitePress 本身的样式文件,可以在目录:vitepress/vp-demo/index.vue 内部代码的最外层设置:

<div class="vp-raw">
  ...
</div>

即可实现页面应用的都是自定义样式。

3. 额外补充一点「::: demo」

在 VitePress 中,::: demo 是一个非常有用的语法,它是 VitePress 中的一个自定义容器,用于创建一个可交互的代码演示区域。通过包裹代码块的方式,使得代码示例可以在页面上呈现出来。

也就是上述表格的展示方式。

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

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

相关文章

HTML前端开发-- Flex布局详解及实战

引言 Flex布局&#xff0c;全称为Flexible Box Layout&#xff0c;是一种现代CSS布局技术&#xff0c;它提供了一种更有效的方式来设计响应式布局和复杂页面布局。本文将详细介绍Flex布局的基本概念、属性以及实战应用。 一、基本概念 Flex布局的核心是Flex容器&#xff08;…

【前端】理解 JavaScript 中 typeof 操作符的独特行为

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;typeof 操作符的基本使用&#x1f4af;为什么 typeof 数组是 "object"&#xff1f;&#x1f4af;为什么 typeof {} 返回 "object"&#xff1f;&…

一键解析RAW文件,GPS定位展示,摄影师专用照片管理软件

作为一款精心打造的数码影像管理工具&#xff0c;bkViewer以其轻量化设计和强大的功能特性脱颖而出。这款软件不仅能够完美处理各类主流图片格式&#xff0c;更整合了专业级的图像信息处理系统&#xff0c;包含完整的EXIF、XMP、IPTC、GPS、ICC等元数据解析能力&#xff0c;并通…

import.meta.glob动态加载图片

import.meta.glob 基于Vite&#xff08;Vue 3 默认构建工具&#xff09;&#xff0c;用于动态导入模块&#xff0c;特别是当你需要批量导入文件或模块时. const modules import.meta.glob(/path/to/files/**/*.js);注意&#xff1a;import.meta.glob 是针对 源代码&#xff…

[高阶数据结构六]最短路径算法

1.前言 最短路径算法是在图论的基础上讲解的&#xff0c;如果你还不知道图论的相关知识的话&#xff0c;可以阅读下面几篇文章。 [高阶数据结构四] 初始图论_初始图结构-CSDN博客 [高阶数据结构五] 图的遍历和最小生成树_图的遍历和生成树求解-CSDN博客 本章重点&#xff1a;…

开源的跨平台SQL 编辑器Beekeeper Studio

一款开源的跨平台 SQL 编辑器&#xff0c;提供 SQL 语法高亮、自动补全、数据表内容筛选与过滤、连接 Web 数据库、存储历史查询记录等功能。该编辑器支持 SQLite、MySQL、MariaDB、Postgres 等主流数据库&#xff0c;并兼容 Windows、macOS、Linux 等桌面操作系统。 项目地址…

mysql 5.7安装及安装后无法启动问题处理

下载安装包&#xff0c;直接解压 配置环境变量 创建my.ini文件 [mysqld] #端口号 port 3306 #mysql-5.7.27-winx64的路径 basedirD:/soft/mysql57 #mysql-5.7.27-winx64的路径\data datadirD:/soft/mysql57/data #最大连接数 max_connections200 #编码 character-set-server…

spine 动画层 动态权重

前奏.业务背景 这边想实现一个功能&#xff0c;项目中有 一只猫 猫的头会盯着逗猫棒移动。因为素材还没到所以这里使用了 spine 自带的猫头鹰。他的动画 刚好挺有针对性&#xff1a;&#xff08;关联上篇&#xff09;https://blog.csdn.net/nicepainkiller/article/details/144…

Spark 内存管理机制

Spark 内存管理 堆内内存和堆外内存 作为一个 JVM 进程&#xff0c;Executor 的内存管理建立在 JVM(最小为六十四分之一&#xff0c;最大为四分之一)的内存管理之上&#xff0c;此外spark还引入了堆外内存&#xff08;不在JVM中的内存&#xff09;&#xff0c;在spark中是指不…

Vision Transformer(vit)的主干

图解&#xff1a; 代码&#xff1a; class VisionTransformer(nn.Module):def __init__(self, img_size224, patch_size16, in_c3, num_classes1000,embed_dim768, depth12, num_heads12, mlp_ratio4.0, qkv_biasTrue,qk_scaleNone, representation_sizeNone, distilledFalse,…

mongodb配置ssl连接

mongodb5.0.9 centos7.6x86 1、正常启动mongod -f mongodb.conf 2、生成所需要的ssl证书 服务端ssl配置&#xff1a; 2.1生成ca.pem证书 #-x509&#xff1a; 用于生成自签证书&#xff0c;如果不是自签证书则不需要此项 #-days: 证书的有效期限&…

Linux 中的 ls 命令:从使用到源码解析

ls 命令是 Linux 系统中最常用和最基本的命令之一。下面将深入探讨 ls 命令的使用方法、工作原理、源码解析以及实际应用场景。 1. ls 命令的使用** ls 命令用于列出目录内容&#xff0c;显示文件和目录的详细信息。 1.1 基本用法 ls [选项] [文件或目录]例如&#xff1a; …

Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo)

Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 目录 Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 一、简单介绍 二、PyTorch 三、CNN 1、神经网络 2、卷…

【C语言】结构体(二)

一&#xff0c;结构体的初始化 和其它类型变量一样&#xff0c;对结构体变量可以在定义时指定初始值 #include <stdio.h> #include <stdlib.h> struct books // 结构体类型 {char title[50];char author[50]; //结构体成员char subject[100];int book_id; }…

C++(4个类型转换)

1. C语言中的类型转换 1. 隐式 类型转换&#xff1a; 具有相近的类型才能进行互相转换&#xff0c;如&#xff1a;int,char,double都表示数值。 2. 强制类型转换&#xff1a;能隐式类型转换就能强制类型转换&#xff0c;隐式类型之间的转换类型强相关&#xff0c;强制类型转换…

Windows下从命令行(Powershell/CMD)发送内容到系统通知中心

Windows下从命令行&#xff08;Powershell/CMD&#xff09;发送内容到系统通知中心 01 前言 在平时写脚本的时候&#xff0c;将日志等信息直接输出到控制台固然是最直接的&#xff0c;而如果是一些后台执行的任务&#xff0c;不需要时刻关注运行细节但是又想知道一些大致的情…

四、初识C语言(4)

一、作业&#xff1a;static修饰局部变量 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <string.h> //作业&#xff1a;static修饰局部变量 int sum (int a) {int c 0;static int b 3;c 1;b 2;return (abc); } int main() {int i 0;int a …

基于深度学习的甲状腺结节影像自动化诊断系统(PyQt5界面+数据集+训练代码)

随着医学影像技术的发展&#xff0c;计算机辅助诊断在甲状腺结节的早期筛查中发挥着重要作用。甲状腺结节的良恶性鉴别对临床治疗具有重要意义&#xff0c;但传统的诊断方法依赖于医生的经验和影像学特征&#xff0c;存在一定的主观性和局限性。为了解决这一问题&#xff0c;本…

VLC 播放的音视频数据处理流水线搭建

VLC 播放的音视频数据处理流水线搭建 音视频流播放处理循环音频输出处理流水线VLC 用 input_thread_t 对象直接或间接管理音视频播放有关的各种资源,包括 Access, Demux, Decode, Output, Filter 等,这个类型定义 (位于 vlc-3.0.16/include/vlc_input.h) 如下: s…

Android 12系统源码_RRO机制(一)Runtime Resource Overlay机制实践

前言 Android的RRO&#xff08;Runtime Resource Overlay&#xff09;机制允许开发者在运行时替换或重写系统资源&#xff0c;例如布局、图标、字符串等。这个机制的目标是为了支持设备定制和主题化&#xff0c;特别是在不修改系统源代码的情况下。RRO通过在系统的资源上叠加一…