插件类

本小节为插件推荐

统计访客信息

Typecho 仿 (?) 百度统计插件

没错这个插件就是仿百度统计的。

插件描述:获取访客信息,生成统计图表,由@一名宅 部分优化重构。

博客使用版本:V2.0.2

作者: Kokororin

现阶段功能:

  • 查看 IP/UV/PV
  • ip 归属地使用淘宝 API
  • 管理员登录时不记录日志
  • 查看来源页和来源域名排名
  • 修复 Referer 记录错误的 bug
  • 添加删除日志的功能

使用须知

  • 插件更新升级时,请先禁用插件后再上传
  • 插件目录名请修改为Access

Wiather-高德天气插件

我的作品,新版本更新了专属于Handsome主题的提醒方式

Live2D

Live2D 一款基于爆胎看板娘js的插件
也是我的作品

HandsomeCall

一款专属于Handsome的信息提示插件
也是我的作品

WowScroll

WowScroll 一款基于wow.js的元素初次加载动画插件
https://keymoe.com/archives/55/


代码类

本小节主要为修改代码、增加代码

首页站点名称居中

名称居中

/* 首页站点名称居中 */
header.bg-light.lter.wrapper-md {
text-align: center;
}

评论区添加表情

我做了几个表情包的,其中推荐添加QQ表情~
我做的表情包一览 https://blog.iucky.cn/tag/%E8%A1%A8%E6%83%85%E5%8C%85/



右侧列表导航栏图标颜色

图标颜色

/* 右侧列表导航栏图标颜色 */
.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;}

头像下方的博主的介绍

博主的介绍

对应的,在handsome外观中选项:“博主的介绍”中,添加以下代码:

 <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) } /*在后面把Just Uaeua修改就好了*/ var l = "", o = ["Just Uaeua" ].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>

复制代码后,看 /*在后面把Just Uaeua修改就好了*/后面的Just Uaeua,修改它就可以变成你想要的文字了

博客元素抖动效果

左侧栏图标彩色

图标彩色

自定义Javascript和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});  


复制弹框

复制弹框

可以使用HandsomeCall插件
一款专属于Handsome的信息提示插件


更人性化~

  1. handsome用户直接在 模版设置-开发者设置-自定义输出head头部的html代码中输入:
<!--复制弹框JS-->
<script src="https://www.mgxfd.club/layer/layer.js"></script>

自定义Javascript中输入

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};
  1. 其他博客用户,在 <\/head>之前添加第一段,在head前添加第二段即可

添加百度收录检测

最新内容:wibus服务器就快撑不住了,请你保证你的网站不会被仇敌疯狂CC

百度收录

代码定位需要自己定一下,找到合适的位置放

handsome 用户

  1. 在模板post.php加入以下代码

    <!--百度收录-->
    <li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>
  2. 在post.php中加入(需要引入jquery,handsome用户不需要)

    <script>
        function baidu_check(){
            $.getJSON("https://api.iucky.cn/themes/baidu_check.php?domain="+window.location.href,function(result){ 
                if (result.code == 200) {
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-ok-circle');
                    $('#baidu_result').text('百度已收录');
                }else if(result.code == 403){
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-info-sign');
                    $('#baidu_result').text('百度未收录');
                    baidu_push();
                }else{
                     $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-remove-circle');
                    $('#baidu_result').text('查询收录失败');
                }
            });
        }
        function baidu_push(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';  
            } else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        }
        baidu_check();
    </script>

