Volantis主题禁用复制功能

1. 本网站的系统架构
2. 为什么要禁用复制功能？
3. 如何禁用复制功能？
- 3.1. 禁用选中文字
- 3.2. 禁用copy事件
4. 总结

1. 本网站的系统架构

网站示例： SunLogging
服务器: 阿里云ECS
服务器系统： Ubuntu 24.04 LTS
博客框架： Hexo
网站主题： Volantis

2. 为什么要禁用复制功能？

大多数人搭建自己的博客主要出于以下几个目的：

记录和总结自己的技术、学习和思考。
传播知识，分享经验。
提高自己的知名度。

作者辛苦写出来的文章，要么是自己多年的积累，要么是自己智慧的结晶，要么是对某个知识用心的梳理。

但互联网上就有很多企图不劳而获的人，经常进行恶意抄袭：把博主辛辛苦苦写的文章一字不落的抄袭并在各大博客平台上去发表，剽窃他人的劳动成果。更可恨的是诸如CSDN之类的平台，搜索引擎的权重还特别高，抄袭文章的曝光率反而远大于作者的原创文章。

所以，对自己的网站禁用复制功能，可以有效的防止文章被抄袭，至少可以增加抄袭的难度。

3. 如何禁用复制功能？

要禁用页面的复制功能，比较简单有效的两种方法是：

通过CSS禁用选中文字
通过JS禁用copy事件

3.1. 禁用选中文字

在 Hexo 中，可以通过修改 CSS 文件实现禁止选中文字的功能。下面以volantis主题为例讲解一下操作方式。

打开 themes/volantis/source/css/_style/_base/base.styl文件。

在:root标签下增加以下代码。

// 禁止选中文字
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;

保存base.styl文件，并重新运行你的博客: hexo s，验证拷贝功能是否已经禁用。

这样，就会发现页面无法选中内容了。

3.2. 禁用copy事件

在 Hexo 博客中禁用复制功能可以通过在主题的 JavaScript 文件中添加一些代码来实现。

我的博客使用的是volantis主题，下面就以volantis主题为例讲解一下操作方式。

打开themes/volantis/source/js/app.js文件，在文件开头增加以下代码。

// 禁用页面复制功能
document.addEventListener('copy', function(e) {
e.preventDefault();
e.stopPropagation();

// alert("为防止不良抄袭，本站页面已禁用复制，只保留代码块的复制功能！");
VolantisApp.message("已禁用复制",
    "为防止不良抄袭，本站页面已禁用复制，只保留代码块的复制功能！",
    {
    icon: volantis.GLOBAL_CONFIG.plugins.message.copyright.icon,
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX',
    displayMode: 1
    }
);
});

保存app.js文件，并重新运行你的博客: hexo s，验证拷贝功能是否已经禁用。

这样，当用户尝试复制页面内容时，复制操作将被阻止，并弹出一个提示框告知用户复制功能已禁用。

4. 总结

**注意：**以上两种方法只能阻止通过浏览器默认复制功能进行的复制操作，对于一些高级用户或使用开发者工具的用户可能无法完全阻止复制。

1. 本网站的系统架构​

2. 为什么要禁用复制功能？​

3. 如何禁用复制功能？​

3.1. 禁用选中文字​

3.2. 禁用copy事件​

4. 总结​