说明

关于handsome主题的一些美化和修改统一记录,方便以后开速查找;

一:浏览器动态标题

主题设置 – 开发者设置 – 自定义输出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> <!--浏览器动态标题结束-->

二:复制弹窗提示

在模板目录的header.php文件中引入layer资源文件代码

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

主题设置 – 开发者设置 – 自定义JavaScript 中添加以下代码

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

三:复制代码自带版权说明

将以下JS代码放在post.php的文章内页php

点击展开

<!--复制代码自带版权说明--> <script> document.body.addEventListener('copy', function (e) {     if (window.getSelection().toString() && window.getSelection().toString().length > 42) {         setClipboardText(e);         // alert('商业转载请联系作者获得授权,非商业转载请注明出处哦~n谢谢合作~(。・`ω´・)');     } });  function setClipboardText(event) {     var clipboardData = event.clipboardData || window.clipboardData;     if (clipboardData) {         event.preventDefault();         var htmlData = ''             + '著作权归作者所有。<br>'             + '商业转载请联系作者获得授权,非商业转载请注明出处。<br>'             + '作者:<?php $this->author() ?><br>'             + '链接:' + window.location.href + '<br>'             + '来源:<?php $this->options->siteUrl(); ?><br><br>'             + window.getSelection().toString();         var textData = ''             + '著作权归作者所有。n'             + '商业转载请联系作者获得授权,非商业转载请注明出处。n'             + '作者:<?php $this->author() ?>n'             + '链接:' + window.location.href + 'n'             + '来源:<?php $this->options->siteUrl(); ?>nn'             + window.getSelection().toString();           clipboardData.setData('text/html', htmlData);         clipboardData.setData('text/plain',textData);     } } </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-square {
    transition: all 0.3s;
}

.img-square: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; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

十二:春节倒计时代码

主题设置 – 开发者设置 – 首页列表最前方广告位添加以下代码

点击展开

<!--倒计时开始--> <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">157 天</span> <span id="t_h">9 时</span> <span id="t_m">7 分</span> <span id="t_s">42 秒</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); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> <!--倒计时结束-->

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

/* 倒计时开始 */ .gn_box { padding: 10px 14px; 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; }

十三:右侧栏加入每日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
找到<h3 class="widget-title m-t-none text-md"><?php _me(“广告”) ?></h3>,将”广告”修改为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回调函数中;

十六:鼠标点击特效

在主题的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>

十七:网站加载耗时

在主题的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中添加以下代码

  • 偏右边:将以下代码放入/usr/themes/handsome/component/headnav.php第180行左右<?php echo $headerItemsOutput; ?>之后并更换你的公钥秘钥即可
  • 偏左边:将以下代码放入/usr/themes/handsome/component/headnav.php第104行左右<!-- 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>
<!-- 心知天气-->

十九:心情文字居中

修改/usr/themes/handsome/index.php文件,位于公告位置下方

<header class="bg-light lter b-b wrapper-md"> 替换成 <header class="bg-light lter b-b wrapper-md" style="text-align:center">

二十:去除顶部博客名称

修改/usr/themes/handsome/index.php文件,位于公告位置下方
删除以下代码

<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

二十一:去除文章底部修改日期及版权说明

修改/usr/themes/handsome/libs/Content.php文件,大概570行左右
删除以下内容

return '<div class="show-foot"> <div class="notebook"><i class="fontello fontello-clock-o"></i><span>'._mt("最后修改").':'.date(_mt("Y 年 m 月 d 日 h : i  A") , $time + $obj).'</span>                  </div>                  <div class="copyright" data-toggle="tooltip" data-html="true" data-original-title="'.$interpretation.'"><span>© '.$content.'</span>                  </div>              </div>         ';

二十二:去除文章页分享按钮

修改/usr/themes/handsome/libs/Content.php文件,大概133行左右
删除以下代码

echo  '<div style="float:right;">'._mt("分享到").':    <style>    .breadcrumb i.iconfont.icon-qzone:after {     padding: 0 0 0 5px;     color: #ccc;     content: "/0a0";     }     '.$screenshotStyle.'    </style>    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='.$archive->permalink.'&title='.$archive->title.'&site='.$WebUrl.'" itemprop="breadcrumb" target="_blank" title="" data-toggle="tooltip" data-original-title="'._mt("分享到QQ空间").'" onclick="window.open(this.href, 'qzone-share', 'width=550,height=335');return false;"><i style ="font-size:15px;" class="iconfont icon-qzone" aria-hidden="true"></i></a>    <a href="http://service.weibo.com/share/share.php?url='.$archive->permalink.'&title='.$archive->title.'" target="_blank" itemprop="breadcrumb" title="" data-toggle="tooltip" data-original-title="'._mt("分享到微博").'" onclick="window.open(this.href, 'weibo-share', 'width=550,height=335');return false;"><i style ="font-size:15px;" class="fontello fontello-weibo" aria-hidden="true"></i></a>'.$screenshot.'</div>';

二十三:首页文章版式阴影化

主题设置 – 开发者设置 – 自定义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>

二十五:博客页脚美化

页脚美化

usr/themes/handsome/component/footer.php 大概117 行至137行
<footer id="footer" class="app-footer" role="footer">
<!--    <div class="wrapper bg-light">-->
<!--        <a class="pull-right hidden-xs text-ellipsis">-->
<!--            <span class="label badge" style="margin-right: 10px;">Powered by typecho</span>-->
<!--            <a href="https://www.ihewro.com/archives/489/" class="label badge">Theme by handsome</a>-->
<!--        </a>-->
<!--        <a href="" target="_blank" rel="noopener noreferrer" class="label badge" data-toggle="tooltip" data-original-title="">Copyright ©2021</a>-->
<!--    </div>-->
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo();
      // 可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解
      ?>
      Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="_blank"
                                                                                                      href="https://www.ihewro.com/archives/489/">handsome</a>
      </span>
        <span class="text-ellipsis">&copy;&nbsp;<?php echo date("Y"); ?> Copyright&nbsp;<?php
            $this->options->BottomleftInfo(); ?></span>
    </div>

</footer>

替换为

<footer id="footer" class="app-footer" role="footer">
<!--    <div class="wrapper bg-light">-->
<!--        <a class="pull-right hidden-xs text-ellipsis">-->
<!--            <span class="label badge" style="margin-right: 10px;">Powered by typecho</span>-->
<!--            <a href="https://www.ihewro.com/archives/489/" class="label badge">Theme by handsome</a>-->
<!--        </a>-->
<!--        <a href="" target="_blank" rel="noopener noreferrer" class="label badge" data-toggle="tooltip" data-original-title="">Copyright ©2021</a>-->
<!--    </div>-->
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo();
      // 可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解
      ?>
      
      </span>
        <span class="text-ellipsis">&nbsp;<?php
            $this->options->BottomleftInfo(); ?></span>
    </div>

</footer>
开发者设置➡自定义CSS
/* 底部样式修复 */
.wrapper{
padding: 11px;
}
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
  background-color: #007ec6
}
.github-badge .bg-orange {
  background-color: #ffa500
}
.github-badge .bg-red {
  background-color: #f00
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-purple {
  background-color: #ab34e9
}
博客底部左侧信息
<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-orange">©2022 悠悠看书</span>
</a>

<a class="github-badge" target="_blank" href="https://www.uuks.cn/sitemap.xml">
     <span class="badge-subject">网站地图</span>
     <span class="badge-value bg-green">sitemap</span>
</a>
博客底部右侧信息
<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>

<a class="github-badge" target="_blank" href="https://typecho.org">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-purple">Typecho</span>
</a>

二十六:滑稽表情

handsome主题美化记录 - 持续更新
传送门:滑稽表情包下载
解压后会得到一个OwO.json文件及funny文件夹;
然后将funny文件夹放置在/usr/themes/handsome/usr/img/emotion目录下即可;
然后用我们解压得到的OwO.json文件替换掉/usr/themes/handsome/usr目录下的OwO.json文件即可;
handsome主题美化记录 - 持续更新

二十七:顶部RSS图标

主图设置 – 高级设置 – 顶部导航按钮配置

{"name":"RSS","class":"fontello fontello-rss icon-fw","link":"https://mvpsky.com/feed/","target":"_blank"}

二十八:后台登陆界面美化

截图
handsome主题美化记录 - 持续更新
预览
https://mvpsky.com/admin
下载
传送门:源码下载
方法
第一步:用压缩包内的login.php文件替换掉/admin/login.php文件
第二步:将压缩包内的style文件夹上传到/admin/文件夹下
第三步:修改login.php第35行,把“SunPma’Blog”替换成自己的信息

二十九:文章页添加百度收录查询

修改主题目录下post.php文件

<!--分类--><li class="meta-categories"><i class="fontello fontello-tags" aria-hidden="true"></i> <span class="sr-only"><?php _me("分类") ?>:</span> <span class="meta-value"><?php $this->category(' '); ?></span></li> ## 找到上面的代码,在其下方添加以下代码;              <!--百度收录-->              <li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>

继续在最后标签上面添加以下代码;

<!-- 收录查询 -->
<script>function baidu_check(){$.getJSON("https://cn1.api.wfblog.net/baidu.php?domain="+window.location.href,function(result){if (result.code == 200) {                 $('#baidu_icon').removeClass('glyphicon-refresh');                 $('#baidu_icon').addClass('glyphicon-ok-circle');                 $('#baidu_result').text('百度已收录');             }else if(result.code == 403){                 $('#baidu_icon').removeClass('glyphicon-refresh');                 $('#baidu_icon').addClass('glyphicon-info-sign');                 $('#baidu_result').text('百度未收录');                 baidu_push();             }else{                  $('#baidu_icon').removeClass('glyphicon-refresh');                 $('#baidu_icon').addClass('glyphicon-remove-circle');                 $('#baidu_result').text('查询收录失败');             }         });     }     function baidu_push(){         var bp = document.createElement('script');         var curProtocol = window.location.protocol.split(':')[0];         if (curProtocol === 'https') {             bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';                 } else {             bp.src = 'http://push.zhanzhang.baidu.com/push.js';         }         var s = document.getElementsByTagName("script")[0];         s.parentNode.insertBefore(bp, s);     }     baidu_check();     </script>     <!-- / 收录查询 -->

收录查询的API源码,作者公布了源码,可以使用自己的
API创建好后替换掉代码中的https://cn1.api.wfblog.net/baidu.php即可;
API源码

<?php /**  * Baidu  * @editer: Weifeng  * @link: https://wfblog.net  * @version: 1.0  */  error_reporting(0); header("Access-Control-Allow-Origin:*"); header('Content-type: application/json');  $domain = @$_GET['domain']; if(!isset($domain) || empty($domain) || $domain==''){     $data = array(         "code" => false,         "msg" => "未传入请求参数!"     );     echo json_encode($data,JSON_UNESCAPED_UNICODE);     exit; } if(substr($domain, -1) == '/'){     $domain = substr($domain,0,strlen($domain)-1); }  $data = checkBaidu($domain); echo json_encode($data,JSON_UNESCAPED_UNICODE);  function checkBaidu($url){     $header = array(         "Host:www.baidu.com",         "Content-Type:application/x-www-form-urlencoded",//post请求         "Connection: keep-alive",         "Referer:https://www.baidu.com",         "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"     );     $url = 'https://www.baidu.com/s?ie=UTF-8&wd='.urlencode($url).'&usm=3&rsv_idx=2&rsv_page=1';     $ch = curl_init();     curl_setopt($ch, CURLOPT_URL, $url);     curl_setopt ($ch, CURLOPT_HTTPHEADER, $header);     curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);     $output = curl_exec($ch);     curl_close($ch);     if(strpos($output, '没有找到') || strpos($output, '很抱歉')){         $data = array(             "code" => 403,             "msg" => "该域名暂时未被百度收录!"         );     }else{         $number = GetBetween($output,'<span class="nums_text">百度为您找到相关结果约','个</span>');         if(empty($number) || $number == 0){             $number = GetBetween($output,'<b>找到相关结果数约','个</b></p>');             if(empty($number) || $number == 0){                 $data = array(                     "code" => false,                     "msg" => "获取百度收录失败!"                 );                 return $data;             }         }         $data = array(             "code" => 200,             "msg" => "该域名已被百度收录!",             "number" => str_replace(',','',$number)         );     }     return $data; }  function GetBetween($content,$start,$end){     $r = explode($start, $content);     if (isset($r[1])){         $r = explode($end, $r[1]);         return $r[0];     } } ?>

原作者:https://wfblog.net

三十:文章图片居中并显示注释

修改方法
typecho安装目录下的var/HyperDown.php搜索image第357行找到如下代码

<img src="{$url}" alt="{$escaped}" title="{$escaped}">
替换为以下代码

<img class="img" src="{$url}" alt="{$escaped}" title="{$escaped}"><center><div class="image-caption">{$escaped}</div></center>

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

/*设置图片插入居中*/ .img {clear:both;display:block;margin:auto;} /* 设置注释样式*/ .image-caption{ min-width: 20%;     max-width: 80%;     min-height: 22px;     display: inline-block;     padding: 10px;     margin: 0 auto;     border-bottom: 1px solid #d9d9d9;     font-size: 14px;     color: #969696;     line-height: 1.7; }

默认的字体颜色是配合非透明模式的,透明模式将上面color: #969696修改为color:white

三十一:评论添加一键打卡

主题设置 – 开发者设置 – 自定义JavaScript 和 PJAX回调函数 均添加上以下代码

function a(a, b, c) {if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();         else if (a.selectionStart || "0" == a.selectionStart) {             var l = a.selectionStart,                 m = a.selectionEnd,                 n = m;             c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);             c ? n += b.length + c.length : n += b.length - m + l;             l == m && c && (n -= c.length);             a.focus();             a.selectionStart = n;             a.selectionEnd = n         } else a.value += b + c, a.focus() } var b = (new Date).toLocaleTimeString(),         c = document.getElementById("comment") || 0; window.SIMPALED = {}; window.SIMPALED.Editor = {     daka: function() {         a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")     },     zan: function() {         a(c, " 写得好好哟,我要给你生猴子!::funny:04:: ")     },     cai: function() {         a(c, "骚年,我怀疑你写了一篇假的文章!::funny:03:: ")     } };

主题目录的component/comments.php里面的130行左右参照下面代码进行修改

<label for="comment"><?php _me("评论") ?>  <span class="required text-danger">*</span></label><textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>                         <div class="OwO" style="display: inline;"></div>                                             <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>               <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>           <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>                         <div class="secret_comment" id="secret_comment" data-toggle="tooltip"                         data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">

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

.secret_comment {top: 5px; } .OwO.OwO-open .OwO-body {display:table }

三十二:访客总数统计

在/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>

再在最后面</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>

三十四:一言打字特效

第一步
先把这两个js放到:设置外观–开发者设置–自定义输出head头部的HTML代码

<script src="https://i.gordsky.cn/assets/weiyu/jquery.min.js"></script> <script src="https://i.gordsky.cn/assets/weiyu/typed.min.js"></script>

第二步
把下面的js代码。复制到:设置外观–开发者设置–自定义JavaScript

function typedword(){ $.ajax({ type:"get", url:"https://api.gordsky.cn/Love/", data:{type:'json10'}, async:true, success:function(word){ var list = []; for(var i = 0 ;i < word.length ; i++){ list.push(word[i]['word']); } $("#word").typed({ strings: list, typeSpeed: 20, loop: true, backDelay: 3000, }); } }); }

第三步
把下面的html代码复制到:设置外观–初级设置–首页一行文字介绍

<p><i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i><span id="word"><i class="glyphicon glyphicon-heart" aria-hidden="true"></i></span><i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i><script>$(function(){typedword();})</script></p>

三十五:导航栏设置QQ头像

https://gordsky.cn/api/qq.php?qq=123456
将地址中的123456修改为自己QQ然后将地址添加到初级设置 – 头像图片地址

三十六:开启全站灰色(黑白模式)

方式一
(适用于handsome主题,设置外观–开发者设置–自定义CSS 添加以下代码)

<!--开启黑白模式--> html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); } html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} <!--黑白模式结束-->

方式二

<!--开启黑白模式--> <style type="text/css">html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} </style> <!--黑白模式结束-->

方式三

<!--开启黑白模式--> <style>html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);         filter:progid:lolXImageTransform.Microsoft.BasicImage(grayscale=1);           _filter:none;     } </style> <!--黑白模式结束-->

方式四

<!--开启黑白模式--> <style>html {-webkit-filter: grayscale(100%);}</style> <!--黑白模式结束-->

三十七:修复搜索框按钮

Handsome主题的搜索框按钮一直有问题,按不下去不能正常使用,可以按以下方法修复
打开/usr/themes/handsome/component/headnav.php文件
搜索search_submit然后将整行替换成如下代码

<span id="search_submit" class="transparent input-group-btn" onclick=jumpForSearch(search_input.value)>

然后在文件的最后面添加如下代码后保存即可

<!--/开始修复搜索按钮--> <script type="text/javascript"> function jumpForSearch(search_ct){if(search_ct.length>0){$.pjax({url: "https://"+document.domain+'/search/'+search_ct,      container: '#content',     fragment: '#content',     timeout: 8000     });   } } </script> <!--/修复搜索按钮结束-->

三十八:左侧下拉框

修改/usr/themes/handsome/component/aside.php文件
在125行<li <?php echo $class; ?>>上面添加以下代码
示例一:默认打开下拉框并在本页面打开链接

<!--左侧下拉框--><a class="auto"><li class="active"><span class="pull-right text-muted"><i class="fontello icon-fw fontello-angle-right text"></i>               <i class="fontello icon-fw fontello-angle-down text-active"></i>               </span>               <i class="glyphicon glyphicon-link"></i>               <span>工具</span></a>               <ul class="nav nav-sub dk">               <li class="nav-sub-header">               <a data-no-instant="">               <span>工具</span></a>               </li>              <!--网站-->               <li>               <a href="https://mvpsky.com/other/douyin" class="auto" target="_blank">               <i class="glyphicon glyphicon-link"></i>               <span>抖音解析下载</span></a>               </li>               <li>               <a href="https://mvpsky.com/other/musicss" class="auto" target="_blank">               <i class="glyphicon glyphicon-link"></i>               <span>音乐解析下载</span></a>               </li>               </ul>               </li>             <!--下拉框结束-->

示例二:默认关闭下拉框并在新页面打开链接

<!--左侧下拉框--><li><a class="auto"><span class="pull-right text-muted"><i class="fontello icon-fw fontello-angle-right text"></i>               <i class="fontello icon-fw fontello-angle-down text-active"></i>               </span>               <i class="glyphicon glyphicon-link"></i>               <span>工具</span></a>               <ul class="nav nav-sub dk">               <li class="nav-sub-header">               <a data-no-instant="">               <span>工具</span></a>               </li>              <!--网站-->               <li>               <a href="https://mvpsky.com/other/douyin" class="auto" target="_blank">               <i class="glyphicon glyphicon-link"></i>               <span>抖音解析下载</span></a>               </li>               <li>               <a href="https://mvpsky.com/other/musicss" class="auto" target="_blank">               <i class="glyphicon glyphicon-link"></i>               <span>音乐解析下载</span></a>               </li>               </ul>               </li>             <!--下拉框结束-->

三十九:文章页面显示标签云

编辑/usr/themes/handsome/component/sidebar.php文件
<?php if (IS_TOC): ?>上面添加以下代码

<!--文章显示标签云--> <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">     <h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>     <div class="tags l-h-2x">         <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>         <?php if($tags->have()): ?>              <?php while ($tags->next()): ?>                 <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a>             <?php endwhile; ?>         <?php endif; ?>     </div> </section> <!--显示标签云结束-->

四十:底栏高度设置

后台-设置外观-开发者设置-自定义CSS 添加以下代码

<!--底栏高度开始--> .wrapper {padding: 10px } <!--底栏高度结束-->

四十一:背景粒子特效

后台-设置外观-开发者设置-自定义输出body 尾部的HTML代码

<!--背景粒子特效-->
<script type="text/javascript"color="255,0,0"opacity="1"count="150" src="https://cdn.jsdelivr.net/gh/546426894/typecho@8.4/usr/themes/handsome/assets/js/canvas-nest.min.js"></script>

四十二:自定义音乐播放器音量

后台-设置外观-开发者设置-自定义JS 添加以下代码

setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);

其中volume=0.3为播放器音量控制,默认为0.3支持修改范围为0.0 - 1可自行设置

四十三:复制弹框

用法:

  1. 如果你开启了PJAX,那么需要在主题设置》PJAX》PJAX回调函数一栏内填入以下函数,然后保存即可。
/*复制弹窗*/
kaygb_copy();
  1. 最后复制下方代码到自定义JavaScript即可
/*复制弹窗*/
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创,转载请注明出处!<br> 本文作者:Tehran<br>原文链接:<br>"+sitesurl,
    title: "复制成功",
    type: "success",
    autoHide: !1,
    time: "5000"
    })
}}

