vuepress2.0使用教程（8）-扩展MD功能（Section扩展及自定义语法）

原创 已于 2022-09-30 16:59:08 修改 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #前端 #开发语言

于 2022-08-19 19:05:28 首次发布
本文详述了如何利用VuePress 2.0搭建个人站点，从默认模板定制、容器扩展、Element-Plus集成到自定义MD语法，以及如何编写和部署主题。分享作者在实践中遇到的问题和解决方案，适合博主提升文章表达力。

       百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的，搭建的时候不知道2.0还处在beta状态，所以导致后来踩了一些坑，使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48，有很多的变化，所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。

大致计划写这些内容吧：

  1. vuepress介绍、选型原因及使用感受（先介绍一下自己用的情况吧）
  2. vuepress2.0使用（搭建一个vuepress支撑的网站）-第一部分
  3. vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置
  4. vuepress2.0使用（搭建一个vuepress支撑的网站）-详细配置默认模板
  5. vuepress2.0使用（搭建一个vuepress支撑的网站）-md文件的玩法
  6. vuepress2.0使用（扩展默认主题）- 准备及扩展页面组件
  7. vuepress2.0使用（扩展默认主题）- 提供更多页面模板并引入ElementUI
  8. vuepress2.0使用（扩展默认主题）- 扩展MD页面功能（Section扩展及自定义语法）
  9. vuepress2.0使用（扩展默认主题）- 引入百度搜索支持及其他库的引用
最低0.47元/天 解锁文章
vuepress2.0使用教程（1）-vuepress介绍、选型原因及使用感受
baijiafan的博客
07-29 2671
vuepress 2.0真实建站感受及使用教程
vuepress2.0使用教程（7）-扩展默认主题- 提供更多页面模板并引入ElementUI
baijiafan的博客
08-13 3411
vuepress 2.0的进阶用法，编辑我们自己的模板啦
vuepress2.0使用教程（2）-使用vuepress 2.0搭建一个简单站点
baijiafan的博客
07-30 2351
vuepress2.0使用教程（2）-使用vuepress 2.0搭建一个简单站点
【VuePress2.0】快速开始（不用）
Lenhart001的博客
11-21 1056
【VuePress2.0】快速开始（不用）
VuePress v2.0 项目创建
qq_34388017的博客
05-30 234
我创建了一个文件夹，然后在文件夹中打开了powershell。本地站点：http://localhost:8080。构建后的文件夹中已有了初始文件。
vuepress2.0使用教程（3）- vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置
baijiafan的博客
07-31 3066
vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置
vuepress2.0使用教程（6）-扩展默认模板之准备及扩展页面组件
baijiafan的博客
08-12 1994
vuepress 2.0全功能介绍，第三部分，默认主题的扩展
vuepress2.0使用教程（10）-从零开始搭建自定义模板
baijiafan的博客
09-16 2642
为vuepress2编写自定义模板
VuePress2.0构建项目文档系统
qq_34388017的博客
05-30 418
参考TerraMours 官网。
vuepress（三）：Markdown常用语法
weixin_41897680的博客
04-18 1977
vuepress（三）：Markdown常用语法
vuepress-plugin-custom-tooltip:VuePress的可自定义，可重用的工具提示组件。 这个插件是@ adamdehavenvue-custom-tooltip的VuePress包装器
05-08
VuePress-插件自定义工具提示 Vue.js项目的可重用工具提示组件。 这个插件是的VuePress包装器。 安装 # With npm npm install @adamdehaven/vuepress-plugin-custom-tooltip # or Yarn yarn add @adamdehaven/vuepress-plugin-custom-tooltip 您可以通过将插件安装在.vuepress/config.js文件中来使用该插件，如下所示： // .vuepress/config.js module . exports = { // Install the plugin using ONE of the options below: // -------------------------------------------------- //
vuepress-quickstart:VuePress项目的入门模板
03-28
VuePress快速入门 VuePress项目的入门模板 预览 启动您的VuePress项目 获得一个类似这样的项目。 为什么选择VuePress？ 使用降价促销内容建立一个现代化的静态网站。 非常适合文档站点。 从首页： 简约至上-以减价为中心的项目结构的最少设置有助于您专注于写作。 Vue供电-享受Vue + Webpack的开发经验，在markdown中使用Vue组件，并使用Vue开发自定义主题。 性能-VuePress为每个页面生成预渲染的静态HTML ，并在页面加载后作为SPA运行。 要了解有关VuePress的更多信息，请参见我的页面。 安装 安装系统依赖项 安装Node.js和Yarn-请参阅。 克隆 从此模板或模板存储库创建一个新项目。 克隆仓库。 $ git clone git@github.com:MichaelCurrin/vuepress-quick
project-vuepress：我的笔记的Vuepress模板
02-12
欢迎来到Vuepress项目 :waving_hand: Vuepress网站，提供我的笔记和个人博客新闻 :house: 安装 docs:vuepress dev 建立 npm run docs:build 作者 :bust_in_silhouette: 爆笑 ： 表示支持 给一个 :white_medium_star: 如果这个项目对您有帮助！ 该自述文件是使用 :red_heart_selector: 通过
vuepress基于Vue的简约静态站点生成器
08-12
vuepress：基于Vue的简约静态站点生成器
vuepress2.0避坑指南
Web_boom的博客
10-07 3004
主要是在.vuepress新建components，内部组件会自动根据文件名注册成全局组件，比如下面两个类似的组件在markdown文件中就可以直接使用了* 这是一个全局注册的组件因为你想高度自定义化，所以官方提供了客户端自定义配置，首先需要在.vuepress文件夹下新建一个client.ts。
vue2.0+express
qq_41833896的博客
06-01 260
待完善步骤, 数据库文件已上传 vueCli + vueRouter + vuex + express + mysql https://github.com/hanyue9551/vue2
VuePress2.0 + Github Actions部署到Github Pages教程
weixin_43019353的博客
05-19 979
选择权限，看不懂不懂全勾Read and write。就代表构建失败，可点进去查看原因。这代表成功，看到红色的。构建成功会发现多了个分支。
探索VuePress新维度：Vuepress-plugin-demo-container深度揭秘
最新发布
gitblog_00064的博客
06-25 1136
探索VuePress新维度：Vuepress-plugin-demo-container深度揭秘 在快速迭代的前端开发领域，文档的质量往往决定了一个库或框架的可接受度和易用性。今天，我们要向您隆重推荐一款针对VuePress用户的神器——Vuepress-plugin-demo-container，这是一款专为提升组件文档写作体验而生的插件。它通过简化示例代码的添加过程，让文档撰写更加得心应手，进...
vuepress引入依赖、md文件中调用自定义组件
couch potato的博客
01-13 1773
vuepress引入依赖、md文件中调用自定义组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百家饭AI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值