本帖仅为整合与分享,非博主原创

正文结束并添加版权声明


在 handsome/post.php内 <?php $this->options->adContentPost(); ?> <?php endif; ?> 下面添加以下内容

<!--版权声明开始-->
<div class="entry-content l-h-2x">
<div style="border-top: 2px dotted #8e8e8e96;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(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>
<!--版权声明结束-->

页脚自定义美化

第一步 将以下CSS代码添加到 主题设置-开发者设置-自定义CSS

/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

/*这是优化底部栏的css,应该不会影响没开启炫酷透明功能时候的主题,如果有问题就删除下面这行即可*/
.wrapper {
  padding: 11px;
}

第二步 将以下HTML代码添加到 主题设置-开发者设置-博客底部左侧信息

<!-- 博客底部左侧信息 -->
<div class="github-badge">
<a href="https://www.678wl.cn/" arget="_blank" rel="noopener noreferrer" title="©2021 Airsado">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2021 Airsado</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://beian.miit.gov.cn" target="_blank" title="准备中">
<span class="badge-subject">呜呜呜</span><span class="badge-value bg-green">未到时候</span>
</a>
</div>

第三步 将以下HTML代码添加到 外观设置-开发者设置-博客底部右侧信息

<!-- 博客底部右侧信息 -->
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

第四步 删掉多余版权代码,在网站目录下找到 /handsome/component/foot.php 搜索 版权信息 然后将以下代码删掉

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
href="https://www.ihewro.com/archives/489/">handsome</a>
<span class="text-ellipsis">© <?php echo date("Y"); ?> Copyright 

彩色标签云

第一步 将以下js代码填入 主题设置-开发者设置-自定义JavaScript

<!--彩色标签云-->

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

第二步 将以下代码填入 pjax-pjax回调 即可

<!--彩色标签云&博客信息-->
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;
});

JsDelivr静态加速地址

使用的是 GitHub+JsDelivr 实现静态加速

handsome8.1.0静态加速

https://cdn.jsdelivr.net/gh/chenbanghui/BlogAssets8.1.0/assets/

右键菜单自定义

将以下代码放进博客模板的 自定义body尾部的HTML代码 内(17、23、24行修改为自己的链接)

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
        <style type="text/css">
            a {text-decoration: none;}
            div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
        (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
            div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
            div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
            div.usercm ul li a{color:#666;padding:0 15px;display:block}
            div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
            div.usercm ul li a i{margin-right:10px}
            a.disabled{color:#c8c8c8!important;cursor:not-allowed}
            a.disabled:hover{background-color:rgba(255,11,11,0)!important}
            div.usercm{background:#fff !important;}
            </style>
        <div class="usercm" style="left: 199px; top: 5px; display: none;">
            <ul>
                <li><a href="https://huajidashu.com/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
                <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
                <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
                <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
                <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
                <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
                <li><a href="https://huajidashu.com/links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>  
                   <li><a href="https://huajidashu.com/ly.html"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li>
            </ul>
        </div>
        <script type="text/javascript">
            (function(a) {
                a.extend({
                    mouseMoveShow: function(b) {
                        var d = 0,
                            c = 0,
                            h = 0,
                            k = 0,
                            e = 0,
                            f = 0;
                        a(window).mousemove(function(g) {
                            d = a(window).width();
                            c = a(window).height();
                            h = g.clientX;
                            k = g.clientY;
                            e = g.pageX;
                            f = g.pageY;
                            h + a(b).width() >= d && (e = e - a(b).width() - 5);
                            k + a(b).height() >= c && (f = f - a(b).height() - 5);
                            a("html").on({
                                contextmenu: function(c) {
                                    3 == c.which && a(b).css({
                                        left: e,
                                        top: f
                                    }).show()
                                },
                                click: function() {
                                    a(b).hide()
                                }
                            })
                        })
                    },
                    disabledContextMenu: function() {
                        window.oncontextmenu = function() {
                            return !1
                        }
                    }
                })
            })(jQuery);

            function getSelect() {
                "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")
            }
            function baiduSearch() {
                var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
                "" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
            }
            $(function() {
                for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
                    d = !1;
                    break
                }
                d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
            });
            </script>

页面、文章抖动害怕效果

效果<a class="Pshake">滑稽大叔 </a>

第一步 将以下CSS代码复制粘贴并保存在 主题后台-开发者设置-自定义CSS

/*抖动害怕*/
.Pshake{
    display: inline-block;
    will-change: transform; /*可以删除*/
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
        transform-origin: center center;
    -webkit-animation: Pshake_Crazy 1s ease-in-out infinite;
            animation: Pshake_Crazy 1s ease-in-out infinite;
}
@keyframes Pshake_Crazy{
    10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);}
    20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);}
    30%{transform:translate(1.5px,0.5px) rotate(0.5deg);}
    40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);}
    50%{transform:translate(2.5px,1.5px) rotate(1.5deg);}
    60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);}
    70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);}
    80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);}
    90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);}
    0%,100%{transform:translate(0,0) rotate(0);}
}

