所有修改以尽量少动源码和个人审美
1、顶部图标修改
修改教程
路径：handsome/component/sidebar
- 找到这个
div删掉
<div class="sidebar-icon wrapper-sm"><i data-feather="thumbs-up"></i></div>- 替换成
img标签，有三个，依次替换即可
< img src="//itggg.cn/assets/img/svg/hot.svg" style="height: 2.5em;" >- 效果预览
- 修改参考：
<li data-index="0" class="active" role="presentation"> <a data-target="#widget-tabs-4-hots" role="tab"
aria-controls="widget-tabs-4-hots" aria-expanded="true" data-toggle="tab">< img src="//img-1259793745.itggg.cn/20210503143015.svg" style="height: 2.5em;" ><span class="sr-only"><?php _me("热门文章") ?></span> </a></li>
<?php if (COMMENT_SYSTEM == 0): ?>
<li role="presentation" data-index="1"> <a data-target="#widget-tabs-4-comments" role="tab" aria-controls="widget-tabs-4-comments" aria-expanded="false" data-toggle="tab">< img src="//img-1259793745.itggg.cn/20210503143313.svg" style="height: 2.5em;" ><span class="sr-only"><?php _me("最新评论") ?></span> </a></li>
<?php endif; ?>
<li data-index="2" role="presentation"> <a data-target="#widget-tabs-4-random" role="tab" aria-controls="widget-tabs-4-random" aria-expanded="false" data-toggle="tab">< img src="//img-1259793745.itggg.cn/20210503143659.svg" style="height: 2.5em;" ><span class="sr-only"><?php _me("随机文章") ?></span>
</a></li>2、侧边栏缩略图
修改教程
路径：handsome/functions_mine
- 找到这行代码，并把
jpg，修改为svg
$random = STATIC_PATH . 'img/sj2/' . $randomNum[$index] . '.svg';路径：handsome/libs/Utils
- 找到这行代码，并把
jpg，修改为svg
$image = count(preg_grep("/^\d+\.svg$/", $arr));路径：handsome/assets/img/sj2
- 选择一套你喜欢的
SVG图，或者F12扒我的，替换原来路径文件夹内的图片，注意名称不要换掉咯 - 效果预览
3、左侧统计信息
修改教程
路径：/usr/themes/handsome/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([email protected]($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";
}
//字数统计
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;
}
//总访问量
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;
}路径：handsome/component/sidebar
- 找到
ul内的输出代码，101行，修改为如下代码，我是用了Font Awesome矢量图标的，你可以自己改你想要的。
<ul class="list-group box-shadow-wrap-normal">
<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
<li class="list-group-item text-second"><i class="fa fa-clipboard"></i><span
class="badge
pull-right"><?php $stat->publishedPostsNum() ?></span><?php _me("文章总数") ?></li>
<li class="list-group-item text-second"><i class="fa fa-comment"></i>
<span class="badge
pull-right"><?php $stat->publishedCommentsNum() ?></span><?php _me("评论数目") ?></li>
<li class="list-group-item text-second"><i class="fa fa-refresh fa-spin"></i>
<span class="badge
pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li>
<li class="list-group-item text-second"><i class="fa fa-podcast"></i>
<span class="badge
pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
<li class="list-group-item text-second"><i class="fa fa-users"></i>
<span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"><i class="fa fa-tachometer"></i>
<span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>
<li class="list-group-item text-second"><span class="fa fa-pencil-square-o"></span>
<span class="badge
pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item text-second"> <i class="fa fa-user-circle-o"></i>
<span class="badge
pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
</ul>- 效果预览
4、自定义CSS
修改教程
- 开发者设置 → 自定义
CSS
/*彩色标签*/
#tag_cloud-2 a,.list-group-item .pull-right {
background-color: #309d9d;
}
/*头像旋转*/
.img-circle {
border-radius: 80%;
animation: light 5s ease-in-out infinite;
transition: 0.5s;
}
.img-circle:hover {
transform: scale(1.55) rotate(720deg);
}
/*鼠标指针*/
body {
cursor: url(https://itggg.cn/cdn/a1.cur), default;
}
a:hover{cursor:url(https://itggg.cn/cdn/a2.cur), pointer;}5、字体修改
6、标签云显示数量
修改教程
路径：handsome/component/sidebar
- 默认是
20个，我的是50，看自己喜欢，随意。
<?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=50')->to($tags); ?>7、广告位
修改教程
- 广告位置调用
SVG插画随机内容（开发者设置 → 全局右侧边栏广告位）
< img src="//api.itggg.cn/img/s" >8、底部信息修改
修改教程
- 左侧信息修改，在这个网站去生成需要的样式 Shields.io ，然后（开发者设置 → 博客底部左侧信息 ）
< img src="//itggg.cn/cdn/dibu1.svg" > | < img src="//itggg.cn/cdn/dibu2.svg" >路径：handsome/component/footer
- 右侧信息修改，先删除原来的信息内容，大概
121行 , 然后（开发者设置 → 博客底部右侧信息 ）想写什么写什么
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>9、添加心知天气
修改教程
- 先在 心知天气 注册自己的帐号，然后生成
JS代码，填入 （初级设置 → 博客公告消息 ）或者直接复制下面的代码粘贴进去也可以
<div id="tp-weather-widget"></div> <script> (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10))); window.SeniverseWeatherWidget('show', { flavor: "slim", location: "WX4FBXXFKE4F", geolocation: true, language: "zh-Hans", unit: "c", theme: "auto", token: "89af842b-cab5-4c6e-a464-cf256bcc81db", hover: "enabled", container: "tp-weather-widget" }) </script>
2 comments
赞
感谢分享 赞一个