首页 网站优化,朝夕不倦

前言

非本站原创,本站只优化了部分代码

教程

[collapse title="鼠标样式美化" status="false"]

  1. 首先准备好鼠标的图片样式,也可F12下载我的样式
  2. 然后在 后台-->设置外观-->开发者设置-->自定义 CSS下加入一下代码:
/*鼠标样式*/
body {
    cursor: url('鼠标样式'), auto
}
a, [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: url('鼠标放在链接上的样式'), auto !important
}

[/collapse]

[collapse title="Typecho下实现一键评论打卡功能" status="false"]

  1. 首先在 后台-->设置外观-->开发者设置-->自定义JavaScript后台-->设置外观-->PJAX-->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)
    }
};
  1. 打开主题目录的 handsome/component/comments.php里面的 126行到 141
    样板

将内容替换为以下代码:

                    <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?> <span class="required text-danger">(请使用真实邮箱地址,方便接收评论回复)</span>
                            <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 fontello-user face"></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>

成果图
评论区样式
[/collapse]

[collapse title="给网站添加访客计数统计" status="false"]
首先在主题 handsome/libs/Content.php文件里加入以下统计代码,放在class Content{}之前

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

示例图
访客及耗时统计示例图
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>

示例图
访客显示示例图
[/collapse]

[collapse title="给网站添加加载耗时显示" status="false"]
首先在主题 handsome/libs/Content.php文件里加入以下统计代码,放在class Content{}之前

//加载耗时
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 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>

示例图
耗时显示示例图
[/collapse]

[collapse title="首页文章列表悬停上浮" status="false"]
后台-->设置外观-->开发者设置-->自定义CSS添加以下代码:

/*首页文章列表悬停上浮-大头图*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

/*首页文章列表悬停上浮-图片版式*/
.blog-post .panel-picture:not(article) {
    transition: all 0.3s;
}

.blog-post .panel-picture:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

/*首页文章列表悬停上浮-小头图*/
.blog-post .panel-small:not(article) {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

[/collapse]

[collapse title="彩色标签云" status="false"]
后台-->设置外观-->开发者设置-->自定义 JavaScript添加以下代码:

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

[/collapse]

[collapse title="浏览器动态标题" status="false"]
后台-->设置外观-->开发者设置-->自定义输出body 尾部的HTML代码添加以下代码:

<!--浏览器动态标题开始-->
<script>
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
            document.title = 'ヽ(●-`Д´-)ノ我藏好了哦!';
            clearTimeout(titleTime);
        } else {
            $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
            document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~!' + OriginTitle;
            titleTime = setTimeout(function () {
                document.title = OriginTitle;
            }, 2000);
        }
    });
</script>
<!--浏览器动态标题结束-->

[/collapse]

[collapse title="博客底部页脚标签样式" status="false"]
首先在 后台-->设置外观-->开发者设置-->自定义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: #3F51B5
}

将以下代码添加至 后台-->设置外观-->开发者设置-->博客底部左侧信息,信息自己修改

<div class="github-badge">
    <a href="./" title="©2020 飛行艇">
        <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020 飛行艇</span>
    </a>
</div>
|
<div class="github-badge">
    <a href="http://beian.miit.gov.cn/" target="_blank" title="沪ICP备 20021314号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"),
    pointer;">
    <span class="badge-subject">沪ICP备</span><span class="badge-value bg-green">20021314号</span>
    </a>
</div>

将以下代码添加至 后台-->设置外观-->开发者设置-->博客底部右侧信息

<div class="github-badge">
    <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"),
    pointer;">
    <span class="badge-subject">Powered</span><span class="badge-value bg-purple">Typecho</span>
    </a>
</div>
|
<div class="github-badge">
    <a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"),
    pointer;">
    <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
    </a>
</div>

添加完成后,去 handsome/component/footer.php删除原有声明代码,替换以下代码(大概1~12行)

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
      </span>
        <span class="text-ellipsis">&copy;&nbsp;<?php
            $this->options->BottomleftInfo(); ?></span>
    </div>

