浏览器动态标题

主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码

<!--浏览器动态标题开始-->
 <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添加以下代码

.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;
     }
 }

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

@keyframes light {
     from {
         box-shadow: 0 0 4px #f00;
     }
 
     to {
         box-shadow: 0 0 16px #f00;
     }
 }

左侧文章图标和评论头像鼠标悬停旋转

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.img-circle {
     transition: all 0.3s;
 }
 
 .img-circle:hover {
     transform: rotate(360deg);
 }

文章内打赏图标跳动

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.btn-pay {
     animation: star 0.5s ease-in-out infinite alternate;
 }
 
 @keyframes star {
     from {
         transform: scale(1);
     }
 
     to {
         transform: scale(1.1);
     }
 }

首页文章列表悬停上浮

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.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添加以下代码

.index-post-img {
     overflow: hidden;
 }
 
 .item-thumb {
     transition: all 0.3s;
 }
 
 .item-thumb:hover {
     transform: scale(1.1)
 }

文章内头图和图片悬停放大并超出范围

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.entry-thumbnail {
     overflow: hidden;
 }
 
 #post-content img {
     border-radius: 10px;
     transition: 0.5s;
 }
 
 #post-content img:hover {
     transform: scale(1.05);
 }

右侧导航栏图标颜色

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.glyphicon-fire {
     color: #ff0000;
 }
 
 .nav-tabs-alt .glyphicon-comment {
     color: #495dc3;
 }
 
 .glyphicon-transfer {
     color: #0e5458;
 }

文章标题居中

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.panel h2{
     text-align: center; 
 }
 .post-item-foot-icon{
     text-align: center;
 }

右侧栏加入每日pixiv热榜图片

Github： https://github.com/mokeyjay/Pixiv-daily-top50-widget
主题设置 - 开发者设置 - 全局右侧广告位添加以下代码

<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删掉下面的内容：

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添加以下代码

/*超链接特效*/
 .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添加以下代码

<!--纯黑标签云-->
 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文件中的之前添加以下代码

<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文件中添加以下代码

//加载耗时
     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中添加以下代码

<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添加以下代码

#阴影颜色修改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);
 }

博客介绍彩色特效

后台 - 设置外观 - 初级设置 - 博客介绍添加以下代码

<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文件最下方添加以下代码

/**
 * 提示文章百度是否收录
 *
 */
 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文件想要显示的地方添加以下代码

<!--百度收录-->
 
 <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文件中添加以下统计代码

//总访问量
     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>

其他主题单独调用代码

<?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>

再在最后面标签前添加以下代码

<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行广告输出结束后添加。

<!--内容结束分割线-->
 <div class="tt-fenge-end">
     <span>End</span>
 </div>
 <!--/ 内容结束分割线-->

在后台 自定义css中添加如下代码

/*文章正文下的结束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

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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
}

Last modification：November 28, 2022
© Reprinted from other stations
If you think my article is useful to you, please feel free to appreciate