正式发布:VitePress 1.0 现代化静态站点生成器!

news/2024/4/27 15:44:32/文章来源:https://blog.csdn.net/we2006mo/article/details/137017096

大家好,我是奇兵,今天介绍一下现代化静态站点生成器!,希望能帮到大家。

3 月 21 日, 由 Vue 团队出品的现代化静态站点生成器 VitePress 正式发布 1.0 版本!它专为构建快速、以内容为中心的网站而生,能够轻松地将使用 Markdown 格式撰写的源文件内容转化为静态 HTML 页面,支持部署到任何平台。

图片

VitePress 基于 Vite 和 Vue 构建,是 VuePress 的精神继承者和现代替代品。

使用场景

  • 文档编写:VitePress 自带专为技术文档打造的默认主题,为 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等项目的文档提供了支持。Vue.js 的官方文档也基于 VitePress 构建,并通过自定义主题实现多语言版本的无缝切换。

  • 博客、作品集与营销网站:VitePress支持完全自定义的主题,并具备标准Vite + Vue应用程序的开发体验。由于基于 Vite 构建,还可以轻松利用 Vite 生态中的各类插件。更值得一提的是,VitePress提供了灵活的 API,支持本地或远程数据加载,并在构建阶段动态生成路由。只要数据在构建时是确定的,几乎可以用 VitePress 来构建任何类型的网站。

开发者体验

VitePress 旨在为处理 Markdown 内容提供出色的开发者体验。

  • Vite 驱动:实现秒速启动服务器,每次编辑都能实时反映在页面上(<100ms),无需重新加载页面。

  • 内置 Markdown 扩展:前置数据、表格、语法高亮等一应俱全,满足多样化的文档编写需求。特别是针对代码块的处理,VitePress 提供了众多高级特性,使其成为技术文档编写的理想选择。

  • Vue 增强的 Markdown:借助 Vue 模板与 HTML 的完美兼容,每个 Markdown 页面都能成为 Vue 单文件组件。这意味着可以利用 Vue 的模板特性或导入的组件,为静态内容增添丰富的交互性,提升用户体验。

性能

与许多传统 SSG(静态站点生成器)不同,VitePress 生成的网站在首次访问时提供静态 HTML,但在网站内部进行后续导航时,它会变成一个单页应用程序(SPA)。这种模型为性能提供了最佳平衡:

  • 快速初始加载: 首次访问任何页面时,都会提供静态的、预渲染的 HTML,以加快加载速度和优化 SEO。然后页面会加载一个 JavaScript 包,将页面转换为 Vue SPA(即“水合作用”)。与大家对 SPA 水合作用通常的缓慢假设相反,由于 Vue 3 的原始性能和编译器优化,这一过程实际上非常快。典型的 VitePress 网站在 PageSpeed Insights 中即使在低端移动设备和慢速网络环境下也能获得接近完美的性能评分。

  • 快速加载后导航: 更重要的是,SPA 模型在初始加载后为用户提供了更好的体验。在网站内部进行后续导航时,不再需要整个页面重新加载。相反,会获取目标页面的内容并进行动态更新。VitePress 还会自动为视口内的链接预取页面块。在大多数情况下,加载后的导航会感觉非常快。

  • 无缝的交互体验: 为了能够水合静态 Markdown 中嵌入的动态 Vue 部分,每个 Markdown 页面都被视为一个 Vue 组件并编译成 JavaScript。这听起来可能效率不高,但 Vue 编译器足够智能,能够分离静态和动态部分,从而最小化水合成本和有效载荷大小。对于初始页面加载,静态部分会自动从 JavaScript 有效载荷中消除,并在水合过程中跳过。

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

喜欢的话点点赞收藏一下谢谢

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

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

相关文章

动态多态的注意事项

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 多态的基本概念 多态是C面向对象三大特性之一&#xff08;多态、继承、封装&#xff09; 多态分为两类&#xff1a; 静态多态&#xff1a;函数重载和运算符重载属于静态多态&#x…

C语言从入门到实战----C语言中内存函数的使用和模拟实现

目录 前言 1.memcpy 使用和模拟实现 2. memmove 使用和模拟实现 3. memset 函数的使用 4. memcmp 函数的使用 前言 在编程领域&#xff0c;内存管理是至关重要的一环&#xff0c;它确保了程序能够高效、稳定地运行。 C语言作为一门底层的编程语言&#xff0c;提供了一系…

【3D目标检测】Det3d—SE-SSD模型训练(前篇):KITTI数据集训练

SE-SSD模型训练 1 基于Det3d搭建SE-SSD环境2 自定义数据准备2.1 自定义数据集标注2.2 训练数据生成2.3 数据集分割 3 训练KITTI数据集3.1 数据准备3.2 配置修改3.3 模型训练 1 基于Det3d搭建SE-SSD环境 Det3D环境搭建参考&#xff1a;【3D目标检测】环境搭建&#xff08;OpenP…

Linux非root用户安装mysql5.7

1、下载安装包MySQL :: Download MySQL Community Server 点击Archives 我下载的是5.7.27版本&#xff0c;linux主机直接选择linux-Generic即可&#xff0c;选择第一个包下载即可 2、安装mysql 解压 shell> tar xzvf mysql-5.7.31-linux-glibc2.12-x86_64.tar.gz shell&g…

基于深度学习YOLOv8+PyQt5的水底海底垃圾生物探测器检测识别系统(源码+数据集+配置说明)

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;323海底 获取完整源码7000张数据集配置说明文件说明远程操作配置环境跑通程序 效果展示 基于深度学习YOLOv8PyQt5的水底海底垃圾生物探测器检测识别系统设计&#xff08;源码数据集配置文件&#xff09; 各文件说明 程序运…