第二步 将以下代码填入 主题设置-开发者设置-自定义JavaScript

<!--抖动害怕-->
function random_keyframes(){
    var a='@keyframes Pshake_Crazy{',b='%{transform:translate(',c='px,',d='px) rotate(',e='deg);}', f='0%,100%{transform:translate(0,0) rotate(0);}}',g='',i=1, 
        jitter=30 /*抖动幅度 >=10*/ , level=1 /*抖动程度 1~99*/;
    function XYRrandom(){
        let _xyr_num=((~(Math.random()*jitter))+(~~(Math.random()*jitter)) )/10;
    return _xyr_num;}
    for (i; i<100; i+=level) {
        g=i+b+XYRrandom()+c+XYRrandom()+d+XYRrandom()+e;a=a+g;
    }
return a+f;}

使用方法

<a class="Pshake">滑稽大叔</a>

左侧栏彩色图标

第一步 将以下js代码保存在 主题后台-开发者设置-自定义JavaScript

<!--左侧栏图标彩色-->
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

第二步 将以下代码填入 pjax-pjax回调

<!--左侧栏图标彩色-->
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

去除首页顶部博客名称

打开 /usr/themes/handsome/index.php 文件,删除以下代码(41-43行)

<?php if ($index_show) :?>
                <h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>
                <?php endif; ?>

一键评论打卡功能

首先在 后台-设置外观-开发者设置-自定义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).toLocaleString(),
    c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function () {
        a(c, "滴!访客卡!请上车的乘客系好安全带,现在是:" + b)
    }
};

然后在 后台-设置外观-PJAX-回调函数 加入以下代码:

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).toLocaleString(),
    c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function () {
        a(c, "滴!访客卡!请上车的乘客系好安全带,现在是:" + b)
    }
};

打开主题目录的 handsome/component/comments.php里面的 126行到 141 行替换为以下代码:

                <div class="comment-form-comment form-group">
                    <label for="comment"><?php _me("评论") ?>
                        <span class="required text-danger">*</span></label>
                    <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                    <div class="OwO" style="display: inline;"></div>
                                        <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>
                    <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                    data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
                        <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                        <div class="secret_comment_check">
                            <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                <input type="checkbox" id="secret_comment_checkbox">
                                <i></i>
                            </label>
                        </div>
                    </div>
                </div>

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

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

handsome/component/sidebar.php添加显示代码,这个 li标签位置,可以先搜索 最后活动,你就能看到很多 li标签了,和他们一样的位置就行。

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

END
本文作者:
文章标题:Typecho Handsome主题Blog美化记录(备忘)
本文地址:https://huajidashu.com/archives/8.html
版权说明:若无注明,本文皆滑稽大叔原创,转载请保留文章出处。
最后修改:2021 年 08 月 26 日 04 : 17 PM