Typecho基于handsome主题的一些美化

Author： cooyf
发布时间：November 2, 2019
6542views
18 comments
25593字数
Categories：瞎搞
百度已收录

1、盒子美化

盒子美化.gif

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

点击查看CSS

@charset "utf8";.entry-content{background-color:transparent}
.panel-small .post-meta{padding:25px 30px 15px 25px!important}
.panel-small .pos50t-meta{padding-left:25px;padding-right:25px}
.b-light{border-color:#bbb4}
.tip:before{margin-top:0!important}
.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small{transition:all .2s;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2)!important}
.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover{box-shadow:1px 1px 5px 5px rgba(0,160,0,0.5)!important}
.list-group-item{background-color:rgba(255,255,255,0)}
.thumb-lg{width:130px}
#widget-tabs-4-comments .list-group-item,#tag_toc,#sidebar,#post-content{background-color:transparent!important}
#alllayout.app-aside-folded .tooltip{display:none!important}
.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}
.standpage,aside,aside *{transition:all .3s}
.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}
.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.3)}
.wrapper-md article,.wrapper-md>#comments{border-radius:15px;overflow:hidden}
.bg-auto:before{bottom:51px}
.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:15px}
.index-post-img,.index-post-img-small{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}
.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a{transition:all .2s}
.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small{transform:scale(1.05)}
.streamline{margin-left:20px;padding-right:10px}
.streamline .comment-body{position:relative}
.streamline .comment-body .m-l-lg:before{content:" ";position:absolute;width:calc(100%+10px);height:calc(100%+20px);top:-10px;left:0;z-index:-1;border-radius:2px}
aside.col.w-md.no-border-xs{transition:all .3s}
.visible-xs-inline{display:inline-block!important}
@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}
}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}
#kotori:hover{left:0;bottom:0}
#kotori.hidekotori{left:-110px;bottom:-110px}
@media screen and (max-width:767px){#kotori{display:none}
.blog-post>.panel:hover .index-post-img .item-thumb{transform:none!important}
}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;padding-top:10px}
.max-img{max-height:400px}
.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}
.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}
.skPlayer-name{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}
html.fancybox-enabled{overflow-y:auto}
.blog-post .post-meta.wrapper-lg{padding-top:15px}
.share,.yellow,.red,.lblue,.green{background-position-y:50%}
body.modal-open{overflow-y:auto;padding-right:0!important}
.reply2view{background-color:transparent;border:solid 1px #bbb}
#content{transition:all .3s}
.OwO .OwO-logo{height:28px}
#tag_toc.fixed #toc{width:100%}
.page-navigator .next a,.page-navigator .prev a{height:31px}
.page-navigator>li:last-child>a,.page-navigator>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
#tooltip-1{width:0;height:0;overflow:hidden}
.tooltip-2{width:0;height:0;border:0}
.item-thumb-small{background-position:left}
@media screen and (min-width:1200px){.sticky{position:absolute;top:10px;left:15px}
.panel .item-thumb{height:300px;cursor:pointer;transition:all .6s}
#post-panel .blog-post{position:relative}
#post-panel .panel{overflow:hidden}
#post-panel .panel .post-meta{position:relative;margin-top:-300px;height:300px;padding-top:133px!important;padding-bottom:0!important;background-color:rgba(0,0,0,.3);transition:all .3s}
#post-panel .panel .post-meta,#post-panel .panel-small .post-meta{border-radius:15px}
#post-panel .panel .post-meta *,#post-panel .panel-small .post-meta *{color:#fff!important}
#post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2{text-align:center}
#post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div{transition:all .3s;transform:translateY(-10px);opacity:0}
#post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted{position:absolute;bottom:20px}
#post-panel .panel .post-meta>.line{position:absolute;bottom:40px;width:740px}
#post-panel .panel-small .post-meta>.line{position:absolute;bottom:40px;width:350px}
#post-panel .panel .post-meta>.summary{position:absolute;bottom:60px;width:740px}
#post-panel .panel-small .post-meta>.summary{position:absolute;bottom:60px;width:350px}
#post-panel .panel-small{display:inline-block;height:300px;width:calc(50% - 10px);margin-right:20px}
#post-panel .panel-small:nth-child(2n){margin-right:0}
#post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small{height:100%;width:100%}
#post-panel .panel-small .post-meta{position:absolute;height:300px;width:calc(50% - 10px);padding:133px 20px 0 20px!important;background-color:rgba(0,0,0,.3);transition:all .3s}
#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{background-color:rgba(0,0,0,.6)}
#post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div{opacity:1;transform:translateY(0)}
#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{padding-top:80px!important}
#post-panel .ahover{display:block;position:absolute;top:0;left:0;right:0;bottom:0}
.blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small{filter:blur(3px)}
}header.bg-light.wrapper-md{border:0;text-align:center}
header.wrapper-md *{}
header.wrapper-md h1{font-size:32px}
.link-main{padding:50px 0 50px 20px;text-align:center}
.link-main h3{margin-top:0}
.link-main .item{display:inline-block;letter-spacing:0;margin-right:20px;margin-bottom:20px;width:289px;height:240px;font-size:14px;overflow:hidden;border-radius:15px;border:1px solid #e1e8ed;transition:background .2s}
.link-main .link-bg{position:relative;height:90px;padding:0 1em}
.link-main .link-bg .bg:before{display:block;content:"";position:absolute;left:0;height:100%;width:100%}
.link-main .link-bg .link-avatar{position:absolute;bottom:-50px;border:4px solid #FFF;border-radius:100%;box-shadow:0 0 5px rgba(0,0,0,0.5)}
.link-main .link-bg .link-avatar img{border-radius:100%}
.link-main .avatar{display:block;object-fit:cover}
.link-main .bg,.link-main .link-bg{background-repeat:no-repeat;background-position:center;background-size:cover;display:block}
.link-main .bg{position:absolute;top:0;bottom:0;left:0;right:0;filter:blur(1.5px)}
.link-main .meta{padding:.9em 1em;text-align:right}
.link-main .info{color:#525766;padding:0 1em 1em}
.link-main .info .name{font-weight:600;font-size:16px}
@media screen and (max-width:330px){.link-main{padding:50px 0 50px 0}
.link-main .item{margin-right:0}
}.link-main .item:hover .bg{filter:blur(0.1px)}
#comments pre code{display:inline}
.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}
.hideContent{background-color:transparent;padding:10px 0}
.agent{display:inline-block;margin-left:5px;padding:0 3px;border-radius:2px;color:#58666e;font-size:12px;opacity:.8}
img[mw400]{max-width:400px!important;width:100%}
.mw400{max-width:400px}
.alert-warning{text-align:center;border:0;max-width:1100px;margin:0 auto}
textarea#comment{border-radius:15px}
.item-thumb:hover{transform:scale(1.06)}
.img-full{width:100px;border-radius:50%;animation:light 4s ease-in-out infinite;transition:0.5s}
@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}
}.btn-pay{animation:star 0.5s ease-in-out infinite alternate}
@keyframes star{from{transform:scale(1)}
to{transform:scale(1.1)}
}.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)}

