基于handsome主题的一些美化总结

用了handsome主题有一段时间了

[scode type="blue"]每当看到别人的博客或者网站有非常好玩的、很酷的、绚丽的效果总想着让自己的博客也要和他们一样的效果，于是便千方百计的找教程如何实现，从此就走上了乐此不疲的瞎折腾之路，而且是越走越远！[/scode]

进入正题:

好了，废话不多话，我们继续折腾 ::aru:shy:: ......

首页头像转动并放大


    .thumb-lg{
        width:130px;
    }

    .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;
        border:0 solid
    }

    #aside-user span.avatar:hover{
        transform:rotate(360deg) scale(1.2);
        border-width:5px;
        animation:avatar .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);
        }
    }

首页文章版式圆角化

   /*首页文章版式圆角化*/
    .panel{
        border: none;
        border-radius: 15px;
    }

    .panel-small{
        border: none;
        border-radius: 15px;
    }

    .item-thumb{
        border-radius: 15px;  
    }

首页文章版式阴影化

   /*panel阴影*/
    .panel{
       box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }

    .panel:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }

    .panel-small{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }

    .panel-small:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }

图片抖动效果

    img:hover {
    -webkit-animation:sucaijiayuan 1s .1s ease both;
    -moz-animation:tada 1s .1s ease both;
    }
    @-webkit-keyframes sucaijiayuan {
    0% {
    -webkit-transform:scale(1)
    }
    10%, 20% {
    -webkit-transform:scale(0.8) rotate(-2deg)
    }
    30%, 50%, 70%, 90% {
    -webkit-transform:scale(1.1) rotate(2deg)
    }
    40%, 60%, 80% {
    -webkit-transform:scale(1.1) rotate(-2deg)
    }
    100% {
    -webkit-transform:scale(1) rotate(0)
    }


----------

优化 Typecho 评论管理图片&视频显示布局错乱

编辑文件：/admin/css/style.css
在文件末端粘贴以下代码并保存

   /* Comment management picture & video display layout out of order */
.comment-content img { border: 0; max-height: 240px; max-width: 480px; }
.comment-content video { border: 0; max-height: 240px; max-width: 480px; }

自定义滚动条滑块

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
        width: 3px;
        height: 16px;
        background-color: rgba(255,255,255,0);
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: rgba(255,255,255,0);
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;

文章标题居中

.panel h2{
        text-align: center; 
    }
    .post-item-foot-icon{
        text-align: center;
    }

自定义鼠标样式

    body {
        cursor:url('鼠标指针图片链接'), auto;
    }
    select, input, textarea, a, button {
        cursor:url('鼠标指针图片链接'), auto;
    }
    input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
        cursor:url('鼠标指针图片链接'), auto;
    }

鼠标点击特效

编辑文件：/component/footer.php

/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("奶子", "萝莉", "御姐", "少妇", "大白腿", "制服", "美乳" ,"少女", "娇妻", "女王", "萝莉控", "奶狗"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
});

一言随机句子API

添加至handsome主题后台初级设置首页一行文字介绍
PHP接口随机句子调用代码:

<script src="https://api.qqder.com/yan/api.php"></script>

PHP接口 ——选自散文集《我在人间凑数的日子》调用代码:

<script src="https://api.qqder.com/share/api.php"></script>

其他API调用地址：https://api.qqder.com/

使用CDN后获取用户真实IP

typecho博客放在config.inc.php文本内

    //防止 CDN 造成无法获取客户真实 IP 地址
    if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
    {
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
    }

强制博客加载HTTPS

typecho博客放在config.inc.php文本内

    /** 开启HTTPS */
    define('__TYPECHO_SECURE__',true);

博主的介绍打字介绍效果

将以下代码添加至后台-外观-初级设置-博主的介绍：

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

评论一键打卡赞踩

1.设置外观-开发者设置-自定义JavaScript

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

2.PJAX回调函数也加入以上代码

3.然后在主题目录component/comments.php
里面搜索 OwO padder-v-sm（目测134行）

    <!-- 打卡代码开始 -->
    <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'">
        <div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div>
    </div>
    <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'">
        <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div>
    </div>
    <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'">
        <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div>
    </div>
    <!-- 打卡代码结束 -->

4.设置外观-开发者设置-自定义CSS

    /*私密评论按钮位置*/
    .secret_comment {
    top: 5px;
    }
    .OwO.OwO-open .OwO-body {
    display:table
    }

访客总数统计

在usr/themes/handsome/functions.php文件中添加以下统计代码

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

在usr/themes/handsome/component/sidebar.php文件中插入以下调用代码