其他用户

  1. 在function.php末尾合适的地方加入以下代码:
      function baidu_check() {
          $url = baidu_url();
          $api = 'https://api.jishujun.com/baidu_check.php?domain=';
          $result = json_decode(file_get_contents($api.$url));
          if($result['code'] == 200){
              echo '百度已收录';
          }elseif($result['code'] == 403){
              echo '<a style="color:red;" rel="external nofollow" title="点击提交收录" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename='.$url.'">百度未收录</a>';
          }else{
              echo '查询收录失败';
          }
      }
      function baidu_url(){
          if((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')){
              return 'https'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
          }else{
              return 'http'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
          }
      }
  1. 在需要输出检测结果的地方加入 <?php baidu_check(); ?>即可

百度收录API源码

自搭建API

   <?php
   /**
    * Baidu
    * @editer: Wibus
    * @link: https://blog.iucky.cn
    * @version: 1.0
    */
   
   error_reporting(0);
   header("Access-Control-Allow-Origin:*");
   header('Content-type: application/json');
   
   $domain = @$_GET['domain'];
   if(!isset($domain) || empty($domain) || $domain==''){
       $data = array(
           "code" => false,
           "msg" => "未传入请求参数!"
       );
       echo json_encode($data,JSON_UNESCAPED_UNICODE);
       exit;
   }
   if(substr($domain, -1) == '/'){
       $domain = substr($domain,0,strlen($domain)-1);
   }
   
   $data = checkBaidu($domain);
   echo json_encode($data,JSON_UNESCAPED_UNICODE);
   
   function checkBaidu($url){
       $header = array(
           "Host:www.baidu.com",
           "Content-Type:application/x-www-form-urlencoded",//post请求
           "Connection: keep-alive",
           "Referer:https://www.baidu.com",
           "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"
       );
       $url = 'https://www.baidu.com/s?ie=UTF-8&wd='.urlencode($url).'&usm=3&rsv_idx=2&rsv_page=1';
       $ch = curl_init();
       curl_setopt($ch, CURLOPT_URL, $url);
       curl_setopt ($ch, CURLOPT_HTTPHEADER, $header);
       curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
       curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
       $output = curl_exec($ch);
       curl_close($ch);
       if(strpos($output, '没有找到') || strpos($output, '很抱歉')){
           $data = array(
               "code" => 403,
               "msg" => "该域名暂时未被百度收录!"
           );
       }else{
           $number = GetBetween($output,'<span class="nums_text">百度为您找到相关结果约','个</span>');
           if(empty($number) || $number == 0){
               $number = GetBetween($output,'<b>找到相关结果数约','个</b></p>');
               if(empty($number) || $number == 0){
                   $data = array(
                       "code" => false,
                       "msg" => "获取百度收录失败!"
                   );
                   return $data;
               }
           }
           $data = array(
               "code" => 200,
               "msg" => "该域名已被百度收录!",
               "number" => str_replace(',','',$number)
           );
       }
       return $data;
   }
   
   function GetBetween($content,$start,$end){
       $r = explode($start, $content);
       if (isset($r[1])){
           $r = explode($end, $r[1]);
           return $r[0];
       }
   }
   ?>
API来自https://wfblog.net,灵感来自https://wfblog.net

右侧边栏图标修改

现在这里下载了图标先,之后我们去到/handsome/assets/img/里,替换sj2文件里所有的图片。就可以啦

如果有开启本地缓存的,还需要去到插件更新一下缓存哦~

彩色标签云

彩色标签云

  1. handsome用户直接在 自定义JavaScript&PJAX回调函数中添加
  2. 其他用户在 </body>之前添加本段代码(未经过试验,请知晓)
<!--彩色标签云-->
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;
});

左侧栏友链添加头像

添加头像

效果请在本博客左侧栏查看效果

进入 usr/themes/handsome/component/aside.php
找到这串代码,记住这个范围

<!--友情链接-->
<li>
    <a class="auto">
        <span class="pull-right text-muted">
            <i class="fontello icon-fw fontello-angle-right text"></i>
            <i class="fontello icon-fw fontello-angle-down text-active"></i>
        </span>
        <span class="nav-icon"><i data-feather="user"></i></span>
        <span><?php _me("友链") ?></span>
    </a>
    <ul class="nav nav-sub dk">
        <li class="nav-sub-header">
           <a data-no-instant>
                <span><?php _me("友链") ?></span>
            </a>
        </li>
        <!--使用links插件,输出全站友链-->
        <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
    </ul>
</li>

下一步请移步至下一标签页


将原本的修改成以下代码

<!--友情链接-->
<style>
    #user_img{
        width: 24px;
        border-radius: 50%;
    }
</style>
<li>
    <a class="auto">
        <span class="pull-right text-muted">
            <i class="fontello icon-fw fontello-angle-right text"></i>
            <i class="fontello icon-fw fontello-angle-down text-active"></i>
        </span>
        <span class="nav-icon"><i data-feather="user"></i></span>
        <span><?php _me("友链") ?></span>
    </a>
    <ul class="nav nav-sub dk">
        <li class="nav-sub-header">
           <a data-no-instant>
                <span><?php _me("友链") ?></span>
            </a>
        </li>
        <!--使用links插件,输出全站友链-->
        <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><img src=\"{image}\" id=\"user_img\" \> <span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
    </ul>
</li>


评论区打字特效

打字特效

  1. handsome用户同样在自定义Javascript中添加
  2. 其他用户在 </body>前添加(未经过试验,请知晓)
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);

一键打卡

一键打卡

一键打卡暂无通用版,其他主题请自行适配,抱歉

  1. 首先在后台-->设置外观-->开发者设置-->自定义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();
        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).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:: ")
    }
};

Tips:如果pjax回调函数填写错误的话,本身并不会报错,但是在使用过程中PJAX会失效(也就是没有了无刷新体验)

  1. 打开主题目录的component/comments.php里面的126行到144行附近,修改以下代码
                    <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>
  1. 在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

完美!


访客数量和网站响应耗时

访客数量和网站响应耗时

首先将以下代码加到themes/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)']);
     }

    /**
     * 响应时间
     */
    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;
    }

