该站的所有修改项均在本文列出,实际效果看本站即可。若您也想拥有类似的效果,欢迎借鉴~~

注意:以下代码出现/* */<!-- -->// 字符均为注释,即不会有实际效果,仅仅是给人看的一个标记。
在这里不建议删除,因为会影响后期修改时的辨别。悉知~

为了给小白讲明白,这里记录的已经很细了。老博主的话,拿着代码按自己意愿改即可,懂得都懂~

[scode type="green" size=""]这篇文章作为本站美化的记录,有新增时会实时更新。[/scode]
[scode type="green" size=""]如果您有好玩的效果也欢迎在评论区提出,若可以的话我也会加到文章并实现其效果。[/scode]
[scode type="green" size=""]更新时间:2023-10-21[/scode]

本站环境:

[scode type="yellow" size=""]PHP:PHP-8.0[/scode]
[scode type="yellow" size=""]MySQL:MySQL 5.7[/scode]
[scode type="yellow" size=""]Typecho:1.2.1正式版[/scode]
[scode type="yellow" size=""]HandSome 9.2.1 Pro 主题版本[/scode]
[scode type="yellow" size=""]其他版本的Typecho和HandSome不确定其可行性,请自行测试~[/scode]

[collapse title="食用插件" status="false"]

typecho插件

  1. AbnormalLinks 异常友链检查插件
  2. AccessoriesPro 附件下载增强插件
  3. BaiduTextCensor 内容审核API过滤评论敏感内容
  4. Clogin 彩虹聚合登录
  5. Handsome handsomePro
  6. ErcerLink handsome友链快速申请
  7. ShortLinks 外链转内链插件
  8. CommentNotifier 评论通过时发送邮件提醒
  9. UserAgent 显示评论人使用的操作系统和浏览器信息
  10. TePass 支付会员中心
  11. BlueSky LskyPro企业版图床

[/collapse]

[collapse title="浏览器动态标题" status="false"]

浏览器动态标题

主题设置-开发者设置-自定义输出body尾部的HTML代码添加以下代码

</script>

<!--浏览器动态标题开始-->
<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
         document.title = 'ヽ(●-`Д´-)ノ我藏好了哦!';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
         document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~!' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>
<!--浏览器动态标题结束-->

[/collapse]

[collapse title="博主介绍" status="false"]

博主介绍

将以下代码加入后台设置->博主介绍中,当然,介绍文字要改成你自己的。

</script>

<!--博主介绍闪字效果开始-->
<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 = ["No one indebted for others,while many people don\'t know how to cherish others."].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>
<!--博主介绍闪字效果结束-->

[/collapse]

[collapse title="网站加载耗时" status="false"]

网站加载耗时

在主题的functions.php文件中添加以下代码

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

访客总数

在主题的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 text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
<span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

[/collapse]

[collapse title="全站字数" status="false"]

全站字数

在主题的functions.php文件中添加以下代码

//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}

然后再/usr/themes/handsome/component/sidebar.php中添加以下代码

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
               <span class="badge 
           pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

[/collapse]

[collapse title="在线人数" status="false"]

在线人数

在主题的functions.php文件中添加以下代码

//在线人数开始
    function online_users() {
        $filename='online.txt'; //数据文件
        $cookiename='Nanlon_OnLineCount'; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER['REQUEST_TIME']; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode('|',$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)<=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid='U'.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,'w')){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=>$ftime){ 
                    $fline=$fuid.'|'.$ftime."\n"; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo "$total_online"; 
    }

然后再/usr/themes/handsome/component/sidebar.php中添加以下代码

<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>

[/collapse]

[collapse title="添加二维码" status="false"]

添加二维码

/usr/themes/handsome/component/sidebar.php中添加以下代码

