温馨提示,所有主题修改全部记录,防止主题更新数据丢失

首页

头像呼吸光环和鼠标悬停旋转放大

目标:首页左侧头像

方法:将以下代码添加至后台-开发者设置-自定义CSS

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full: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;
    }
}

博客介绍打字效果

目标:首页左侧博主介绍

方法:将以下代码添加至后台-外观-初级设置-博主的介绍

<span class="text-muted text-xs block">
<div id="chakhsu"></div> 
<script> 
    var chakhsu = function (r) {
        function t() {
            return b[Math.floor(Math.random() * b.length)]} 
        function e() {
            return String.fromCharCode(94 * Math.random() + 33)} 
        function n(r) {
            for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { 
                var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } 
            return n}
        function i() {
            var t = o[c.skillI]; 
            c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } 
        /*以下内容自定义修改*/ var l = "❤", o = ["我爱吃土豆" ].map(
        function (r) {
            return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() 
    }; 
    chakhsu(document.getElementById('chakhsu')); 
</script></span> </span>

首页倒计时

目标:首页

方法:将以下代码添加至后台-开发者设置-首页列表最前方广告位

/*首页倒计时*/
<style> 
.gn_box{     border: none;     border-radius: 15px; } 
.gn_box {     padding: 10px 14px;     margin: 10px;     margin-bottom: 20px;     text-align: center;     background-color: #fff; } 
#t_d{     color: #982585;     font-size: 18px; } 
#t_h{     color: #8f79c1;     font-size: 18px; } 
#t_m{     color: #65b4b5;     font-size: 18px; } 
#t_s{     color: #83caa3;     font-size: 18px; } 
</style> 
<div class="gn_box">     
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font  color=#8C0073>年</font><font color=#75008A>-</font>
<font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font></h1><center>
<div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span id="t_s"> 秒</span></div></center>
<script type="text/javascript"> 
function getRTime() {   
    var EndTime = new Date('2020/01/25 00:00:00');  
    var NowTime = new Date();  
    var t = EndTime.getTime() - NowTime.getTime();         
    var d = Math.floor(t / 1000 / 60 / 60 / 24);         
    var h = Math.floor(t / 1000 / 60 / 60 % 24);         
    var m = Math.floor(t / 1000 / 60 % 60);         
    var s = Math.floor(t / 1000 % 60); 
    var day = document.getElementById("t_d");
    if (day != null) {
        day.innerHTML = d + " 天";   
    }
    var hour = document.getElementById("t_h");
    if (hour != null) {
        hour.innerHTML = h + " 时";  
    }
    var min = document.getElementById("t_m");
    if (min != null) {
        min.innerHTML = m + " 分";   
    }
    var sec = document.getElementById("t_s");
    if (sec != null) {
        sec.innerHTML = s + " 秒";
    }
}     
setInterval(getRTime, 1000);     
</script> </div>

首页文章头图圆角化

目标:首页文章头图

方法:将以下代码添加至后台-开发者设置-自定义CSS

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

首页文章头图获取焦点放大

目标:首页文章头图
效果:图片获取焦点放大
方法:将以下代码添加至后台-开发者设置-自定义CSS
此处内容需要评论回复后(审核通过)方可阅读。

首页文章头图边框阴影

目标:首页文章头图

方法:将以下代码添加至后台-开发者设置-自定义CSS。(颜色自行修改)

/*panel阴影*/
.panel:hover,.panel-small:hover,.panel-picture:hover{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

文章标题居中

目标:文章标题
效果:居中显示
方法:将以下代码添加至后台-开发者设置-自定义CSS。

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

首页右侧小图片

目标:首页右侧小图片

方法:更换/usr/themes/handsome/usr/img/sj2/中的图片即可

为你的页面添加响应耗时

目标:首页右侧博客信息

方法:


为你的页面添加访客总数统计

目标:首页右侧博客信息

方法:将以下代码添加至Typecho根目录/usr/themes/handsome/functions.php末尾

//总访问量
function theAllViews()
    {
        $db = Typecho_Db::get();
        $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
            echo number_format($row[0]['SUM(VIEWS)']);
    }

将以下代码添加至Typecho根目录/usr/themes/handsome/component/sidebar.php合适位置。

   <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
               <span class="badge
           pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

彩色标签云及数字

目标:首页右侧标签云及数字

方法:将以下代码添加至后台-开发者设置-自定义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;
});

如有开启Pjax,则还需放入Pjax回调函数中

3D彩色标签云

目标:右侧标签云
方法:

文章

文章内打赏图标跳动

目标:文章打赏图标
效果:图标跳动
方法:将以下代码添加至后台-开发者设置-自定义CSS

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

评论

评论打卡功能

目标:评论
效果:一键打卡
方法:

添加评论滑稽表情

评论打字特效

评论边框

目标:评论

方法:将以下代码添加至后台-开发者设置-自定义CSS

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

版权

版权信息

目标:版权信息

方法:

此处内容需要评论回复后(审核通过)方可阅读。

全局

事先引入layer.js来提示信息,至后台-开发者设置-自定义输出body 尾部的HTML代码

<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

地址栏变化

目标:地址栏

方法:将以下代码添加至后台-开发者设置-自定义JavaScript。

jQuery(document).ready(function(){function d(){document.title=document[b]?"(๐•̆ ·̭ •̆๐)  爱我别走!":a}var b,c,a=document.title;"undefined"!=typeof document.hidden?(b="hidden",c="visibilitychange"):"undefined"!=typeof document.mozHidden?(b="mozHidden",c="mozvisibilitychange"):"undefined"!=typeof document.webkitHidden&&(b="webkitHidden",c="webkitvisibilitychange"),("undefined"!=typeof document.addEventListener||"undefined"!=typeof document[b])&&document.addEventListener(c,d,!1)});

复制提醒

目标:复制

方法:将以下代码添加至后台-开发者设置-自定义JavaScript

document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接!');};

屏蔽F12

目标:F12

方法:

此处内容需要评论回复后(审核通过)方可阅读。

破解:打开新窗口,打开F12,将地址粘贴到地址栏后刷新。

右键自定义

目标:右键

方法:

此处内容需要评论回复后(审核通过)方可阅读。

404页面自动返回

目标:404页面
方法:1:打开/usr/themes/handsome/404.php,在第130行左右,在<h1 class="text-shadow text-white">404</h1>后面添加:

<br>
<small class="text-muted letterspacing">
<b id="sp">10</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>

2:然后把下面这段放到最后的</body>

<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=10;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>

博客背景添加冒泡动画

给typecho加上心知天气

目标:网站头部
方法:1:知心天气官网www.seniverse.com注册申请免费API 密钥
2:将以下代码放入/usr/themes/handsome/component/headnav.php第55行<!-- / search form -->之后并更换你的公钥秘钥即可


<!-- 知心天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "公钥",
    "hash": "密钥"
});
tpwidget("show");</script>
<!-- 知心结束-->

