【子比小功能】绑定键盘按键显示隐藏内容【最终版】-zibll教程分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

【子比小功能】绑定键盘按键显示隐藏内容【最终版】

该帖子内容已隐藏,请评论后查看

登录后继续评论

这个功能怎么说呢,就是突发奇想然后拿着自己大学学习的JS知识就捣鼓了一下,至于为什么想弄这个,听我解释就知道了。

因为国内的环境,懂得都懂,版权是被大佬玩的明明白白,我想分享点资源,刚开始是没人会注意你的,但是资源分享多了,就总会有某逼会去官方跳脸,然后导致资源被封,搞不好也会连累自己。

我想要的功能就是隐藏网页资源的下载信息,通过触发键盘指定按键显示隐藏内容,以达到防采集和某生或某逼的搞事。

效果展示

隐藏效果

image-27

 

下载设置的是评论可见

电脑端设置方向键上上下下左右左右解锁隐藏内容

移动端设置的点击页面任意地方三次显示隐藏内容

解锁之后

image-28

经典编辑器的隐藏DIV框的class属性和古腾堡编辑器的隐藏DIV框的class属性不一样,加上我本人现在不喜欢去后台些文章,所以该代码只对经典编辑器写的文章有用。

如果你要修改,可参考代码进行修改。

至于要不要使用就看个人,我只是想防住没技术的采集和那种猴急搞事的。

教程

思路

  1. 在WordPress编辑器中添加隐藏内容:可以在WordPress编辑器中添加隐藏内容,并使用CSS样式将其隐藏。例如:
<div class="hidden-content" style="display: none;">
  这里是隐藏内容
</div>
  1. 在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; // 重置当前按键索引
    }
  });
});

后台添加即可:

image-75

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 + " 次, 显示隐藏内容");
  }
});

请登录后发表评论