[/collapse]

[collapse title="右侧列表导航栏图标颜色" status="false"]
后台-->设置外观-->开发者设置-->自定义CSS添加以下代码:

/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

[/collapse]

[collapse title="文章页面实现长久没有更新文章的提示" status="false"]
样式来于sword,并进行更新!
打开 handsome/post.php,添加在 <div id="post-content" class="wrapper-lg">后面

<div class="tip inlineBlock share" rel="nofollow">
    <p>
        本文最后更新于<?php echo date('Y年m月d日' , $this->modified);?>,
        已超过<?php echo floor((time()-($this->modified))/86400);?>天没有更新。
        如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
    </p>
</div>

[/collapse]

[collapse title="博客logo更换" status="false"]
[scode type="green"]样式来于Naraku,由于大神写的并不是很懂,这里就按照我自己的理解方式出个教程[/scode]

  1. 首先在NameCheap制作自己的logo,只需要填写英文字,图标稍后再说
  2. 然后按F12,选中logo后,找到svg下面的path,将path全部复制
    log文字演示
  3. 将下面 logo文字部分的path标签替换为之前复制的内容,这样文字部分就完成了
  4. 图标部分同理,先去阿里图标库找自己喜欢的图标
  5. 按F12,将 logo图标部分下面的path替换为svg下面的path。然后将代码复制到 后台-->设置外观-->初级设置-->博客logo的HTML结构log图标演示
