[VuePress dalam tindakan] Membawa anda langkah demi langkah untuk membangunkan pemalam salinan kod

Artikel ini akan membawa anda memahami pertempuran sebenar VuePress dan memperkenalkan cara membangunkan pemalam VuePress (pemalam salinan kod) dari awal. Saya harap ia akan membantu semua orang!

Dalam proses membina blog VuePress, tidak semua pemalam dapat memenuhi keperluan, jadi dalam artikel ini kami mengambil pelaksanaan pemalam salinan kod sebagai contoh untuk mengajar anda cara Melaksanakan pemalam VuePress dari awal.

Pembangunan Tempatan

Masalah pertama yang perlu diselesaikan apabila membangunkan pemalam ialah cara membangunkannya secara setempat Kami menyemak bahagian "Membangunkan Pemalam" pada bahagian Dokumen rasmi VuePress 1.0 dan tidak menemuinya, tetapi dalam "Pemalam Tempatan" dokumen rasmi VuePress 2.0, ia ditulis:

Ia disyorkan. bahawa anda menggunakan fail konfigurasi secara langsung sebagai pemalam, kerana hampir semua API Pemalam boleh digunakan dalam fail konfigurasi, yang lebih mudah dalam kebanyakan senario.

Tetapi jika anda mempunyai terlalu banyak perkara yang perlu dilakukan dalam fail konfigurasi, lebih baik untuk mengekstraknya ke dalam pemalam yang berasingan dan menggunakannya dengan menetapkan laluan mutlak atau melalui memerlukan :

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

Kalau begitu mari kita mulakan!

Mulakan projek

Kami mencipta folder baharu .vuepress di bawah folder vuepress-plugin-code-copy untuk menyimpan kod berkaitan pemalam, kemudian masukkan folder dengan baris arahan dan laksanakan npm init, buat package.json, direktori fail pada masa ini ialah:

.vuepress
├─ vuepress-plugin-code-copy 
│  └─ package.json
└─ config.js

Kami mencipta fail vuepress-plugin-code-copy baharu di bawah index.js, rujuk pada pemalam dokumen rasmi contoh Untuk menulis, kami menggunakan borang fungsi yang mengembalikan objek Fungsi ini menerima pilihan konfigurasi pemalam sebagai parameter pertama dan objek ctx yang mengandungi konteks masa kompilasi sebagai parameter kedua:

module.exports = (options, ctx) => {
   return {
      // ...
   }
}

Rujuk kepada Pilihan dokumen rasmi

nama dalam API, dan cangkuk sedia dalam fungsi kitaran hayat, kami menulis kod ujian awal:

module.exports = (options, ctx) => {
    return {
        name: 'vuepress-plugin-code-copy',
        async ready() {
            console.log('Hello World!');
        }
    }
 }

Pada masa ini kami menjalankan

, anda boleh melihat nama pemalam kami dan hasil cetakan semasa proses berjalan: yarn run docs:dev

Reka bentuk pemalam

Sekarang kita boleh bayangkan pemalam salinan kod kita Kesan yang saya ingin capai ialah:

Terdapat butang Salin teks di sudut kanan bawah blok kod , teks menjadi Disalin! Kemudian teks bertukar kepada Salin semula selepas satu saat, dan kod dalam blok kod disalin ke papan keratan apabila diklik Kesan prestasi yang dijangkakan adalah seperti berikut:

Palam. -in Jika kita membangunkan

dalam komponen Vue, kita boleh mencapai kesan ini dengan mudah Apabila menggunakan komponen akar

atau mounted, gunakan updated untuk mendapatkan semua blok kod, masukkan butang. elemen, dan kemudian Ikat acara klik pada elemen butang Apabila peristiwa klik dicetuskan, salin kod ke papan keratan, kemudian ubah suai teks, dan kemudian ubah suai teks selepas 1 saat. document.querySelector

Adakah pemalam VuePress mempunyai cara untuk mengawal kitaran hayat komponen akar? Kami menyemak

API Pilihan dokumentasi rasmi VuePress dan mendapati VuePress menyediakan kaedah clientRootMixin:

menunjuk ke laluan ke fail mixin, yang membolehkan anda mengawal hayat kitaran komponen akar.

Lihat kod sampel:

// 插件的入口
const path = require('path')

module.exports = {
  clientRootMixin: path.resolve(__dirname, 'mixin.js')
}

// mixin.js
export default {
  created () {},
  mounted () {}
}

Bukankah ini yang kita perlukan? Kemudian mari kita lakukannya, ubah suai kandungan

kepada: index.js

const path = require('path');

module.exports = (options, ctx) => {
    return {
        name: 'vuepress-plugin-code-copy',
        clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')
    }
 }

Cipta fail

baharu di bawah vuepress-plugin-code-copy dan tulis kod: clientRootMixin.js

export default {
    updated() {
        setTimeout(() => {
            document.querySelectorAll('div[class*="language-"] pre').forEach(el => {
								console.log('one code block')
            })
        }, 100)
    }
}

Muat semula dan semak imbas halaman dalam penyemak imbas, kemudian lihat dan cetak:

接下来就要思考如何写入按钮元素了。

当然我们可以使用原生 JavaScript 一点点的创建元素，然后插入其中，但我们其实是在一个支持 Vue 语法的项目里，其实我们完全可以创建一个 Vue 组件，然后将组件的实例挂载到元素上。那用什么方法挂载呢？

我们可以在 Vue 的全局 API 里，找到 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视频教程】

Atas ialah kandungan terperinci [VuePress dalam tindakan] Membawa anda langkah demi langkah untuk membangunkan pemalam salinan kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!