所有修改以尽量少动源码和个人审美
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-clone.tiax.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-clone.tiax.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-clone.tiax.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、左侧统计信息
修改教程
步骤1；在主题目录里新增一个php文件，如:bloglog.php，然后把下面的代码复制进去保存就完事。
- 在线人数统计，字数统计，加载时间，访问量.
<?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";
}
// 字数统计
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;
}步骤2；在主题目录里面的 functions.php 文件最下面，把新增的这个 bloglog.php 引入
/*个性化修改*/
require_once("bloglog.php");步骤3：路径：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>
此处评论已关闭