在/usr/themes/handsome/libs/Content.php文件后添加

<a href="{$parameterArray['linkUrl']}" class="ahover"></a>

2、头像呼吸光环和悬停旋转

头像.gif

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义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;
    }
}
/*评论头像旋转*/
.img-circle {
    transition: all 0.3s;
}
.img-circle:hover {
    transform: rotate(360deg);
}

3、文章内图片悬停放大

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章内图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

4、文章内打赏图标跳动

打赏.gif

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

5、给网站添加加载耗时显示

加载耗时.png

在/usr/themes/handsome/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>

位置如下图：
加载耗时代码位置.png

6、复制弹框和彩虹标签云

复制弹框.png
标签云.png

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript

复制弹框需要将放在/handsome/assets/js/下

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功！');};
<!--彩色标签云-->
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;
});

7、在文章页右侧添加标签云

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

8、在文章顶部添加百度是否收录

这东西误差大，没什么卵用

在handsome/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;
    }
}

然后在handsome/post.php约80行下添加代码

<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>

9、动态标签页标题

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义输出head头部的HTML代码即可

<!--动态标题-->
<script>var OriginTitile=document.title,titleTime;document.addEventListener("visibilitychange",function(){if(document.hidden){$('[rel="shortcut icon"]').attr("href","https://www.cooyf.com/logo.ico");document.title="你别走吖 Σ(っ °Д °;)っ";clearTimeout(titleTime)}else{$('[rel="shortcut icon"]').attr("href","https://www.cooyf.com/logo.ico");document.title="你可算回来了 (｡•ˇ‸ˇ•｡)"+OriginTitile;titleTime=setTimeout(function(){document.title=OriginTitile},2000)}});</script>

