已根据Handsome 10.1版本更改部分代码

一、我使用的插件

插件名描述版本下载地址
HandsomehandsomePro 主题配套插件10.1ihewro
ShortLinks把外部链接转换为指定内部链接1.2.1Github
BaiduTextCensor百度文本内容审核，过滤评论中的敏感内容1.2.0下载链接
CommentNotifier基于Typecho1.2.0的评论邮件提醒插件1.9.2Github

不再使用KirinShiKi 神代綺凜式魔改主题插件，需要的可查看KirinShiKi魔改插件样式文件分享：适配 Handsome 10.1 文章

二、文章尾部添加版权信息

在Handsome/post.php内 <!--/文章的页脚部件：打赏和其他信息的输出-->的注释后，</div>前，添加以下内容
(Handsome 10.1版本在92行附近)

<!--版权声明开始-->
<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>
<!--版权声明结束-->

三、页脚信息美化

将以下代码添加到主题设置-开发者设置-自定义js中，删除自带的版权声明。

//仅测试了
$('#footer a[href="https://typecho.org/"]').remove();
$('#footer span:contains("Theme by handsome")').closest('a').remove();
//删除年份版权声明
$('#footer .text-ellipsis').contents().filter(function() {
    return this.nodeType === 3 && this.textContent.indexOf('©') !== -1;
}).remove();

添加以下代码到主题设置->开发者设置->自定义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
}

将下列代码修改后分别填写到 主题设置->开发者设置->博客底部左/右侧信息中即可。

<!-- 博客底部左侧信息 -->
<div class="github-badge">
<a href="./" title="©2021 网站名字">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">网站名字</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://beian.miit.gov.cn" target="_blank" title="备案号文字">
<span class="badge-subject">X ICP备</span><span class="badge-value bg-green">XXXXXXXX号</span>
</a>
</div>
<!-- 博客底部右侧信息 -->
<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>

三、右侧栏显示网站总阅读量

在网站根目录创建api文件夹,内部创建sumread.php，文件内容如下

<?php 
include('../config.inc.php');
function theAllViews(){
             $db = Typecho_Db::get();
             //t_contents中下划线前的t改为你安装typecho时的数据库前缀
             $row = $db->fetchAll('SELECT SUM(VIEWS) as sumview FROM `t_contents`');
                 echo $row[0]['sumview'];
     }
theAllViews();
?>

此时可访问https://你的域名/api/sumread.php查看是否显示总的阅读量，如果正常显示，就将以下代码添加到主题设置-开发者设置-自定义js中

//总阅读数
function sumread(){
    if ($('#sumread').length === 0) {
        $('#blog_info ul').append('<li class="list-group-item text-second"> <i class="glyphicon glyphicon-eye-open text-muted"></i> <span id="sumread" class="badge pull-right">加载中</span>总阅读数</li>');
    }
    $.post("/api/sumread.php", function(sumread) {
        $("#sumread").html(sumread);
    });
}

最后在主题设置-PJAX-PJAX回调函数添加sumread();使切换文章时阅读数量跟着更新。

四、屏蔽F12 以及复制提示

将以下代码添加到主题设置-开发者设置-自定义js中，记得修改其中的博客名字。

//复制弹框
$("body").bind('copy',
        function(e) {
            copytips()
        })
//禁用F12
document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        event.keyCode=0;
        event.returnValue=false;
    }

}           
 function copytips() {
      var sitesurl=window.location.href;
        $.message({
            message: "尊重原创，转载请注明出处！<br> 本文作者:博客名<br>原文链接：" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "1500"
        })
    }

五、标题卖萌

将以下代码添加到主题设置-开发者设置-自定义js中

var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "网页已崩溃！";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来了！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

六、点击社会主义核心价值观特效

将以下代码添加到主题设置-开发者设置-自定义js中

var a_idx = 0;
$('<style>@keyframes coreValue{from{transform:translateY(0);opacity:1}to{transform:translateY(-160px);opacity:0}}</style>')
    .appendTo('head');
$("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.clientX,
        y = e.clientY;
    $i.css({
        "z-index": 100000000,
        "top": y - 20,
        "left": x,
        "position": "fixed",
        "pointer-events": "none",
        "font-weight": "bold",
        "color": "#ff6651",
        "animation": "coreValue 1.5s ease forwards"
    });
    $("body").append($i);
    setTimeout(function() {
        $i.remove();
    }, 1500);
});
最后修改：2026 年 06 月 17 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏或点击右侧广告位(若看不到请关闭广告屏蔽)