<svg viewBox="-30 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="jsx-2263963463 artboard-inner" style="width: 265px;height: 300px;" fill="#707070">
<!--logo文字部分-->
<g id="logo_text"><path d="M0.16 6.64L0.16 1.96L2.10 1.96L2.10 5.85L4.05 5.85L4.05 1.96L5.69 1.96L5.69 7.51L5.02 7.51L5.02 7.75L5.69 7.75L5.69 11.73L4.08 11.73L4.08 11.73Q4.05 11.73 4.05 11.70L4.05 11.70L4.05 7.48L2.10 7.48L2.10 11.70L2.10 11.70Q2.10 11.73 2.06 11.73L2.06 11.73L0.44 11.73L0.44 6.64L0.16 6.64ZM5.69 7.75L5.69 7.51L6.56 7.51L6.56 7.75L5.69 7.75ZM7.10 1.93L7.10 1.93L8.95 1.93L8.95 1.93Q8.98 1.94 8.98 1.97L8.98 1.97L8.98 6.73L8.98 6.73Q8.98 6.76 8.95 6.76L8.95 6.76L8.73 6.76L8.73 11.70L8.73 11.70Q8.73 11.73 8.70 11.73L8.70 11.73L7.10 11.73L7.10 11.73Q7.07 11.73 7.07 11.70L7.07 11.70L7.07 6.64L6.58 6.64L6.58 6.64Q6.54 6.64 6.54 6.61L6.54 6.61L6.54 6.40L6.54 6.40Q6.55 6.36 6.58 6.36L6.58 6.36L7.07 6.36L7.07 1.97L7.07 1.97Q7.08 1.93 7.10 1.93ZM8.03 6.36L7.08 6.36L7.08 6.64L8.03 6.64L8.03 6.36ZM9.28 10.60L9.28 2.00L11.19 2.00L11.19 3.83L11.19 3.83Q11.19 4.74 11.16 5.80L11.16 5.80L11.16 5.82L11.18 5.82L11.18 5.82Q11.41 5.37 12.47 3.51L12.47 3.51L12.47 3.51Q13.01 2.57 13.01 2.09L13.01 2.09L13.01 2.00L14.97 2.00L14.97 2.04L14.97 2.04Q14.97 2.98 14.21 4.09L14.21 4.09L13.04 5.78L14.18 8.21L15.22 8.21L15.22 8.50L14.05 8.50L14.05 8.52L14.05 8.52Q14.33 9.13 14.42 9.24L14.42 9.24L14.63 9.24L14.63 10.12L14.92 10.12L14.92 11.72L14.92 11.72Q14.42 11.73 14.18 11.73L14.18 11.73L13.71 11.73L13.71 11.73Q13.46 11.73 13.02 11.72L13.02 11.72L13.02 10.65L12.60 10.65L12.60 9.24L12.35 9.24L12.09 8.50L14.04 8.50L14.04 8.21L12.26 8.21L12.26 8.21Q12.26 8.18 11.94 7.23L11.94 7.23L11.93 7.23L11.93 7.23Q11.76 7.54 11.27 8.21L11.27 8.21L12.09 8.21L12.09 8.50L11.19 8.50L11.19 8.98L11.07 8.98L11.07 11.20L11.19 11.20L11.19 11.70L11.19 11.70Q11.19 11.73 11.16 11.73L11.16 11.73L9.31 11.73L9.31 11.73Q9.28 11.73 9.28 11.70L9.28 11.70L9.28 10.93L10.14 10.93L10.14 10.60L9.28 10.60ZM11.26 8.21L10.06 8.21L10.06 8.50L11.18 8.50L11.18 8.50Q11.18 8.45 11.26 8.21L11.26 8.21ZM19.26 1.95L19.26 1.95L19.26 1.95Q21.37 1.95 22.03 3.42L22.03 3.42L22.03 3.42Q22.41 4.14 22.41 6.19L22.41 6.19L22.41 6.23L21.68 6.23L21.68 6.56L22.41 6.56L22.41 10.10L21.93 10.10L21.93 11.37L20.98 11.37L20.98 11.73L17.66 11.73L17.66 11.37L17.25 11.37L17.25 10.10L16.40 10.10L16.40 9.10L16.91 9.10L16.91 8.57L16.40 8.57L16.40 9.10L15.19 9.10L15.19 8.57L16.11 8.57L16.11 8.57Q16.09 7.38 16.09 6.74L16.09 6.74L16.09 5.91L16.09 5.91Q16.09 3.58 16.88 2.80L16.88 2.80L16.88 2.80Q17.60 1.95 19.26 1.95ZM18.07 5.32L18.07 5.32L18.09 5.32L18.07 5.35L18.07 6.23L17.34 6.23L17.34 6.56L18.07 6.56L18.07 6.56Q18.05 8.67 18.05 9.75L18.05 9.75L18.05 10.10L19.69 10.10L19.69 9.56L20.44 9.56L20.44 9.54L20.44 9.54Q20.44 8.54 20.43 6.75L20.43 6.75L20.43 6.75Q20.43 6.68 20.44 6.38L20.44 6.38L20.44 6.38Q20.44 4.45 20.21 4.01L20.21 4.01L20.21 4.01Q19.98 3.58 19.36 3.58L19.36 3.58L19.12 3.58L19.12 3.58Q18.38 3.58 18.20 4.24L18.20 4.24L18.20 4.24Q18.12 4.56 18.07 5.32ZM22.41 6.56L22.41 6.23L23.58 6.23L23.58 6.56L22.41 6.56ZM23.14 6.33L23.14 1.94L25.03 1.94L25.03 7.12L24.14 7.12L24.14 7.39L25.03 7.39L25.03 8.36L25.03 8.36Q25.03 9.69 25.50 9.91L25.50 9.91L25.50 9.91Q25.74 10.06 26.09 10.06L26.09 10.06L26.67 10.06L26.67 8.34L27.19 8.34L27.19 1.94L29.06 1.94L29.06 7.96L28.38 7.96L28.38 8.39L29.06 8.39L29.06 8.39Q29.05 8.61 29.05 8.72L29.05 8.72L29.05 10.64L28.06 10.64L28.06 11.73L23.69 11.73L23.69 10.38L23.28 10.38L23.28 6.33L23.14 6.33ZM25.03 7.39L25.03 7.12L26.09 7.12L26.09 7.39L25.03 7.39ZM29.16 3.57L29.16 1.93L34.90 1.93L34.90 3.57L33.00 3.57L33.00 10.34L33.86 10.34L33.86 10.54L33.00 10.54L33.00 11.29L32.48 11.29L32.48 11.55L32.85 11.55L32.85 11.73L31.10 11.73L31.10 11.73Q31.07 11.73 31.07 11.70L31.07 11.70L31.07 3.57L29.16 3.57ZM32.98 10.34L32.32 10.34L32.32 10.54L32.98 10.54L32.98 10.34ZM35.12 6.80L35.12 2.00L39.92 2.00L39.92 3.60L39.92 3.60Q39.92 3.63 39.88 3.63L39.88 3.63L37.04 3.63L37.04 5.74L39.59 5.74L39.59 5.76L39.59 5.76Q39.59 5.84 39.56 6.79L39.56 6.79L39.56 6.79Q39.54 6.79 39.54 6.80L39.54 6.80L39.66 6.80L39.66 7.29L37.45 7.29L37.45 9.29L36.85 9.29L36.85 9.49L37.45 9.49L37.45 10.10L39.95 10.10L39.95 10.32L39.75 10.32L39.75 11.52L36.76 11.52L36.76 11.73L35.33 11.73L35.33 8.24L35.12 8.24L35.12 7.01L33.56 7.01L33.56 6.80L35.12 6.80ZM35.94 6.80L35.14 6.80L35.14 7.01L35.94 7.01L35.94 6.80ZM41.25 1.93L41.25 1.93L43.09 1.93L43.09 1.93Q43.12 1.94 43.12 1.97L43.12 1.97L43.12 6.73L43.12 6.73Q43.12 6.76 43.09 6.76L43.09 6.76L42.88 6.76L42.88 11.70L42.88 11.70Q42.88 11.73 42.84 11.73L42.84 11.73L41.25 11.73L41.25 11.73Q41.21 11.73 41.21 11.70L41.21 11.70L41.21 6.64L40.72 6.64L40.72 6.64Q40.69 6.64 40.69 6.61L40.69 6.61L40.69 6.40L40.69 6.40Q40.69 6.36 40.72 6.36L40.72 6.36L41.21 6.36L41.21 1.97L41.21 1.97Q41.22 1.93 41.25 1.93ZM42.17 6.36L41.23 6.36L41.23 6.64L42.17 6.64L42.17 6.36Z"></path></g>
<!--logo图标部分-->
<g transform="translate(-25 -5) scale(0.02)"><path d="M447.061333 496.298667L254.634667 194.56l82.389333-22.101333 296.576 273.92 224.512-60.16a64 64 0 0 1 33.109333 123.648L252.416 680.96l-33.109333-123.648 10.282666-2.773333 105.258667 104.32-112.042667 30.037333a42.666667 42.666667 0 0 1-48.341333-20.48L62.549333 466.773333l61.824-16.554666 105.216 104.32 217.472-58.282667zM170.666667 810.666667h682.666666v85.333333H170.666667v-85.333333z"></path></g> </svg>

