这个功能怎么说呢,就是突发奇想然后拿着自己大学学习的JS知识就捣鼓了一下,至于为什么想弄这个,听我解释就知道了。
因为国内的环境,懂得都懂,版权是被大佬玩的明明白白,我想分享点资源,刚开始是没人会注意你的,但是资源分享多了,就总会有某逼会去官方跳脸,然后导致资源被封,搞不好也会连累自己。
我想要的功能就是隐藏网页资源的下载信息,通过触发键盘指定按键显示隐藏内容,以达到防采集和某生或某逼的搞事。
效果展示
隐藏效果
下载设置的是评论可见
电脑端设置方向键上上下下左右左右解锁隐藏内容
移动端设置的点击页面任意地方三次显示隐藏内容
解锁之后
经典编辑器的隐藏DIV框的class属性和古腾堡编辑器的隐藏DIV框的class属性不一样,加上我本人现在不喜欢去后台些文章,所以该代码只对经典编辑器写的文章有用。
如果你要修改,可参考代码进行修改。
至于要不要使用就看个人,我只是想防住没技术的采集和那种猴急搞事的。
教程
思路
- 在WordPress编辑器中添加隐藏内容:可以在WordPress编辑器中添加隐藏内容,并使用CSS样式将其隐藏。例如:
<div class="hidden-content" style="display: none;">
这里是隐藏内容
</div>
- 在WordPress主题中添加JavaScript代码:可以在WordPress主题的JavaScript文件中添加以下代码:
jQuery(document).ready(function($) {
$(document).keydown(function(e) {
if (e.key === 'h') { // 将“h”替换为需要绑定的按键
$('.hidden-content').toggle();
}
});
});
子比代码
CSS代码:
.hidden-box{
display: none;
}
JS代码【单个按键】:
jQuery(document).ready(function($) {
$(document).keydown(function(e) {
if (e.key === 'h') { // 将“h”替换为需要绑定的按键
$('.hidden-box').toggle();
}
});
});
JS代码【多个按键】:
var keys = ['a', 'b', 'c']; // 定义需要绑定的按键数组
var index = 0; // 定义当前按键索引
jQuery(document).ready(function($) {
$(document).keydown(function(e) {
if (e.key === keys[index]) { // 判断按键是否匹配
index++; // 更新当前按键索引
if (index === keys.length) { // 判断是否匹配完成
$('.hidden-box').toggle();
index = 0; // 重置当前按键索引
}
} else {
index = 0; // 重置当前按键索引
}
});
});
后台添加即可:
6月17日更新
由于对移动端不友好所以增加一个达到点击次数显示隐藏内容
var click_count = 0;
var max_click = 8; //连续点击次数
document.addEventListener("click", function(){
click_count++;
if(click_count < max_click) {
console.log("点击了 " + click_count + " 次");
}
if(click_count == max_click) {
$('.muted-box').toggle();
console.log("点击了 " + click_count + " 次, 显示隐藏内容");
}
});
.muted-box是附件DIV的Class元素,如果想隐藏其它div,自行F12查找该DIV的class元素。
最终版
CSS:
.tinymce-hide{
display: none;
}
.tips{
display: block;
}
.file-download-box{
display: none;
}
JS:
const wpposts = document.querySelector('.wp-posts-content'); // 文章数据class属性
const tinymcehide = document.querySelector('.tinymce-hide'); // 经典编辑器隐藏框class属性
const filedownload = document.querySelector('.file-download-box'); // 附件框class属性
const newDiv = document.createElement('div'); // 创建提示DIV
newDiv.innerHTML = "<p style='text-align: center;'> <span style='color: #ff99cc;'><strong>贤者模式已开启!</strong></span></p>"; // 向提示DIV框里添加内容
newDiv.classList.add('tips'); // 为提示DIV框添加class属性
if (wpposts !== null) {
// 判断是否是文章页
wpposts.appendChild(newDiv); // 向文章页面插入提示DIV
}
const tips = document.querySelector('.tips'); //根据class元素定位提示DIV
if (wpposts !== null && tips !== null) {
if (tinymcehide == null && filedownload!== null){
wpposts.insertBefore(tips, filedownload); //判断属性是否存在,存在则调整相应DIV顺序
}else{
wpposts.insertBefore(tips, tinymcehide); //判断属性是否存在,存在则调整相应DIV顺序
}
}
const divExists1 = !!document.querySelector('.tinymce-hide');
const divExists2 = !!document.querySelector('.file-download-box');
if (divExists1 || divExists2) {
console.log('HTML中含有隐藏内容或者资源下载');
} else {
$('.tips').toggle(); //判断页面是否存在需要隐藏的内容,有就插入提示DIV,没有就隐藏提示DIV。
console.log('HTML中不含隐藏内容');
}
var keys = ['ArrowUp','ArrowUp', 'ArrowDown','ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight']; // 定义需要绑定的按键数组
var index = 0; // 定义当前按键索引
jQuery(document).ready(function($) {
$(document).keydown(function(e) {
if (e.key === keys[index]) { // 判断按键是否匹配
index++; // 更新当前按键索引
if (index === keys.length) { // 判断是否匹配完成
$('.tips').toggle();
$('.tinymce-hide').toggle();
$('.file-download-box').toggle();
index = 0; // 重置当前按键索引
}
} else {
index = 0; // 重置当前按键索引
}
});
});
var click_count = 0;
var max_click = 3; //连续点击次数
document.addEventListener("click", function(){
click_count++;
if(click_count < max_click) {
console.log("点击了 " + click_count + " 次");
}
if(click_count == max_click) {
$('.tips').toggle();
$('.tinymce-hide').toggle();
$('.file-download-box').toggle();
console.log("点击了 " + click_count + " 次, 显示隐藏内容");
}
});