10、博主介绍动态字体

打开后台-外观-设置外观-开发者设置-复制代码粘贴至博主的介绍即可

<!--博主介绍的闪字特效-->
<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>

11、为 Typecho编辑器增加 HTML标签支持

Typecho 默认文章只支持kbd|b|i|strong|em|sup|sub|br|code|del|a|hr|small这几个标签。
修改/var/HyperDown.php文件第17行，在现有标签中直接增加新标签即可。
标签之间使用|分隔。

12、给handsome增加更多表情包

下载地址：
提取码：9nko

1.将表情包图片上传至/usr/themes/handsome/usr/img/emotion

2.然后替换或者修改/usr/themes/handsome/usr/OwO.json

3.修改/usr/themes/handsome/assets/css/handsome.min.css表情大小如下：

.comment-content-true img {
    max-width: 6%!important
}

13、文章标题美化

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*
 * 文章一二三四级标题美化
 */
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

14、首页预览头图走cos

/libs/Content.php第715行左右

$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined

修改为（xxx填写自己的cos地址）：

$random = 'https://xxx/' . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined

15、超链接美化

删除/usr/themes/handsome/assets/css/handsome.min.css下原超链接CSS：

.comment-content-true a:hover,.wrapper-lg .entry-content a:not(.nav-link):hover {
    color: #222;
    border-bottom-color: #222
}

.comment-content-true a,.wrapper-lg .entry-content a:not(.nav-link) {
    color: #3f88bf;
    border-bottom-color: #222;
    border-bottom: 1px solid #3f88bf;
    word-wrap: break-word;
    word-break: break-all
}

添加如下CSS：

/*超链接特效*/
.comment-content-true a:not(.light-link):not(.nav-link),
.wrapper-lg .entry-content a:not(.light-link):not(.nav-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):not(.nav-link):hover,
.comment-content-true a:not(.light-link):not(.nav-link):focus,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus {
    color: #fff;
}
.comment-content-true a:not(.light-link):not(.nav-link)::before,
.comment-content-true a:not(.light-link):not(.nav-link)::after,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-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):not(.nav-link)::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-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):not(.nav-link):hover::before,
.comment-content-true a:not(.light-link):not(.nav-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link):not(.nav-link)::after,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after {
    border-bottom: 1px solid #23b7e5;
}
.content-copyright {
    overflow: hidden;
}

16、导航栏输出二级菜单

添加二级菜单字段

在/usr/themes/handsome/component/aside.php第87行左右$asideItemsOutput = "";后面添加如下内容：

$asideSecondItemsOutput = "";

修改二级菜单字段判断语句

将101-106行左右的下列字段：

