handsome主题美化教程

图片[1]-handsome主题美化教程-Senc森辞知识分享站

主题功能

访客总数

  • 在主题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
}
© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码

    暂无评论内容