手机适配中不显示热门及标签云

方法:将以下代码添加至后台-开发者设置-自定义CSS

/*手机不显示*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

实现一键切换夜间模式

将全站友链移动到右侧并添加头像

目标:全站友链

方法:

此处内容需要评论回复后(审核通过)方可阅读。

插件

此处插件不为收集,只是罗列出博主所用到的。

文章代码高亮

添加评论者浏览器标识

百度sitemap提交插件

评论过滤器

评论推送插件

夜间模式插件

图片上传自动压缩插件

外链转内链插件

Sitemap生成 插件

BUG

透明背景下文章目录bug

方法:将以下代码添加至后台-开发者设置-自定义CSS

/*透明背景下文章目录bug*/
#toc {
    background-color:rgba(255, 255, 255, .15) !important;
}

透明背景下时光机右侧bug

方法:将以下代码添加至后台-开发者设置-自定义CSS

/*透明背景下时光机右侧bug*/
.bg-light .lter, .bg-light.lter {
    text-align: justify;
}

其他自定义魔改文章:
handsome自定义主题字体

handsome自定义友情链接

handsome添加直播影院


版权声明:文章转载请注明来源,如有侵权请联系博主删除!
最后修改:2020 年 05 月 21 日 02 : 20 PM
如果觉得我的文章对你有用,请随意赞赏
评论打卡也可以哦,您的鼓励是我最大的动力!