if (@$itemTarget){
                          $linkStatus = 'target="'.$itemTarget.'"';
                      }else{
                          $linkStatus = 'target="_blank"';
                      }
                      if (trim($itemFeather)!==""){

替换为：

                  if (strtoupper($itemStatus) === 'SEC'){
                      if (trim($itemFeather)!==""){
                            $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" 
class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                      }else if (trim($itemClass)!==""){
                          $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                          }
                      }
                  else if (trim($itemFeather)!==""){

添加二级菜单输出语句

在125行左右的<?php if (@!in_array('component',$this->options->asideSetting)): ?>语句上面添加下列代码：

            <?php if (@$asideSecondItemsOutput): ?>
              <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-new-window"></i><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 echo @$asideSecondItemsOutput ?>
                </ul></li>
            <?php endif; ?>

使用方法

{"name":"归档","class":"glyphicon glyphicon-tasks","link":"https://www.cooyf.com/archive.html","target":"_self"},{"name":"PD网页版","class":"glyphicon glyphicon-cloud-download","link":"https://www.baiduwp.com/","status":"sec"},{"name":"百度盘提取码","class":"glyphicon glyphicon-link","link":"https://pnote.net/pan/","status":"sec"},{"name":"磁链转换","class":"glyphicon glyphicon-magnet","link":"http://www.torrent.org.cn/home/index/index.html","status":"sec"},{"name":"局域网传文件","class":"glyphicon glyphicon-transfer","link":"https://www.ssavr.com/","status":"sec"},{"name":"图床","class":"glyphicon glyphicon-picture","link":"https://sm.ms/","status":"sec"},{"name":"音乐解锁","feather":"music","link":"http://unlock.torfirefox.name/","status":"sec"},{"name":"网盘","feather":"hard-drive","link":"https://one.roro666.top/","status":"sec"}

"status":"sec"表示该栏目被当到二级栏目下

怕麻烦可以跳过上面

在124行下面，即下面代码下面：

<!-- /主页 -->
<?php endif; ?>
<?php echo @$asideItemsOutput ?>

添加下列代码：

<!--折叠菜单-->
<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-phone"></i>
    <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>
    <li>
      <a href="https://www.cooyf.com/mikutap/" class="auto" target="_blank">
        <span class="nav-icon">
          <!--下方为小栏目图标-->
          <i data-feather="slack"></i>
        </span>
        <span>mikutap</span></a>
    </li>
  </ul>
</li>
<!--/折叠菜单---->

Last modification：February 9th, 2020 at 10:34 pm

如果觉得我的文章对你有用，请随意赞赏

18 comments

小忆
March 1st, 2020 at 12:15 pm

楼主这个模板默认的动态背景怎么追还啊，看着好难受

Reply
1. cooyfAuthor
  March 1st, 2020 at 12:30 pm
  
  @小忆
  后台插件设置里面啊
  
  Reply
  1. 小忆
    March 1st, 2020 at 01:39 pm
    
    @cooyf
    啊，有插件的吗
    
    Reply
大白菜
February 23rd, 2020 at 05:19 pm

博主，修改首页文章宽度的css在哪行？

Reply
1. cooyfAuthor
  February 23rd, 2020 at 05:30 pm
  
  @大白菜
  handsome.min.css里面搜.app.container的width可修改整体宽度
  
  Reply
  1. 大白菜
    February 23rd, 2020 at 05:44 pm
    
    @cooyf
    你好，搜索到这么一些，但是，具体应该动哪个？不敢动啊，小白有点慌，
    
    Reply
    
    cooyfAuthor
    February 23rd, 2020 at 05:46 pm
    
    @大白菜
    @media (min-width: 1800px)
    .app.container {
    width: 1300px;
    }
    1300改成其他就行了，你可以先在浏览器F12修改。
    
    Reply
疯狂の猿猴
February 9th, 2020 at 05:14 pm

在文章顶部添加百度是否收录这个是不是无效自卫的，不管有没有收录都显示已收录

Reply
1. cooyfAuthor
  February 9th, 2020 at 10:12 pm
  
  @疯狂の猿猴
  这个代码是直接利用的百度搜索误差很大
  
  Reply
  1. 疯狂の猿猴
    February 12th, 2020 at 10:09 pm
    
    @cooyf
    你好，我问下，你回复我了后有个右键发到我邮箱，请问那个右键插件是哪款方便告知下载地址嘛？
    
    Reply
    
    cooyfAuthor
    February 12th, 2020 at 11:11 pm
    
    @疯狂の猿猴
    我用的LoveKKComment，其他的还有很多。你可以上handsome社区看一看
    
    Reply
kkzas
January 19th, 2020 at 06:26 pm

emm

Reply
1. cooyfAuthor
  January 19th, 2020 at 06:28 pm
  
  @kkzas
  ？
  
  Reply
six
December 19th, 2019 at 01:09 pm

博主，那个复制弹窗没效果呀，是不是还要引入啥其它资源文件

Reply
1. cooyfAuthor
  December 25th, 2019 at 05:24 pm
  
  @six
  https://pan.baidu.com/s/1Rvej_u0pkoCjEf7cgebrrQ放在assets/js/下
  
  Reply
剑豪
December 18th, 2019 at 09:42 pm

来看看，滴滴打开2019年12月18日21:42:23

Reply
xm
November 18th, 2019 at 04:23 pm

xm

Reply
1. cooyfAuthor
  November 18th, 2019 at 04:32 pm
  
  @xm
  ?
  
  Reply

Typecho基于handsome主题的一些美化

cooyf • 2019 年 11 月 02 日

1、盒子美化

盒子美化.gif

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

点击查看CSS

@charset "utf8";.entry-content{background-color:transparent}
.panel-small .post-meta{padding:25px 30px 15px 25px!important}
.panel-small .pos50t-meta{padding-left:25px;padding-right:25px}
.b-light{border-color:#bbb4}
.tip:before{margin-top:0!important}
.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small{transition:all .2s;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2)!important}
.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover{box-shadow:1px 1px 5px 5px rgba(0,160,0,0.5)!important}
.list-group-item{background-color:rgba(255,255,255,0)}
.thumb-lg{width:130px}
#widget-tabs-4-comments .list-group-item,#tag_toc,#sidebar,#post-content{background-color:transparent!important}
#alllayout.app-aside-folded .tooltip{display:none!important}
.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}
.standpage,aside,aside *{transition:all .3s}
.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}
.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.3)}
.wrapper-md article,.wrapper-md>#comments{border-radius:15px;overflow:hidden}
.bg-auto:before{bottom:51px}
.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:15px}
.index-post-img,.index-post-img-small{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}
.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a{transition:all .2s}
.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small{transform:scale(1.05)}
.streamline{margin-left:20px;padding-right:10px}
.streamline .comment-body{position:relative}
.streamline .comment-body .m-l-lg:before{content:" ";position:absolute;width:calc(100%+10px);height:calc(100%+20px);top:-10px;left:0;z-index:-1;border-radius:2px}
aside.col.w-md.no-border-xs{transition:all .3s}
.visible-xs-inline{display:inline-block!important}
@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}
}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}
#kotori:hover{left:0;bottom:0}
#kotori.hidekotori{left:-110px;bottom:-110px}
@media screen and (max-width:767px){#kotori{display:none}
.blog-post>.panel:hover .index-post-img .item-thumb{transform:none!important}
}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;padding-top:10px}
.max-img{max-height:400px}
.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}
.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}
.skPlayer-name{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}
html.fancybox-enabled{overflow-y:auto}
.blog-post .post-meta.wrapper-lg{padding-top:15px}
.share,.yellow,.red,.lblue,.green{background-position-y:50%}
body.modal-open{overflow-y:auto;padding-right:0!important}
.reply2view{background-color:transparent;border:solid 1px #bbb}
#content{transition:all .3s}
.OwO .OwO-logo{height:28px}
#tag_toc.fixed #toc{width:100%}
.page-navigator .next a,.page-navigator .prev a{height:31px}
.page-navigator>li:last-child>a,.page-navigator>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
#tooltip-1{width:0;height:0;overflow:hidden}
.tooltip-2{width:0;height:0;border:0}
.item-thumb-small{background-position:left}
@media screen and (min-width:1200px){.sticky{position:absolute;top:10px;left:15px}
.panel .item-thumb{height:300px;cursor:pointer;transition:all .6s}
#post-panel .blog-post{position:relative}
#post-panel .panel{overflow:hidden}
#post-panel .panel .post-meta{position:relative;margin-top:-300px;height:300px;padding-top:133px!important;padding-bottom:0!important;background-color:rgba(0,0,0,.3);transition:all .3s}
#post-panel .panel .post-meta,#post-panel .panel-small .post-meta{border-radius:15px}
#post-panel .panel .post-meta *,#post-panel .panel-small .post-meta *{color:#fff!important}
#post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2{text-align:center}
#post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div{transition:all .3s;transform:translateY(-10px);opacity:0}
#post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted{position:absolute;bottom:20px}
#post-panel .panel .post-meta>.line{position:absolute;bottom:40px;width:740px}
#post-panel .panel-small .post-meta>.line{position:absolute;bottom:40px;width:350px}
#post-panel .panel .post-meta>.summary{position:absolute;bottom:60px;width:740px}
#post-panel .panel-small .post-meta>.summary{position:absolute;bottom:60px;width:350px}
#post-panel .panel-small{display:inline-block;height:300px;width:calc(50% - 10px);margin-right:20px}
#post-panel .panel-small:nth-child(2n){margin-right:0}
#post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small{height:100%;width:100%}
#post-panel .panel-small .post-meta{position:absolute;height:300px;width:calc(50% - 10px);padding:133px 20px 0 20px!important;background-color:rgba(0,0,0,.3);transition:all .3s}
#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{background-color:rgba(0,0,0,.6)}
#post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div{opacity:1;transform:translateY(0)}
#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{padding-top:80px!important}
#post-panel .ahover{display:block;position:absolute;top:0;left:0;right:0;bottom:0}
.blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small{filter:blur(3px)}
}header.bg-light.wrapper-md{border:0;text-align:center}
header.wrapper-md *{}
header.wrapper-md h1{font-size:32px}
.link-main{padding:50px 0 50px 20px;text-align:center}
.link-main h3{margin-top:0}
.link-main .item{display:inline-block;letter-spacing:0;margin-right:20px;margin-bottom:20px;width:289px;height:240px;font-size:14px;overflow:hidden;border-radius:15px;border:1px solid #e1e8ed;transition:background .2s}
.link-main .link-bg{position:relative;height:90px;padding:0 1em}
.link-main .link-bg .bg:before{display:block;content:"";position:absolute;left:0;height:100%;width:100%}
.link-main .link-bg .link-avatar{position:absolute;bottom:-50px;border:4px solid #FFF;border-radius:100%;box-shadow:0 0 5px rgba(0,0,0,0.5)}
.link-main .link-bg .link-avatar img{border-radius:100%}
.link-main .avatar{display:block;object-fit:cover}
.link-main .bg,.link-main .link-bg{background-repeat:no-repeat;background-position:center;background-size:cover;display:block}
.link-main .bg{position:absolute;top:0;bottom:0;left:0;right:0;filter:blur(1.5px)}
.link-main .meta{padding:.9em 1em;text-align:right}
.link-main .info{color:#525766;padding:0 1em 1em}
.link-main .info .name{font-weight:600;font-size:16px}
@media screen and (max-width:330px){.link-main{padding:50px 0 50px 0}
.link-main .item{margin-right:0}
}.link-main .item:hover .bg{filter:blur(0.1px)}
#comments pre code{display:inline}
.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}
.hideContent{background-color:transparent;padding:10px 0}
.agent{display:inline-block;margin-left:5px;padding:0 3px;border-radius:2px;color:#58666e;font-size:12px;opacity:.8}
img[mw400]{max-width:400px!important;width:100%}
.mw400{max-width:400px}
.alert-warning{text-align:center;border:0;max-width:1100px;margin:0 auto}
textarea#comment{border-radius:15px}
.item-thumb:hover{transform:scale(1.06)}
.img-full{width:100px;border-radius:50%;animation:light 4s ease-in-out infinite;transition:0.5s}
@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}
}.btn-pay{animation:star 0.5s ease-in-out infinite alternate}
@keyframes star{from{transform:scale(1)}
to{transform:scale(1.1)}
}.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)}

