Markdown文档 |
您所在的位置：网站首页 › markdown显示器 › Markdown文档 |
Markdown文档
|
本着简单开发使用 采用插件：vue-markdown-loader 地址链接：github.com/QingWei-Li/… npm安装使用 npm 安装 vue-markdown-loader 插件： cnpm install vue-markdown-loader我本次安装的版本："vue-markdown-loader": "^2.5.0", 插件效果：生成组件式的代码，引用后直接使用 配置webpack需要配置 webpack 来使用 vue-markdown-loader 插件。在 vue.config.js 文件中添加以下配置： module.exports = { chainWebpack: config => { config.module .rule('md') .test(/\.md/) .use('vue-loader') .loader('vue-loader') .end() .use('vue-markdown-loader') .loader('vue-markdown-loader/lib/markdown-compiler') .options({ raw: true }); } } 优化html结构一般情况下，我们可以在选项中进行配置，但是由于我对此不够了解，所以没有在官方文档中找到相关方法。因此，我打算获取 DOM 并修改其 innerHTML。 添加结构 准备结构首先，准备以下结构： 请注意： 必须添加 markdown-body 这个 class。 使用 来渲染组件。这是因为 vue-markdown-loader 会将 markdown 文件转换为 Vue 文件，直接渲染 markdown 文件就好了！此外，还可以在一个公共页面（例如 index）中获取 DOM，统一处理 innerHTML。 导入文件导入需要展示的 markdown 文件，例如： import HeaderMd from '@/header/README.md'; import ButtonMd from '@/button/README.md'; ...... markdown文件内容随便整点花生米（markdown）文件内容，例如： - # 按钮 - ## markDown的使用 - ### markDown的使用 - 你使用的是makeDown的文件 - ```js - let a = 0 - ``` - ### markDown的使用 - 你使用的是makeDown的文件 - ```js - let a = 0 - ``` 得到的html渲染结构页面展示效果 看的出来，这种怎么写都不会好看起来，如果h3与pre标签包裹在一起变成卡片式的样式，那么看着要舒服很多。 接下来就开始进行优化结构。 优化结构开始优化结构 1、先获取DOM 2、每一个markdown页面的DOM，利用new Map()根据key='pathName',存起来好一些。 如果路由下次进来，取出Map中的数据，直接插入到别的标签中，而不是再次的进入，重新获取DOM，重新优化标签，然而缺点就是，在文件中更新了markdown的信息，不能及时的同步到页面中，需要刷新一下，暂时没有想到其他好方法。 ----------data---------------- componentRefMap: new Map(), ---------methods-------------- getComponentRef(pathName) { if (pathName !== '') { this.$nextTick(() => { this.componentRefMap.set(pathName, this.$refs.componentRef.$el); // 下面要说的优化标签 this.optimizationTags(this.componentRefMap); // 下面要说的添加操作 this.eventListenerTages(); }); } }, 优化标签得益于结构的简单化，参考vant的vite.config配置，使用方法如下： optimizationTags(dataMap, hasValue = false) { let refContent = dataMap.get(this.pathName); let group = refContent.innerHTML .replace(/ { nodeOperate.onclick = (event) => { if (event.target.className == "copy") { // 复制操作 let textInnerText = nodeOperate.nextSibling.innerText; // 复制操作的具体实现... ...... alert("复制成功"); } }; }); },上述代码通过获取所有具有类名 .operate 的 DOM 元素，为其添加点击事件监听器。当点击事件发生时，利用event.target.className获取到，你点击的子标签的类名。就可以根据需要执行相应的操作，例如复制文本内容。 使用nextSibling，轻松的拿下copy节点的下一个pre的节点内容 类比一下：操作的方式，也可以进行书写了 添加锚点同样地，我们只需要添加锚点来实现页面内的平滑滚动。 optimizationTags(){ .... let groupHtml = group .map((fragment) => { // 设计锚点的数据 let h2Setioncount = 0; let h3Setioncount = 0; ...... if (fragment.indexOf(' |
【本文地址】
今日新闻 |
推荐新闻 |