申请免费域名证书

目录 背景&#xff1a; 域名证书是什么&#xff1a; 域名证书有哪些&#xff1a; 部署域名证书有什么用&#xff1a; 免费的域名证书在哪里申请&#xff1a; 背景&#xff1a; 域名是一个IP地址上的“面具” 。一个域名的目的是便于记忆和沟通的一组服务器的地址(网站&…

分页功能制作

使用HTML&#xff0c;css&#xff0c;js和json假数据制作分页功能。 以下为分页功能结构&#xff0c;下面可以点击上一页&#xff0c;下一页及数字&#xff0c;还可以自己输入想要跳转的页面点击跳转。下面每页显示的内容也会跟着改变。还可以选择不同的每页显示数据的条数。默…

python数据实时传给unity工程并绘制出来

python # 服务器端代码 import socket import random import struct import time# 创建一个服务器Socket server_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM)# 监听的地址和端口 host 127.0.0.1 port 12345# 绑定地址和端口 server_socket.bind((host, port…

C语言中常用的文件操作

本文将介绍常用的关于文件操作函数&#xff0c;如fopen,fclose,fread,fwrite,feek,ftell,rewind以及feof和ferror等文件操作操作函数&#xff0c;还介绍一些用于所有输入输出流的函数如fgetc,fputc,fgets,fputs,fprintf,fscanf等函数&#xff0c;还介绍了sscanf,sprintf函数,fe…

主流电商平台淘宝/1688/京东电商数据实时采集监测|电商API接口接入

电商大数据平台基于网络主流电商平台淘宝/1688/京东电商数据进行搭建&#xff0c;全面监测了包含淘宝、京东、苏宁、美团、大众点评等共计100余个主流电商交易平台&#xff0c;并凭借多年的电子商务数据分析挖掘经验积累形成的电商数据清洗体系和挖掘模型&#xff0c;能高效完成…

DashVector - 阿里云向量检索服务

DashVector 文章目录 DashVector一、关于 DashVector二、使用 DashVector 前提准备1、创建Cluster&#xff1a;2、获得API-KEY3、安装最新版SDK 三、快速使用 DashVector1. 创建Client2. 创建Collection3、插入Doc4、相似性检索5、删除Doc6. 查看Collection统计信息7. 删除Coll…

Flask 与小程序 的图片数据交互 过程及探讨研究学习

今天不知道怎么的&#xff0c;之前拿编程浪子地作品抄过来粘上用好好的&#xff0c;昨天开始照片突的就不显示了。 今天不妨再耐味地细细探究一下微信小程序wxml 和flask服务器端是怎么jpg图片数据交互的。 mina/pages/food/index.wxml <!--index.wxml--> <!--1px …

Python程序设计 循环结构(二)

1.斐波那契数列 编写一个能计算斐波那契数列中第x个数的小程序。斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列、 因数学家莱昂纳多斐波那契&#xff08;Leonardoda Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为…

日本EPSON 爱普生HUD汽车抬头显示系统芯片

目前HUD产品在新车上的配装率逐年上升&#xff0c;预计在2025年将达到30%。那么在介绍爱普生HUD整合方案之前&#xff0c;让我们先了解一下什么叫HUD。 HUD&#xff08;Head Up Display&#xff09;中文叫抬头显示系统&#xff0c;又被叫做平行显示系统。早被应用在飞机辅助…

Linux系统——硬件命令

目录 一.网卡带宽 1.查看网卡速率——ethtool 网卡名 2.查看mac地址——ethtool -P 网卡名 二、内存相关 1.显示系统中内存使用情况——free -h 2.显示内存模块的详细信息——dmidecode -t memory 三、CPU相关 1.查看CPU架构信息——lscpu 2.性能模式 四、其他硬件命…

C语言例4-37:输出10~100的全部素数

素数是指除1和它本身之外不能被其他任何整数整除。 自己思考的基础代码如下&#xff1a; //输出10~100的全部素数 //素数是指除1和它本身之外不能被其他任何整数整除 //自己思考的基础代码 #include<stdio.h> int main(void) {int n10,i2,m,counter0; // n10~100;for(n…

如何用Flask中的Blueprints构建大型Web应用

本文分享自华为云社区《构建大型Web应用Flask中的Blueprints指南》&#xff0c;作者&#xff1a; 柠檬味拥抱。 什么是Blueprints&#xff1f; 什么是Blueprints&#xff1f; Blueprints是Flask中的一种模式&#xff0c;用于将应用程序分解为可重用的模块。每个蓝图实际上是…

IDEA | 资源文件中文乱码问题解决

问题 IDEA打开资源文件&#xff0c;显示乱码问题。 解决方案 1、电脑是mac&#xff0c;点击IDEA->【Preferences】->【Editor】->【File Encodings】 2、选择【Properties Files】中的UTF-8&#xff0c;并勾选Transparent native-to-ascii conversion。 3、最后点击…

蓝桥杯算法赛(二进制王国)

问题描述 二进制王国是一个非常特殊的国家&#xff0c;因为该国家的居民仅由 0 和 1 组成。 在这个国家中&#xff0c;每个家庭都可以用一个由 0 和 1 组成的字符串 S 来表示&#xff0c;例如 101、 000、 111 等。 现在&#xff0c;国王选了出 N 户家庭参加邻国的庆典…

Karmada 管理有状态应用 Xline 的早期探索与实践

背景与动机 目前随着云原生技术和云市场的不断成熟&#xff0c;越来越多的 IT 厂商开始投入到跨云多集群的怀抱当中。以下是 flexera 在 2023 年中关于云原生市场对多云多集群管理的接受程度的调查报告&#xff08;http://info.flexera.com&#xff09; 从 flexera 的报告中可…