前言
在《一篇带你用 VuePress + Github Pages 搭建博客》中,咱们应用 VuePress 搭建了一个博客,最终的成果查看:TypeScript 中文文档。
但在搭建 VuePress 博客的过程中,也并不是所有的插件都能满足需要,所以本篇咱们以实现一个代码复制插件为例,教大家如何从零实现一个 VuePress 插件。
本地开发
开发插件第一个要解决的问题就是如何本地开发,咱们查看 VuePress 1.0 官网文档的「开发插件」章节,并没有找到解决方案,但在 VuePress 2.0 官网文档的「本地插件」里,却有写道:
举荐你间接将 配置文件 作为插件应用,因为简直所有的插件 API 都能够在配置文件中应用,这在绝大多数场景下都更为不便。
然而如果你在配置文件中要做的事件太多了,最好还是将它们提取到独自的插件中,而后通过设置绝对路径或者通过 require 来应用它们:
module.exports = {
plugins: [path.resolve(__dirname, './path/to/your-plugin.js'),
require('./another-plugin'),
],
}
那就让咱们开始吧!
初始化我的项目
咱们在 .vuepress
文件夹下新建一个 vuepress-plugin-code-copy
的文件夹,用于寄存插件相干的代码,而后命令行进入到该文件夹,执行 npm init
,创立 package.json
,此时文件的目录为:
.vuepress
├─ vuepress-plugin-code-copy
│ └─ package.json
└─ config.js
咱们在 vuepress-plugin-code-copy
下新建一个 index.js
文件,参照官网文档插件示例中的写法,咱们应用返回对象的函数模式,这个函数承受插件的配置选项作为第一个参数、蕴含编译期上下文的 ctx 对象作为第二个参数:
module.exports = (options, ctx) => {
return {// ...}
}
再参照官网文档 Option API 中的 name,以及生命周期函数中的 ready 钩子,咱们写一个初始的测试代码:
module.exports = (options, ctx) => {
return {
name: 'vuepress-plugin-code-copy',
async ready() {console.log('Hello World!');
}
}
}
此时咱们运行下 yarn run docs:dev
,能够在运行过程中看到咱们的插件名字和打印后果:
插件设计
当初咱们能够构想下咱们的代码复制插件的成果了,我想要实现的成果是:
在代码块的右下角有一个 Copy 文字按钮,点击后文字变为 Copied!而后一秒后文字从新变为 Copy,而代码块里的代码则在点击的时候复制到剪切板中,冀望的体现成果如下:
插件开发
如果是在 Vue 组件中,咱们很容易实现这个成果,在根组件 mounted
或者 updated
的时候,应用 document.querySelector
获取所有的代码块,插入一个按钮元素,再在按钮元素上绑定点击事件,当触发点击事件的时候,代码复制到剪切板,而后批改文字,1s 后再批改下文字。
那 VuePress 插件有办法能够管制根组件的生命周期吗?咱们查阅下 VuePress 官网文档的 Option API,能够发现 VuePress 提供了一个 clientRootMixin 办法:
指向 mixin 文件的门路,它让你能够管制根组件的生命周期
看下示例代码:
// 插件的入口
const path = require('path')
module.exports = {clientRootMixin: path.resolve(__dirname, 'mixin.js')
}
// mixin.js
export default {created () {},
mounted () {}
}
这不就是咱们须要的吗?那咱们入手吧,批改 index.js
的内容为:
const path = require('path');
module.exports = (options, ctx) => {
return {
name: 'vuepress-plugin-code-copy',
clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')
}
}
在 vuepress-plugin-code-copy
下新建一个 clientRootMixin.js
文件,代码写入:
export default {updated() {setTimeout(() => {document.querySelectorAll('div[class*="language-"] pre').forEach(el => {console.log('one code block')
})
}, 100)
}
}
刷新下浏览器里的页面,而后查看打印:
接下来就要思考如何写入按钮元素了。
当然咱们能够应用原生 JavaScript 一点点的创立元素,而后插入其中,但咱们其实是在一个反对 Vue 语法的我的项目里,其实咱们齐全能够创立一个 Vue 组件,而后将组件的实例挂载到元素上。那用什么办法挂载呢?
咱们能够在 Vue 的全局 API 里,找到 Vue.extend
API,看一下应用示例:
// 要挂载的元素
<div id="mount-point"></div>
// 创立结构器
var Profile = Vue.extend({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创立 Profile 实例,并挂载到一个元素上。new Profile().$mount('#mount-point')
后果如下:
// 后果为:
<p>Walter White aka Heisenberg</p>
那接下来,咱们就创立一个 Vue 组件,而后通过 Vue.extend
办法,挂载到每个代码块元素中。
在 vuepress-plugin-code-copy
下新建一个 CodeCopy.vue
文件,写入代码如下:
<template>
<span class="code-copy-btn" @click="copyToClipboard">{{buttonText}}</span>
</template>
<script>
export default {data() {
return {buttonText: 'Copy'}
},
methods: {copyToClipboard(el) {this.setClipboard(this.code, this.setText);
},
setClipboard(code, cb) {if (navigator.clipboard) {navigator.clipboard.writeText(code).then(
cb,
() => {}
)
} else {let copyelement = document.createElement('textarea')
document.body.appendChild(copyelement)
copyelement.value = code
copyelement.select()
document.execCommand('Copy')
copyelement.remove()
cb()}
},
setText() {
this.buttonText = 'Copied!'
setTimeout(() => {this.buttonText = 'Copy'}, 1000)
}
}
}
</script>
<style scoped>
.code-copy-btn {
position: absolute;
bottom: 10px;
right: 7.5px;
opacity: 0.75;
cursor: pointer;
font-size: 14px;
}
.code-copy-btn:hover {opacity: 1;}
</style>
该组件实现了按钮的款式和点击时将代码写入剪切版的成果,整体代码比较简单,就不多叙述了。
咱们批改一下 clientRootMixin.js
:
import CodeCopy from './CodeCopy.vue'
import Vue from 'vue'
export default {updated() {
// 避免阻塞
setTimeout(() => {document.querySelectorAll('div[class*="language-"] pre').forEach(el => {
// 避免反复写入
if (el.classList.contains('code-copy-added')) return
let ComponentClass = Vue.extend(CodeCopy)
let instance = new ComponentClass()
instance.code = el.innerText
instance.$mount()
el.classList.add('code-copy-added')
el.appendChild(instance.$el)
})
}, 100)
}
}
这里留神两点,第一是咱们通过 el.innerText
获取要复制的代码内容,而后写入到实例的 code
属性,在组件中,咱们是通过 this.code
获取的。
第二是咱们没有应用 $mount(element)
,间接传入一个要挂载的节点元素,这是因为 $mount()
的挂载会清空指标元素,然而这里咱们须要增加到元素中,所以咱们在执行 instance.$mount()
后,通过 instance.$el
获取了实例元素,而后再将其 appendChild
到每个代码块中。对于 $el
的应用能够参考官网文档的 el 章节。
此时,咱们的文件目录如下:
.vuepress
├─ vuepress-plugin-code-copy
│ ├─ CodeCopy.vue
│ ├─ clientRootMixin.js
│ ├─ index.js
│ └─ package.json
└─ config.js
至此,其实咱们就曾经实现了代码复制的性能。
插件选项
有的时候,为了减少插件的可拓展性,会容许配置可选项,就比方咱们不心愿按钮的文字是 Copy,而是中文的「复制」,复制完后,文字变为「已复制!」,该如何实现呢?
后面讲到,咱们的 index.js
导出的函数,第一个参数就是 options 参数:
const path = require('path');
module.exports = (options, ctx) => {
return {
name: 'vuepress-plugin-code-copy',
clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')
}
}
咱们在 config.js
先写入须要用到的选项:
module.exports = {
plugins: [
[require('./vuepress-plugin-code-copy'),
{
'copybuttonText': '复制',
'copiedButtonText': '已复制!'
}
]
]
}
咱们 index.js
中通过 options
参数能够接管到咱们在 config.js
写入的选项,但咱们怎么把这些参数传入 CodeCopy.vue
文件呢?
咱们再翻下 VuePress 提供的 Option API,能够发现有一个 define API,其实这个 define 属性就是定义咱们插件外部应用的全局变量。咱们批改下 index.js
:
const path = require('path');
module.exports = (options, ctx) => {
return {
name: 'vuepress-plugin-code-copy',
define: {
copybuttonText: options.copybuttonText || 'copy',
copiedButtonText: options.copiedButtonText || "copied!"
},
clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')
}
}
当初咱们曾经写入了两个全局变量,组件里怎么应用呢?答案是间接应用!
咱们批改下 CodeCopy.vue
的代码:
// ...
<script>
export default {data() {
return {buttonText: copybuttonText}
},
methods: {copyToClipboard(el) {this.setClipboard(this.code, this.setText);
},
setClipboard(code, cb) {if (navigator.clipboard) {navigator.clipboard.writeText(code).then(
cb,
() => {}
)
} else {let copyelement = document.createElement('textarea')
document.body.appendChild(copyelement)
copyelement.value = code
copyelement.select()
document.execCommand('Copy')
copyelement.remove()
cb()}
},
setText() {
this.buttonText = copiedButtonText
setTimeout(() => {this.buttonText = copybuttonText}, 1000)
}
}
}
</script>
// ...
最终的成果如下:
代码参考
残缺的代码查看:https://github.com/mqyqingfeng/Blog/tree/master/demos/VuePress/vuepress-plugin-code-copy
其实本篇代码是参考了 Vuepress Code Copy Plugin
这个插件的代码,点击查看源码地址。
系列文章
博客搭建系列是我至今写的惟一一个偏实战的系列教程,解说如何应用 VuePress 搭建博客,并部署到 GitHub、Gitee、集体服务器等平台。
- 一篇带你用 VuePress + GitHub Pages 搭建博客
- 一篇教你代码同步 GitHub 和 Gitee
- 还不会用 GitHub Actions?看看这篇
- Gitee 如何主动部署 Pages?还是用 GitHub Actions!
- 一份前端够用的 Linux 命令
- 一份简略够用的 Nginx Location 配置解说
- 一篇从购买服务器到部署博客代码的具体教程
- 一篇域名从购买到备案到解析的具体教程
- VuePress 博客优化之 last updated 最初更新工夫如何设置
- VuePress 博客优化之增加数据统计性能
- VuePress 博客优化之开启 HTTPS
- VuePress 博客优化之开启 Gzip 压缩
微信:「mqyqingfeng」,加我进冴羽惟一的读者群。
如果有谬误或者不谨严的中央,请务必给予斧正,非常感激。如果喜爱或者 有所启发,欢送 star,对作者也是一种激励。