[/collapse]

[collapse title="添加“百度是否收录”判断的方法" status="false"]
handsome/libs/Content.php文件里新增下面函数

//判断内容页是否百度收录
function baidu_record() {
    $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    if(checkBaidu($url)==1){
        echo "百度已收录";
    }
    else{
        echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录!\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
    }

function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
        return 1;
    } else {
        return -1;
    }
}

handsome/post.php页面中 <!--分类-->代码下面进行调用:

             <!--百度收录-->
             <li><span class="post-icons"><i class="fa fa-search"></i></span><span>百度收录:<?php echo baidu_record() ?></span></li>

示例图:
百度是否收录示例
[/collapse]

[collapse title="Hansome元素抖动效果" status="false"]
[scode type="green"]样式来于phenxso,本人仅仅添加小部分代码进行完善[/scode]

  1. 首先给需要颤抖元素加上class属性:Pshake
<div class="Pshake">My Name Is Wu Rao Kong Shan</div> 
  1. Pshake一个 display属性 inline-block,使得元素可以超出父元素颤抖,否则只能原地颤抖。
  2. 加上 will-change属性,开启GPU渲染加速,防止在低性能设备中造成卡顿。will-change属性可能会造成元素层叠顺序混乱(z-index混乱)过度使用可能造成反向优化 !
  3. transform-origin: center center;进行中心定位。这个属性需要在前面加上 -webkit--ms-进行内核适配
  4. animation: name duration timing-function infinite; 四个属性分别为:动画名称、动画多少时间内完成、如何进行动画周期、无限循环

