在vuepress上搭建自己的博客——进阶2（添加复制显示版权信息）

我们经常遇到复制别人的文字或者代码会在下面有个版权说明的信息，显得比较高端，而且让别人复制自己代码会思量思量，保护自己的版权信息。下面我们就来实现以下这个功能~~~

作者：haha
原文：https://yuan123haha.github.io/haha-s-study_blogs/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

那么我们如何在博客中实现这个功能呢，其实很简单，首先修改我们的.vuepress/enhanceApp.js文件（enhanceApp.js介绍）

import copy from './common/copy'
 
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData // 站点元数据
}) => {
  setTimeout(() => {
    try {
      document && (() => { //对document的判断是防止编译的时候报错
        copy()
      })()
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

然后新建一个common文件夹里面新建一个copy.js的文件

image.png

export default () => {
  function addCopy(e) {
    let copyTxt = ""
    e.preventDefault(); // 取消默认的复制事件
    copyTxt = window.getSelection(0).toString()
    copyTxt = `${copyTxt}\n作者：haha\n原文：${window.location.href}\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
    const clipboardData = e.clipboardData || window.clipboardData
    clipboardData.setData('text', copyTxt);
  }
  document.addEventListener("cut", e => {
    addCopy(e)
  });
  document.addEventListener("copy", e => {
    addCopy(e)
  });
}

这样就可以实现了，有兴趣可以去博客体验一下