[tabs][tab name="自定义CSS" active="true"]自定义CSS自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS自定义CSS[collapse status="false" title="修改教程"]/*彩色标签*/ #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://sangxuesheng.com/api/a1.cur), default; } a:hover{cursor:url(https://sangxuesheng.com/api/a2.cur), pointer;} /*鼠标指针*/[/collapse]首页文章版式阴影化[collapse status="false" title="修改教程"].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); }[/collapse]首页文章图片获取焦点放大[collapse status="false" title="修改教程"].item-thumb{ cursor: pointer; transition: all 0.6s; } .item-thumb:hover{ transform: scale(1.05); } .item-thumb-small{ cursor: pointer; transition: all 0.6s; } .item-thumb-small:hover{ transform: scale(1.05); }[/collapse]标签云整齐排列[collapse status="false" title="修改教程"]/*标签云*/ #tag_cloud-2 a { border-radius: 5px; width: 32%; }[/collapse]文章内打赏图标跳动[collapse status="false" title="修改教程"]/*文章内打赏图标跳动*/ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } }[/collapse]手机适配中不显示热门及标签云[collapse status="false" title="修改教程"]将以下代码添加至后台-开发者设置-自定义CSS。/*手机不显示*/ @media (max-width:767px) { #tabs-4,#tag_cloud-2 { display: none; } }[/collapse]文章标题居中[collapse status="false" title="修改教程"]/*文章标题居中*/ .panel h2{ text-align: center; } .panel-small h2{ text-align: center; } .panel-picture h3{ text-align: center; } .post-item-foot-icon{ text-align: center; }[/collapse]美化主页文章列表宽度[collapse status="false" title="修改教程"]/* 非盒子模式页面宽度 */ .no-container #post-panel, .no-container .blog-posts { max-width: 90%; }[/collapse]粗体上色[collapse status="false" title="修改教程"]/* 粗体上色 */ strong{ color: rgb(255, 153, 0); }[/collapse]panel阴影[collapse status="false" title="修改教程"]/*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); }[/collapse]右侧栏气泡颜色加深[collapse status="false" title="修改教程"]/* 右侧栏气泡颜色加深 */ div.post-tags>a,aside.asideBar .badge{background-color:#777}[/collapse]时光机圆形头像[collapse status="false" title="修改教程"]/* 时光机圆形头像 */ .img-square {border-radius: 50%;} .list-group-item .thumb-sm .img-square {border-radius: 5px;}[/collapse]美化网站右侧滚动条样式[collapse status="false" title="修改教程"]/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 8px; height: 6px } /*定义滚动条轨道*/ ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { background-color: #30B07F; background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em }[/collapse]标题居中[collapse status="false" title="修改教程"]header.bg-light.lter.wrapper-md { text-align: center; } [/collapse]博客信息背景色修改文章数量，评论数目等 背景色修改[collapse status="false" title="修改教程"]/*小字体背景色*/ .badge { background-color: #ABB6F5; }[/collapse][/tab][tab name="自定义body"]自定义body自定义body丨放入后台-外观设置-开发者设置-自定义尾部-body全局彩色字[collapse status="false" title="修改教程"]代码使用方法function colorful(min,max){ var All = document.querySelectorAll('*'); All.forEach(function(item){ id1 = Math.floor(Math.random()*max)+min; id2 = Math.floor(Math.random()*max)+min; id3 = Math.floor(Math.random()*max)+min; item.style.color = "rgb("+id1+","+id2+","+id3+")"; item.style.textShadow = "0 0 2px rgb("+id1+","+id2+","+id3+")"; }); }[/collapse]右键自定义[collapse status="false" title="修改教程"] 首页 复制 搜索 前进 后退 重载网页 和我当邻居 给我留言吧 [/collapse]万能的控制台[collapse status="false" title="修改教程"] [/collapse]博客背景添加冒泡动画[collapse status="false" title="修改教程"]设置id: '', //容器ID num: 100, // 个数 start_probability: 0.1, // 如果数量小于num，有这些几率添加一个新的 radius_min: 1, // 初始半径最小值 radius_max: 2, // 初始半径最大值 radius_add_min: .3, // 半径增加最小值 radius_add_max: .5, // 半径增加最大值 opacity_min: 0.3, // 初始透明度最小值 opacity_max: 0.5, // 初始透明度最大值 opacity_prev_min: .003, // 透明度递减值最小值 opacity_prev_max: .005, // 透明度递减值最大值 light_min: 40, // 颜色亮度最小值 light_max: 70, // 颜色亮度最大值 is_same_color: false, //泡泡颜色是否相同 background:"#f1f3f4" //背景颜色复制这段内容并添加在前面，handsome主题可以在 开发者设置 自定义输出body 尾部的HTML代码中添加。 [/collapse]防调试[collapse status="false" title="修改教程"]禁止右键-禁止F12-打开开发者工具自动跳转（QQ游览器，火狐不支持跳转~！）复制这段内容并添加在前面，handsome主题可以在 开发者设置 自定义输出body 尾部的HTML代码中添加。 [/collapse]五颜六色字体[collapse status="false" title="修改教程"] Pjax：后台主题设置回调函数内添加 sjcolor();[/collapse][/tab][tab name="自定义JavaScript"]自定义JavaScript自定义JavaScript丨放入后台-外观设置-开发者设置-自定义JavaScript彩色标签云[collapse status="false" title="修改教程"] let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); function addNumber(a) { var length = document.getElementById("comment").value.length; if(length> 0){ document.getElementById("comment").focus() document.getElementById("comment").value += '\n' + a + new Date }else{ document.getElementById("comment").focus() document.getElementById("comment").value += a + new Date } } let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i"); let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"]; leftHeader.forEach(tag => { tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.color = tagsColor; });如果你的主题开启了pjax，需在后台pjax添加回调函数>pjax添加回调函数let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); function addNumber(a) { var length = document.getElementById("comment").value.length; if(length> 0){ document.getElementById("comment").focus() document.getElementById("comment").value += '\n' + a + new Date }else{ document.getElementById("comment").focus() document.getElementById("comment").value += a + new Date } } [/collapse]播放器音乐大小[collapse status="false" title="修改教程"]博客开启了自动播放的哥哥们必备 setTimeout(function (){ document.querySelector(".skPlayer-source").volume=0.5;}, 3000); [/collapse]动态标题栏[collapse status="false" title="修改教程"] var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp"); document.title = '网页崩溃了！！！'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp"); document.title = '咦，又好啦(✿◡‿◡)' ; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } });[/collapse]左侧彩色图标[collapse status="false" title="修改教程"]自定义 JavaScript 和pjax回调添加下面代码ARGB可以修改成自己喜欢的颜色，网上好多都是彩色的，不好看也不好搭配，所以博主修改了自己喜欢的颜色? let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#7887EB","#ABDEF3", "#6CC3E8", "#86DEF3", "#7887EB", "#9BA8F5","#7988EC","#B3BCF5","#ABDEF3","#B3BCD7","#91D7F3","#7988EC","#9CD2E9","#9BA8F5","#B3BCF5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});[/collapse]右侧彩色图标[collapse status="false" title="修改教程"]自定义 JavaScript 和pjax回调添加下面代码ARGB可以修改成自己喜欢的颜色，网上好多都是彩色的，不好看也不好搭配，所以博主修改了自己喜欢的颜色? let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#ABB6F5", "#6B7CEB", "#86D2F3", "#5DBDE7", "#A3DBF3", "#ADD8E6"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); [/collapse]左上角加上FPS[collapse status="false" title="修改教程"]自定义 JavaScript 和pjax回调添加下面代码$('body').before(' '); var showFPS = (function(){ var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/60); }; var e,pe,pid,fps,last,offset,step,appendFps; fps = 0; last = Date.now(); step = function(){ offset = Date.now() - last; fps += 1; if( offset >= 1000 ){ last += offset; appendFps(fps); fps = 0; } requestAnimationFrame( step ); }; appendFps = function(fps){ console.log(fps+'FPS'); $('#fps').html(fps+'FPS'); }; step(); })(); [/collapse][/tab][tab name="其他修改"]其他修改这个的话就是一般都是改源代码的了顶部图标修改[collapse status="false" title="修改教程"]路径：handsome/component/sidebar1.1 找到这个div删掉 1.2 替换成img标签，有三个，依次替换即可< img src="https://youpaiyun.sangxuesheng.cn/Blog/assets/img/sj2/15.svg" style="height: 2.5em;" >1.3 效果预览1.4 修改参考： <?php _me("热门文章") ?> <?php if (COMMENT_SYSTEM == 0): ?> <?php _me("最新评论") ?> <?php endif; ?> <?php _me("随机文章") ?> [/collapse]侧边栏缩略图[collapse status="false" title="修改教程"]路径：handsome/functions_mine2.1 找到这行代码，并把jpg，修改为svg$random = STATIC_PATH . 'img/sj2/' . $randomNum[$index] . '.svg';路径：handsome/assets/img/sj22.3 选择一套你喜欢的SVG图，替换原来路径文件夹内的图片，注意名称不要换掉咯2.4 效果预览[/collapse]顶部导航增加网盘[collapse status="false" title="修改教程"]路径：/usr/themes/handsome/component/headnav.php1.1在闲言碎语上面插入下面代码即可1.2注意地址需要换成自己的，图标也可以更换 Cloud[/collapse]头像与广告位[collapse status="false" title="修改教程"]7.1 头像调用SVG图接口随机（初级设置 → 头像图片地址 ）https://sangxuesheng.com/api7.2 广告位置调用 SVG插画随机内容（开发者设置 → 全局右侧边栏广告位） 效果：[/collapse]底部信息修改[collapse status="false" title="修改教程"]左侧信息修改，在这个网站去生成需要的样式Shields.io ，然后（开发者设置 → 博客底部左侧信息 ）< img src="https://youpaiyun.sangxuesheng.cn/Blog/assets/img/sj2/15.svg" > | < img src="https://youpaiyun.sangxuesheng.cn/Blog/assets/img/sj2/15.svg" >路径：handsome/component/footer右侧信息修改，先删除原来的信息内容，大概 121 行 , 然后（开发者设置 → 博客底部右侧信息 ）想写什么写什么Powered by Typecho | Theme by handsome[/collapse]添加心知天气[collapse status="false" title="修改教程"]方法1:先在 心知天气 注册自己的帐号，然后生成 JS 代码，填入 （初级设置 → 博客公告消息 ）或者直接复制下面的代码粘贴进去也可以 方法2：1.知心天气官网www.seniverse.com注册申请免费API 密钥 2.将以下代码放入/usr/themes/handsome/component/headnav.php第108行左右!-- / search form --之后并更换你的公钥秘钥即可 [/collapse]文章内加一个正文结束[collapse status="false" title="修改教程"]在主题文件/usr/themes/handsome/post.php内 END [/collapse]版权声明[collapse status="false" title="修改教程"]在主题文件post.php内，刚刚加的正文到此结束下加上 本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?> 文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?> 本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?> 版权说明：若无注明，本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?>原创，转载请保留文章出处。 [/collapse]右侧栏加时间流逝[collapse status="false" title="修改教程"]将以下代码加到/usr/themes/handsome/component/sidebar.php，在122行左右，放在<?php endif; ?>之后 <?php _me("时间流逝") ?> 今日已经过去小时 这周已经过去天 本月已经过去天 今年已经过去个月 如下图所示其次添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css/* 时间流逝 */ .sidebar-count .content { padding: 15px } .sidebar-count .content .item { margin-bottom: 15px } .sidebar-count .content .item:last-child { margin-bottom: 0 } .sidebar-count .content .item .title { font-size: 12px; color: var(--minor); margin-bottom: 5px; display: flex; align-items: center } .sidebar-count .content .item .title span { color: var(--theme); font-weight: 500; font-size: 14px; margin: 0 5px } .sidebar-count .content .item .progress { display: flex; align-items: center } .sidebar-count .content .item .progress .progress-bar { height: 10px; border-radius: 5px; overflow: hidden; background: var(--classC); width: 0; min-width: 0; flex: 1; margin-right: 5px } @keyframes progress { 0% { background-position: 0 0 } 100% { background-position: 30px 0 } } .sidebar-count .content .item .progress .progress-bar .progress-inner { width: 0; height: 100%; border-radius: 5px; transition: width 0.35s; -webkit-animation: progress 750ms linear infinite; animation: progress 750ms linear infinite } .sidebar-count .content .item .progress .progress-bar .progress-inner-1 { background: #bde6ff; background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-2 { background: #ffd980; background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-3 { background: #ffa9a9; background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-4 { background: #67c23a; background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-percentage { color: var(--info) }最后添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部 [/collapse]响应耗时和访客总数[collapse status="false" title="修改教程"]首先将以下代码加到/usr/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; }然后在/usr/themes/handsome/component/sidebar.php文件内，找到博客信息下面添加以下代码 <?php echo theAllViews();?><?php _me("访客总数") ?> <?php echo timer_stop();?><?php _me("响应耗时") ?> [/collapse]百度收录检测[collapse status="false" title="修改教程"]修改 1.在模板post.php加入（我是handsome） 加载中 2.还是在post.php内加入（必须引入jquery） 3.pjax回调函数 if((typeof baidu_check) !== "undefined"){ baidu_check(); }其他模板1.在模板functions.php末尾合适处加入以下代码function baidu_check() { $url = baidu_url(); $api = 'https://cn1.api.wfblog.net/baidu.php?domain='; //更改为你自己的API $result = json_decode(file_get_contents($api.$url)); if($result['code'] == 200){ echo '百度已收录'; }elseif($result['code'] == 403){ echo '百度未收录'; }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']; } }2.然后在你需要输出检测结果的地方加入``即可API源码<?php /** * Baidu * @editer: Weifeng * @link: https://wfblog.net * @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,'百度为您找到相关结果约','个'); if(empty($number) || $number == 0){ $number = GetBetween($output,'找到相关结果数约','个 '); 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]; } } ?>[/collapse]右侧边栏百度收录[collapse status="false" title="修改教程"]注意API挂了会影响网站打开慢或者打不开等情况，请自行删除一下代码！将下方代码粘贴至/usr/themes/handsome/component目录下的sidebar.php文件内。的博客信息下方合适位置 </span[/collapse]首页倒计时[collapse status="false" title="修改教程"]将以下代码添加至后台-开发者设置-首页列表最前方广告位。/*首页倒计时*/ 2021年- 新年倒计时 天 时 分 秒 [/collapse]404页面自动返回[collapse status="false" title="修改教程"]打开/usr/themes/handsome/404.php，在第130行左右，在 h1 class="text-shadow text-white">404 后面添加： 10秒后自动返回··· 立刻返回然后把下面这段放到最后的/body前 [/collapse]时光机添加置顶视频[collapse status="false" title="修改教程"]将以下代码分别添加至/usr/themes/handsome/component/ssy.php的?php if ($comments->have()): ?> div class="streamline b-l m-l-lg m-b padder-v"之后 你的梦想是什么！ [/collapse]首页全站友链显示图片[collapse status="false" title="修改教程"]在aside.php里面大约210行的地方修改代码，在a标签内加上：<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=或者复制下方全部代码替换 <?php $mypattern1 = " {name} "; Handsome_Plugin::output($mypattern1, 0, "ten");?> [/collapse]侧边栏添加二维码[collapse status="false" title="修改教程"]打开/usr/themes/handsome/component文件夹下的sidebar.php在大概81行的section之后，也就是随机文章那一块之后,博客信息之前。当然具体位置可以按照自己的喜好来。后面另起一行，填入以下的代码保存即可： <?php _me("移动端阅读") ?> [/collapse]版权美化教程[collapse status="false" title="修改教程"]先把CSS代码复制到自定义CSS/*底部页脚*/ .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: #f6b044; 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-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%); } .github-badge .bg-orange { background-color: #fadfa3 } .github-badge .bg-red { background-color: #f00 } .github-badge .bg-green { background: linear-gradient(to right , #7A88FF, #d27aff); .github-badge .bg-purple { background-color: #ab34e9 }左侧代码,复制到 博客底部左侧信息 Copyright©2020 MuYu | 闽ICP备18027703号-2 `右侧代码,复制到 `博客底部右侧信息 <?php $this->options->BottomInfo(); ?> ThemeTypecho | ThemeHandsome 文件修改法，上方方法可能需要自行更改代码。可以按下方截图自行修改/usr/themes/handsome/component/footer.php代码[/collapse]页脚美化[collapse status="false" title="修改教程"]将以下代码，替换到下方/usr/themes/handsome/component/footer.php截图的位置。原有代码忘记了，所以看着来啦 还没结束哦，如果发现显示高度不对齐的话在后台自定义CSS上加入，下方代码。高度按自己来调整/* 底部样式修复 */ .wrapper{ padding: 11px; }[/collapse]滚动条显示位置百分比[collapse status="false" title="修改教程"]好了，教程很简单，在网站添加html代码，然后在js添加监测代码，最后用css显示出来，以Typecho为例，修改前记得备份源文件。首先打开模板的header.php文件，复制以下代码，粘贴在网页之后，如图。 下面代码添加到后台自定义 JavaScript//加载显示 $(window).scroll(function() { var a = $(window).scrollTop(), c = $(document).height(), b = $(window).height(); scrollPercent = a / (c - b) * 100; scrollPercent = scrollPercent.toFixed(1); $("#percentageCounter").css({ width: scrollPercent + "%" }); }).trigger("scroll");下面代码添加至后台自定义CSS#percentageCounter { position:fixed; left:0; top:0; height:3px; z-index:99999; background-color:#448EF6; }[/collapse]首页广告轮播图[collapse status="false" title="修改教程"]添加至后台首页列表最前方广告位 愿你走出半生 归来仍是少年 <polyline points="15 18 9 12 15 6"></polyline> Previous <polyline points="9 18 15 12 9 6"></polyline> Next [/collapse]左侧栏自修改[collapse status="false" title="修改教程"]请做好备份！建议引入 Font Awesome 图标库，在 主题后台设置 -> 开发者设置 -> 自定义输出 head 头部的 HTML 代码 里面添加下面的代码即可 上面的 Font Awesome 的 css 文件来自 BootCDN 提供，你也可以替换成自己的文件。首先，打开 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 .= ' slug] . '">' . $categories->name . ''; $childCategoryHtml = ' ' . $categories->name . ' '; foreach($children as $mid){ $child = $categories->getCategory($mid); $childCategoryHtml .= ' ' . $child['count'] . '' . $child['name'] . ' '; } $childCategoryHtml .= ' '; $html .= $childCategoryHtml; $html .= " "; } else { $html .= ' permalink . '" class="auto">' . $categories->count . 'slug].'">' . $categories->name . ' '; } } } return $html; }在 component/aside.php 中找到以下代码（大约 131 ~ 160 行），删除。 <?php $class = ""; if (in_array("openCategory",$this->options->featuresetup)){ $class = "class=\\"active\\""; } ?> <li <?php echo $class; ?>> <?php _me("分类") ?> <?php _me("分类") ?> <?php $this->widget('Widget_Metas_Category_List')->to($categorys); echo Content::returnCategories($categorys) ?> 然后在下图蓝线所示的位置（ 127 行左右 ）插入以下代码： <?php _me("分类") ?> <?php $this->widget('Widget_Metas_Category_List')->to($categorys); echo Content::returnAsideCategories($categorys) ?> 然后，刷新你的博客，是不是就有效果了呢？设置图标设置方法：在 $icons 的 array 数组中插入 '分类缩略名' => '图标' 即可。有人可能不知道在哪里哈（其实是我不知道 ）在/handsome/libs/content.php中，我们可以看到有这么一行$icons = array(，下面包含着像是'system' => 'fa fa-apple',这样的代码，那你就找对了，接下来看怎么设置吧～请记住最后一句不能加逗号！！'music' => 'fa fa-music', 'life' => 'fa fa-meetup' //这是最后一句，没有逗号！！如果你引入了 Font Awesome 的图标的话，可以到 https://fontawesome.dashgame.com/ 选择你喜欢的图标使用。使用样例使用 archive 图标时：对应在 $icons 的 array 数组中插入的代码：'archives' => 'fa fa-archive' Fontellohandsome 主题自带部分 fontello 图标，具体列表可在 handsome 主题文档 查看。使用方法在图标的名字前加入 fontello fontello- 即可。**使用样例与 Font Awesome 相似，在此不多赘述。Featherhandsome 主题自带 feather 的所有图标，在此处使用需要一些变通措施。使用方法在 https://feathericons.com/ 选取好你需要的图标。然后在名称前插入 " data-feather=" ，再输入名称即可。**使用样例以 airplay 为例：输入 'airplay' => '" data-feather="airplay' 即可。其他 SVG 格式的图标使用方法在 svg 的开头加入 "> ，在结尾加入 ` 即可。使用样例下载下来的 svg 文件内容：将其复制，然后在 $icons 的 array 数组中插入的代码：'airplay' => '"> siteUrl = __TYPECHO_SITE_URL__; }上面的代码最前面加入下面的代码（域名改成你自己的）if($_SERVER['SERVER_NAME']=='www.muyu.com'){//chen added $this->siteUrl = 'http://www.muyu.com'; }[/collapse]超链接特效[collapse status="false" title="修改教程"]修改 /usr/themes/handsome/assets/css/handsome.min.css，删除这两节：.comment-content-true a:hover,.wrapper-lg .entry-content a:hover{ color:#222;border-bottom-color:#222 } .comment-content-true a,.wrapper-lg .entry-content a{ color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all }后台 自定义CSS：/*超链接特效*/ .comment-content-true a:not(.light-link):not(.post_inser_a),.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a){position:relative;margin:auto 4px;color:#23b7e5;-webkit-transition:color .3s;transition:color .3s;-webkit-perspective:600px;perspective:600px;-webkit-perspective-origin:50% 100%;perspective-origin:50% 100%;word-wrap:break-word;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:inherit;width:inherit} .comment-content-true a:not(.light-link):not(.post_inser_a):focus,.comment-content-true a:not(.light-link):not(.post_inser_a):hover,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover{color:#fff} .comment-content-true a:not(.light-link):not(.post_inser_a)::after,.comment-content-true a:not(.light-link):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{position:absolute;top:0;left:-4px;z-index:-1;box-sizing:content-box;padding:0 4px;width:100%;height:100%;content:''} .comment-content-true a:not(.light-link):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{background-color:#23b7e5;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1);-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%} .comment-content-true a:not(.light-link):not(.post_inser_a):focus::before,.comment-content-true a:not(.light-link):not(.post_inser_a):hover::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover::before{-webkit-transform:rotateX(0);transform:rotateX(0)} .comment-content-true a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after{border-bottom:1px solid #23b7e5}如果使用版权提示插件，链接有可能会超出提示框，添加以下css解决：.content-copyright {overflow: hidden}[/collapse]文章分页[collapse status="false" title="修改教程"]修改文件 typecho/usr/themes/handsome/libs/Content.php在文件最后一个}前添加如下两个私有函数请注意：添加代码前删除掉如下代码中第4行splitword变量的值中page前后的两个间隔。// 文章分页 private static function parse($text) { $pagebar = ''; $content = $text; $splitword = '= page ='; if( strpos( $text , $splitword) !== false){ $contents = explode($splitword , $text ); $page = isset($_GET['page'])?intval($_GET['page']):1; $content = $contents[$page-1]; $request = Typecho_Request::getInstance(); $_GET['page'] = '{page}'; $pagebar = self::setPageBar(count($contents),$page,$request->getPathinfo()."?". http_build_query($_GET)); } $text = $content.$pagebar; return $text; } private static function setPageBar($pageTotals,$page,$pageTemplate) { $isRewrite = Typecho_Widget::widget('Widget_Options')->rewrite; $siteUrl = Typecho_Widget::widget('Widget_Options')->rootUrl; $pageTemplate = ($isRewrite ? rtrim($siteUrl, '/') : $siteUrl."index.php") . $pageTemplate; $splitPage = 3; $pageHolder = array('{page}', '%7Bpage%7D'); if ($pageTotals < 1) { return; } $pageBar .= ' '; if ($page > 1) { $pageBar .= ' ' . ' '; } for ($i = 1; $i <= $pageTotals; $i ++) { if($page==$i){ $pageBar .= ' ' . $i . ' '; }else {if((($i==$page-3) and ($i!=1)) or (($i==$page+3) and ($i!=$pageTotals))) { $pageBar .= ' ... '; }else{ if((($i<$page-3) and ($i!=1)) or (($i>$page+3) and ($i!=$pageTotals))) {}else{ $pageBar .= ' ' . $i . ' '; } } } } if ($page < $pageTotals) { $pageBar .= ' ' . ' '; } $pageBar .=' '; return $pageBar; }修改parseContentPublic函数的定义，添加一个参数$need2pagination并提供替换值在文件 Content.php的1987行前后。默认值 False，因此至少情况下不会调用内容分页函数避免对handsome原来的处理逻辑造成的影响，某些评论者在评论内容中插入分页符就比较比较尴尬了public static function parseContentPublic($content,$need2pagination=False)在parseContentPublic函数中调用分页函数在文件 Content.php的2092行前后，语句 return $content;之前增加一行代码，代码片段：//文章分页 if ($need2pagination==True) { $content=self::parse($content);} return $content; }对于需要分页的内容，修改调用parseContentPublic函数，添加need2pagination参数例如需要提供post的分页功能，仅需要修改如下函数 public static function postContent($obj, $status, $way = "origin")，搜索文本 该部分仅登录用户可见，在文件 Content.php的2092行前后：// $content = Content::parseContentPublic($content); //该行修改前语句，下一行为修改后语句 $content = Content::parseContentPublic($content,True); } return trim($content); }目前只测过对帖子分页，页面等其他内容的分页没测试过。其他内容如果需要分页，同样可以用($content,True)参数试试，风险自担。在文章中分页文章需要分页处添加行 = page =（注意去掉页面前后的间隔）。当然也可以修改代码换成其他标识。[/collapse]自定义后台路径[collapse status="false" title="修改教程"]建议：不要使用默认的 admin 后台地址，不仅仅是 Typecho，其他程序也是类似不要使用默认的 admin 用户名请使用强密码，即 字母、数字以及特殊字符的组合，且长度在 8 位以上方法修改后台登陆地址其实很简单，分成两步即可。第一步将Typecho程序根目录中的后台文件夹"admin"改名，名字即为你想自定义的地址名，例如：将"admin"改为"xxx"第二步修改根目录文件"config.inc.php"，打开该文件后找到/* 后台路径(相对路径) /define('TYPECHO_ADMIN_DIR', '/admin/');将代码中"admin"改为你自定义的地址，例如：xxx然后我们的Typecho程序网站的后台，就改成：xxx/xxx了注意！上面两次操作设置的名称应保持一致！请不要在 robots.txt 文件中泄露你刚刚修改过后的文件地址。写在最后你甚至还可以调戏访问 admin 路径的访客：在网站目录下新建 admin 文件里，下面放一个index.html ，这个 index.html 里你可以尽情的嘲讽或者调戏你的访客！[/collapse]Typecho添加评论自动排第一功能栏目[collapse status="false" title="修改教程"]1、将下面的代码复制粘贴到handsome主题的functions.php文件中。function Autofirst(){ $db = Typecho_Db::get(); $query = $db->select()->from('table.comments')->where('authorId = ?','0')->order('coid',Typecho_Db::SORT_DESC)->limit(100); $result = $db->fetchAll($query); $arrUrl = array(); $arrAuthor = array(); foreach ($result as $value) { if($value["url"]!==null){ array_push($arrUrl,$value["url"]); array_push($arrAuthor,$value["author"]); } } $su=array_filter(array_merge(array_unique($arrUrl))); $sa=array_filter(array_merge(array_unique($arrAuthor))); $num=0; for($i=0;$i<count(array_unique($su));$i++){ if($su[$i]!=="" && $num<8){ $num+=1; $db1 = Typecho_Db::get(); $query1 = $db1->select()->from('table.comments')->where('url = ?',$su[$i])->order('coid',Typecho_Db::SORT_DESC)->limit(100); $result1 = $db1->fetchAll($query1); $arrAuthor1 = array(); foreach ($result1 as $value) { array_push($arrAuthor1,$value["author"]); } echo ' '.$arrAuthor1[0].' '; } } }其中，functions里的“num<8”的8就是用来定义显示数量，推荐为4的倍数。2、将下面CSS代码复制粘贴到Typecho后台“控制台>外观>设置外观>开发者设置>自定义CSS”中。.autofirst1 .item{ padding:5px 10px } .overflow{ overflow:hidden; white-space: nowrap; word-wrap: normal; } .autofirst1{ padding:10px 20px }如果需要让按钮圆角显示，如果添加下面样式：.item a{border-radius:10px}3、将下面HTML代码添加到handsome主题目录的index.php文件中。 每评论一次就会自动排在本栏目第一位 <?php Autofirst(100) ?> [/collapse]增加标签云独立页面[collapse status="false" title="修改教程"]感觉在每个页面都把标签云显示出来会有点乱，但标签云的存在又有它自己的作用，于是想着将标签云单独在一个页面中罗列出来。新建一个名为：tags.php文件，填入以下代码后存放在模板目录下：<?php /** * 标签云 * * @package custom */ ?> <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <?php $this->need('component/header.php'); ?> <?php $this->need('component/aside.php'); ?> <main class="app-content-body <?php echo Content::returnPageAnimateClass($this); ?>"> <?php echo Content::exportPostPageHeader($this,$this->user->hasLogin(),true); ?> <?php Content::BreadcrumbNavigation($this, $this->options->rootUrl); ?> <?php echo Content::exportHeaderImg($this); ?> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=280')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <span class="tt-badge" style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)"><a href="<?php $tags->permalink();?>" target="_blank"><?php $tags->name(); ?> <?php endwhile; ?> <?php endif; ?> <?php Content::pageFooter($this->options) ?> <?php $this->need('component/sidebar.php'); ?> <?php $this->need('component/footer.php'); ?> 完成后，在后台创建独立页面，自定义模板选择刚刚新建的“标签云”模板，可以不用填入任何内容，直接发布便完成。[/collapse]相关文章、随机文章的样式美化[collapse status="false" title="修改教程"]修改代码：post.php 与 functions_mine.php：post.php，看需求调用 <?php $this->related(3)->to($relatedPosts); ?> <?php if ($relatedPosts->have()): ?> 猜你想看 <?php while ($relatedPosts->next()): ?> <a class="list-group-item text-ellipsis" href="<?php $relatedPosts->permalink(); ?>" title="<?php $relatedPosts->title(); ?>"><?php $relatedPosts->title(); ?> <?php endwhile; ?> 随机文章 <?php getRandomPosts(3);?> <?php else: ?> 随机文章 <?php getRandomPosts(3);?> <?php endif; ?> functions_mine.php：文件末尾处/** * 随机文章，在需要添加随机文章的地方加上代码：<?php getRandomPosts(10);?> * 数字10为要调用的文章数量。 */ function getRandomPosts($random) { $modified = $random->modified; $db = Typecho_Db::get(); $adapterName = $db->getAdapterName();//兼容非MySQL数据库 if ($adapterName == 'pgsql' || $adapterName == 'Pdo_Pgsql' || $adapterName == 'Pdo_SQLite' || $adapterName == 'SQLite') { $order_by = 'RANDOM()'; } else { $order_by = 'RAND()'; } $sql = $db->select()->from('table.contents') ->where('status = ?', 'publish') ->where('table.contents.created <= ?', time()) ->where('type = ?', 'post') ->limit($random) ->order($order_by); $result = $db->fetchAll($sql); foreach ($result as $val) { $val = Typecho_Widget::widget('Widget_Abstract_Contents')->push($val); echo ' ' . $val['title'] . ' '; } }相关文章及随机文章列表的标题增加了自定义样式：tt-suiji-title 添加至后台自定义CSS.tt-suiji-title{color: #777;background-color: #eee;}[/collapse]栏目列表美化《小图标模式下》 ::Fluent:91::[collapse status="false" title="修改教程"]文件：Content.php文件，位于：主题 / handsome / libs /，将第1156行开始的下述代码(V7.3.1)， 将第1164行开始的下述代码(V8.1.0)： 替换为： 设置外观→开发者设置→自定义CSS，填入以下css样式：.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#8abcd1;color:#fff;} .tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);} .tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;} .tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);} .tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;} .tt-small-blur .text-title{color:inherit;} .tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;} .tt-small-blur .text-muted{color:inherit;} .tt-small-blur .post-meta {padding: 30px 30px 15px 30px;} @media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}} @media (max-width:500px){.tt-small-blur .summary{display:none;}} @media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}} @media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}踩坑点主题外观设置>主题增强功能>增强功能开关>延迟加载图片（lazyload）开启后在显卡较差设备可能会带来滚动掉帧延迟加载图片（lazyload）开启后在显卡较差设备可能会带来滚动掉帧此项一定要关闭，不然显示下面状态！[/collapse]全站字数-在线人数-访客总数-网站加载耗时[collapse status="false" title="修改教程"]以下代码添加至/usr/themes/handsome/functions.php内第一行php后/**自定义 * 访问总量 */ 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; } /** * 获取访客IP并保存 */ $ip = $_SERVER['REMOTE_ADDR']; $time = gmdate("H:i:s",time()+8*3600); $file = "ip.txt" ; $fp=fopen ("ip.txt","a") ; $txt= "$ip"."----"."$time"."\n"; fputs($fp,$txt); /** * 在线人数 */ 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"; } // 自定义END以下代码添加至/usr/themes/handsome/component/sidebar.php内 <?php echo allOfCharacters(); ?><?php _me("全站字数") ?> <?php echo online_users() ?><?php _me("在线人数") ?> <?php echo theAllViews();?><?php _me("访客总数") ?> <?php echo timer_stop();?><?php _me("加载耗时") ?> [/collapse]加载动画[collapse status="false" title="修改教程"]以下代码添加至/usr/themes/handsome/header.php内 最后 主题设置，自定义 JavaScript，添加以下代码$(function(){ $("#PageLoading").fadeOut(400); $("#body").css('overflow',''); });[/collapse]修改评论区名称前图标[collapse status="false" title="修改教程"]路径：/usr/themes/handsome/component/comments.php1.1 找到下面的这串代码（位置大概在169行）<img class="author-avatar" src="<?php echo Utils::getAvator($this->remember('mail',true),65) ?>" nogallery/>1.2替换成下面代码 1.3效果[/collapse]删除首页文章卡片的作者信息(图片板式)[collapse status="false" title="删除首页文章卡片的作者信息(图片板式)"]版本: 9.2.1文件路径：/handsome/libs/Content.php删除源代码766-767行 {$parameterArray['author']} {$dateString} 770-771行 {$commentNumString} [/collapse]Handsome文件component/aside.php 左边导航栏 component/comments.php 评论区 component/footer.php 底部版权、音乐播放器之类 component/header.php 页面头，没啥要改的 component/headnav.php 顶部导航 component/say.php 时光机动态 component/sidebar.php 右侧栏目 component/third_party_comments.php 3.3.0新增，第三方评论 css/ 博客CSS，一般不要改 fonts/ 博客字体，一般不要改 img/ 图像，一般不要改 js/ js文件，一般不要改 lang/ 语言文件 libs/Content.php 文章内容 libs/... 一般不要改 usr/ 另一个语言文件？ 404.php 404界面 archive.php 整合 booklist.php 书单 cross.php 时光机 files.php 归档 functions.php 配置界面的东西 guestbook.php 留言板 index.php 首页 links.php 友链 page.php 文章页面整合 post.php 文章输出 color： 选填，不填默认为success（绿色），可选值： light：白色 info：蓝色 dark：深色 success：绿色 black：黑色 warning：黄色 primary：紫色 danger：红色 [/tab][/tabs]表情包添加[collapse status="false" title="修改教程"][post cid="760" cover="https://youpaiyun.sangxuesheng.cn/picgo%E5%9B%BE%E5%BA%8A/1715511314.png"/][/collapse]typecho的更多分享[post cid="360" /][post cid="642" /][post cid="685" /]
效果展示： 1.去阿里巴巴矢量库选择自己喜欢的图标官网选择自己喜欢的图标，尽量每个类目都能有。方便后期使用。不清楚怎操作可以看上一期文章[post cid="340" /]2.在项目文件里，生成symbol代码 把修改好的symbol代码在handsome后台的开发者设置/自定义输出head头部的HTML代码3.图标css样式把css代码在handsome后台的开发者设置/自定义 CSS4.选择要使用的图标,获取代码,替换名称即可5. 展示 6.更新矢量图库更新矢量图库需要更新一下symbol代码，handsome后台的开发者设置/自定义输出head头部的HTML代码即可。