后台-->设置外观-->开发者设置-->自定义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;
}

现在元素的属性就全部设置好了。下面进行动画的帧的制作。动画帧可以按照自己想要的抖动方式进行 下面是 sample仅供参考。你可以在动画帧中添加更多。在 translate、rotate、opacity等等多种属性中进行组合。
关键帧越多抖动越疯狂!

后台-->设置外观-->开发者设置-->自定义CSS添加以下代码:

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

如上所说【关键帧越多抖动越疯狂!】但是手动写好多好麻烦,不想写啊。而且上面那一串看的头都大。
那么 emmmm.....不写了。
用JS自动生成吧。
后台-->设置外观-->开发者设置-->自定义输出head 头部的HTML代码添加以下代码:

<!--添加抖动效果-->
<script>
    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 = 40 /*抖动幅度 >=10*/, level = 10 /*抖动程度 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;
    }

    const rkstyle = document.createElement('style');
    rkstyle.type = 'text/css';
    rkstyle.innerHTML = random_keyframes();
    document.getElementsByTagName('head')[0].appendChild(rkstyle);
</script>

打开网页调用上方的函数 random_keyframes()就会随机生成关键帧。这样每次刷新网页、打开网页抖动的频率都不一样了。
[/collapse]

[collapse title="文章内加一个正文结束并添加版权声明" status="false"]
handsome/post.php<?php echo Content::exportPayForAuthors(); ?>下面添加以下内容

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

实例
正文结束并添加版权声明
[/collapse]

[collapse title="首页全站友链显示图片" status="false"]
handsome/component/aside.php里面大约210行的地方修改代码,在a标签内加上
全站友链显示图片

<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=

[/collapse]

[collapse title="滚动条显示位置百分比" status="false"]
修改handsome/component/header.php中,复制以下代码,放在body标签下(最后一行)

<div id="percentageCounter"></div>

实例
滚动条显示位置百分比

后台-->设置外观-->开发者设置-->自定义CSS添加以下代码:

//加载显示
#percentageCounter {
    position:fixed;
    left:0;
    top:0;
    height:3px;
    z-index:99999;
    background-color:#448EF6;
}

后台-->设置外观-->开发者设置-->自定义JavaScript添加以下代码:

//加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

[/collapse]

[collapse title="Hansome主题专用的UserAgent插件" status="false"]
[scode type="green"]样式来于松鼠の博客,并进行更新!
此处就不再写了[/scode]
[/collapse]

[collapse title="HandsomeCall插件" status="false"]
[scode type="green"]样式来于Wibus,并进行更新!
此处就不再写了[/scode]
[/collapse]




文章评论

    dong 访客ChromeWindows
    2020-12-19 14:25   回复

    正文结束并版权申明那个地方书写有误,添加的地址位置应为 <?php echo Content::exportPayForAuthors(); ?>下面
    而非文中描述的<?php echo Content::postContent($this,$this->user->hasLogin());?>下方。

      雾绕空山 站长ChromeWindows
      2020-12-23 9:47   回复

      是的,已经修改好了,多谢提醒

    污梦 访客ChromeAndroid
    2020-09-11 9:14   回复

    插眼

    孤鸿 访客ChromeWindows
    2020-08-2 7:40   回复

    博主你好,我可以转载你的这篇文章吗?做个笔记存档!!

      雾绕空山 站长SafariMac
      2020-08-12 16:11   回复

      可以啊,已经帮你修改评论了