在/usr/themes/handsome/libs/Content.php文件后添加

<a href="{$parameterArray['linkUrl']}" class="ahover"></a>

2、头像呼吸光环和悬停旋转

头像.gif

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义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;
    }
}
/*评论头像旋转*/
.img-circle {
    transition: all 0.3s;
}
.img-circle:hover {
    transform: rotate(360deg);
}

3、文章内图片悬停放大

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章内图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

4、文章内打赏图标跳动

打赏.gif

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

5、给网站添加加载耗时显示

加载耗时.png

在/usr/themes/handsome/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>

位置如下图：
加载耗时代码位置.png

6、复制弹框和彩虹标签云

复制弹框.png
标签云.png

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript

复制弹框需要将放在/handsome/assets/js/下

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功！');};
<!--彩色标签云-->
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;
});

7、在文章页右侧添加标签云

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

8、在文章顶部添加百度是否收录

这东西误差大，没什么卵用

在handsome/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;
    }
}

然后在handsome/post.php约80行下添加代码

<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>

9、动态标签页标题

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义输出head头部的HTML代码即可

<!--动态标题-->
<script>var OriginTitile=document.title,titleTime;document.addEventListener("visibilitychange",function(){if(document.hidden){$('[rel="shortcut icon"]').attr("href","https://www.cooyf.com/logo.ico");document.title="你别走吖 Σ(っ °Д °;)っ";clearTimeout(titleTime)}else{$('[rel="shortcut icon"]').attr("href","https://www.cooyf.com/logo.ico");document.title="你可算回来了 (｡•ˇ‸ˇ•｡)"+OriginTitile;titleTime=setTimeout(function(){document.title=OriginTitile},2000)}});</script>