四十四:进入弹窗

用法:自定义body丨放入后台-外观设置-开发者设置-自定义尾部-body

点击展开

<!--进入弹窗-->

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "加载完毕,感谢您的访问!<br >" + kaygb_referrer(),
    title: "Welcome!",
    type: "success",
    autoHide: !1,
    time: "5000"
})

</script>

四十五:手机适配中不显示热门及标签云

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

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

四十六:国家公祭日全站变灰

用法:设置外观–开发者设置–自定义输出head头部的HTML代码

/*国家公祭日全站变灰*/
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

四十七:天气显示插件

天气显示插件--Wiather
插件80KB很小
作者blog[秉松博客]

四十八:GOTOP插件

上传至 usr/plugins目录**
解压
后台启动

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

一共使用3个插件一个原版一个gotop和Wiather天气插件,前面使用AliceStyle美化插件感觉还行但是后面发现也就是几行代码改实现就行插件压缩包都是10MB以上了,所以自己手动改了。

位置地球
方法:进入handsome后台,选择“更换外观--设置外观--开发者设置--全局右侧边栏广告位”,将复制的代码粘贴即可

<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=5wrl2mbvawy&amp;m=7&amp;c=e63100&amp;cr1=ffffff&amp;f=arial&amp;l=0&amp;bv=90&amp;lx=-420&amp;ly=420&amp;hi=20&amp;he=7&amp;hc=a8ddff&amp;rs=80" async="async"></script>

