vuepress使用及拓展(骚操作)

官网

文章目录

    • 背景
    • 问题思考
    • 方案思索
    • 实现方案
    • 实现结果
    • 存在问题

背景

当前开放平台文件静态保存在前端项目,每次修改都需要通过修改文件发版的方式,很不便利。
1、需要前端手动维护
2、每次小的修改都要发版
随着对接业务的增多,对接文档的变动也随之增多,为了确保文档的快速更新,选择将开放平台动态化处理。静态文档由前端存储改为数据库存储,前端通过富文本编辑的方式去进行增改。另外左侧目录现在为手动维护,通过动态增减的方式改为动态维护。
阻力:
1、当前项目通过vuepress快速实现,使用配置编码较少,但是灵活性不足。采用动态化处理,对原有项目冲击性较大。
2、静态资源是否有必要存库

问题思考

1、内容回显,页面正常渲染
2、富文本编辑器
3、数据存储,确保回显格式不乱
4、当前所用的vuepress如何与外部资源结合
5、页面响应式

方案思索

方案一:(pass)
静态文件转为html,上传cdn,文档内通过iframe的链接方式直接请求指定资源

方案二:(pass)
静态文件转为html,上传cdn,文档内通过接口请求获取静态文件dom,渲染页面
问题:
1、上传的html不能和原有风格保持一致,产品不便于操作(文档内夹杂着图片、表格、代码片段)
2、需要请求外部资源,时间是一个问题

方案三:(采用)
静态文件转为md,上传cdn,文档内通过接口请求获取静态md资源,通过vuepress使用的makedown-it再重新渲染为html使用

方案四:(pass)(正式情况下推荐,本次情况是想让产品直接使用)
vuepress自动部署
问题:需要运维配合,仍然需要开发去改动

实现方案

通过vuepress layout模板自定义页面结构
接口获取左侧导航栏列表渲染
根据左侧列表,动态请求cdn上的md数据,通过markdown-it渲染模版,进行动态显示
响应式标题数据和左侧列表共用一套模板

项目目录结构
在这里插入图片描述
文档md,只提供layout

---
layout: customerComponent
---

内容页渲染

