vuepress2.0使用教程(10)-从零开始搭建自定义模板

本文档详述了使用Vuepress2.0搭建网站的过程,包括从零开始编写主题,介绍了何时选择自定义主题,基础架构,官方主题的优势,以及如何扩展功能。文中分享了创建Layout、404页面,使用插件,增强Markdown功能,自定义客户端配置和目录生成等实践经验。

       百家饭团队开发的百家饭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使用(扩展默认主题)- 引入百度搜索支持及其他库的引用
  10. 编写vuepress主题(自定义自己的框架,开发复杂程序)
  11. vuepress2.0使用——编译及站点部署
  12. vuepress2.0当前的状态(版本变化,方便大家升级,占位中,未书写)
  13. 更多读者发起话题点击这里进专题查看,就不更新标题了

这里先给搜索进来的同学提个醒:凡是网上搜索到需要修改clientAppEnhance.js 文件的教程都已经过时,最新版本已不再使用。另外说个题外话,我查了下,我为数不多的搜索关键词里面,vuepress的占了大部分,这里感谢大家的关注,这个教程肯定有不合理的地方,如果有任何需要帮助的,大家都可以留言,我尽力解答。

今天收到一个催更,感谢大家对于这个系列的热爱,最近没更新,一是进入第10章,其实进入了一个比较深的程度,实用意义没有前几章大;二是忙于百家饭OpenAPI平台v0.6.x版本的更新,说起来我们的API调用代码自动生成功能也很好用的,我们自己都用,如果各位前端小伙伴能帮我们试试,感激不尽。

从零编写Vuepress2主题

今天主要讲从零编写Vuepress2主题,首先要说的是,官方推荐大家从官方主题扩展生成自己的主题,这样,有些内置功能可以开箱即用,参考6-9章节的介绍。这也是我的推荐。

我们自己是从零写的自己的主题,最主要的原因是上面这个推荐不在官方文档的入手文档里……我们当时并不知道有个官方主题可以使用,所以……

所以现在写这章,我们要介绍一下的几个内容:

  1. 什么时候推荐自己从零写主题

  2. 从零写主题的基础架构是什么样的

  3. 官方主题有哪些可取的地方

  4. 更多自定义扩展

什么时候推荐自己从零写主题

1)如果你试用默认主题,认为整体结构和你预想的差很多的时候,可以考虑自己写主题,例如我们的结

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

百家饭AI

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

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

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

打赏作者

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

抵扣说明:

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

余额充值