sidebar.php添加代码

           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></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="clock"></i></span> <span 
                       class="badge
            pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

添加全站字数

添加全站字数

component/sidebar.php的开头加入下面的代码:

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

component/sidebar.php处,选择合适位置加入以下代码(位置大概在 90 多行)

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

访客数量和网站响应耗时&全站字数配套CSS

配套CSS

/* 博客信息配套颜色 */

#blog_info>ul>li:nth-child(1)>span.badge{
    background-color: #0043ff;
}
#blog_info>ul>li:nth-child(2)>span.badge{
    background-color: #cc00ff;
}
#blog_info>ul>li:nth-child(3)>span.badge{
    background-color: #ffb100;
}
#blog_info>ul>li:nth-child(4)>span.badge{
    background-color: #ff0076;
}
#blog_info>ul>li:nth-child(5)>span.badge{
    background-color: #ff0019;
}
#blog_info>ul>li:nth-child(6)>span.badge{
    background-color: #0e5458;
}
#blog_info>ul>li:nth-child(7)>span.badge{
    background-color: #ff0000;
}

左侧栏自修改

请做好备份!

Wibus建议看这一篇文章~


前置工作

建议引入 Font Awesome 图标库,在 主题后台设置 -> 开发者设置 -> 自定义输出 head 头部的 HTML 代码 里面添加下面的代码即可。

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

上面的 Font Awesome 的 css 文件来自 BootCDN 提供,你也可以替换成自己的文件。


/libs/Content.php

首先,打开 libs/Content.php ,在蓝线所示的位置:

插入下面的代码:

/**
 *
 * @param $categories
 * @return string
 */
public static function returnAsideCategories($categories){
    $html    = "";
    $options = mget();
    $icons   = array(
        'default' => 'glyphicon glyphicon-tasks',
        'github'  => 'fa fa-github'
        /**
         *  格式:  '分类缩略名' => '图标名称',
         */
    );
    while($categories->next()) {
        if ($categories->levels === 0) {
            $children = $categories->getAllChildren($categories->mid);
            if (!empty($children)) {
                $html .= '<li><a class="auto"><span class="pull-right text-muted"><i class="fontello icon-fw fontello-angle-right text"></i><i class="fontello icon-fw fontello-angle-down text-active"></i></span><span class="nav-icon"><i class="' . $icons[$categories->slug] . '"></i></span><span>' . $categories->name . '</span></a>';
                $childCategoryHtml =  '<ul class="nav nav-sub dk"><li class="nav-sub-header"><a><span>' . $categories->name . '</span></a></li>';
                foreach($children as $mid){
                    $child = $categories->getCategory($mid);
                    $childCategoryHtml .= '<li><a href="' . $child['permalink'] . '"><b class="badge pull-right">' . $child['count'] . '</b><i class="' . $icons[$child['slug']] . '"></i><span>' . $child['name'] . '</span></a></li>';
                }
                $childCategoryHtml .= '</ul>';
                $html .= $childCategoryHtml;
                $html .= "</li>";
            } else {
                $html .= '<li><a href="' . $categories->permalink . '" class="auto"><b class="badge pull-right">' . $categories->count . '</b><span class="nav-icon"><i class="'.$icons[$categories->slug].'"></i></span><span>' . $categories->name . '</span></a></li>';
            }
        }
    }
    return $html;
}

在 component/aside.php 中找到以下代码(大约 131 ~ 160 行),删除。

              <!--分类category-->
                <?php
                $class = "";
                    if (in_array("openCategory",$this->options->featuresetup)){
                        $class = "class=\\"active\\"";
                    }
                    ?>
              <li <?php echo $class; ?>>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
<!--                  <i class="glyphicon glyphicon-th"></i>-->
                    <span class="nav-icon"><i data-feather="grid"></i></span>

                    <span><?php _me("分类") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a>
                      <span><?php _me("分类") ?></span>
                    </a>
                  </li>
                  <!--循环输出分类-->
                    <?php
                    $this->widget('Widget_Metas_Category_List')->to($categorys);
                    echo Content::returnCategories($categorys) ?>
                </ul>
              </li>


aside.php

然后在下图蓝线所示的位置( 127 行左右 )

插入以下代码:

 <!--start-->
              <li class="line dk"></li>
   
            <!--Components-->
              <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                <span><?php _me("分类") ?></span>
              </li>
              <!--分类category-->
              <!--循环输出分类-->
              <?php
              $this->widget('Widget_Metas_Category_List')->to($categorys);
              echo Content::returnAsideCategories($categorys) ?>
              <!--end-->


然后,刷新你的博客,是不是就有效果了呢?

但请先别走!还有个重要的没做完!

重要事项

设置图标

