TypechoJoeTheme

肥鱼博客 - 听闻远方有你,动身跋涉千里。

统计

本站基于handsome主题的魔改教程

2020-07-29
/
10 评论
/
3,231 阅读
/
正在检测是否收录...
07/29

前言

内容非原创,内容由互联网收集而来。

教程:

1.鼠标样式美化

首先准备好鼠标的图片样式
然后在 后台-->设置外观-->开发者设置-->自定义 CSS下加入一下代码:

/*鼠标样式*/
body {
cursor: url('https://s1.feiyubk.com/Blog/img/normal.cur'), auto
}
a, [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: url('https://s1.feiyubk.com/Blog/img/link.cur'), auto !important
}

2.给网站添加访客计数统计

1.首先在主题 handsome/libs/Content.php文件里加入以下统计代码

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

如图:

2.在 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>

如图:

3.效果图:

3.给网站添加加载耗时显示

1.首先在主题 handsome/libs/Content.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;
}

如图:

2.在 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>

如图:

3.效果图:

4.彩色标签云&博客信息

1.在 后台-->设置外观-->PJAX-->PJAX回调函数添加以下代码:

let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor
});

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

<!--彩色标签云&博客信息-->
let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor
});

效果图:

5.右侧列表导航栏图标颜色

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

效果图:

6.鼠标点击特效

后台-->设置外观-->开发者设置-->自定义输出head 头部的HTML代码添加以下代码:

<!--鼠标点击-->
<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div><script type="text/javascript" src="https://s1.feiyubk.com/Blog/js/sb.js"></script>

效果:
本站点两下鼠标

7.复制弹框版权提醒

后台-->设置外观-->开发者设置-->自定义输出head 头部的HTML代码添加以下代码:

<!--复制弹框-->
<script src="https://s1.feiyubk.com/Blog/js/tc.js"></script>

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

<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};

效果:
复制一段本站内容

Typecho优化魔改handsome
朗读
赞 · 2
版权属于:

肥鱼博客 - 听闻远方有你,动身跋涉千里。

本文链接:

https://www.feiyubk.com/archives/19.html(转载时请注明本文出处及文章链接)

评论 (10)
  1. 作者
    Windows 10 · Google Chrome

    文章中的js可以直接调用么

    2020-12-05 回复
    1. feiyu 作者
      Windows 10 · Google Chrome
      @伞

      可以直接调用

      2020-12-05 回复
  2. 超超 作者
    Windows 10 · Google Chrome

    能问一下代码样式是怎么加的么

    2020-12-07 回复
    1. feiyu 作者
      Windows 10 · Google Chrome
      @超超

      用的Code Prettify插件
      https://www.xcnte.com/archives/523/
      ::aru:cryingface::

      2020-12-07 回复
      1. 超超 作者
        Windows 10 · Google Chrome
        @feiyu

        但是,左上角的红黄绿三个色块的那一栏要怎么加呢。挺喜欢这个设计的 ::aru:shy::

        2020-12-07 回复
        1. feiyu 作者
          Windows 10 · Google Chrome
          @超超

          这个也是插件给的样式
          喜欢的话 可以自己扒出来 ::aru:cheer::

          2020-12-10 回复
  3. 冰冰的老公 作者
    MacOS · Google Chrome

    大佬,人生倒计时分享下呗,太喜欢了

    2021-01-13 回复
    1. feiyu 作者
      Windows 10 · Google Chrome
      @冰冰的老公

      自己f12扒一下啊

      2021-01-15 回复
      1. 冰冰的老公 作者
        MacOS · Google Chrome
        @feiyu

        f12会自动跳转另一个网页啊 https://www.feiyubk.com/usr/themes/Typecho-Joe-Theme/console.html

        2021-01-17 回复
        1. feiyu 作者
          Windows 10 · Google Chrome
          @冰冰的老公

          现在不会了

          2021-01-17 回复