<li class="list-group-item"><i class="glyphicon glyphicon-user text-muted"></i><span class="badge
pull-right">**<?php** **echo** theAllViews();**?>**</span>**<?php** _me(**"访客总数"**) **?>**</li>

网站加载完成信息显示

复制一下代码到设置外观-开发者设置-自定义 JavaScript

/* 网站加载完成提示代码开始 */ 
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: "3000"/*弹框显示的时长(ms)*/
})
/* 网站加载完成提示代码结束 */

文章结尾底部版权说明

文件所在路径为 网站根目录/usr/themes/handsome/post.php

     <!--版权声明开始-->
                 <div class="entry-content l-h-2x">
                   <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);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>
<!--版权声明结束-->

右侧边栏添加访客总数与响应耗时

首先在主题 usr/themes/handsome/libs/Content.php文件里加入以下统计代码
放在class Content{}之前，也就是if (!defined('TYPECHO_ROOT_DIR')) exit; 代码的下面

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

/**
 * * 加载时间
 * * @return bool
 * */
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 标签位置，可以先搜索最后活动，你就能看到很多 li 标签了，和他们一样的位置就行。
![li 标签][1]

<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="eye"></i></span> <span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="check"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

右侧边栏添加岁月不饶人

首先在主题 usr/themes/handsome/component/sidebar.php文件里加入以下统计代码
放在<?php endif; ?>之后
![岁月不饶人][2]

<!-- 时间倒计时代码开始 -->
    <section id="blog_info" class="widget widget_categories wrapper-md clear">
        <h5 class="widget-title m-t-none text-md"><?php _me("岁月不待人") ?></h5>
    <div class="sidebar sidebar-count">
        <div class="content">
            <div class="item" id="dayProgress">
                <div class="title">今日已经过去<span></span>小时</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-1"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="weekProgress">
                <div class="title">这周已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-2"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="monthProgress">
                <div class="title">本月已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-3"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="yearProgress">
                <div class="title">今年已经过去<span></span>个月</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-4"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
        </div>
    </div>
         </section>
    <!-- 时间倒计时代码结束 -->

将以下代码放入后台-外观设置-开发者设置-自定义css

/* 时间倒计时 */
.sidebar-count .content {
    padding: 15px
}

.sidebar-count .content .item {
    margin-bottom: 15px
}

.sidebar-count .content .item:last-child {
    margin-bottom: 0
}

.sidebar-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}

.sidebar-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}

.sidebar-count .content .item .progress {
    display: flex;
    align-items: center
}

.sidebar-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 30px 0
    }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-percentage {
    color: var(--info)
}

添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部

<!-- 时间倒计时 -->  
<script src="https://blog.cchosts.cn/usr/themes/handsome/assets/js/timeinfo.js"></script>

typecho后台文章列表按照文章cid排序

发布了几篇定时文章，导致这些文章一直在文章管理页面置顶不方便整理其他内容，改为按照文章cid排序。
每新建一篇文章基本上都会自动增加一个CID号，所以等同于文章创建时间的排序，方便管理

打开这个文件var/Widget/Contents/Post/Admin.php

找到$select->order('table.contents.created', Typecho_Db::SORT_DESC)

将其改为$select->order('table.contents.cid', Typecho_Db::SORT_DESC)

Typecho 设置附件上传不重命名

修改typecho/var/Widget/Upload.php

      //获取文件名
        //$fileName = sprintf('%u', crc32(uniqid())) . '.' . $ext; 
        //修改不重命名附件

        $fileName = $file['name'];
        $path = $path . '/' . $fileName;

解决Typecho出现问题

切换标签实现网页标题变化看着挺装逼的

1.这里采用的typecho.handsome主题
放在footer.php文件的最后body标签外：
2.也可以放html&php网页中
放在网页最后body标签外：


    <!--切换标签实现网页标题变化-->
        /*自动刷新页面，避免无法访问*/
        var OriginTitile = document.title;
        var titleTime;
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                            document.title  = '..(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚ 宝贝别走啊 - 风轻寒云';
                clearTimeout(titleTime);
                        }
            else {
                            document.title = 'ヾ(ﾟ∀ﾟゞ)还好你回来了！';
                titleTime = setTimeout(function() {
                    document.title = OriginTitile;
                }, 3000);
                        }
        });    
    </script>
```PHP
----------


<!--相逢何必曾相识-->
[scode type="blue"]本站为非盈利性个人网站
本帖所有资源整合转载于网络，如果侵犯了您的权利，请及时联系我删除！
如果我的文章打动了你的内心或者对你有帮助请不妨打赏我一杯咖啡！[/scode]

版权属于：晨狐博客
本文链接：https://www.liuzhuai.com/archives/1.html
转载时须注明出处及本声明

LiuZhuAi