替换广告字:打开“/usr/themes/handsome/component/sidebar.php”文件,搜索“广告”二字(handsome8.0.0 大约在111行),改为“位置地球”。

主题设置有备份只记录修改文件的地方!

四十九:手机不显示

/* #tag_cloud-2为标签云,#tabs-4为博客评论随机文章,#a_d_sidebar为广告,#blog_info为博客信息,可自行组合显示或隐藏*/
@media (max-width:767px) {
    #blog_info,#a_d_sidebar {
        display: none;
    }
}

五十:顶部标题设置

点击展开

{"name":"归档","feather":"archive","link":"https://www.uuks.cn/archives.html"},
{"name": "Github","feather":"github","link": "https://www.uuks.cn/github.html"}, 
{"name": "留言板","feather": "at-sign","link": "https://www.uuks.cn/msg.html"},
{
    "name": "关于",
    "class": "glyphicon glyphicon-qrcode",
    "sub": [{
        "name": "关于我",
        "class": "glyphicon glyphicon-user",
        "link": "https://www.uuks.cn/start-page.html",
        "target":"_self"
    }, {
        "name": "时光机",
        "feather": "clock",
        "link": "https://www.uuks.cn/cross.html",
        "target":"_self"
    }, {
        "name":"万花筒",
        "feather":"slack",
        "link": "https://www.uuks.cn/loves.html",
        "target":"_self"
    }, {
        "name":"影视搜索",
        "feather":"film",
        "link":"http://168.xuj.cool/",
        "target":"_self"
    }, {
        "name":"音乐搜索",
        "feather":"music",
        "link":"https://www.uuks.cn/music/index.php",
        "target":"_self"
    }, {
        "name":"在线游戏",
        "feather":"airplay",
        "link":"https://www.uuks.cn/xyx/index.html",
        "target":"_self"
        }
]
}

