vuepress使用及拓展(骚操作)

这篇具有很好参考价值的文章主要介绍了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渲染模版,进行动态显示
响应式标题数据和左侧列表共用一套模板

项目目录结构
vuepress使用及拓展(骚操作),vue.js,前端框架
文档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 = this
            const 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、
vuepress使用及拓展(骚操作),vue.js,前端框架
v-if影响,需将v-if 改为v-show
3、markdown-it版本问题,升级下包即可
vuepress使用及拓展(骚操作),vue.js,前端框架文章来源地址https://www.toymoban.com/news/detail-744466.html

到了这里,关于vuepress使用及拓展(骚操作)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包