10、博主介绍动态字体

打开后台-外观-设置外观-开发者设置-复制代码粘贴至博主的介绍即可

<!--博主介绍的闪字特效-->
<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>

11、为 Typecho编辑器增加 HTML标签支持

12、给handsome增加更多表情包

下载地址：
提取码：9nko

1.将表情包图片上传至/usr/themes/handsome/usr/img/emotion

2.然后替换或者修改/usr/themes/handsome/usr/OwO.json

3.修改/usr/themes/handsome/assets/css/handsome.min.css表情大小如下：

.comment-content-true img {
    max-width: 6%!important
}

13、文章标题美化

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*
 * 文章一二三四级标题美化
 */
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

14、首页预览头图走cos

/libs/Content.php第715行左右

$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined

修改为（xxx填写自己的cos地址）：

$random = 'https://xxx/' . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined

15、超链接美化

删除/usr/themes/handsome/assets/css/handsome.min.css下原超链接CSS：

.comment-content-true a:hover,.wrapper-lg .entry-content a:not(.nav-link):hover {
    color: #222;
    border-bottom-color: #222
}

.comment-content-true a,.wrapper-lg .entry-content a:not(.nav-link) {
    color: #3f88bf;
    border-bottom-color: #222;
    border-bottom: 1px solid #3f88bf;
    word-wrap: break-word;
    word-break: break-all
}