五十一:阴影设置

自定义CSS

点击展开

#阴影颜色修改rgba后面的值 /*panel阴影*/ 
.panel{box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35);     -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); }  
.panel:hover{     box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35);     -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); }  
.panel-small{     box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35);     -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); }  
.panel-small:hover{     box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35);     -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); } 
#如果也想使盒子四周也有阴影,加上以下代码 
.app.container {     box-shadow: 0 0 30px rgba(240,80,80, 0.35); }

五十二 :加载动画

以下代码放置 主题文件header.php内

点击展开

<!--加载动画-->
    <style>
    #PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}
    #PageLoading-center{width:100%;height:100%;position:relative;}
    #PageLoading-center-absolute{
        position:absolute;left:50%;top:50%;
        height:200px;width:200px;
        margin-top:-100px;
        margin-left:-100px;
    }
    .object2{
        -moz-border-radius:50% 50% 50% 50%;
        -webkit-border-radius:50% 50% 50% 50%;
        border-radius:50% 50% 50% 50%;
        position:absolute;
        border-left:5px solid #FFB6C1;
        border-right:5px solid #b6def7;
        border-top:5px solid transparent;
        border-bottom:5px solid transparent;
        -webkit-animation:animate 2s infinite;
        animation:animate 2s infinite;

    }
    #object_one{left:75px;top:75px;width:50px;height:50px;}
    #object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
    #object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
    #object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}
    @-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    @keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    </style>

  <!--加载动画-->
