浏览器动态标题
主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码
代码语言：javascript复制<!--浏览器动态标题开始-->
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>
<!--浏览器动态标题结束-->头像呼吸光环和鼠标悬停旋转放大
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.img-full {
width: 100px;
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;
}
}如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：
代码语言：javascript复制@keyframes light {
from {
box-shadow: 0 0 4px #f00;
}
to {
box-shadow: 0 0 16px #f00;
}
}左侧文章图标和评论头像鼠标悬停旋转
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.img-circle {
transition: all 0.3s;
}
.img-circle:hover {
transform: rotate(360deg);
}文章内打赏图标跳动
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}首页文章列表悬停上浮
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.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);
}首页头图悬停放大并超出范围
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}文章内头图和图片悬停放大并超出范围
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}右侧导航栏图标颜色
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}文章标题居中
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}右侧栏加入每日pixiv热榜图片
Github： https://github.com/mokeyjay/Pixiv-daily-top50-widget 主题设置 - 开发者设置 - 全局右侧广告位添加以下代码
代码语言：javascript复制<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:240px; height:380px;"></iframe>然后修改handsome/component/sidebar.php 找到广告，将"广告"修改为P站每日热门
超链接特效
修改/usr/themes/handsome/assets/css/handsome.min.css删掉下面的内容：
代码语言：javascript复制comment-content-true a:hover,.wrapper-lg .entry-content a:hover{
color:#222;border-bottom-color:#222
}
.comment-content-true a,.wrapper-lg .entry-content a{
color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all
}然后在主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制/*超链接特效*/
.comment-content-true a:not(.light-link),
.wrapper-lg .entry-content a:not(.light-link) {
position: relative;
margin: auto 4px;
color: #23b7e5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: inherit;
width: inherit;
}
.comment-content-true a:not(.light-link):hover,
.comment-content-true a:not(.light-link):focus,
.wrapper-lg .entry-content a:not(.light-link):hover,
.wrapper-lg .entry-content a:not(.light-link):focus {
color: #fff;
}
.comment-content-true a:not(.light-link)::before,
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::after {
position: absolute;
top: 0;
left: -4px;
z-index: -1;
box-sizing: content-box;
padding: 0 4px;
width: 100%;
height: 100%;
content: '';
}
.comment-content-true a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::before {
background-color: #23b7e5;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.comment-content-true a:not(.light-link):hover::before,
.comment-content-true a:not(.light-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):focus::before {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::after {
border-bottom: 1px solid #23b7e5;
}
.content-copyright {
overflow: hidden;
}标签云颜色
主题设置 - 开发者设置 - 自定义JS添加以下代码
代码语言：javascript复制<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中；
鼠标点击特效
1.点击出现文字特效
在主题的footer.php文件中的之前添加以下代码
代码语言：javascript复制<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>2.烟花特效
需要用到的js文件，将其放入服务器或者对象存储，友情提示 请设置好跨域相关设置
链接： https://pan.baidu.com/s/1RydrItk7lsCJAC991ZH80g 提取码：jluw
在页脚 </body>标签之前添加以下代码即可
<script src="//你的域名/fireworks.js"></script>响应耗时
在主题的functions.php文件中添加以下代码
代码语言：javascript复制//加载耗时
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime() );
$timestart = $mtime[1] $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime() );
$timeend = $mtime[1] $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display ) {
echo $r;
}
return $r;
}然后在/usr/themes/handsome/component/sidebar.php中添加以下代码
代码语言：javascript复制<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>心知天气
**心知天气API申请：https://www.seniverse.com/widgetv3
在 /usr/themes/handsome/component/headnav.php中添加以下代码**
<!--搜索提示-->
<ul id="search_tips_drop" class="dropdown-menu hide" style="display: block;top: 30px; left: 0px;">
</ul>
<span id="search_submit" class="transparent input-group-btn">
<button type="submit" class="transparent btn btn-sm"><i class="fontello fontello-search" id="icon-search"></i><i class="animate-spin fontello fontello-spinner hide" id="spin-search"></i></button>
</span>
</div>
</div>
</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>
<!-- 心知结束-->
<a href="" style="display: none" id="searchUrl"></a>
<!-- / search form -->首页文章版式阴影化
主题设置 - 开发者设置 - 自定义CSS添加以下代码
代码语言：javascript复制#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
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);
}
.panel: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);
}
.panel-small{
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);
}
.panel-small: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);
}
#如果也想使盒子四周也有阴影，加上以下代码
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}博客介绍彩色特效
后台 - 设置外观 - 初级设置 - 博客介绍添加以下代码
代码语言：javascript复制<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>文章页添加百度收录查询
在主题functions.php文件最下方添加以下代码
代码语言：javascript复制/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1)
{echo "百度已收录";
}
else
{echo "<a style="color:red;" rel="external nofollow" title="点击提交收录！" target="_blank"
href="http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
}在主题post.php文件想要显示的地方添加以下代码
代码语言：javascript复制<!--百度收录-->
<li class="meta-categories"><i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>
<span class="sr-only"><?php _me("百度收录") ?>：</span> <span class="meta-value"><?php echo
baidu_record() ?></span></li>访客总数统计
在/usr/themes/handsome/functions.php文件中添加以下统计代码
代码语言：javascript复制//总访问量
function theAllViews()
{
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}在 /usr/themes/handsome/component/sidebar.php文件中插入以下调用代码
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted"></i> <span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>其他主题单独调用代码
代码语言：javascript复制<?php echo theAllViews();?></span><?php _me("访客总数") ?>404自动返回首页
在/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>再在最后面标签前添加以下代码
代码语言：javascript复制<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>正文结束添加版权信息
在主题根目录下 post.php文件中 <?php echo Content::exportPayForAuthors(); ?>(大概在87行左右)添加以下内容
<!--版权声明开始-->
<div class="entry-content l-h-2x">
<div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
<span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div>
<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
<span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明：若无注明，本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
</div>
</div>
<!--版权声明结束-->右侧边栏添加全站字数
- 在
component/sidebar.php的开头加入下面的代码:
<?php
//字数统计
function allOfCharacters() {
$chars = 0;
$db = Typecho_Db::get();
$select = $db ->select('text')->from('table.contents');
$rows = $db->fetchAll($select);
foreach ($rows as $row) { $chars = mb_strlen(trim($row['text']), 'UTF-8'); }
$unit = '';
if($chars >= 10000) { $chars /= 10000; $unit = '万'; }
else if($chars >= 1000) { $chars /= 1000; $unit = '千'; }
$out = sprintf('%.2lf %s',$chars, $unit);
return $out;
}
?>- 在
component/sidebar.php处，选择合适位置加入以下代码
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
<span class="badge
pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>文章end标识
在模板文件 post.php内添加以下代码，建议在83行广告输出结束后添加。
代码语言：javascript复制<!--内容结束分割线-->
<div class="tt-fenge-end">
<span>End</span>
</div>
<!--/ 内容结束分割线-->在后台 自定义css中添加如下代码
代码语言：javascript复制/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}右侧滚动条样式
主题设置→开发者设置→自定义CSS
代码语言：javascript复制/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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: #30B07F;
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
}源站地址
