新手如何给Hexo博客在复制时添加版权声明

文章首发于公众号【只是学习学习】欢迎关注

1. 确认需要版权声明的位置

2.编写版权声明的js

所以我们需要编写一个监听该标签内的复制事件的js，如下:

<script>function setClipboardText(event){// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容let clipboardData = event.clipboardData || window.clipboardData;// 如果未复制或者未剪切，则return出去if (!clipboardData) { return; }event.preventDefault();// Selection 对象，表示用户选择的文本范围或光标的当前位置。//     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串let text = window.getSelection().toString();if (text) {// 如果文本存在则先取消文本默认事件event.preventDefault();// 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本// format: 一个DOMString 表示要添加到 drag object的拖动数据的类型。// data: 一个 DOMString表示要添加到 drag object的数据。var copyright = '\n\n'+ '\n著作权归作者所有。'+ '\n商业转载请联系作者获得授权，非商业转载请注明出处。'+ '\n作者: 只是学习学习'+ '\n邮箱: fengzxia1000@163.com'+ '\n原文地址: <%= page.permalink %>'clipboardData.setData('text/plain', text + copyright);}};var contents = document.getElementsByClassName("content");// 监听文章内容的copy事件contents[0].addEventListener('copy',function(e){setClipboardText(e);});
</script>

<%= page.permalink %>: 当前页面链接

3.将js放置在博文详情模板页

因为我们只是需要监听博客详情页的复制事件，所以我们可以直接将这段js放在博文详情页末尾。themes/cactus[主题的名字]/layout/post.ejs这个文件是生成博客详情的模板。

4.启动测试

执行hexo clean和hexo generate清除通过修改前生成的页面，然后再根据修改后模板生成新的页面。然后执行hexo server启动测试。效果如下图

5.设置只有在非转载文章才会有添加版权声明

在文章头部添加一个copyright属性设置为true

<% if (page.copyright) { %><script>function setClipboardText(event){// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容let clipboardData = event.clipboardData || window.clipboardData;// 如果未复制或者未剪切，则return出去if (!clipboardData) { return; }event.preventDefault();// Selection 对象，表示用户选择的文本范围或光标的当前位置。//     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串let text = window.getSelection().toString();if (text) {// 如果文本存在则先取消文本默认事件event.preventDefault();// 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本// format: 一个DOMString 表示要添加到 drag object的拖动数据的类型。// data: 一个 DOMString表示要添加到 drag object的数据。var copyright = '\n\n'+ '\n著作权归作者所有。'+ '\n商业转载请联系作者获得授权，非商业转载请注明出处。'+ '\n作者: 只是学习学习'+ '\n邮箱: fengzxia1000@163.com'+ '\n原文地址: <%= page.permalink %>'clipboardData.setData('text/plain', text + copyright);}};var contents = document.getElementsByClassName("content");// 监听文章内容的copy事件contents[0].addEventListener('copy',function(e){setClipboardText(e);});</script>
<% } %>

page.copyright: 就是在博客详情页设置的copyright属性。只有存在并且为true时，才会有这段代码。

修改后的post.ejs模板页完整内容如下图：

然后给每篇非转载博客添加copyright: true即可。

新手如何给Hexo博客在复制时添加版权声明相关推荐

Hexo 博客优化之实用功能添加系列（持续更新）
2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! 本文将讲述一些 Hexo 博客实用功能的添加,本文以作者 luuma ...
Hexo博客yilia主题文章添加目录
参考文章添加目录的文章有一些是自己添加css文件和修主题配置作者也更新了文章大体目录的功能打开配置文件themes/yilia/_config.yml 你可以选择toc设置为1 或者2 toc: ...
hexo笔记七：next主题添加版权声明
版权声明是指在文末加上这么一段文字: 本文记录如何添加文章的版权声明 1 编辑主题配置文件: cd 博客目录 vim themes/next/_config.yml# 找到下列信息设置为true,许可 ...
如何在复制网站文字时添加版权声明
前言有时,自己辛辛苦苦写的文章,却被一些网站自动采集,巴拉过去,甚至都不声明下来源如何在别人复制你网站上文字时,添加上版权声明呢,就像itclanCoder网站, 复制网站上的文字时,当复制文字超 ...
Hexo 博客优化之博客美化系列（持续更新）
2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! 本文将讲述一些 Hexo 博客的美化,本文以作者 luuman 的 ...
hexo博客next主题添加对数学公式的支持
hexo博客默认为markdown格式,但是新搭建的hexo博客不支持公式渲染,下面介绍hexo博客next主题下添加对数学公式支持的方法. 环境说明: hexo版本:5.4.1 next版本: 最新 ...
[还不会搭建博客吗？]centos7系统部署hexo博客新手入门-进阶，看这一篇就够了
文章目录 \*本文说明请大家务必查看前言首先介绍一下主角:Hexo 什么是 Hexo? 环境准备详细版入门:搭建步骤安装git: 安装node: 安装Hexo: 进阶:hexo基本操作发 ...
安装Hexo博客并部署到GitHub或云服务器（细节教程，越过各种坑）
前言心血来潮买了云主机,浪费了几个月都没用,然后就学着搭建博客,对比了一下 WordPress 和 Hexo 之后,随性选择了以 Hexo 为框架搭建博客平台. 经过了几次的从零开始,遇到了各种各样 ...
hexo博客搭建时遇到的一些问题
之前的WP博客荒废了好久之后终于感觉该做点正事了,所以这几天花了点时间重新弄了下hexo,毕竟是比较符合前端的一个博客框架.比起wp来说,hexo轻量级的多,而且易部署(指速度优化方面),也不需要一个 ...