Vitepress自定义页面，以及配置tailwindcssvitepress中，除了使用一些配置项目，还可以通过写vue代码，来做一个定制化的UI。下面这个UI主页便是vue组件+tailwindcss做的一.自定义vitepress中，如果内置的home、doc、page不满足需求，还可以自己写vue代码进行自定义1.1自定义布

你好同学，我是沐爸，欢迎点赞、收藏和关注！个人知乎、公众号"沐爸空间"基于VitePress框架，我在个人阿里云服务器上部署了《ES6入门教程》的静态站点，项目访问地址：http://es6.muba888.cn/。项目代码已开源：https://gitee.com/ismuba/vitepress-es6.git，个人可以根据需要，自行下载

1、安装node.js2、安装vscode，并在扩展中安装markdown插件3、在vscode的终端中修改淘宝镜像源：1npmconfigsetregistryhttps://registry.npmmirror.com4、在终端中输入1npmadd-Dvitepress5、在D盘创建文件夹，右键用vscode打开，或在vscode中打

第二次在csdn发文章，写的不好，还请理解，直接解决文章标题中的问题，直接上干货。themeConfig:{search:{provider:'local'},复制以上代码，然后找到config.mjs这个文件。如下图。找到这个文件后，接下来到重点了哈，加到这个config.mjs文件的什么位置：大家看仔细了

第一次在csdn发文章，写的不好，还请理解，直接解决文章标题中的问题，直接上干货。head:[//添加图标['link',{rel:'icon',href:'/favicon.ico'}]],复制以上代码，然后找到config.mjs这个文件。如下图。找到这个文件后，我们先别着急，我们先要建立一个文件夹

在使用vitepress构建一个所有博客的概览页的时候，使用到了createContentLoader这个api，但是在index.data.ts中定义并导出后，在md文件中调用遇到了下面这个问题：Buildfailedwith1error:node_modules/esbuild/lib/main.js:1374:27:ERROR:[plugin:externalize-deps]"vitepress

favicon.ico它出现在浏览器标签页上，是网站的标识之一。准备图标首先，你需要准备一个符合您要求的图标。通常，favicon.ico使用的是.ico格式的图标文件，大小为16x16像素。你可以用图标编辑器或在线图标生成器创建一个.ico文件。替换默认的favicon.ico找到你的docs目录，如果

vitepress搭建博客之前使用的Hugo搭建了一个博客，感兴趣的可以看看Hugo搭建个人博客，使用了一段时间，配置完成后使用还是相对简单的，不过总感觉不够顺手，后来看到vitepress，就尝试了一下，感觉使用更顺手一些，所以打算换成vitepress，下面记录一下搭建的过程。搭建博客流程关于使用vitep

在选择合适的静态网站生成器时，Hexo、VitePress、Docusaurus是三个备受关注的选项，那么到底哪一个框架更适合你呢？本文将从使用场景、社区生态、功能、性能、扩展性这五个方面，帮你全方位分析各个框架的优缺点，以便为你的技术选型提供参考。1、应用场景Hexo,官方定位自己是"快速

接上一节：从零用VitePress搭建博客教程(6)-–第三方组件库的使用和VitePress搭建组件库文档 我们搭建完成vitePress后，那么接下来就是如何部署到线上服务器，这里使用GithubPages，免得自己购买服务器，当然你也可以自己购买服务器来部署（比如阿里云服务器）。在部署之前，我们先简单了解

接上一节：从零用VitePress搭建博客教程(5)-如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录？九、第三方组件库的使用我们经常看见UI组件库的文档，这里我们就用element-plus第三方组件库为例子，搭建组件库文档examples：作为组件库示例目录，我们以Button组件

1.电脑本地需要安装node16+版本2.电脑本地安装pnpm3.本地创建一个文件夹，用于存放该项目，如：F:\资料整合\编程资料\编程项目\网页\sfisadmin\vitepress4.进入该文件夹5.初始化node工程：pnpminit 6.安装vitepresspnpmadd-Dvitepress 7.初始化vietepresspnpmexecvit

接上一节：从零用VitePress搭建博客教程(3)-VitePress页脚、标题logo、最后更新时间等相关细节配置六、首页样式修改有时候觉得自带的样式不好看，想自定义，首先我们在docs/.vitePress新建一个theme文件夹，用来存放自定义布局和主题修改的相关文件，如下所示theme下再新建custom.css

省流：使用vitepress-plugin-rss这个插件前言在看许多个人博客站点的时候，右上角总会有个RSS订阅的标志恰好我的博客也是基于VitePress搭建的，就想看看能不能也实现这个功能呢？动手前先搜了一下，先是看到了vitepress-blog-zaun上有这个RSS的实现支持，再搜了一下发现Vue的官方博

背景最近在给业务组件库集成指令库，将各个项目中常用的指令如一键复制、元素和弹窗拖拽等封装到一起，进行统一发版维护。业务组件库项目架构采用的是pnpm+vite+vue3+vitepress，其中vitepress主要做组件库文档站点同时展示可交互的组件。问题开发运行时指令库demo没有问题，构建编译

该系列已更新文章：分享一个实用的vite+vue3组件库脚手架工具，提升开发效率开箱即用yyg-cli脚手架：快速创建vue3组件库和vue3全家桶项目Vue3企业级优雅实战-组

上文《Vitepress搭建组件库文档（上）——基本配置》已经讨论了vitepress搭建组件库文档的基本配置，包括站点Logo、名称、首页home布局、顶部导航、左侧导航等。本文进入

在vite出现以前，vuepress是搭建组件库文档不错的工具，支持以Markdown方式编写文档。伴随着vite的发展，vitepress已经到了1.0.0-alpha.22版本，很多博客还是基于0.x

VitePress快速上手本节将帮助你从头开始搭建一个简单的VitePress文档站点。如果你已经有了一个存在的项目并且向在项目中维护文档，你可以从步骤3开始如果你还没有配

vitepress-demoblock  为vitepress添加更专业的Demo演示能力，让您在开发vue组件库或者vue相关文档编写时，可以通过引入vue文件的时候结果显示和代码演示。文档官方文

vitepress-demoblock  为vitepress添加更专业的Demo演示能力，让您在开发vue组件库或者vue相关文档编写时，可以通过引入vue文件的时候结果显示和代码演示。文档官方文

1.首先，我们要做的第一件事就是创建目录（在这之前请确保NodeJS已经安装好！）mkdirblog-vitepresscdblog-vitepress2.初始化package.json，并安装viteppressnpminit