添加如下CSS：

/*超链接特效*/
.comment-content-true a:not(.light-link):not(.nav-link),
.wrapper-lg .entry-content a:not(.light-link):not(.nav-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):not(.nav-link):hover,
.comment-content-true a:not(.light-link):not(.nav-link):focus,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus {
    color: #fff;
}
.comment-content-true a:not(.light-link):not(.nav-link)::before,
.comment-content-true a:not(.light-link):not(.nav-link)::after,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-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):not(.nav-link)::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-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):not(.nav-link):hover::before,
.comment-content-true a:not(.light-link):not(.nav-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link):not(.nav-link)::after,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after {
    border-bottom: 1px solid #23b7e5;
}
.content-copyright {
    overflow: hidden;
}

16、导航栏输出二级菜单

添加二级菜单字段

在/usr/themes/handsome/component/aside.php第87行左右$asideItemsOutput = "";后面添加如下内容：

$asideSecondItemsOutput = "";

修改二级菜单字段判断语句

将101-106行左右的下列字段：

if (@$itemTarget){
                          $linkStatus = 'target="'.$itemTarget.'"';
                      }else{
                          $linkStatus = 'target="_blank"';
                      }
                      if (trim($itemFeather)!==""){

替换为：

                  if (strtoupper($itemStatus) === 'SEC'){
                      if (trim($itemFeather)!==""){
                            $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" 
class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                      }else if (trim($itemClass)!==""){
                          $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                          }
                      }
                  else if (trim($itemFeather)!==""){

添加二级菜单输出语句

在125行左右的<?php if (@!in_array('component',$this->options->asideSetting)): ?>语句上面添加下列代码：

            <?php if (@$asideSecondItemsOutput): ?>
              <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-new-window"></i><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 echo @$asideSecondItemsOutput ?>
                </ul></li>
            <?php endif; ?>

使用方法

{"name":"归档","class":"glyphicon glyphicon-tasks","link":"https://www.cooyf.com/archive.html","target":"_self"},{"name":"PD网页版","class":"glyphicon glyphicon-cloud-download","link":"https://www.baiduwp.com/","status":"sec"},{"name":"百度盘提取码","class":"glyphicon glyphicon-link","link":"https://pnote.net/pan/","status":"sec"},{"name":"磁链转换","class":"glyphicon glyphicon-magnet","link":"http://www.torrent.org.cn/home/index/index.html","status":"sec"},{"name":"局域网传文件","class":"glyphicon glyphicon-transfer","link":"https://www.ssavr.com/","status":"sec"},{"name":"图床","class":"glyphicon glyphicon-picture","link":"https://sm.ms/","status":"sec"},{"name":"音乐解锁","feather":"music","link":"http://unlock.torfirefox.name/","status":"sec"},{"name":"网盘","feather":"hard-drive","link":"https://one.roro666.top/","status":"sec"}

"status":"sec"表示该栏目被当到二级栏目下

怕麻烦可以跳过上面

在124行下面，即下面代码下面：

<!-- /主页 -->
<?php endif; ?>
<?php echo @$asideItemsOutput ?>

添加下列代码：

<!--折叠菜单-->
<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-phone"></i>
    <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>
    <li>
      <a href="https://www.cooyf.com/mikutap/" class="auto" target="_blank">
        <span class="nav-icon">
          <!--下方为小栏目图标-->
          <i data-feather="slack"></i>
        </span>
        <span>mikutap</span></a>
    </li>
  </ul>
</li>
<!--/折叠菜单---->

1、盒子美化

2、头像呼吸光环和悬停旋转

3、文章内图片悬停放大

4、文章内打赏图标跳动

5、给网站添加加载耗时显示

6、复制弹框和彩虹标签云

7、在文章页右侧添加标签云

8、在文章顶部添加百度是否收录

9、动态标签页标题

10、博主介绍动态字体

11、为 Typecho编辑器增加 HTML标签支持

12、给handsome增加更多表情包

13、文章标题美化

14、首页预览头图走cos

15、超链接美化

16、导航栏输出二级菜单

添加二级菜单字段

修改二级菜单字段判断语句

添加二级菜单输出语句

使用方法

怕麻烦可以跳过上面

18 comments