<body id="body" class="fix-padding skt-loading">
    <body id="body" class="fix-padding" style="overflow:hidden">
        <div id="PageLoading" style="z-index:99999999;">
            <div id="PageLoading-center">
                <div id="PageLoading-center-absolute">
                    <div class="object2" id="object_four"></div>
                    <div class="object2" id="object_three"></div>
                    <div class="object2" id="object_two"></div>
                    <div class="object2" id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>

以下代码放置 后台-开发者设置-自定义javascript 内

$(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });

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

点击展开

/*首页文章头图放大特效*/
.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);
}
.blog-post .panel-small:not(article) {
    transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:not(article) {
    transition: all 0.3s;
}
.blog-post .panel-picture:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

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

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

五十四: 正文末尾End标识

在模板文件post.php的适当位置添加下述代码:

<!--内容结束分割线-->
<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;}

五十五: 转载申明效果

效果请参见本站正文内容结尾的版权申明效果。

在模板文件post.php的上方位置添加下述代码:

<!--知识共享许可协议-->
<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题:<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接:<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明,本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明:转载请注明文章来源。</p>
</div>
<!-- / 知识共享许可协议-->

添加Css样式:

/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}

/*深色模式下的知识共享许可协议*/
        html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}

透明模式添加Css样式:去除背景

/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}

/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}

五十六: 相关文章、随机文章的样式美化 8.4版本不能用 不要试了!

修改代码:post.phpfunctions_mine.php
functions_mine.php:

/**
     * 随机文章,在需要添加随机文章的地方加上代码:<?php getRandomPosts(10);?>
     * 数字10为要调用的文章数量。
     */
    function getRandomPosts($random)
    {
        $modified = $random->modified;
        $db = Typecho_Db::get();
        $adapterName = $db->getAdapterName();//兼容非MySQL数据库
        if ($adapterName == 'pgsql' || $adapterName == 'Pdo_Pgsql' || $adapterName == 'Pdo_SQLite' || $adapterName == 'SQLite') {
            $order_by = 'RANDOM()';
        } else {
            $order_by = 'RAND()';
        }
        $sql = $db->select()->from('table.contents')
            ->where('status = ?', 'publish')
            ->where('table.contents.created <= ?', time())
            ->where('type = ?', 'post')
            ->limit($random)
            ->order($order_by);

        $result = $db->fetchAll($sql);
        foreach ($result as $val) {
            $val = Typecho_Widget::widget('Widget_Abstract_Contents')->push($val);
            echo '<a class="list-group-item text-ellipsis" href="' . $val['permalink'] . '" title="' . $val['title'] . '"> ' . $val['title'] . ' </a>';
        }
    }

相关文章及随机文章列表的标题增加了自定义样式:tt-suiji-title
CSS