<section  id="blog_qrurl" class="widget widget_categories wrapper-md clear">

        <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
          <h5 class="widget-title m-t-none text-md"><?php _me("移动端阅读") ?></h5>
          <style>
              #qrcode img{
                  max-width: 100%;
              }
              @media (max-width: 767px){
                  #qrcode{
                      display: none;
                  }
              }

          </style>
          <div id="qrcode"></div>
          <script>
            var elText = window.location.href;
            new QRCode(document.getElementById("qrcode"), elText);
          </script>

      </section>

[/collapse]

[collapse title="评论添加一键打卡" status="false"]

评论添加一键打卡

主题设置 - 开发者设置 - 自定义JavaScript 和 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();
        elseif (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 = (newDate).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子!::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章!::funny:03:: ")
    }
};

主题目录的component/comments.php里面的130行左右参照下面代码进行修改

<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("开启该功能,您的评论仅作者和评论双方可见") ?>">

主题设置 - 开发者设置 - 自定义CSS 添加以下代码

.secret_comment {
    top: 5px;
}
.OwO.OwO-open.OwO-body {
    display:table
}

[/collapse]

[collapse title="打赏图片" status="false"]

打赏图片

<style>
.support-author{background-repeat:round;background-image:url(https://blog.dwoyun.com/file/MenheraSauce.png);}.article__reward-info{color:#00a0ed!important;font-weight:bold;}</style>

[/collapse]

[collapse title="文章中嵌入网页" status="false"]

文章中嵌入网页

在文章中添加代码即可,将链接地址修改为你需要展示的网站地址

<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>

[/collapse]

[collapse title="网站加载完成提示" status="false"]

网站加载完成提示

复制下面代码到 handsome主题>设置外观>开发者设置>自定义 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"
})
/* 网站加载完成提示结束 */

[/collapse]

[collapse title="预加载页面实现网站页面秒开 - instant.page" status="false"]

预加载页面实现网站页面秒开 - instant.page

GitHub项目:https://github.com/instantpage/instant.page

bootcdn加速:
https://www.bootcdn.cn/instant.page/

<script type="module" src="https://cdn.bootcss.com/instant.page/3.0.0/instantpage.js"></script>

定义预加载

白名单标签属性​: data-instant ,例:

<a href="https://blog.dwoyun.com/" data-instant>呆窝云</a>

黑名单标签属性​: data-no-instant ,例:

<a href="https://www.baidu.com" data-no-instant>百度</a>

全局允许​:在 <body> 中添加 data-instant-allow-query-string 属性

局部允许​:在使用的标签中添加 data-instant 属性(和白名单属性一样)

仅预加载部分指定链接(白名单模式)​:如果只想预加载特定的链接,请在 <body> 中添加一个 data-instant-whitelist 标签,并通过向其添加 data-instant 属性来标记要预加载的链接。

[/collapse]

[collapse title="评论增加图片上传" status="false"]

评论增加图片上传

复制下面代码到174行 /usr/themes/handsome/component/comments.php

<script LANGUAGE="JavaScript">  function openimgtp() {window.open ("https://stock.dwoyun.com/", "newwindow", "height=600, width=800, top=100px,left=400px,toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")} </script> 

                            <div class="padder-v-sm smallscreen">
                                    <span style="display: inline-block;padding: 0;width: 66px;height: 24px;color: #99a2aa;border-radius: 4px;position: relative;z-index: 101;font-size: 12px;text-align: center;line-height: 23px;margin-top: 3px;background: #fff;">
                                    <a data-chevereto-pup-trigger data-target="#comment" onclick="openimgtp()" title="上传到图床后插入HTML代码">
                                        <span class="smile-icons">
                                        <i class="fontello fontello-picture text-muted"></i>
                                        </span>
                                        <span class="OwOlogotext">图片</span>  
                                    </a></span>

                                    <span class="OwO padder-v-sm" title="表情"></span>
                             </div>

[/collapse]

Last modification:December 14, 2023
如果觉得我的文章对你有用,请随意赞赏,但也要理性!