首页
目标
:首页左侧头像方法
:将以下代码添加至后台-开发者设置-自定义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;
});
目标
:右侧标签云方法
:将以下代码添加至后台-开发者设置-自定义CSS
。
/*标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
目标
:标签云默认最大数量30方法
:将/usr/themes/handsome/component/sidebar.php
中的<?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')
的30改为自己想要的最大数量
文章
目标
:文章打赏图标效果
:图标跳动方法
:将以下代码添加至后台-开发者设置-自定义CSS
。/*文章内打赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
评论
目标
:文章评论方法
:将以下代码添加至后台-开发者设置-自定义CSS
。
.OwO .OwO-body {
background: rgba(255,255,255,.9);
top: 15px;
position: absolute;
}
目标
:评论方法
:将以下代码添加至后台-开发者设置-自定义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,将地址粘贴到地址栏后刷新。目标
:右键方法
:
目标
: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>
目标
:网站头部方法
:1:心知天气官网https://www.seniverse.com/widgetv3申请秘钥并生成天气插件代码2:将生成的以下代码放入
/usr/themes/handsome/component/headnav.php
的注释<!-- / search form -->
之后并更换你的token即可
<!-- 知心天气-->
<ul class="nav navbar-nav" style="height:50px;">
<div id="tp-weather-widget" style="line-height: 50px;"></div>
<script>
(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
window.SeniverseWeatherWidget('show', {
flavor: "slim",
location: "WS0E9D8WN298",
geolocation: true,
language: "zh-Hans",
unit: "c",
theme: "dark",
token: "20f97289-5d56-4879-805d-c4df5408b7d9",
hover: "enabled",
container: "tp-weather-widget"
})
</script>
</ul>
<!-- 知心结束-->
方法:将以下代码添加至
后台-开发者设置-自定义CSS
。/*手机不显示*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}
目标
:全站友链注意
:添加头像可能影响网站加载速度(如果友链网站头像访问慢或者出问题的话)方法
:
目标
:时光机方法
:
插件
此处插件不为收集,只是罗列出博主所用到的。
BUG
方法:将以下代码添加至
后台-开发者设置-自定义CSS
。/*透明背景下文章目录bug*/
#toc {
background-color:rgba(255, 255, 255, .15) !important;
}
方法:将以下代码添加至
后台-开发者设置-自定义CSS
。/*透明背景下时光机右侧bug*/
.bg-light .lter, .bg-light.lter {
text-align: justify;
}
其他自定义魔改文章:
handsome自定义主题字体
学习学习~
欢迎欢迎
来了
欢迎欢迎
牛!
哈哈哈,通通拿走
谢谢分享
客气啦哈哈
不错,收藏了 这个主题不错。
你这网站点开吓我一跳撒哈哈
谢谢分享,~~
哈哈,不客气
滴!访客卡!请上车的乘客系好安全带,现在是:Mon Jun 01 2020 16:36:14 GMT+0800 (中国标准时间)
滴滴滴滴滴
滴!访客卡!请上车的乘客系好安全带,现在是:Fri May 29 2020 23:23:05 GMT+0800 (中国标准时间)
滴滴滴滴滴
非常不错
必须的
滴!访客卡!请上车的乘客系好安全带,现在是:Sun May 24 2020 15:23:34 GMT+0800 (CST)
滴滴滴滴滴