.tt-suiji-title{color: #777;background-color: #eee;}

为了避免没有相关文章的时候,随机文章的列表的宽度过小不美观,重新设置了逻辑语句为下面。 本文章未添加标签,可以对比查看本页和其它页面的对比显示。

post.php 添加到<!--/文章的页脚部件:打赏和其他信息的输出--> 上面

<!--随机及相关文章-->
<div class="row">
<?php $this->related(3)->to($relatedPosts); ?>
<?php if ($relatedPosts->have()): ?>
<!-- 相关文章 -->
<div class="list-group col-lg-6">
      <span class="list-group-item tt-suiji-title">
        猜你想看
      </span>
    <?php while ($relatedPosts->next()): ?>
        <a class="list-group-item text-ellipsis" href="<?php $relatedPosts->permalink(); ?>" title="<?php $relatedPosts->title(); ?>"><?php $relatedPosts->title(); ?></a>
    <?php endwhile; ?>
</div>
<!--随机文章-->
<div class="list-group col-lg-6">
      <span class="list-group-item tt-suiji-title">
        随机文章
      </span>
      <?php getRandomPosts(3);?>
</div>
<?php else: ?>
<!--随机文章-->
<div class="list-group">
      <span class="list-group-item tt-suiji-title">
        随机文章
      </span>
      <?php getRandomPosts(3);?>
</div>
<?php endif; ?>
<!--随机及相关文章  End-->

五十七: 博客添加一个自适应的灯笼

一段十分简单的代码,Handsome主题用户直接插入到/usr/themes/handsome/component/header.php中约第400行左右的<body>标签后即可。

点击展开

<div class="kyz-lantern1">
    <div class="lantern">
        <div class="line"></div>
        <div class="lantern-a">
            <div class="lantern-b">
                <div class="mcl8_com">
                    新
                </div>
            </div>
        </div>
        <div class="kyz_spike kyz_spike-a">
            <div class="kyz_spike-b"></div>
            <div class="kyz_spike-c"></div>
        </div>
    </div>
</div>
<div class="kyz-lantern2">
    <div class="lantern">
        <div class="line"></div>
        <div class="lantern-a">
            <div class="lantern-b">
                <div class="mcl8_com">
                    年
                </div>
            </div>
        </div>
        <div class="kyz_spike kyz_spike-a">
            <div class="kyz_spike-b"></div>
            <div class="kyz_spike-c"></div>
        </div>
    </div>
</div>
<div class="kyz-lantern3">
    <div class="lantern">
        <div class="line"></div>
        <div class="lantern-a">
            <div class="lantern-b">
                <div class="mcl8_com">
                    快
                </div>
            </div>
        </div>
        <div class="kyz_spike kyz_spike-a">
            <div class="kyz_spike-b"></div>
            <div class="kyz_spike-c"></div>
        </div>
    </div>
</div>
<div class="kyz-lantern4">
    <div class="lantern">
        <div class="line"></div>
        <div class="lantern-a">
            <div class="lantern-b">
                <div class="mcl8_com">
                    乐
                </div>
            </div>
        </div>
        <div class="kyz_spike kyz_spike-a">
            <div class="kyz_spike-b"></div>
            <div class="kyz_spike-c"></div>
        </div>
    </div>
</div>
<style>
    .kyz-lantern1{position:fixed;top:-25px;left:-30px;z-index:9999;pointer-events:none}.kyz-lantern2{position:fixed;top:-25px;left:65px;z-index:9999;pointer-events:none}.kyz-lantern3{position:fixed;top:-25px;right:65px;z-index:9999;pointer-events:none}.kyz-lantern4{position:fixed;top:-25px;right:-30px;z-index:9999;pointer-events:none}@media(max-width:42.625em){.kyz-lantern1{top:-40px;left:-50px;transform:scale(.7)}.kyz-lantern2{top:-40px;left:10px;transform:scale(.7)}.kyz-lantern3{top:-40px;right:10px;transform:scale(.7)}.kyz-lantern4{top:-40px;right:-50px;transform:scale(.7)}}.kyz-lantern1 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.kyz-lantern2 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 4s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.kyz-lantern3 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.kyz-lantern4 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 4s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.lantern-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:12px 8px 8px 10px;border-radius:50% 50%;border:2px solid #dc8f03}.lantern-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:-2px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03}.line{position:absolute;top:-50px;left:60px;width:2px;height:50px;background:#dc8f03}.kyz_spike-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:#ffa500;border-radius:0 0 5px 5px}.kyz_spike-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%}.kyz_spike-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:#ffa500;border-radius:0 0 0 5px}.lantern:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:#ffa500;background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03)}.lantern:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:#ffa500;background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03)}.mcl8_com{font-family:微软雅黑,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:bold;line-height:85px;text-align:center}html.theme-dark .kyz-lantern1 .lantern,html.theme-dark .kyz-lantern2 .lantern,html.theme-dark .kyz-lantern3 .lantern,html.theme-dark .kyz-lantern4 .lantern{box-shadow:-5px 5px 50px 4px rgba(250,108,0,1)}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}}
</style>

五十八: UserAgent插件

  1. 解压后修改文件夹名为 UserAgent,将插件上传至网站目录的 /usr/plugins
  2. 在 Typecho 后台「插件管理」处启用插件
  3. 在需要显示的地方插入以下代码:

    <?php UserAgent_Plugin::render($comments->agent); ?>

以 handsome 主题为例,即添加到 handsome/component/comments.php 文件里的 <span class="comment-author vcard"> ... </span> 后面。

五十九: 栏目列表美化小头图首页文章样式修改

修改后的使用前提: 文章编辑页面中,文章头图样式选择选择 小版式
注意如果开启图片懒加载 需要关闭

模板代码部分

文件:Content.php文件,位于:主题 / handsome / libs /, ~将第1156行开始的下述代码(V7.3.1),~ 将第1164行开始的下述代码(V8.1.0):

点击展开

<div class="panel-small single-post box-shadow-wrap-normal">
    <div class="index-post-img-small post-feature index-img-small">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy" {$backgroundImageHtml}></div>
        </a>
    </div>

替换为:

点击展开

<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
    <div class="index-post-img-small post-feature index-img-small tt-left-box">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
        </a>
    </div>
    <div class="tt-blur-img" {$backgroundImageHtml}></div>

CSS部分

设置外观→开发者设置→自定义CSS,填入以下css样式:

点击展开

.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}

