[JavaScript知识库]Typecho Handsome主题美化教程

首页标题居中

主题设置-开发者设置-自定义CSS

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

多彩标签云

主题设置-PJAX-PJAX回调函数
主题设置-开发者设置-自定义JS

let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

赞赏按钮跳动

主题设置-开发者设置-自定义CSS

/*赞赏按钮跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

滑动条美化

主题设置-开发者设置-自定义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: #FFC0CB;
    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
}

复制右上角显示版权

主题设置-开发者设置-自定义JS

/* 复制成功提示代码开始 */ 
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！<br> 本文作者：xxx<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "3000"
    })
}}
/* 复制成功提示代码结束 */

LOGO美化 扫光效果 同样适用于WordPress

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

.cutline span {
    background-color: rgb(236, 237, 238);
    border: 1px solid #d6d6d6;
    font: 12px Arial,Microsoft JhengHei;
    padding: 2px 4px;
    position: relative;
    top: -10px;
}
.post-copyright {
    font-size: 13px;
    margin: 8px 0;
    padding: 10px;
    border-left: 4px solid #3bd58a;
    background-color: rgba(220, 220, 220, 0.1);
    list-style: none;
    word-break: break-all;
    position: relative;
    overflow: hidden;
}
.post-copyright li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.post-copyright a {
    color: rgba(0, 120, 231, 1);
    text-decoration: none;
    transition: color .1s;
}

主题文件-post.php-页脚广告位下方

<!--版权信息&正文结束分割线-->
            <div class="cutline">
            </div>
             <ul class="post-copyright">
                <li class="post-copyright-author"><strong>本文作者：</strong><?php $this->author(); ?></li>
                <li class="post-copyright-link"><strong>本文链接：</strong><a href="<?php $this->permalink() ?>" title="<?php $this->title() ?>"><?php $this->permalink() ?></a></li>
                <li class="post-copyright-license"><strong>版权声明：</strong>本博客所有文章除特别声明外，均默认采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><strong> CC BY-NC-SA 4.0 </strong></a> 许可协议。</li>
            </ul>