自定义CSS
该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内
1.文章标题居中
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/*文章标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}
2.左上角博主信息羽毛背景
以下代码放在 后台-外观设置-开发者设置-自定义CSS
background:url
后面括号里的网址就是羽毛动画的网址,你也可以把它保存下来放到自己网站的根目录的某个位置内,然后将网址改为自己的博客,防止该效果失效(也就是做了个备份的意思,当然如果你嫌麻烦也可以不做)/* 羽毛_css */
.dropdown.wrapper {
background:url(https://cdn.jsdelivr.net/gh/zimo6918/ZIMO6918-CDN/img/202202021631893.webp) right bottom no-repeat;
}
3.左上角博客logo/博客名称光束扫动效果
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
4.鼠标路过头像放大并旋停
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/* 左上角头像放大旋转 */
.img-circle {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: all 0.5s;
}
.img-circle:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
5.首页文章图片获取焦点放大
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/* 首页文章图片获取焦点放大 */
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.05);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb-small:hover{
transform: scale(1.05);
}
6.首页文章版式阴影化
以下代码放在 后台-外观设置-开发者设置-自定义CSS
所有
你同样可以去 https://www.fontke.com/tool/pickrgb 这个网站去选自己喜欢的颜色,但更改的时候一定注意"标点",不要出现类似少逗号的问题哦~
所有
rgba
后面的,如26, 169, 255
都可以进行修改,它代表的是散发出来的颜色类型。你同样可以去 https://www.fontke.com/tool/pickrgb 这个网站去选自己喜欢的颜色,但更改的时候一定注意"标点",不要出现类似少逗号的问题哦~
/* 首页文章版式阴影颜色 */
.panel{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}
7.首页文章列表悬停上浮
/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
8.文章首页版式圆角化
以下代码放在 后台-外观设置-开发者设置-自定义CSS
本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。
本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。
#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
9.时光机内圆形头像
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
10.网站右侧滚动条样式
以下代码放在 后台-外观设置-开发者设置-自定义CSS此处的#949494;即为滚动条的颜色,你可以去 https://www.fontke.com/tool/pickrgb 这个链接去找到你喜欢的颜色然后替换注意:替换的是#后面的6位数字,#不要动~
/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 6px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #949494;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
11.等距标签云
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
12.赞赏按钮跳动
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
13.评论边框
以下代码放在 后台-外观设置-开发者设置-自定义CSS
代码里的
代码里的
255,255,255
是指白色的,可能会看不到,自行修改数值即可/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}
14.粗斜体上色
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}
15.全站黑白
以下代码放在 后台-外观设置-开发者设置-自定义CSS
<!--开启黑白模式-->
html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
<!--黑白模式结束-->
16.手机端不显示热门文章和标签云
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/*手机不显示*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}
17.粗体上色
以下代码放在 后台-外观设置-开发者设置-自定义CSS
/* 粗体上色 */
strong{
color: rgb(230, 145, 56);
}
自定义JavaScript
该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处
1.左上角网站FPS显示
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
/* FPS显示 */
var console={};
console.log=function(){};
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
2.彩色标签云
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
// 彩色标签云
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}
$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});
3.左侧图标多彩
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});
4.动态网站标题
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
当你看其他网站的时候,网页标题会有可爱的变化~
另外代码里的两个链接可以按照自己的需求修改哦~
当你看其他网站的时候,网页标题会有可爱的变化~
另外代码里的两个链接可以按照自己的需求修改哦~
/* 图片链接可替换 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");
document.title = '网页崩溃了!!!';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp");
document.title = '咦,又好啦(✿◡‿◡)' ;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
5.打字动画效果
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
指在网页里打字时出现的一个动画效果,还是不懂得话可以尝试在本站评论区打字
指在网页里打字时出现的一个动画效果,还是不懂得话可以尝试在本站评论区打字
/* 打字动效 */
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);
6.添加复制弹窗
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
首先添加以下代码至
首先添加以下代码至
自定义输出body尾部的HTML代码
<!-- 复制样式CSS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
然后将以下代码加到自定义JavaScripts
,文字部分可以自行更改~
/* 复制效果 */
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};
7.防止他人F12抓代码
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
首先要说,这个功能防君子不防小人。所以真的会扒你网站代码的人总是会有办法的(就不告诉你)。
首先要说,这个功能防君子不防小人。所以真的会扒你网站代码的人总是会有办法的(就不告诉你)。
$(document).ready(function() {
document.oncontextmenu = function() {
return false;
}
document.onkeydown = function() {
//f12
if (window.event && window.event.keyCode == 123) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
//ctrl+u
if (event.ctrlKey && window.event.keyCode == 85) {
return false;
}
//ctrl+shift+i
if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
return false;
}
// Ctrl+S
else if ((event.ctrlKey) && (event.keyCode == 83)) {
return false;
}
};
});
8.鼠标点击特效
以下代码放在 后台-外观设置-开发者设置-自定义JavaScript
这是第一种爱心特效,下边的“修改文件”里会再介绍一种“爱国敬业诚信友善。。。”的点击特效
这是第一种爱心特效,下边的“修改文件”里会再介绍一种“爱国敬业诚信友善。。。”的点击特效
//鼠标点击出现爱心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
自定义Body
该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处
1.自定义邮件菜单美化
以下代码放在 后台-外观设置-开发者设置-自定义输出body 尾部的HTML代码
注意:如果你要使用我的版本的右键美化,一定首先在
注意:如果你要使用我的版本的右键美化,一定首先在
主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码
位置添加以下代码。如果不添加将不会显示图标<!-- 图标添加 -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
加完之后再将下面的代码放到自定义输出body 尾部的HTML代码处
另外,一定要把代码里的网址改成自己的!!~
<!-- 自定义右键菜单美化 -->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="放你网站的对应网址"><i class="fa fa-home"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh"></i><span>重载网页</span></a></li>
<li><a href="放你网站的对应网址"><i class="fa fa-meh-o"></i><span>和我当邻居</span></a></li>
<li><a href="放你网站的对应网址"><i class="fa fa-pencil-square-o"></i><span>给我留言吧</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
<!-- 自定义右键菜单美化 -->
2.防止他人F12抓代码
以下代码放在 后台-外观设置-开发者设置-自定义输出body 尾部的HTML代码
上边介绍了一种
提示内容可以自行修改哦~
上边介绍了一种
自定义JavaScript
的方法,再来给大家介绍第二种方法提示内容可以自行修改哦~
<!-- 防调试 -->
<script type="text/javascript">
$(document).ready(function () {
document.oncontextmenu = function () {
return false;
}
//document.onselectstart = function () {
// return false;
// }
//document.oncopy = function () {
//return false;
// }
document.onkeydown = function () {
//f12
if (window.event && window.event.keyCode == 123) {
event.keyCode = 0;
event.returnValue = false;
layer.msg("球球了,别再扒孩子了=.=")
return false;
}
//ctrl+u
if (event.ctrlKey && window.event.keyCode == 85) {
return false;
}
//ctrl+shift+i
if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
return false;
}
// Ctrl+S
else if ((event.ctrlKey) && (event.keyCode == 83)) {
return false;
}
};
});
</script>
<script>
//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.5k5b.com"}});
console.log(element);
</script>
3.气泡背景
以下代码放在 后台-外观设置-开发者设置-自定义输出body 尾部的HTML代码
需要修改可参考下方参数
需要修改可参考下方参数
<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
参数设置
id: '', //容器ID
num: 100, // 个数
start_probability: 0.1, // 如果数量小于num,有这些几率添加一个新的
radius_min: 1, // 初始半径最小值
radius_max: 2, // 初始半径最大值
radius_add_min: .3, // 半径增加最小值
radius_add_max: .5, // 半径增加最大值
opacity_min: 0.3, // 初始透明度最小值
opacity_max: 0.5, // 初始透明度最大值
opacity_prev_min: .003, // 透明度递减值最小值
opacity_prev_max: .005, // 透明度递减值最大值
light_min: 40, // 颜色亮度最小值
light_max: 70, // 颜色亮度最大值
is_same_color: false, //泡泡颜色是否相同
background:"#f1f3f4" //背景颜色
其他修改
1.页脚美化
2.每日一读
创建一个独立页面,将以下代码放入独立页面内
<img src="https://api.4rz.cn/zbPhoto.jpg" />
3.去掉地址栏的index.php
更改前是这样的:https://www.idboke.cn/index.php/archives/5/
更改后是这样的:https://www.idboke.cn/archives/5/
首先进入后台,找到设置-永久链接,将地址重写功能启用,之后打开宝塔面板网站-设置-伪静态-typecho-保存即可
更改后是这样的:https://www.idboke.cn/archives/5/
首先进入后台,找到设置-永久链接,将地址重写功能启用,之后打开宝塔面板网站-设置-伪静态-typecho-保存即可
4.博客页脚美化
5.添加酷安、哔哩等表情图标
6.首页小头图样式
样式如图:

文件:
位置:

文件:
Content.php
位置:
主题 / handsome / libs /Content.php
中的696行-701行(9.02版本),即以下代码<div class="panel-small single-post box-shadow-wrap-normal">
<div class="index-post-img-small post-feature index-img-small">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy" {$backgroundImageHtml}></div>
</a>
</div>
替换为以下代码
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
<div class="index-post-img-small post-feature index-img-small tt-left-box">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
</a>
</div>
<div class="tt-blur-img" {$backgroundImageHtml}></div>
设置外观→开发者设置→自定义CSS,填入以下css样式:
/*首页小头图版式css*/
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#8abcd1;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}
2 comments
叼茂SEO.bfbikes.com
[...]https://www.idboke.cn/archives/157/[...]