<template><div class="content"><div v-html="htmlContent" class="markdown-body"></div></div>
</template><script>import MarkdownIt from 'markdown-it'export default {props: {article:{type: Object,default: () => {}}  },data(){return {htmlContent: ''}},mounted(){const that = thisconst md = new MarkdownIt({html: true, // 在源码中启用 HTML 标签linkify: true, // 将类似 URL 的文本自动转换为链接。typographer: true, // 启用一些语言中立的替换 + 引号美化breaks: true // 转换段落里的 '\n' 到 <br>。});// 向服务器发送请求this.$axios.get(`https://cdn.xxxxx.com/${this.article.title}.md?${new Date().getTime()}`).then(res=>{if(res.status == 200){that.htmlContent = md.render(res.data)}})}}
</script>
<style lang="less">
.markdown-body{// 渲染样式编写
}
</style>

实现结果

新文档添加修改
1、文档直接拷贝,通过Typora转为md文档
2、md文档上传cdn
3、开放平台 /docs-plat/编辑.html,修改配置文件
4、查看文档是否生效

存在问题

功能缺失
1、去掉sideBar,响应式tab栏没了
2、文档底部前进后退没了
3、md文件渲染区别
4、全局搜索无法实现,关闭
打包问题
1、引入外部js,提示VuePress window is not defined
https://juejin.cn/post/6894571293337878536
2、
在这里插入图片描述
v-if影响,需将v-if 改为v-show
3、markdown-it版本问题,升级下包即可
在这里插入图片描述

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

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

相关文章

ch0_OSI 七层网络协议介绍

目录 概述 1、三网融合的概念 三网&#xff1a;电信网络、有线电视网络、计算机网络 概念&#xff1a;把上述三种网络融合成一种网络 2、计算机网络的定义、分类 定义&#xff1a;计算机网络是将地理位置不同的独立计算机系统&#xff0c;通过传输介质链接起来&#xff0c…

开发一款直播弹幕游戏需要多少钱?

开发一款直播弹幕游戏需要多少钱&#xff1f;有好多朋友在咨询过弹幕游戏的开发价格后&#xff0c;都会比较吃惊&#xff0c;一款体量这么小的游戏为什么动辄就要几万块甚至十几万&#xff1f; 我来给你们说分析一下原因&#xff0c;这种游戏如果脱离开直播间&#xff0c;可以…

45基于matlab的ARIMA:AutoregressiveIntegratedMovingAverage model。

基于matlab的ARIMA&#xff1a;AutoregressiveIntegratedMovingAverage model。自回归差分移动平均模型(p,d,q)&#xff0c;AR自回归模型&#xff0c;MA移动平均模型&#xff0c;时间序列模型步骤包括&#xff1a;1. 数据平稳性检验&#xff1b;2. 确定模型参数&#xff1b;3. …

生成第一个 Blazor 应用

前言&#xff1a;博主文章仅用于学习、研究和交流目的&#xff0c;不足和错误之处在所难免&#xff0c;希望大家能够批评指出&#xff0c;博主核实后马上更改。 概述&#xff1a;Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架使用 C# 创建丰富的交互式 UI。共享使…

Flink日志采集-ELK可视化实现

一、各组件版本 组件版本Flink1.16.1kafka2.0.0Logstash6.5.4Elasticseach6.3.1Kibana6.3.1 针对按照⽇志⽂件⼤⼩滚动⽣成⽂件的⽅式&#xff0c;可能因为某个错误的问题&#xff0c;需要看好多个⽇志⽂件&#xff0c;还有Flink on Yarn模式提交Flink任务&#xff0c;在任务执…

vue3使用ts封装axios

以下是使用 TypeScript 封装 Axios 的示例代码&#xff1a; //axios.tsimport axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from axios;// 自定义 API 响应类型 interface ApiResponse<T> {code: number;message: string;data: T; }// 自…

中文大语言模型汇总

推荐一篇非常棒的github&#xff1a;Awesome-Chinese-LLM 另附语言模型排行榜&#xff1a;FastChat 里面总结了几乎所有目前主流的中文大语言模型。在此记录一下&#xff0c;方便以后慢慢学习。

单例模式下双重校验锁 DCL 的灵魂三问

文章目录 前言如何实现一个双重校验锁 DCL定义一个单例变量定义一个获取单例的方法性能优化性能优化带来的一点点问题什么是指令重排&#xff1f; 总结如何理解文章开篇理解的三个问题1、为什么需要使用两个 if 语句&#xff1f;2、为什么使用了 synchronized 关键字还需要使用…

AI 引擎系列 4 - 首次运行 AI 引擎编译器和 x86simulator(2022.1 更新)

AI 引擎系列 4 - 首次运行 AI 引擎编译器和 x86simulator&#xff08;2022.1 更新&#xff09; 简介 在 AI 引擎系列的前 3 篇博文中&#xff0c;我们探讨了 AI 引擎应用所需的不同文件。在本篇中&#xff0c;我们将为 X86 目标运行 AI 引擎编译器&#xff0c;观察它生成的不…

二进制搭建 Kubernetes(K8s)

目录 1、环境 1.1 操作系统初始化配置 1.2 部署 docker引擎 1.3 部署 etcd 集群 1.4 准备签发证书环境 1.5 部署 Master 组件 1.6 部署 Worker Node 组件 1.7 部署 CNI 网络组件 1.7.1 部署 flannel 1.7.2 部署 Calico 1.7.3 node02 节点部署 1.7.4 部署 CoreDNS 1…

0-1背包 完全背包 + 至多/恰好/至少 + 空间优化 + 常见变形题(实战力扣题)

&#xff08;一&#xff09;01背包 1.回溯三问 # capacity:背包容量 # w[i]: 第 i 个物品的体积 # v[i]: 第 i 个物品的价值 # 返回:所选物品体积和不超过 capacity 的前提下&#xff0c;所能得到的最大价值和 def zero_one_knapsack(capacity:int,w:List[int],v:List[int])…

【Linux】第八站:gcc和g++的使用

文章目录 一、解决sudo命令的问题二、Linux编译器-gcc/g1.gcc的使用2.g的使用 三、gcc编译链接过程1.预处理2.编译&#xff08;生成汇编&#xff09;3.汇编&#xff08;生成机器可识别代码&#xff09;4.链接&#xff08;生成可执行文件或库文件&#xff09;5.一些选项的意义 四…

决策树算法的实现

决策树是一种机器学习算法&#xff0c;它类似于人脑思考问题的过程。我们可以通过问一系列的问题来逐步缩小答案的范围&#xff0c;最终得到最终的答案。 比如说&#xff0c;我们想要预测一个人是否会购买某个产品&#xff0c;我们可以通过一系列的问题来缩小预测范围。例如&a…

Docker容器技术实战3

8、docker原生网络 Docker原生网络基于Linux桥接技术和虚拟网络接口&#xff0c;使用了Linux内核的网络功能。每个Docker容器都有自己的网络命名空间&#xff0c;这使得容器之间可以使用独立的IP地址&#xff0c;并隔离了容器的网络栈。 当创建一个Docker原生网络时&#xff…

Airtest工具根据App页面文字信息提取坐标进行截图保存在自定义文件夹

Airtest工具根据App页面文字信息提取坐标进行截图保存在自定义文件夹 一、项目背景 在一个项目中&#xff0c;选项被选中和未选中的节点元素的属性值无变化&#xff0c;通过AI识别率达不到百分百&#xff0c;想着通过计算图片的HSV值来判断选择能否被选中。&#xff08;HSV比…

ESP32 for Arduino 分区信息

忘记过去&#xff0c;超越自己 ❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-11-04❤️❤️ 本篇更新记录 2023-11-04❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &#x1f44d;收藏 ⭐️留言&#x1f4dd;&#x1f64f;…

【JAVA学习笔记】59 - JUnit框架使用、本章作业

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter15/src/com/yinhai/homework JUnit测试框架 1.基本介绍 1. JUnit是一个Java语言的单元测试框架 2.多数Java的开发环境都已经集成了JUnit作为单元测试的工具 2.如何使用 创建方法后&#x…

QtC++与QVariant详解

什么是 QVariant&#xff1f; QVariant 是 Qt 中的一个类&#xff0c;允许您以一种通用的方式存储和访问数据&#xff0c;即使这些数据具有不同的数据类型。它在许多情况下非常有用&#xff0c;例如在模型视图编程、数据序列化、设置和配置管理等领域。QVariant 可以包含以下类…

JVM离线分析-使用MAT分析dump堆文件

1. MAT&#xff08;Memory Analyzer Tool&#xff09;的介绍 官方介绍 The Eclipse Memory Analyzer is a fast and feature-rich Java heap analyzer that helps you find memory leaks and reduce memory consumption. Use the Memory Analyzer to analyze productive heap …

Java随机获取某个范围内的随机整数

随机获取某个范围内的随机整数 一、代码 /*** 随机获取某个范围内的随机整数的值* param min 最小值* param max 最大值* return*/public static int randomNum(int min,int max) {// 创建一个Random对象Random random new Random();// 生成指定范围内的随机整数int randomI…