Typecho主题配置

以下为博主自用配置

自定义 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;}}
/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(https://rehtt.com/css/光标/S1.cur), default;
}
/** 链接指针样式**/
a:hover{cursor:url(https://rehtt.com/css/光标/S2.cur), pointer;}
/** 鼠标样式 结束**/

/*页面提示字体白色（黑底）*/
.layui-layer-content {
    color: white;
}


/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}


/*超链接颜色设为蓝色*/
.comment-content-true a, .wrapper-lg .entry-content a {
    color: #337ab7;
}

/*标题栏底色透明度调整*/
.bg-light .lter, .bg-light.lter {
    background-color: rgba(255,255,255,0.5);
}

/*目录树底色透明度调整*/
.tocify .active, .vditor-outline__item--current, .vditor-outline__item:hover {
    background-color: rgba(255,255,255,0.9);
}

/*左边栏友链提示信息底色透明度调整，原本为黑底黑字无法分辨，调为白底*/
.tooltip-inner {
    background-color: rgba(255,255,255,0.9);
}


/*搜索提示列表、歌单、闲言碎语透明化，原先为茶色面板，和透明模式其他设置不太搭*/
.dropdown-menu, #skPlayer .skPlayer-list {
    background-color: rgba(255,255,255,0.9);
}
.panel-heading {
    background-color: rgba(255,255,255,0.6);
}
#smallRecording {
   background-color:rgba(255,255,255,0.4);
}

/*修复GitHub页面透明问题。开启透明模式后除暗色外的颜色都变为透明，需要手动修改暗色为透明*/
.bg-dark {
    background-color: transparent;
}
/*博客首页、文章标题栏加粗*/
.font-thin {
    font-weight: 500;
}

/*搜索提示栏宽度*/
#search_tips_drop {
    max-width:180px;
}

/*搜索框匹配结果，去除原本黄底效果，去除匹配成功的字符两边的空格*/
.mark, mark {
    padding: 0em;
    background-color: transparent;
    color: rgba(255,0,0,1)!important;
}
/*头像旋转*/
.img-circle {
    transition: all 0.5s;
}
.img-circle:hover {
    transform: scale(1.15) rotate(720deg);
}
/*首页文章面板上浮特效，以及上浮后阴影效果*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 5px rgba(80,100,117,0.3);
}

/*首页文章面板四周阴影*/
.panel {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel:hover {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel-small {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel-small:hover {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

/*首页文章面板上浮特效，以及上浮后阴影效果*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 5px rgba(80,100,117,0.3);
}

/*首页文章面板四周阴影*/
.panel {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel:hover {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel-small {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

.panel-small:hover {
    box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
    -moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}

自定义 JavaScript

/* 左侧图标颜色and彩色标签云 */
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
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});



kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创，转载请注明出处！<br> 本文作者：Rational<br>原文链接："+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "5000"
})
}}

/* 禁用F12 */

document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
layer.msg("F12被禁用，有问题请联系博主");
event.keyCode=0;
event.returnValue=false;
}
}

自定义输出body 尾部的HTML代码

<!--复制弹窗-->

<script src="[https://cdn.jsdelivr.net/npm/sweetalert2@8](https://cdn.jsdelivr.net/npm/sweetalert2@8)"></script>

<!--禁用F12-->
<script src="[https://lib.baomitu.com/layer/3.1.1/layer.js](https://lib.baomitu.com/layer/3.1.1/layer.js)"></script>

<!--关闭广告弹窗插件提示-->
<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
title: "网站加载完成",
type: "success",
autoHide: !1,
time: "3000"
})

</script>

<!--页面标题变化-->
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
document.title = '慢走~';
clearTimeout(titleTime);
}
else {
document.title = '欢迎光临~';
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>

<!--自定义右键-->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:rgba(194, 212, 231, 0.3);font-weight:700;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:#000;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#000;background:rgba(255,255,255,0.3)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:rgba(194, 212, 231, 0.3)!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:rgba(194, 212, 231, 0.3) !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>返回</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li style="border-bottom:2px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度搜索</span></a></li>
<li style="border-bottom:2px solid gray"><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-search fa-fw"></i><span>Google搜索</span></a></li>
<li><a href="[https://ovok.best/](https://ovok.best/)"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="[https://ovok.best/message.html](https://ovok.best/message.html)"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li>
</ul>
</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 googleSearch() {
    var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
    "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("<https://www.google.com/search?q=>" + 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>

参考以下文章并加以个性化修改：
空栈攻城狮
Handsome美化

最后修改：2024 年 08 月 20 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