handsome主题美化教程

主题功能

访客总数

• 在主题functions.php中添加以下代码，注意将ty_表前缀修改为自己的表前缀

//总访问量
    function theAllViews()
        {
            $db = Typecho_Db::get();
            $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `ty_contents`');
                echo number_format($row[0]['SUM(VIEWS)']);
        }

• 再在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>

加载耗时

• 在主题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;
    }

• 再在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>

全站字数

• 在 component/sidebar.php的开头加入下面的代码:

<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>

• 在 component/sidebar.php中添加以下代码

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
               <span class="badge 
           pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

在线人数统计

• 在主题functions.php中插入以下代码

//在线人数
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"; 
}

• 在component/sidebar.php中调用

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

主题美化

主题文件说明

component/aside.php 左边导航栏
component/comments.php 评论区
component/footer.php 底部版权、音乐播放器之类
component/header.php 页面头，没啥要改的
component/headnav.php 顶部导航
component/say.php 时光机动态
component/sidebar.php 右侧栏目
component/third_party_comments.php 3.3.0新增，第三方评论
css/ 博客CSS，一般不要改
fonts/ 博客字体，一般不要改
img/ 图像，一般不要改
js/ js文件，一般不要改
lang/ 语言文件
libs/Content.php 文章内容
libs/... 一般不要改
usr/ 另一个语言文件？
404.php 404界面
archive.php 整合
booklist.php 书单
cross.php 时光机
files.php 归档
functions.php 配置界面的东西
guestbook.php 留言板
index.php 首页
links.php 友链
page.php 文章页面整合
post.php 文章输出
 
color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色

访问个性化提示

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "5000"
})
</script>

左上角博主信息背景羽毛

/* 羽毛_css */
    .dropdown.wrapper {
    background:url(https://羽毛地址) right bottom no-repeat;
    }

头像呼吸光环

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

背景海浪特效

• 以下代码放在自定义头部

<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(0, 255, 255, 0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 197, 197, 0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(101, 255, 222, 0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(0, 255, 255, 1.0)"></use>
            </g>
        </svg>
    </div>

• 以下代码添加到自定义css中

/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(0, 255, 255);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%); } }

全站黑白模式

/*开启黑白模式*/
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>
    .gn_box {
        border: none;
        border-radius: 15px;
    }
    .gn_box {
        padding: 10px 14px;
        margin: 10px;
        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;
    }
</style>
<div class="gn_box">
    <h1>
        <font color=#E80017>2</font>
        <font color=#D1002E>0</font>
        <font color=#BA0045>2</font>
        <font color=#A3005C>4</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"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span
                id="t_s"> 秒</span></div>
    </center>
    <script type="text/javascript">
        function getRTime() {
            var EndTime = new Date('2024/02/10 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);
            var day = document.getElementById("t_d");
            if (day != null) {
                day.innerHTML = d + " 天";
            }
            var hour = document.getElementById("t_h");
            if (hour != null) {
                hour.innerHTML = h + " 时";
            }
            var min = document.getElementById("t_m");
            if (min != null) {
                min.innerHTML = m + " 分";
            }
            var sec = document.getElementById("t_s");
            if (sec != null) {
                sec.innerHTML = s + " 秒";
            }
        }
        setInterval(getRTime, 1000);
    </script>
</div>

左上角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, 250, 250, .4);
    -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;
    }
}

404页面自动返回

• 在<h1 class=”text-shadow text-white”>404</h1>约91行下添加以下代码

<br>
<small class="text-muted letterspacing">
<b id="sp">3</b> 秒自动返回<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立即返回</a>

• 再在底部添加以下代码

<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=3;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>

• 其中可将3改为其他时长

博主介绍闪字效果

• 将以下代码加入后台设置->博主介绍中，当然，介绍文字要改成你自己的

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

自定义字体

• 在自定义CSS中加入以下内容
• 链接修改为自己字体地址，并修改字体名

/*设置全站字体*/
@font-face {
    font-family: HarmonyOS_Sans_SC_Medium;
    font-style: normal;/*字形*/
    font-display: swap;/*切换方式*/
    src: url(字体地址) format('woff2')
}
* {
    font-family: HarmonyOS_Sans_SC_Medium
}
body {
    /*
    body,h1,h2,p,li {
        */
    font-family: HarmonyOS !important;
    font-size: 14px;/*全站字体大小*/
    /*
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    */
}

等距标签云

• 在后台开发者自定义css中添加以下代码

/*等距标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 31%;
}

控制台输出

• 自定义JavaScripts设置中添加以下代码即可

console.clear(); 
console.log("\n %c Calm As If As Ease","color:#fff;background:linear-gradient(90deg,#448bff,#44e9ff);padding:5px 0;");

时光机圆形头像

• 在后台设置自定义css中加入以下代码

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

文章内图片悬浮

• 在css中添加以下代码

/*文章内图片悬浮*/
.entry-thumbnail {
    overflow: hidden;
}

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

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

