文章目录
一、前言二、sakura配置1.主题配置2.添加引用3.主题js配置(1)js引用位置(2)修改js 三、总结一、前言
文章被盗,被爬取,内容被cv,你是否很苦恼?
被复制时,自动给文章内容添加原文信息。🤣
思路:
监听网页复制粘贴被复制时自动添加文章原文信息
扩展:
设置复制内容阈值,超过指定字数追加版权信息可选择设置描述内容
二、sakura配置
hexo基本原理:读取config.yml配置信息,将内容渲染到html中(sakura主题是采用ejs渲染模板),本例中js控制监听事件,在head中已经声明了变量(复制功能权限,复制阈值,版权描述)。
1.主题配置
主题配置文件增添内容,位置:themes\sakura\_config.yml
# Whether to activate the copyright information of the blog and author when copying the post content.# minCharNumber: Approve copyright information by copying at least how many characters.# 是否激活复制文章时追加博客和作者的版权信息.copyright:enable: false # 代码块是否可复制,true允许,false加上文章信息minCharNumber: 120 # 至少复制多少个字符就追加版权信息.description: 本文章著作权归作者所有,任何形式的转载都请注明出处。
2.添加引用
头部引用增添引用信息(复制功能权限,复制阈值,版权描述),位置themes\sakura\layout\_partial\head.ejs
mashiro_option.copyright_enable = "<%= theme.copyright.enable %>" ;mashiro_option.copyright_minCharNumber = parseInt("<%= theme.copyright.minCharNumber %>") ;mashiro_option.copyright_description = "<%= theme.copyright.description %>" ;
位置如图所示:
3.主题js配置
(1)js引用位置
注意在themes\sakura\layout\_partial\head.ejs
中。href是你的引用路径。
<link rel="stylesheet" href="<%- theme.libs.css.style %>" type="text/css" media="all" id="saukra_css-css">
如果在本地,文件位置:
/js/sakura-app.js
如果引用外链,请修改再上传;或者直接用我的外链:
/gh/cungudafa/cdn/js/sakura-app.js
sakuraplus主题在主题配置文件中已经配置ok,外链js也自动更新,无需任何配置,推荐大家来用一手hexo-theme-sakuraplus版本。
用我的外链地址就不用配置3.(2)以下步骤。
(2)修改js
快捷键搜索setClipboardText
修改相应内容:( a ) false追加版权信息,判断字符串中是否包含false字样
mashiro_option.copyright_enable.indexOf("false")!= -1
( b ) 网页选中的字数大于阈值
window.getSelection().toString().length > mashiro_option.copyright_minCharNumber
( c )最佳信息排版:htmlData和textData
在这里增加了mashiro_option.copyright_description
完整代码如下:
function add_copyright () {document.body.addEventListener('copy', function (e) {if (!mashiro_global.is_user_logged_in && window.getSelection().toString().length > 30) {if(mashiro_option.copyright_enable.indexOf("false")!= -1 && window.getSelection().toString().length > mashiro_option.copyright_minCharNumber){//判断是否允许复制,false不允许,添加复制作者信息setClipboardText(e)}}})function setClipboardText (event) {event.preventDefault()var htmlData = '' + mashiro_option.copyright_description +'<br>' + '作者:' + mashiro_option.author_name + '<br>' + '链接:' + window.location.href + '<br>' + '来源:' + mashiro_option.site_name + '<br><br>' + window.getSelection().toString().replace(/\r\n/g, '<br>')var textData = '' + mashiro_option.copyright_description +'\n' + '作者:' + mashiro_option.author_name + '\n' + '链接:' + window.location.href + '\n' + '来源:' + mashiro_option.site_name + '\n\n' + window.getSelection().toString().replace(/\r\n/g, '\n')if (event.clipboardData) {event.clipboardData.setData('text/html', htmlData)event.clipboardData.setData('text/plain', textData)addComment.createButterbar('复制成功!<br>Copied to clipboard successfully!', 1000)} else if (window.clipboardData) {return window.clipboardData.setData('text', textData)}}}add_copyright()
三、总结
本次修改没有什么太大的难点,总结回顾了一下js监听事件吧。
很基础的hexo和js语法,看不懂的话百度学习一下哦。
基本原理都是先监听剪切板,再追加信息。
追加版权信息是对原创的保护,很简单的一种知识保护。
除了在粘贴时保护,也有next主题在文章末添加版权信息,等等。