feat: 新增页面防复制功能

blog.config.js

@@ -83,7 +83,7 @@ const BLOG = {
   FONT_AWESOME: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', // font-awesome 字体图标地址; 可选 /css/all.min.css ， https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
 
   // END ************网站字体*****************
-
+  CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。
   CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU || true, // 自定义右键菜单，覆盖系统菜单
 
   // 自定义外部脚本，外部样式

components/DisableCopy.js

@@ -0,0 +1,21 @@
+import BLOG from '@/blog.config'
+import { useEffect } from 'react'
+
+/**
+ * 禁止用户拷贝文章的插件
+ */
+export default function DisableCopy() {
+  useEffect(() => {
+    if (!JSON.parse(BLOG.CAN_COPY)) {
+      // 全栈添加禁止复制的样式
+      document.getElementsByTagName('html')[0].classList.add('forbid-copy')
+      // 监听复制事件
+      document.addEventListener('copy', function (event) {
+        event.preventDefault() // 阻止默认复制行为
+        alert('抱歉，本网页内容不可复制！')
+      })
+    }
+  }, [])
+
+  return null
+}

components/ExternalPlugins.js

@@ -30,6 +30,7 @@ const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr:
 const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
 const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
 const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
+const DisableCopy = dynamic(() => import('@/components/DisableCopy'), { ssr: false })
 
 /**
  * 各种第三方组件
@@ -55,6 +56,7 @@ const ExternalPlugin = (props) => {
           {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
           {JSON.parse(BLOG.RIBBON) && <Ribbon />}
           {JSON.parse(BLOG.CUSTOM_RIGHT_CLICK_CONTEXT_MENU) && <CustomContextMenu {...props} />}
+          {!JSON.parse(BLOG.CAN_COPY) && <DisableCopy/>}
           <VConsole/>
       </>
 }

styles/globals.css

@@ -263,3 +263,9 @@ a.avatar-wrapper {
 .reply-author-name {
   font-weight: 500;
 }
+
+.forbid-copy {
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}

themes/simple/style.js

@@ -11,6 +11,12 @@ const Style = () => {
   .dark body{
       background-color: black;
   }
+  // 文本不可选取
+    .forbid-copy {
+        user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
 
   #theme-simple #announcement-content {
     /* background-color: #f6f6f6; */