六十:左侧彩色图标

用法 自定义 JavaScript 和pjax回调添加下面代码

let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

六十一:文章数量,评论数目个数 背景色修改

CSS

/*小字体背景色*/
.badge {
    background-color: #15A4CC;
}

六十二:修改左侧栏样式

替换 aside.php 文件内 <!-- nav -->之间的内容

代码

<!-- nav -->
          <nav ui-nav class="navi clearfix">
            <ul class="nav">
             <!--index-->
                <!-- <div class="line dk hidden-folded"></div> stille 修改,隐藏首页logo和下方菜单之间的白线-->
                <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                <!--以下-stille手动修改-->
                <!-- <span>导航</span> -->
                <!--以下-stille手动修改-->
              </li>
                <!--主页-->
                   <li>
                <a href="<?php $this->options->rootUrl(); ?>/" class="auto">
                    <span class="nav-icon"><i data-feather="home"></i></span>
                    <span><?php _me("首页") ?></span>
                </a>
                </li>
              <!-- /主页 -->
              <!--以下-stille手动复制-分类category-->
              <!--stille 001 分类category-->
                            <li >
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                  <!-- <i class="glyphicon glyphicon-th"></i>-->
                    <span class="nav-icon"><i data-feather="grid"></i></span>

                    <span>分类</span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a>
                      <span>分类</span>
                    </a>
                  </li>
                    <!--循环输出分类-->

                    <?php $this->widget('Handsome_Widget_Metas_Category_List')->listCategories('wrapClass=nav nav-sub dk&childClass=child-nav'); ?>
                    <?php
                    $this->widget('Widget_Metas_Category_List')->to($categorys);
//                    echo Content::returnCategories($categorys)
                    ?>

                    <!--/循环输出分类-->               
                  </ul>
              </li>
              <!--stille 002 独立页面pages-->
              <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                    <span class="nav-icon"><i data-feather="file"></i></span>
                  <span><?php _me("页面") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("页面") ?></span>
                    </a>
                  </li><!--这个字段不会被显示出来-->
                  <!--循环输出独立页面-->
                  <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
                   <?php while($pages->next()): ?>
                       <?php if ($pages->fields->navbar == "hide") continue; ?>
                       <li><a href="<?php $pages->permalink(); ?>"><span><?php $pages->title(); ?></span></a></li>
                   <?php endwhile; ?>
                </ul>
              </li>


              <!--手动复制分类category-->
<li> 
<a  href="https://www.uuks.cn/Oracle/" class ="auto"><span class="nav-icon"><i data-feather="database"></i></span><span>Oracle</span></a>
</li>
<li> 
<a  href="https://www.uuks.cn/Linux" class ="auto"><span class="nav-icon"><i data-feather="server"></i></span><span>Linux</span></a>
</li>
<li> 
<a  href="https://www.uuks.cn/Docker/" class ="auto"><span class="nav-icon"><i data-feather="codesandbox"></i></span><span>Docker</span></a>
</li>
<li> 
<a  href="https://www.uuks.cn/Mysql/" class ="auto"><span class="nav-icon"><i data-feather="package"></i></span><span>Mysql</span></a>
</li>
<li> 
<a  href="https://www.uuks.cn/Redis/" class ="auto"><span class="nav-icon"><i data-feather="figma"></i></span><span>Redis</span></a>
</li>
<li>
<a  href="https://www.uuks.cn/PL-SQL/" class ="auto"><span class="nav-icon"><i data-feather="codepen"></i></span><span>PL-SQL</span></a>
</li>
<li>
<a target="_blank" href="https://www.uuks.cn/music/index.php" class ="auto"><span class="nav-icon"><i data-feather="music"></i></span><span>音乐搜索</span></a>
</li>
<li>
<a target="_blank" href="https://www.uuks.cn/video/index.html" class ="auto"><span class="nav-icon"><i data-feather="film"></i></span><span>在线播放器</span></a>
</li>
<li>
<a target="_self" href="https://www.uuks.cn/start-page.html" class ="auto"><span class="nav-icon"><i data-feather="thumbs-up"></i></span><span>关于</span></a>
</li>                

              <!--全站友情链接 下移 stille 改动 -->
              <!--友情链接-->
              <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                    <span class="nav-icon"><i data-feather="user"></i></span>
                  <span><?php _me("友链") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("友链") ?></span>
                    </a>
                  </li>
                  <!--使用links插件,输出全站友链-->
                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
                </ul>
              </li>
              <!--     全站友情链接 下移 stille 改动       -->
            </ul>
          </nav>
          <!-- nav -->

六十三:顶部导航设置

{"name":"音乐","class":"glyphicon glyphicon-music","link":"https://www.uuks.cn/music/index.php","target":"_blank"},
{"name":"视频播放器","class":"glyphicon glyphicon-film","link":"https://www.uuks.cn/video/index.html","target":"_blank"},
{"name":"相册","class":"glyphicon glyphicon-picture","link":"/image/","target":"_self"}

六十四:博主介绍闪字

用法:主题设置➡初级设置➡博主的介绍

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

六十五:全站打字烟花特效

用法:开发者设置➡自定义输出body 尾部的HTML代码

