建议收藏备忘，本文涉及代码操作的地方皆有注释，以便后期修改

这本教程所用方法仅适于Handsome主题，其他主题未尝试

自定义

评论打卡

打卡

是一个 记录 与 互动 的巧妙设计。看到网上有部分站长在自己的博客中加入了 评论打卡 这一功能，个人觉得还不错，于是决定动手魔改一下。

下面是本站引入了 一键评论打卡 功能的实现过程，请有需要的站长按需"食用"，先看前、后效果：
BRL%@CUFZILL}}TC(%%(29U.png

⚠️ 注意：本教程仅在 Handsome 主题下通过测试，其它平台请自行 DIY 。

第一步：打开 Handsome 主题目录下的 component/comments.php 文件，找到并删除如下内容：

 <div class="comment-form-comment form-group">
                        <label class="padder-v-sm" 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 padder-v-sm"></div>
                        <?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
                        <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>
                        <?php endif; ?>
                    </div>

接着在相同位置，加入以下 HTML 代码：

<div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?> 
                            <span class="required text-danger">*</span></label>
                            <span class="required text-danger">（请使用真实邮箱地址，方便及时接收评论回复！）</span>
                        <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" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></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>

第二步：在后台 --> 设置外观 --> 开发者设置 --> 自定义JavaScript 加入以下代码:

function addNumber(a) {
        var b = (new Date).toLocaleDateString()
        var c = (new Date).toLocaleTimeString()
        var length = document.getElementById("comment").value.length;
        if (length > 0) {
            document.getElementById("comment").focus()
            document.getElementById("comment").value += '\n' + a + b + c
        } else {
            document.getElementById("comment").focus()
            document.getElementById("comment").value += a + b + c
        }
    }

第三步：在后台 --> 设置外观 --> 开发者设置 --> 自定义CSS 加入以下代码:

/*一键评论打卡css代码*/
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

此时，已完成所有所需步骤，刷新网页即可看到新的评论效果！

转自https://wuqintai.com/archives/2058.html


首页头像转动并放大 

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


自定义滚动条滑块 

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}


复制成功提示


复制成功提示
使用方法：

复制下面代码到 handsome主题>设置外观>开发者设置>自定义 JavaScript

 /* 复制成功提示代码开始 */ 
        kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
    $.message({
        message: "尊重原创，转载请注明出处！<br> 本文作者：小小孩子们<br>原文链接："+sitesurl,
        title: "复制成功",
        type: "warning",
        autoHide: !1,
        time: "5000"
        })
    }}
    /* 复制成功提示代码结束 */


Handsome底部页脚标签

  1. 添加自定义css

添加代码至后台>自定义 CSS

/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

    text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

    background-color: #ABBAC3;

    margin-bottom: 3px;
}

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

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

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-zise {
    background-color:#F08080 !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}
  1. 选择显示位置

打开Handsome主题设置>博客底部左侧信息添加以下代码

<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-brightgreen">XXX</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn">
     <span class="badge-subject">鲁ICP备</span>
     <span class="badge-value bg-red">2021028951号</span>
</a>

打开 Handsome主题设置>博客底部右侧信息添加以下代码

<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-orange">Typecho</span>
</a>
  1. 删除多余代码

位置在125-140行之间
删除usr/themes/handsome/component/footer.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>

© <?php echo date("Y"); ?> Copyright


点击飘出二十四字核心价值观 

/* 鼠标特效 */
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(); 
        }); 
    }); 
})


更换HarmonyOS字体


1.安装AliceStyle插件
2.下载HarmonyOS字体-HarmonySanc

这是官方开放开发文档，大家可以自行下载，不过我已经将.ttf文件上传到jsdeliver上了，大家最后引用一下就可以了！
3.开启插件并使用字体

jsdeliver储存云端字体Sanc地址

此处内容需要评论回复后（审核通过）方可阅读。

转自小屁的博客


博主介绍打字效果 

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

插件推荐

AliceStyle 一款超强大的handsome美化插件，还支持后台美化

Sitemap 生成sitemap的插件，自带百度推送

InvalidLinks handsome友链失效检查

Copyright 利用自定义字段功能灵活地在文章或独立页面尾部显示版权小尾巴。

最后修改：2022 年 06 月 05 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