[VuePress 실행 중] 코드 복사 플러그인 개발을 단계별로 안내해 드립니다.

이 기사는 VuePress의 실제 전투를 이해하고 VuePress 플러그인(코드 복사 플러그인)을 처음부터 개발하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

VuePress 블로그를 구축하는 과정에서 모든 플러그인이 요구 사항을 충족할 수는 없으므로 이 기사에서는 코드 복사 플러그인 구현을 예로 들어 VuePress 구현 방법을 알려드립니다. 처음부터 플러그인.

로컬 개발

플러그인을 개발할 때 가장 먼저 해결해야 할 문제는 로컬에서 어떻게 개발하느냐는 것입니다. VuePress 1.0 공식 문서의 "Develop Plug-in" 장을 살펴보았으나 해결책을 찾지 못했습니다. 그러나 VuePress 2.0 공식 문서 Local Plug-in "의 "" 섹션에는 다음과 같이 쓰여 있습니다.

거의 모든 플러그인이 구성 파일을 플러그인으로 직접 사용하는 것이 좋습니다. API는 구성 파일에서 사용할 수 있으며 이는 대부분의 시나리오에서 더 편리합니다.

하지만 구성 파일에서 할 일이 너무 많으면 별도의 플러그인으로 추출한 후 절대 경로를 설정하거나 require를 통해 사용하는 것이 좋습니다:

module.exports = {
  plugins: [
    path.resolve(__dirname, './path/to/your-plugin.js'),
    require('./another-plugin'),
  ],
}

그럼 시작해 보겠습니다!

프로젝트 초기화

.vuepress 폴더 아래에 vuepress-plugin-code-copy라는 새 폴더를 생성하여 플러그인 관련 코드를 저장한 후 Enter 명령을 실행합니다. 폴더에서 npm init를 실행하고 package.json을 생성하세요. 이때 파일의 디렉터리는 .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)
    }
}

우리는 vuepress-plugin에 있습니다. -code -copy 아래에 새로운 index.js 파일을 생성합니다. 공식 문서 플러그인 예제

의 작성 방법을 참조하세요. 함수는 플러그인 구성 옵션을 첫 번째 매개변수로 받아들이고, 컴파일 타임 컨텍스트를 포함하는 ctx 객체는 두 번째 매개변수로 사용됩니다.

// 要挂载的元素
<div id="mount-point"></div>

그런 다음 name 및 ready Hook

에서 초기 테스트 코드를 작성합니다.🎜

// 创建构造器
var Profile = Vue.extend({
  template: &#39;<p>{{firstName}} {{lastName}} aka {{alias}}</p>&#39;,
  data: function () {
    return {
      firstName: &#39;Walter&#39;,
      lastName: &#39;White&#39;,
      alias: &#39;Heisenberg&#39;
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount(&#39;#mount-point&#39;)

🎜이제 yarn run docs:dev를 실행하면 실행 프로세스 중에 플러그인 이름을 확인하고 결과를 인쇄할 수 있습니다. 🎜🎜🎜

플러그인 디자인 🎜🎜이제 우리의 코드를 상상할 수 있습니다. 플러그인의 효과를 복사합니다. 내가 달성하려는 효과는 다음과 같습니다. 🎜🎜코드 블록의 오른쪽 하단에 텍스트 복사 버튼이 있습니다. 클릭하면 텍스트가 복사됩니다. ! 그런 다음 1초 후에 텍스트가 다시 복사로 변경되고, 클릭하면 코드 블록의 코드가 클립보드에 복사됩니다. 🎜🎜🎜

플러그인 개발🎜🎜 Vue 구성 요소에 있는 경우 루트 구성 요소가 마운트되거나 업데이트되면 이 효과를 쉽게 얻을 수 있습니다. 모든 코드를 가져오고 버튼 요소를 삽입한 다음 클릭 이벤트를 버튼 요소에 바인딩합니다. 클릭 이벤트가 트리거되면 코드가 클립보드에 복사된 다음 텍스트가 수정됩니다. 1초 후. 🎜🎜그럼 VuePress 플러그인에는 루트 구성 요소의 수명 주기를 제어할 수 있는 방법이 있나요? VuePress 공식 문서 옵션 API🎜를 사용하면 VuePress가 clientRootMixin 메서드를 제공하는 것을 확인할 수 있습니다. 🎜🎜🎜믹스인 파일의 경로를 가리켜 루트 구성 요소의 수명 주기를 제어할 수 있습니다🎜🎜🎜샘플 코드를 살펴보세요. 🎜

// 结果为:
<p>Walter White aka Heisenberg</p>

<template>
    <span class="code-copy-btn" @click="copyToClipboard">{{ buttonText }}</span>
</template>

<script>
export default {
    data() {
        return {
            buttonText: &#39;Copy&#39;
        }
    },
    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(&#39;textarea&#39;)
                document.body.appendChild(copyelement)
                copyelement.value = code
                copyelement.select()
                document.execCommand(&#39;Copy&#39;)
                copyelement.remove()
                cb()
            }
        },
        setText() {
            this.buttonText = &#39;Copied!&#39;

            setTimeout(() => {
                this.buttonText = &#39;Copy&#39;
            }, 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>

🎜이거 꼭 필요한거 아닌가요? 그런 다음 index.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)
    }
}

🎜 vuepress-plugin-code-copy</code 아래에 새 <code>clientRootMixin.js</code를 만듭니다. > >파일, 코드 작성: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.vuepress ├─ vuepress-plugin-code-copy │ ├─ CodeCopy.vue │ ├─ clientRootMixin.js │ ├─ index.js │ └─ package.json └─ config.js</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜브라우저에서 페이지를 새로 고친 다음 인쇄 보기: 🎜🎜🎜🎜<p>接下来就要思考如何写入按钮元素了。</p><p>当然我们可以使用原生 JavaScript 一点点的创建元素，然后插入其中，但我们其实是在一个支持 Vue 语法的项目里，其实我们完全可以创建一个 Vue 组件，然后将组件的实例挂载到元素上。那用什么方法挂载呢？</p><p>我们可以在 Vue 的<a href="vuepress.vuejs.org" target="_blank" rel="nofollow noopener noreferrer" ref="nofollow noopener noreferrer">全局 API </a>里，找到 <code>Vue.extendAPI，看一下使用示例：

// 要挂载的元素
<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
  template: &#39;<p>{{firstName}} {{lastName}} aka {{alias}}</p>&#39;,
  data: function () {
    return {
      firstName: &#39;Walter&#39;,
      lastName: &#39;White&#39;,
      alias: &#39;Heisenberg&#39;
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount(&#39;#mount-point&#39;)

结果如下：

// 结果为:
<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: &#39;Copy&#39;
        }
    },
    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(&#39;textarea&#39;)
                document.body.appendChild(copyelement)
                copyelement.value = code
                copyelement.select()
                document.execCommand(&#39;Copy&#39;)
                copyelement.remove()
                cb()
            }
        },
        setText() {
            this.buttonText = &#39;Copied!&#39;

            setTimeout(() => {
                this.buttonText = &#39;Copy&#39;
            }, 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(&#39;textarea&#39;)
                document.body.appendChild(copyelement)
                copyelement.value = code
                copyelement.select()
                document.execCommand(&#39;Copy&#39;)
                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

【相关推荐：vue.js视频教程】

위 내용은 [VuePress 실행 중] 코드 복사 플러그인 개발을 단계별로 안내해 드립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!