<script type="text/javascript"src="https://js.qninq.cn/js/commentTyping.js"></script>

六十六:Logo扫光效果

用法:开发者设置➡自定义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;}}

六十七:粗体上色

用法:开发者设置➡自定义CSS

/* 粗体上色 */
strong{
  color: rgb(230, 145, 56);
}

六十八:时光机头像圆形

用法:开发者设置➡自定义CSS

/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

六十九:评论边框美化

用法:开发者设置➡自定义CSS

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

七十:右侧导航图标美化

/*右侧导航栏*/
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

七十一:左侧导航多彩图标

用法:

开发者设置➡自定义JavaScript
PJAX➡PJAX回调函数

let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

七十二: 等距标签云

用法:开发者设置➡自定义CSS

/*词云等距美化*/
#tag_cloud-2 a {
    border-radius: 5px;
    width: 32%;
}

七十三:右侧滚动条美化

用法:开发者设置➡自定义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
}

七十四:自定义右键美化

用法:开发者设置➡自定义输出body 尾部的HTML代码

<!--右键美化-->
<script src="https://js.qninq.cn/js/layer.js"></script>
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;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:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://blog.qninq.cn/"><i class="fontello fontello-home"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fontello fontello-pencil"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fontello fontello-search"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fontello fontello-chevron-right"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fontello fontello-chevron-left"></i><span>后退</span></a></li>
        <li><a href="javascript:(async () => {if (!window.shorturl) {const poop = await fetch('https://sorls.cn/api.php?url=' + encodeURI(location.href)).then(x => x.json());window.shorturl = poop.shorturl ? poop.shorturl : poop.error;}console.log(window.shorturl);const elements = {}; elements.container = document.createElement('div');elements.container.style.cssText = 'z-index:10000;';elements.modal = document.createElement('div');elements.modal.style.cssText = 'z-index:10000;position:fixed;box-shadow: 0 5px 15px -5px rgba(0,0,0,0.8);display:inline-block;color:black;padding:24px;background-color:white;bottom:12px;left:12px;border-radius:12px;font-size:18px;transition:all 250ms ease;opacity:0';elements.a = document.createElement('a');elements.a.innerText = window.shorturl;elements.a.href = window.shorturl;elements.a.addEventListener('click',(e)=>{e.preventDefault();});elements.p = document.createElement('p');elements.p.style.cssText = 'padding:0;margin:0;';elements.p.innerHTML = `<br>%E5%8A%9F%E8%83%BD%E7%94%B1 <a href='https://sorls.cn'>Sorls %E6%8F%90%E4%BE%9B</a>`;elements.modal.appendChild(elements.a);elements.modal.appendChild(elements.p);elements.container.appendChild(elements.modal);const body = document.querySelector('body');body.appendChild(elements.container);requestAnimationFrame(()=>{requestAnimationFrame(()=>{elements.modal.style.opacity = 1;})});setTimeout(()=>{elements.modal.style.opacity = 0;setTimeout(()=>{elements.container.remove();},260);},5000);})();"><i class="fontello fontello-cogs"></i><span>缩短本页</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fontello fontello-refresh"></i><span>重载网页</span></a></li>
        <li><a href="https://blog.qninq.cn/links.html"><i class="fontello fontello-emo-tongue"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://blog.qninq.cn/comments.html"><i class="fontello fontello-edit"></i><span>给我留言吧</span></a></li>
    </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() {
        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>

七十五:新年喝彩横图

用法:
1.开发者设置➡自定义CSS

/*new_year_css*/
#new_year{
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    left: 0;
    right: 0;
    bottom: 0;
}
#post-panel header.wrapper-md.bg-light{
position:relative;
}

2.usr/theme/handsome/index.php如图位置添加如下代码

<img id="new_year" src="https://js.qninq.cn/imgs/new_year.png" draggable="false">

3.添加位置

<?php if ($index_show || $desc_show):?>
            <header class="bg-light lter wrapper-md">
复制到这一行
                <?php if ($index_show) :?>

七十六:左上角加上FPS

用法:
打开主题设置-开发者设置-自定义JS 和主题设置-PJAX-PJAX回调函数内添加以下代码

$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;

fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();

七十七: 右边侧全部

(文章数目加载耗时,在线人数,全站字数,访客总数)**

themes/handsome/libs/Content.php中放在class Content{}之前。

//require("component/Recent.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;
    } 
/**
     * 在线人数
     */
    function online_users() {
        $filename='online.txt'; //数据文件
        $cookiename='Nanlon_OnLineCount'; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER['REQUEST_TIME']; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode('|',$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)<=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid='U'.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,'w')){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=>$ftime){ 
                    $fline=$fuid.'|'.$ftime."\n"; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo "$total_online"; 
    }      
    
    /**
     * 访客总数
     */
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

    /**
     * 加载耗时
     */
    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;
    }

sidebar.php添加代码:

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></i></span><span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

七十八:盒子模式主页标题居中

用法:后台主题设置→开发者设置→自定义CSS

/*顶部标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}

七十九:网站背景添加海浪背景

点击展开

  • 添加至后台主题设置-开发者设置-自定义CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
  • 添加至后台主题设置-开发者设置-自定义网站头部代码
<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>

八十:羽毛

图片自己下载后保存替换路径
https://www.uuks.cn/usr/uploads/2021/logo/yumao.webp

  • 添加至后台主题设置-开发者设置-自定义CSS
/*羽毛_css*/
.dropdown.wrapper {
    background:url(/usr/uploads/2021/logo/yumao.webp) right bottom no-repeat;
}

部分来源于:互联网
部分转载自:糖心白菜
部分转载自:无限UCW
部分转载自:青柠博客

最后修改:2022 年 07 月 22 日
如果觉得我的文章对你有用,请随意赞赏