设置方法:在 $icons 的 array 数组中插入 '分类缩略名' => '图标' 即可。
有人可能不知道在哪里哈(其实是我不知道
在/handsome/libs/content.php中,我们可以看到有这么一行$icons = array(,下面包含着像是'system' => 'fa fa-apple',这样的代码,那你就找对了,接下来看怎么设置吧~

请记住最后一句不能加逗号!!

    'music' => 'fa fa-music',
    'life' => 'fa fa-meetup' //这是最后一句,没有逗号!!

Font Awesome

如果你引入了 Font Awesome 的图标的话,可以到 https://fontawesome.dashgame.com/ 选择你喜欢的图标使用。

使用方法

https://fontawesome.dashgame.com/ 挑一个图标,在图标的名字前加入 fa fa- 即可。

使用样例

使用 archive 图标时:

img

对应在 $icons 的 array 数组中插入的代码:

'archives' => 'fa fa-archive'

Fontello

handsome 主题自带部分 fontello 图标,具体列表可在 handsome 主题文档 查看。

使用方法

在图标的名字前加入 fontello fontello- 即可。

使用样例

Font Awesome 相似,在此不多赘述。

Feather

handsome 主题自带 feather 的所有图标,在此处使用需要一些变通措施。

使用方法

https://feathericons.com/ 选取好你需要的图标。

然后在名称前插入 " data-feather=" ,再输入名称即可。

使用样例

airplay 为例:

img

输入 'airplay' => '" data-feather="airplay' 即可。

其他 SVG 格式的图标

使用方法

在 svg 的开头加入 "> ,在结尾加入 ` 即可。

使用样例

下载下来的 svg 文件内容:

img

将其复制,然后在 $icons 的 array 数组中插入的代码:

'airplay' => '"></i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" st

首页文章版式圆角化

首页文章版式圆角化

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

首页文章列表悬停上浮

悬停上浮

/*首页文章列表悬停上浮*/
.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);
}

panel阴影

panel阴影

/*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);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

底部GitHub样式

总共分为三步,需要修改一次文件

自定义CSS

在主题外观设置:开发者设置>自定义CSS中添加下列代码

/*底部GitHub*/
.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="©2020 Wibus">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020 Wibus</span>
</a>
</div>


将下面的信息改成你自己的

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title=" Power by typecho" style="pointer;">
<span class="badge-subject"> Power</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="Theme handsome" style="pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>



删除主题内的代码

需要去handsomecomponentfooter.php删除原有声明代码,以下为删除完后的效果(大概1~12行)

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
<?php  $dark_setting= ""; if (@$this->options->dark_setting == "") $dark_setting = "light" ;elseif
(@$this->options->dark_setting == "auto" || @$this->options->dark_setting == "time" ||
    $this->options->dark_setting == "compatible")  $dark_setting = "auto"; else  $dark_setting =
$this->options->dark_setting;  ?>
</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>
        <?php
            $this->options->BottomleftInfo(); ?>
    </div>

粗体上色

/* 粗体上色 */
strong{
  color: rgb(255, 153, 0);
}
最后修改:2020 年 10 月 31 日 10 : 43 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论

24 条评论

  1. 小魏

    博主,可以给下主页右边广告那个图片链接吗

    1. wibus
      @小魏

      你直接点击就可以进入了呀

      1. 小魏
        @wibus

        👌那我拿走用,行吗

        1. wibus
          @小魏

          你指的是美女专栏吗? 这个是爆胎大佬的api
          左侧栏友链第一个就是他了
          应该可以直接用的,他的API接口在rest页面

          1. 小魏
            @wibus

            好的,谢谢

  2. 天天


    测试

  3. 八字算命

    文章写得好,网站都很吊

  4. 龙某

    测试img

  5. 爆胎

    test

    1. wibus
  6. Mr.K

    测试表情

    1. wibus
      @Mr.K

      正常bingo

  7. kamezzz

    你好,测试

    1. wibus
      @kamezzz

      (/ω\)欢迎测试

  8. wibus

    test

  9. 爆胎

    test

    1. wibus
      @爆胎

      每日·testφ( ̄∇ ̄o)

  10. 撸的一首好诗丶

    过来踩踩

    1. wibus
      @撸的一首好诗丶

      欢迎大佬到来~

  11. Anemone

    盒子布局不好吗,这样个人感觉有点臃肿

    1. wibus
      @Anemone

      不过,可能这个站点的样式看起来就不会臃肿了
      ![http://handsome.iucky.cn/](http://handsome.iucky.cn/

    2. wibus
      @Anemone

      好像是哦,关掉关掉

      1. Anemone
        @wibus

        吃我一测

        1. wibus
          @Anemone

          不吃

域名代备案/服务器虚拟主机售卖/二级不死域名代制作/
老备案老域名/营业执照代办/QQ互联代申请/
海报宣传图设计/各类程序授权/各类业务

联系QQ:1032066668
点击联系