Skip to main content

NexT主题的网站设置“禁止复制”功能

1. 本网站的系统架构​

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

设置方法​

在 Hexo NexT 主题中设置禁止复制功能，可以通过以下两种方式实现：

  • 方法一：通过 CSS 禁用文本选择
  • 方法二：通过 JavaScript 禁用右键和复制操作

通过 CSS 禁用文本选择​

通过添加全局 CSS 样式，禁止用户选择页面中的文本（但无法完全阻止通过开发者工具或禁用 CSS 的方式复制内容）：

  1. 创建自定义样式文件
    在博客根目录的 source/_data 文件夹下新建 styles.styl 文件（若文件夹不存在需手动创建），添加以下内容：

    body {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

  2. 启用自定义样式
    打开主题配置文件 _config.yml，找到 custom_file_path 部分，取消 style 行的注释：

    custom_file_path:
      style: source/_data/styles.styl

  3. 重新生成博客
    执行 hexo clean && hexo g 刷新页面即可生效。

通过 JavaScript 禁用右键和复制操作​

通过注入脚本禁用右键菜单、文本选择和复制操作：

  1. 创建自定义脚本文件
    在 source/_data 文件夹下新建 body-end.njk 文件，添加以下代码：

    <script>
    document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
    document.addEventListener('copy', function(e) { e.preventDefault(); });
    document.addEventListener('selectstart', function(e) { e.preventDefault(); });
    </script>

  2. 启用脚本注入
    在主题配置文件中，取消 bodyEnd 行的注释：

    custom_file_path:
      bodyEnd: source/_data/body-end.njk

  3. 重新生成博客
    运行 hexo clean && hexo g 后，页面将无法通过右键或快捷键复制内容。

注意事项​

  • 兼容性问题：上述方法无法彻底阻止用户通过浏览器开发者工具或禁用 JavaScript/CSS 的方式复制内容，仅能增加复制难度。
  • 主题版本差异：不同版本的 NexT 主题配置路径可能略有差异，建议操作前备份配置文件。
  • 用户体验：禁用复制可能影响读者正常使用（如代码片段引用），建议仅对敏感内容局部设置（如通过文章加密插件）。