Panel阴影

• 在后台自定义css中加入以下代码

/*panel盒子四周阴影淡蓝色*/
.app.container {
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.35);
}
    /*灰色box-shadow: 0 0 20px rgba(0, 0, 0, 0.16) !important;*/

浏览器右侧滚动条

• 在开发者自定义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
}

复制提醒

• 将以下代码加入到自定义js中

//复制提醒
$("body").bind('copy',
        function(e) {
            copytips()
        })        
 function copytips() {
      var sitesurl=window.location.href;
        $.message({
            message: "尊重原创，转载请注明出处！<br> 本文作者: 静若安然<br>原文链接：" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "1500"
        })
    }

文章底部版权

• 在主题根目录下post.php文件中php echo Content::exportPayForAuthors(); (大概在87行左右)添加以下代码

<!--版权声明开始-->
      <div class="entry-content l-h-2x">
        <div style="border-top: 2px dotted #00ffff96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
          <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
           </div>
           <div style="padding: 10px;background: rgba(255, 255, 255, 0.2);font-size: 13px;border-left: 3px solid;text-align: left;">
           <span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
           <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
           <span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
           <span>版权说明：若无注明，本文皆 <a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a> 原创，转载请保留文章出处。</span>
          </div>
       </div>
<!--版权声明结束-->

文章插入网页

• 直接在文章中插入代码

<iframe src="页面网址" allowfullscreen="" mozallowfullscreen="" msallowfullscreen="" oallowfullscreen="" webkitallowfullscreen="" width="100%" height="500px" frameborder="0"></iframe>

• 自定义框架大小

<style type="text/css">
.video-container { display: block; position: relative; width: 100%; height: 0; overflow: hidden; box-sizing: border-box } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; border: none; width: 100%; height: 100% } .video-ratio-16by9 { padding-bottom: 56.25% /* 9/16 */ } .video-ratio-4by3 { padding-bottom: 75% /* 3/4 */ }
</style>
<div class="video-container video-ratio-16by9">
<iframe src="页面网址" allowfullscreen="" mozallowfullscreen="" msallowfullscreen="" oallowfullscreen="" webkitallowfullscreen="" frameborder="0"></iframe>
</div>

打赏图标跳动

• 在后台开发者自定义css中加入以下代码

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

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

    to {
        transform: scale(1.1);
    }
}

音乐本地解析

• 在后台全局播放器设置中设置

{"title":"歌名","author":"歌手","url":"音乐地址","pic":"封面地址"}
{"title":"歌名","author":"歌手","url":"音乐地址","pic":"封面地址"}

网页标题显示城市

• 在自定义body中添加以下代码

<!--网页标题加入访问用户当前的城市名-参数请空-->
    　　　　<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6yAoynmTPNlTBa8z1X4LfwGE"></script>
    　　　　<div id="bdMapBox" style="display:none;"></div>
    　　　　<script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("bdMapBox");
        var nowCity = new BMap.LocalCity();
        nowCity.get(bdGetPosition);

        function bdGetPosition(result) {
            var cityName = result.name; //当前的城市名
            /*自定义代码*/
            document.title = cityName + " 自定义名称";
            /*城市名后自定义网页标题参数*/
        }
    </script>

网页动态标题

• 在自定义js中添加以下代码

// 设置title
    let OriginTitile = document.title
    let titleTime
    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        document.title = '死鬼去哪里了！'
        clearTimeout(titleTime)
      } else {
        document.title = '(つェ⊂)咦!又好了!'
        titleTime = setTimeout(function() {
          document.title = OriginTitile
        }, 2000)
      }
    })

一言修改为古诗

• 在主题index.php中找到以下代码

<small class="text-muted letterspacing indexWords">
  <?php if (@!in_array( 'hitokoto',$this->
    options->featuresetup)) { $this->options->Indexwords(); }else{ echo '加载中……';
    echo '
    <script>
      $.ajax({
        type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
'
    </script>
    '; } ?>
</small>

• 替换为以下代码，也可修改为自己接口

<small class="text-muted letterspacing indexWords"><span id="jinrishici-sentence">正在加载今日诗词....</span>
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
</small>

头像旋转

• 在自定义CSS加入以下代码

/*头像旋转*/
.thumb-lg {
    width: 96px;
}
.avatar {
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
}
.avatar:hover {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}
#aside-user span.avatar {
    animation-timing-function: cubic-bezier(0, 0, .07, 1) !important;
}
#aside-user span.avatar:hover {
    transform: rotate(360deg) scale(1.2);
    border-width: 5px;
    animation: avatar .5s
}