由于幽游地博客以后可能会推荐一些VPS 优惠信息，当展示优惠码时，希望能够实现用户点击该优惠码即自动复制，所以整合了一下网络资源，实现点击文本后，自动复制该文本到剪贴板，简化了用户的操作。（其实就是为了装比

引入js

实现此功能，需要用到开源项目clipboard.js

你可以下载clipboard.js 的源码，放到自己服务器上，然后引入使用。即以下的方式一

也可以使用公共CDN 库里的clipboard.js ，直接引用。即以下的方式二

两种方式各有利弊。

方式一比较稳定，但比较麻烦，如果自己的服务器网络不好，可能也会对速度有些许影响

方式二比较简单快捷，但万一哪天CDN 库炸了，就无法使用

我比较推荐使用方式二

方式一：使用源码

SETP 1

打开clipboard.js 项目地址：

clipboard.js 地址

下载源码：

SETP 2

下载后，解压clipboard.js-2.0.4.zip文件夹，将其中的dist文件夹上传到Typecho 主题的/assets/js文件夹中

推荐把dist改为clipboard.js，以便区分

使用CDN

使用CDN 则无需下载源码，直接在主题目录下的 header.php 中插入以下代码：

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js"></script>

如果你使用的是方式一源码，则在主题目录下的 header.php 中插入以下代码：

<script src="/usr/themes/handsome/assets/js/clipboard.js/clipboard.min.js"></script>

SETP 3

在主题设置 - 开发者设置 - 自定义JavaScript 中插入代码：

var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

一般主题都会有这个设置，如果没有，你也可以手动到主题目录下的footer.php加入以下代码：

<script type="text/javascript">
var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});
</script>

如何使用

在使用中，将标签id设置为btn，data-clipboard-text的值填写你要复制的字符串，例如：

<span id="btn" data-clipboard-text="https://www.uud.me">点击此处复制链接</span>

实现的效果：

点击此处复制链接