关于 教程来源至网络 自定义CSS 自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS 首页文章版式阴影化 [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阴影*/ .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] =page= 自定义head 自定义head丨放入后台-外观设置-开发者设置-自定义头部-head 给网站添加crisp在线客服插件 [collapse status="false" title="给网站添加crisp在线客服插件"] 注册crisp账户并添加网站：https://app.crisp.chat/initiate/signup/ 注册完成后，点击 设置-网站设置-显示整合-HTML，复制代码添加至后台主题设置 自定义输出head 头部的HTML代码即可 [/collapse] 网站背景添加海浪背景 [collapse status="false" title="网站背景添加海浪背景"] 添加至后台主题设置-开发者设置-自定义CSS /* 海浪背景CSS部分 */ #wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;} .waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; } .parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } @keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } } 添加至后台主题设置-开发者设置-自定义网站头部代码 <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use> <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use> </g> [/collapse] 自定义body 自定义body丨放入后台-外观设置-开发者设置-自定义尾部-body 全局彩色字 [collapse status="false" title="全局彩色字"] 转至Dzの神奇小窝 [tabs] [tab name="代码" active="true"] 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+")"; }); } [/tab] [tab name="使用方法"] 基础用法 1.在网页body标签前添加一个script标签 2.将代码复制进script标签 3.在代码后添加 colorful(颜色最浅值，颜色最深值); 推荐值：colorful(100,115); 4.如果页面有pjax，再加一句 colorful(颜色最浅值，颜色最深值);在回调函数里 进阶用法（按推荐值示例） 在代码中加入 t = setTimeout(function(){ colorful(100,115); },600); 在pjax回调函数中加入 colorful(100,115); clearTimeout(t); 代码 var All = document.querySelectorAll('*');中的号是Css选择器，代表选择所有DOM，也可以改为#XXX,.XXX来选择特定的DOM元素，只让特定位置变色 [/tab] [/tabs] [/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] 自定义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] =page= 其他修改 这个的话就是一般都是改源代码的了 文章内加一个正文结束 [collapse status="false" title="文章内加一个正文结束"] 在主题文件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="文章内添加一个高级删除线"] 首先在主题文件header.php内底部head标签上面添加以下代码 使用方法就是在文章内写以下，建议带（!!!） !!! 你想说啥 !!! 删除线测试你想说啥 [/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.然后在你需要输出检测结果的地方加入<?php baidu_check(); ?>即可 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文件内。 的博客信息下方合适位置 [/collapse] 首页倒计时 [collapse status="false" title="首页倒计时"] 将以下代码添加至后台-开发者设置-首页列表最前方广告位。 /*首页倒计时*/ 2021年- 新年倒计时 天 时 分 秒 [/collapse] 404页面自动返回 [collapse status="false" title="404页面自动返回"] 打开/usr/themes/handsome/404.php，在第130行左右，在 h1 class="text-shadow text-white">404 后面添加： 10秒后自动返回··· 立刻返回 然后把下面这段放到最后的/body前 [/collapse] 给typecho加上心知天气 [collapse status="false" title="给typecho加上心知天气"] 1.知心天气官网www.seniverse.com注册申请免费API 密钥 2.将以下代码放入/usr/themes/handsome/component/headnav.php第55行!-- / search form --之后并更换你的公钥秘钥即可 [/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 数组中插入 '分类缩略名' => '图标' 即可。 有人可能不知道在哪里哈（其实是我不知道 [](https://blog.iucky.cn/usr/themes/handsome/assets/img/emotion/aru/shit.png) ） 在/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' Fontello handsome 主题自带部分 fontello 图标，具体列表可在 handsome 主题文档 查看。 使用方法 在图标的名字前加入 fontello fontello- 即可。 ****使用样例 与 Font Awesome 相似，在此不多赘述。 Feather handsome 主题自带 feather 的所有图标，在此处使用需要一些变通措施。 使用方法 在 https://feathericons.com/ 选取好你需要的图标。 然后在名称前插入 " data-feather=" ，再输入名称即可。 ****使用样例 以 airplay 为例： 输入 'airplay' => '" data-feather="airplay' 即可。 其他 SVG 格式的图标 使用方法 在 svg 的开头加入 "> ，在结尾加入 ` 即可。 使用样例 下载下来的 svg 文件内容： 将其复制，然后在 $icons 的 array 数组中插入的代码： 'airplay' => '"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" st [/collapse] 首页快捷搜索 [collapse status="false" title="首页快捷搜索"] 下面代码添加至后台 首页列表最前方广告位 快捷搜索 百度 搜狗 360 必应 谷歌 百度搜索 搜索 搜狗搜索 搜索 360搜索 搜索 必应搜索 搜索 谷歌搜索 搜索 [/collapse] 为typecho站点设置多个域名 [collapse status="false" title="为typecho站点设置多个域名"] 打开程序目录的这个文件 /var/Widget/Options.php 使用搜索找到这个位置 /** 初始化站点信息 */ if (defined('__TYPECHO_SITE_URL__')) { $this->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] 随机API头图 [collapse status="false" title="随机API头图"] 用法 首先把文章最后的代码存到一个php文件里，位置任意，我这里的位置为/code/get_img.php 打开/usr/themes/handsome/libs/Content.php文件找到whenSwitchHeaderImgSrc函数附近 注释掉$randomNum = unserialize(INDEX_IMAGE_ARRAY);和$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg'; 添加一行$random = '/code/get_img.php?_='.rand(999, 3000); 修改完的 Content.php文件 whenSwitchHeaderImgSrc函数附近应该是长这样的。 配置文件 根据我代码里的样式添加图片的配置就可以了，最好找用id区分图片的网站，配置项会短小很多。 list里面是图片id fun里面是当前数组的url生成函数，想通过参数修改图片大小在这里面修改就搞定了。 <?php /* 直接请求将随机跳转到一个图片 */ $imgArr = []; //https://www.pexels.com/zh-cn/ $imgArr[0] = [ 'list'=>[267371,230477,1115680,838413,235922,1560424,1056251,416160,96938,2194261, 666839,1133957,1269025,1089932,338711,573910,670061,3113124,247431,434090, 1209843,1684187,358312,1536619,96380,164821,373945,1547248,301920,256468, 1653823,59106,556665,461198,376464,321588,3193917,1040157,189349,396547, 3145552,220067,285173,409701,917076,255464,735911,2120016,1162540,], //'fun'=> function($id){return "https://images.pexels.com/photos/{$id}/pexels-photo-{$id}.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";} 'fun'=> function($id){return "https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images";} ]; //https://i.keaitupian.net/ // $imgArr[1] = [ // 'list'=>[ // 'up/40/c0/7c/ec2caa4f7b67d2b44a95bece4e7cc040.jpg', // 'up/38/05/17/57ae05cdfe607c1f877a7881ea170538.jpg' // ], // 'fun'=> function($id){return "https://i.keaitupian.net/".$id;} // ]; function oneImg($id=false){ global $imgArr; //求图片总数 // echo $count; //随机选择一个 if($id == false){ $count = 0; foreach($imgArr as $item){ $count += count($item['list']); } $id = rand(0, $count - 1); } //累积下标 $key = 0; foreach($imgArr as $item){ if(isset($item['list'][$id - $key])){ return $item['fun']($item['list'][$id - $key]); }else{ $key += count($item['list']); continue; } } } header('Location: '.oneImg(isset($_GET['id'])?$_GET['id']:false));exit; [/collapse] 博客元素抖动效果 [collapse status="false" title="博客元素抖动效果"] 效果展示 Wibus 使用方法 首先给需要颤抖元素加上class属性:Pshake Wibus 等等 给Pshake一个display属性inline-block，使得元素可以超出父元素颤抖，否则只能原地颤抖。 加上will-change属性，开启GPU渲染加速，防止在低性能设备中造成卡顿。will-change属性可能会造成元素层叠顺序混乱(z-index混乱)过度使用可能造成反向优化 ! transform-origin: center center;进行中心定位。这个属性需要在前面加上-webkit-和-ms-进行内核适配 animation: name duration timing-function infinite; 四个属性分别为：动画名称、动画多少时间内完成、如何进行动画周期、无限循环 .Pshake{ display: inline-block; will-change: transform; /*可以删除*/ -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation: Pshake_Crazy 1s ease-in-out infinite; animation: Pshake_Crazy 1s ease-in-out infinite; } 现在元素的属性就全部设置好了。下面进行动画的帧的制作。动画帧可以按照自己想要的抖动方式进行 下面是 sample仅供参考。你可以在动画帧中添加更多。在 translate、rotate、opacity等等多种属性中进行组合。 关键帧越多抖动越疯狂！ @keyframes Pshake_Crazy{ 10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);} 20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);} 30%{transform:translate(1.5px,0.5px) rotate(0.5deg);} 40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);} 50%{transform:translate(2.5px,1.5px) rotate(1.5deg);} 60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);} 70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);} 80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);} 90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);} 0%,100%{transform:translate(0,0) rotate(0);} } 高阶抖动~随机关键帧 如上所说【关键帧越多抖动越疯狂！】但是手动写好多好麻烦，不想写啊。而且上面那一串看的头都大。 那么 emmmm.....不写了。 用JS自动生成吧。嗯。下面不解释了，直接放上代码。 function random_keyframes(){ var a='@keyframes Pshake_Crazy{',b='%{transform:translate(',c='px,',d='px) rotate(',e='deg);}', f='0%,100%{transform:translate(0,0) rotate(0);}}',g='',i=1, jitter=30 /*抖动幅度 >=10*/ , level=1 /*抖动程度 1~99*/; function XYRrandom(){ let _xyr_num=((~(Math.random()*jitter))+(~~(Math.random()*jitter)) )/10; return _xyr_num;} for (i; i<100; i+=level) { g=i+b+XYRrandom()+c+XYRrandom()+d+XYRrandom()+e;a=a+g; } return a+f;} 打开网页调用上方的函数 random_keyframes()就会随机生成关键帧。这样每次刷新网页、打开网页抖动的频率都不一样了。 [/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] 调用bilibili视频响应式代码 [collapse status="false" title="调用bilibili视频响应式代码"] 转至：隔壁老杜丶 效果 手机端： ![请输入图片描述]() 电脑端：传送门 食用方法 打开bilibili的某个视频，然后如上图找到嵌入代码 ![请输入图片描述]() 复制嵌入代码添加到文章。 然后在给iframe 这个标签添加 class="iframe_video" iframe_video这个类名 修改后的代码： 之后就是添加样式css了,在模板后台-开发者设置-自定义CSS中添加以下代码： /*视频挂载*/ .iframe_video { position: relative; width: 100%; } @media only screen and (max-width: 767px) { .iframe_video { height: 15em; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .iframe_video { height: 20em; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .iframe_video { height: 30em; } } @media only screen and (min-width: 1200px) { .iframe_video { height: 40em; } } .iframe_cross { position: relative; width: 100%; height: 0; padding-bottom: 75% } .iframe_cross iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0 } 大功告成，直接在文章中插入修改后的Bilibili嵌入代码就可以显示了。 [/collapse] 自定义后台路径 [collapse status="false" title="自定义后台路径"] [scode type="blue"] 建议： 不要使用默认的 admin 后台地址，不仅仅是 Typecho，其他程序也是类似 不要使用默认的 admin 用户名 请使用强密码，即 字母、数字以及特殊字符的组合，且长度在 8 位以上 [/scode] 方法 修改后台登陆地址其实很简单，分成两步即可。 第一步 将Typecho程序根目录中的后台文件夹"admin"改名，名字即为你想自定义的地址名，例如：将"admin"改为"xxx" 第二步 修改根目录文件"config.inc.php"，打开该文件后找到 /* 后台路径(相对路径) / define('TYPECHO_ADMIN_DIR', '/admin/'); 将代码中"admin"改为你自定义的地址，例如：xxx 然后 我们的Typecho程序网站的后台，就改成：xxx/xxx了 [scode type="red"] 注意！ 上面两次操作设置的名称应保持一致！ 请不要在 robots.txt 文件中泄露你刚刚修改过后的文件地址。 [/scode] 写在最后 你甚至还可以调戏访问 admin 路径的访客：在网站目录下新建 admin 文件里，下面放一个 index.html ，这个 index.html 里你可以尽情的嘲讽或者调戏你的访客！ [/collapse] Typecho添加评论自动排第一功能栏目 [collapse status="false" title="Typecho添加评论自动排第一功能栏目"] 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="人生倒计时美化教程"] 转载至：Bliss'Blog 第一步，先找到路径/usr/themes/handsome/component/aside.php，在217行左右添加如下代码 人生倒计时 今日已经过去小时 这周已经过去天 本月已经过去天 今年已经过去个月 我修改过的代码 <path d="M171.733333 141.866667m-18.133333 0a18.133333 18.133333 0 1 0 36.266667 0 18.133333 18.133333 0 1 0-36.266667 0Z" fill="#71BCFF" p-id="15798"></path><path d="M864 210.133333m-17.066667 0a17.066667 17.066667 0 1 0 34.133334 0 17.066667 17.066667 0 1 0-34.133334 0Z" fill="#71BCFF" p-id="15799"></path><path d="M865.066667 288m-11.733334 0a11.733333 11.733333 0 1 0 23.466667 0 11.733333 11.733333 0 1 0-23.466667 0Z" fill="#71BCFF" p-id="15800"></path><path d="M796.8 780.8m-9.6 0a9.6 9.6 0 1 0 19.2 0 9.6 9.6 0 1 0-19.2 0Z" fill="#71BCFF" p-id="15801"></path><path d="M840.533333 743.466667l-9.6-6.4 6.4-9.6c1.066667-1.066667 0-2.133333-1.066666-3.2-1.066667-1.066667-2.133333 0-3.2 1.066666l-6.4 9.6-9.6-6.4c-1.066667-1.066667-2.133333 0-3.2 1.066667-1.066667 1.066667 0 2.133333 1.066666 3.2l9.6 6.4-6.4 9.6c-1.066667 1.066667 0 2.133333 1.066667 3.2s2.133333 0 3.2-1.066667l6.4-9.6 9.6 6.4c1.066667 1.066667 2.133333 0 3.2-1.066666 0-1.066667 0-2.133333-1.066667-3.2zM894.933333 114.133333L874.666667 101.333333l12.8-20.266666c1.066667-2.133333 1.066667-5.333333-1.066667-6.4-2.133333-1.066667-5.333333-1.066667-6.4 1.066666L867.2 96l-19.2-12.8c-2.133333-1.066667-5.333333-1.066667-6.4 1.066667-1.066667 2.133333-1.066667 5.333333 1.066667 6.4l19.2 12.8-12.8 20.266666c-1.066667 2.133333-1.066667 5.333333 1.066666 6.4 2.133333 1.066667 5.333333 1.066667 6.4-1.066666l12.8-20.266667 19.2 12.8c2.133333 1.066667 5.333333 1.066667 6.4-1.066667s2.133333-5.333333 0-6.4zM275.2 81.066667l7.466667-11.733334c1.066667-1.066667 0-3.2-1.066667-3.2s-3.2 0-3.2 1.066667l-7.466667 11.733333-11.733333-7.466666c-1.066667-1.066667-3.2 0-3.2 1.066666s0 3.2 1.066667 3.2l11.733333 7.466667-7.466667 11.733333c-1.066667 1.066667 0 3.2 1.066667 3.2 1.066667 1.066667 3.2 0 3.2-1.066666l7.466667-11.733334 11.733333 7.466667c1.066667 1.066667 3.2 0 3.2-1.066667 1.066667-1.066667 0-3.2-1.066667-3.2l-11.733333-7.466666z" fill="#d81e06" p-id="15802" data-spm-anchor-id="a313x.7781069.0.i9" class="selected"></path><path d="M826.666667 419.2c0-160-130.133333-290.133333-290.133334-290.133333S246.4 259.2 246.4 419.2c0 138.666667 97.066667 253.866667 227.2 282.666667h-72.533333c-8.533333 0-16 7.466667-16 16v2.133333c0 8.533333 7.466667 16 16 16H672c8.533333 0 16-7.466667 16-16v-2.133333c0-8.533333-7.466667-16-16-16h-72.533333c130.133333-28.8 227.2-144 227.2-282.666667zM628.266667 789.333333H443.733333c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16h184.533334c8.533333 0 16-7.466667 16-16v-2.133334c0-9.6-6.4-16-16-16zM586.666667 878.933333h-100.266667c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16H586.666667c8.533333 0 16-7.466667 16-16v-2.133334c0-8.533333-7.466667-16-16-16z" fill="#F8E9EC" p-id="15803" data-spm-anchor-id="a313x.7781069.0.i7" class=""></path><path d="M704 402.133333c-8.533333 0-14.933333-6.4-16-14.933333-3.2-41.6-20.266667-80-46.933333-110.933333-5.333333-6.4-5.333333-17.066667 2.133333-22.4 6.4-5.333333 17.066667-5.333333 22.4 2.133333 30.933333 36.266667 49.066667 81.066667 54.4 129.066667 1.066667 8.533333-5.333333 17.066667-14.933333 17.066666H704z" fill="#FFFFFF" p-id="15804"></path><path d="M793.6 406.4c0-168.533333-137.6-306.133333-306.133333-306.133333S181.333333 237.866667 181.333333 406.4c0 128 78.933333 236.8 189.866667 282.666667H352c-8.533333 0-16 7.466667-16 16v2.133333c0 8.533333 7.466667 16 16 16h272c8.533333 0 16-7.466667 16-16v-2.133333c0-8.533333-7.466667-16-16-16h-19.2C714.666667 643.2 793.6 533.333333 793.6 406.4zM487.466667 680.533333C337.066667 680.533333 213.333333 556.8 213.333333 406.4s122.666667-274.133333 274.133334-274.133333 274.133333 122.666667 274.133333 274.133333-122.666667 274.133333-274.133333 274.133333zM580.266667 776.533333H395.733333c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16h184.533334c8.533333 0 16-7.466667 16-16v-2.133334c0-9.6-7.466667-16-16-16zM537.6 866.133333H437.333333c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16h100.266667c8.533333 0 16-7.466667 16-16v-2.133334c0-8.533333-7.466667-16-16-16z" fill="#3A3A3A" p-id="15805"></path> <?php _me("人生倒计时") ?> 今日已经过去小时 这周已经过去天 本月已经过去天 今年已经过去个月 第二步-添加完成后,在主题后台自定义css里添加如下代码，一般都是在主题设置-开发者设置-自定义CSS样式丢进去就行了 /* 时间表 */ .aside-count .content { padding: 15px } .aside-count .content .item { margin-bottom: 15px } .aside-count .content .item:last-child { margin-bottom: 0 } .aside-count .content .item .title { font-size: 12px; color: var(--minor); margin-bottom: 5px; display: flex; align-items: center } .aside-count .content .item .title span { color: var(--theme); font-weight: 500; font-size: 14px; margin: 0 5px } .aside-count .content .item .progress { display: flex; align-items: center } .aside-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 } } .aside-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 } .aside-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 } .aside-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 } .aside-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 } .aside-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 } .aside-count .content .item .progress .progress-percentage { color: var(--info) } 第三步-添加完成后,在到/usr/themes/handsome/assets/js里面创建名为timeinfo.js后把下面代码复制进去保存. function init_life_time() { function getAsideLifeTime() { /* 当前时间戳 */ let nowDate = +new Date(); /* 今天开始时间戳 */ let todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); /* 今天已经过去的时间 */ let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60; /* 今天已经过去的时间比 */ let todayPassHoursPercent = (todayPassHours / 24) * 100; $('#dayProgress .title span').html(parseInt(todayPassHours)); $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%'); $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%'); /* 当前周几 */ let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }; let weekDay = weeks[new Date().getDay()]; let weekDayPassPercent = (weekDay / 7) * 100; $('#weekProgress .title span').html(weekDay); $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%'); $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%'); let year = new Date().getFullYear(); let date = new Date().getDate(); let month = new Date().getMonth() + 1; let monthAll = new Date(year, month, 0).getDate(); let monthPassPercent = (date / monthAll) * 100; $('#monthProgress .title span').html(date); $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%'); $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%'); let yearPass = (month / 12) * 100; $('#yearProgress .title span').html(month); $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%'); $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%'); } getAsideLifeTime(); setInterval(() => { getAsideLifeTime(); }, 1000); } init_life_time() 第四步-最后到开发者设置-自定义输出body尾部的HTML代码里面引入此js [/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] 栏目列表美化 [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:#333;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;}} [/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] =page= 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：红色 插件 解压包，不要做修改文件名上传至Typecho博客/usr/plugins文件夹内，后台启用！ 插件 介绍 地址 CodePrettify Mac风格代码高亮 本地下载 tagshelper 后台编辑文章时增加标签选择列表 本地下载 ShortLinks 把外部链接转换为内链接 本地下载 AliceStyle 萌卜兔's 美化插件 本地下载 CommentFilter 评论过滤器 本地下载 CommentPush 评论通知推送多服务 本地下载 EditorMD Markdown 编辑器 Editor.md 本地下载 MarkdownParse 更快、更强的 Markdown 解析插件 本地下载 PartiallyPassword 文章部分加密 本地下载 权限狗 修改注册时默认用户组 本地下载 ServerStatus Typecho服务器状态插件 本地下载 UserAgent 显示评论人使用的操作系统和浏览器信息 本地下载 WeTypecho插件 微信QQ小程序通用WeTypechoAPI接口插件 本地下载 WowScroll 一款基于wow.js的元素初次加载动画插件 本地下载 Access 获取访客信息，生成统计图表 本地下载 Live2D 一款基于爆胎看板娘js的插件 本地下载 SuVideo Su Video一款适配typecho所有主题的影视插件 本地下载 cosUploadV5 cosV5--for Typecho 使用cosV5版本sdk 本地下载
前言 RustDesk 是一个开源的远程桌面应用，允许用户自建服务器，以替代 TeamViewer 等远程控制软件。为了方便自建服务的用户快速使用Rustdesk，构建内置自己服务器和key的RustDesk 客户端便成为了广大互联网爱好者的需求。 默认情况下，RustDesk 依赖 hbb_common 作为其基础库，并默认连接到官方服务器。如果你希望使用自己的服务器，则需要修改 hbb_common 代码并让 rustdesk 指向你修改后的 hbb_common 仓库。 本教程将介绍如何利用Github Actions 实现自动构建内置你服务器和key的Rustdesk客户端。 1. 准备工作 在开始之前，请确保你已经安装了 Git，并且拥有一个 GitHub 账户。建议你对 Git 的基本使用有一定了解，以便顺利完成后续操作。 2. Fork Rustdesk仓库 rustdesk/hbb_common rustdesk/rustdesk 2.1 拉取 Fork 后的代码 请注意，替换仓库地址为你fork后的仓库地址，而不是直接复制我下面的命令 # 可选：如果需要使用代理 # git config --global http.proxy http://127.0.0.1:10808 # git config --global https.proxy http://127.0.0.1:10808 # 拉取仓库代码到本地 请替换为你fork后的仓库地址 git clone https://github.com/irains/hbb_common.git git clone https://github.com/irains/rustdesk.git 3. 修改 hbb_common代码 打开 hbb_common 仓库下的 src/config.rs文件，修改 **101-102 行** 的默认服务器和密钥为你自己的服务器和密钥。 3.1 推送修改后的代码 # 将修改的代码添加到暂存区 git add . # 将代码提交到本地仓库 git commit -m "修改默认的服务器和 key" # 将本地仓库代码推送到远程仓库 如果你没有登录过GitHub会要求你登录github git push 3.2 查看最新提交的 commit ID git log --oneline Bash 我这里提交后的commit id是b8d80ca，可用于后续验证rustdesk服务器和key是否修改成功 4. 修改 rustdesk 仓库代码 我们切换到克隆下来的rustdesk代码目录下，按照下面的方式修改子模块地址并更新。 4.1 更新 .gitmodules 打开并编辑 .gitmodules 文件，将 url 替换为你Fork后的 hbb_common 仓库地址。 比如我fork后的仓库地址是https://github.com/irains/hbb_common则将 https://github.com/rustdesk/hbb_common地址换为前面这个地址即可，记住是hbb_common的地址，而不是rustdesk仓库的地址 4.2 更新子模块 将上面修改好的代码保存，执行下面的命令更新子模块到最新的commit id git submodule init git submodule sync git submodule update --remote 4.3 提交并推送代码 git add . git commit -m "修改子模块仓库地址" git push 4.4 确认 Commit ID 更新 代码推送完毕后，进入你Fork 后的 rustdesk 仓库的 libs 目录下，查看 hbb_common 后面的 commit id，确保它是3.2提到的b8d80ca（这个值每个人的是不同的），否则请回到上面的步骤重新检查是否遗漏了了某个操作。 5. 触发 GitHub Action 构建 5.1 创建 Tag 在本地 rustdesk 仓库中创建一个新 tag，例如 1.3.9，请使用 **固定格式** (如 1.3.9 或 v1.3.9)，以便于自动匹配构建规则。 git tag -a 1.3.9 -m "修改内置服务器和 key" 5.2 触发 GitHub Actions 构建 在 rustdesk 仓库中，进入 Actions 页面，点击下面图中的按钮启用自动构建。启用后回到本地rustdesk代码中使用下面的命令将tag推送到Github后将自动开始构建。 git push --tags 5.3 下载构建好的客户端 Tag推送完毕后会出现下面的构建进度。 等待 Action 执行完成后（时间比较长，一个半小时左右才能全部构建完成），进入 Releases 页面，即可下载构建好的客户端并使用。
关于 由于个人原因~ 比较喜欢Sakura主题和Sakurairo主题的页面， 如果把他扒下来做一个单页效果如何呢，说干就干！~ 截图 [tabs] [tab name="电脑端" active="true"] [album type="photos"] [/album] [/tab] [tab name="移动端"] [album type="photos"] [/album] [/tab] [/tabs] 示例 さくら荘丨樱花庄：点我进入 页面功能 [collapse status="false" title="页面功能"] 置顶视频功能正常 API随机图片背景、 左下角伸缩播放器 夜间模式切换（不完整） 手机页面适配 捆猫返回顶部（最爱） 设置页面背景 个人信息按钮 [/collapse] 已知问题 [collapse status="false" title="已知问题"] 无用css与无用js过多 夜间模式适配不完整 控制台报错 [/collapse] 修复与更新 [collapse status="false" title="修复与更新"] 2.0 修复： 音乐播放器不生效 默认显示设置按钮 添加： 樱花js live2d 嘉然 更新： 顶部导航固定样式 首页一言打字效果 [/collapse] 下载地址 1.0 [button color="info" icon="fa fa-download" url="https:/\/\cos.muyu.love/2021/08/24/1629756720.zip" type=""]本地下载[/button] 2.0 [button color="info" icon="fa fa-download" url="https:/\/\cos.muyu.love/2021/08/26/1629986218.zip" type=""]本地下载[/button] 本地下载需要评论获得解压密码 提取码：(评论后请点击此按钮刷新页面： [button color="black" icon="" url="#" type=""]刷新[/button] )
关于 该资源来源至：恶魔萝莉控 截图 [tabs] [tab name="电脑端" active="true"] [album type="photos"] [/album] [/tab] [tab name="移动端"] [album type="photos"] [/album] [/tab] [/tabs] 示例 见博客右下角位置哇咔咔！ 使用 [collapse status="false" title="使用说明"] 1，以下代码添加至博客目录 /usr/themes/handsome/index.php 文件内末尾； //返回顶部 //返回顶部按钮 2，以下代码添加至 后台-主题设置-开发者设置-自定义css /*返回顶部*/ .back-to-top { position: fixed; z-index: 2; right: -108px; bottom: 0; width: 108px; height: 150px; background: url("https://cdn.muyu.love/Blog/Handsome/img/back-to-top.png?v=1") no-repeat 0 0; background-size: 108px 450px; opacity: 0.6; transition: opacity 0.3s, right 0.8s; } .back-to-top:hover { background-position: 0 -150px; opacity: 1; } .back-to-top.load { right: 0; } .back-to-top.ani-leave { background-position: 0 -150px; animation: ani-leave 390ms ease-in-out; animation-fill-mode: forwards; } .back-to-top.leaved { pointer-events: none; background: none; transition: none; } .back-to-top.ending { pointer-events: none; } .back-to-top.ending::after { opacity: 1; } .back-to-top::after { content: ''; position: fixed; z-index: 2; right: 0; bottom: 0; width: 108px; height: 150px; background: url("https://cdn.muyu.love/Blog/Handsome/img/back-to-top.png?v=1") no-repeat 0 0; background-size: 108px 450px; background-position: 0 -300px; transition: opacity 0.3s; opacity: 0; pointer-events: none; } [/collapse]
关于 由于个人原因，还是比较喜欢樱花庄白猫 的logo字体特效。 可是又懒得做去维护Sakura主题和Sakurairo主题，实在是惦记，于是便给他扒下来整到handsome来拉！ 截图 [tabs] [tab name="电脑端" active="true"] [album type="photos"] [/album] [/tab] [tab name="移动端"] [album type="photos"] [/album] [/tab] [/tabs] 使用说明 一，Logo特效 [collapse status="false" title="Logo特效"] 1，博客目录 /usr/themes/handsome/index.php 文件内搜索 <--?php $this->options->title(); ?> 2，记得注释上方原标题输出的哦，方便还原~ 3，按照上图位置添加下方代码 さくら荘 の 樱 花 庄 回首往事旧时光，早已是物事人非！ 4，记得修改上方的字体引入文件哦，不然你就体验不到自己想要的字体啦 5，将下方的字体css文件添加自后台-主题设置-开发者设置-自定义css内 /* logo字体 */ .Moe-Mashiro { font-family: 'Moe-Mashiro', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif; } .logolink .sakuraso { background-color: rgba(255, 255, 255, .5); border-radius: 5px; color: #464646; height: auto; line-height: 25px; margin-right: 0; padding-bottom: 0px; padding-top: 1px; text-size-adjust: 100%; width: auto; } .logolink b:hover .sakuraso { background-color: orange; color: #fff; } .logolink b:hover .shironeko, .logolink b:hover rt { color: orange; } .logolink.Moe-Mashiro a { color: #464646; float: left; font-size: 25px; font-weight: 800; height: 56px; line-height: 56px; padding-left: 6px; padding-right: 15px; padding-top: 11px; text-decoration-line: none; } .logolink.Moe-Mashiro .sakuraso,.logolink.Moe-Mashiro .no { font-size: 30px; border-radius: 10px; padding-bottom: 2px; padding-top: 5px; } .logolink.Moe-Mashiro .no { display: inline-block; margin-left: 5px; } .logolink b:hover .no { -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } .logolink ruby { ruby-position: under; -webkit-ruby-position: after; } .logolink ruby rt { font-size: 10px; transform: translateY(-2px); opacity: 0; transiton-property: opacity; transition-duration: 0.5s, 0.5s; } .logolink b:hover ruby rt { opacity: 1; } 至此logo特效已经完成啦！接下来是教大家拥有一个自己独一无二的Logo字体~ [/collapse] 二，自定义字体 [collapse status="false" title="自定义字体"] 像我这标题就选择了两总字体组成，大家发现了嘛， 一个是白猫博客的logo字体做为さくら荘 将 樱花庄 又选择了例外个不同的字体。 这就需要使用到Fontmin这款软件去挑选自己喜欢的字体，单独做个字体库，这样可以避免字体文件过大，加载延迟。 使用方法也很简单只需要把你想要的ttf字体文件拖到下方在文字片段上输入你想要的标题，点击生成会得到以下字体文件 如何使用这些字体文件呢，其实只需要将他们全部打包上传至一个自定义目录上用 这段代码在头部 引入字体的css文件，在后台-主题设置-开发者设置-自定义css 内添加 /*首页标题字体与居中*/ .bg-light .lter,.bg-light.lter { text-align:center!important; font-family: Moe-Mashiro !important; } 这是我的字体大家要按自己的字体名称替换掉font-family: Moe-Mashiro中的Moe-Mashiro哦~ 怎么看字体名称嘛，打开字体css 文件夹可以看到font-family: "Moe-Mashiro"; 其中Moe-Mashiro便是这个字体的名称啦~ [/collapse] 三，合并字体 [collapse status="false" title="合并字体"] 合并字体我们就需要用到上面的拆分字体方法将他拆分成2份不同的字体文件在网站 fonteditor 中进行合并操作 1，首先是要导入刚拆分成两份不同字体文件 2，导入成功便可真上面看到你所有的字体啦 3，之后点击TTF导出即可 [/collapse] 工具下载 转换工具和一些卡哇伊的字体文件 [button color="info" icon="fa fa-download" url="https:/\/\cos.muyu.love/2021/07/21/1626803634.zip" type=""]本地下载[/button] 本地下载需要评论获得解压密码 提取码：(评论后请点击此按钮刷新页面： [button color="black" icon="" url="#" type=""]刷新[/button] )
关于 该资源来至：恶魔萝莉控 截图 [tabs] [tab name="角色一" active="true"] [album type="photos"] [/album] [/tab] [tab name="角色二"] [album type="photos"] [/album] [/tab] [/tabs] 示例 见博客左下角位置哇咔咔！ 使用 [collapse status="false" title="使用说明"] 添加下方代码至博客 （只要是个网页基本都可以啦~） /usr/themes/handsome/component/footer.php或者后台主题设置-开发者设置-自定义输出body尾部的HTML代码 [/collapse] 代码 [collapse status="false" title="所需代码"] [/collapse] 部署 [collapse status="false" title="本地部署"] 如想部署到自己服务器上， 下载下方文件解压到服务器引入。 请按照说明自行更改引入文件地址。 并将修改后的代码（如下）添加至博客的 /usr/themes/handsome/component/footer.php或者后台主题设置-开发者设置-自定义输出body尾部的HTML代码 [/collapse] 故障 [collapse status="false" title="已知问题"] 夜间模式失效，坐等来个大佬修复~ [/collapse] 下载 [scode type="green"]下载地址[/scode] [button color="info" icon="fa fa-download" url="https:/\/\cos.muyu.love/2021%2F08%2F06%2F1628223154.zip" type=""]本地下载[/button] 提取码：(评论后请点击此按钮刷新页面： [button color="black" icon="" url="#" type=""]刷新[/button] )
关于 官网：CMD-PE开发者：Heimen 基本依靠系统Cmd指令进行部署 无广告，无捆绑，一键下载并安装系统 支持网络远程（需要联网版，付费模式） 支持直接联网在线更新Pe无需在重新部署Pe 截图 [tabs] [tab name="部署" active="true"] [album type="photos"] [/album] [/tab] [tab name="界面"] [album type="photos"] [/album] [/tab] [/tabs] 官网下载 [button color="info" icon="fa fa-download" url="" type=""]网络版[/button] [button color="info" icon="fa fa-download" url="http:/\/\od.xcc.red/directlink/3/CMDPE/CmdPe-2.9.9-%E6%97%A0%E7%BD%91%E7%BB%9C%E7%89%88.zip" type=""]无网络版[/button] [scode type="share"]网络版需要官网付费[/scode] [scode type="share"]官网下载因为服务器是香港的会比较慢[/scode] 本地下载 [button color="info" icon="fa fa-download" url="" type=""]网络版[/button] [button color="info" icon="fa fa-download" url="https:/\/\cos.muyu.love/2021/07/07/CmdPe-2.9.9-%E6%97%A0%E7%BD%91%E7%BB%9C%E7%89%88.rar" type=""]无网络版[/button] [scode type="yellow"]本地下载需要评论获得解压密码[/scode] 提取码：(评论后请点击此按钮刷新页面： [button color="black" icon="" url="#" type=""]刷新[/button] )
截图 [tabs] [tab name="电脑端" active="true"] [album type="photos"] [/album] [/tab] [tab name="手机端"] [album type="photos"] ![手机端 - ]() ![手机端 -]() ![手机端 -]() [/album] [/tab] [/tabs] 简单介绍 解析全网VIP视频 出现无法解析的情况下可切换解析线路，或修改为其他线路 使用说明 [collapse status="false" title="使用说明"] 解压到博客/usr/themes/handsome目录下 登录Typecho后台新建独立页面 页面模板选择视频解析 访问页面地址体验效果 [/collapse] [scode type="green"]示例[/scode] 视频解析：点击访问 [scode type="green"]下载地址[/scode] [button color="info" icon="fa fa-download" url="https:/\/\cos.muyu.love/2021/07/16/1626421680.zip" type=""]本地下载[/button] 提取码：(评论后请点击此按钮刷新页面： [button color="black" icon="" url="#" type=""]刷新[/button] )
简单介绍 插件功能：弹幕后台、前置广告、暂停广告、会员去广告，记忆回放，自动下一集插件支持：.m3u8、.mp4、.flv 等常见视频格式，注意：不支持 MP4 H265 格式的视频插件兼容：电脑、手机端 修改说明 原作者：京都一只喵 解密 yzmplayer.js 文件修复了视频弹幕非独立的问题兼容了 PHP7.X，在 PHP7.4 环境测试通过更新版本号至 v1.2.1重写了使用说明 使用方法 解压到网站根目录登录 你的域名/dmku 进行配置数据库修改播放器后台密码 dmku/config.inc.php登录后台 你的域名/admin,密码为第 3 步修改的密码播放器功能可后台设置 挂载至博客 新建文章或者页面，按照下方代码填写即可 参数说明 "av":'<?php echo($_GET['av']);?>',//B站av号，用于调用弹幕 "url":"<?php echo($_GET['url']);?>",//视频链接 "id":"<?php echo($_GET['url']);?>",//视频id "sid":"<?php echo($_GET['sid']);?>",//集数id "pic":"<?php echo($_GET['pic']);?>",//视频封面 "title":"<?php echo($_GET['name']);?>",//视频标题 "next":"<?php echo($_GET['next']);?>",//下一集链接 "user": '<?php echo($_GET['user']);?>',//用户名 "group": "<?php echo($_GET['group']);?>",//用户组 请求示例 基本 https://localhost/player/?url=https://cdn.jsdelivr.net/gh/MoGuJ/Video-Bed/Your.Name/playlist.m3u8 高级 除了 url 参数，其他都可以省略 https://localhost/player/?url=https://cdn.jsdelivr.net/gh/MoGuJ/Video-Bed/Your.Name/playlist.m3u8&next=https://cdn.jsdelivr.net/gh/MoGuJ/Video-Bed/Your.Name/playlist.m3u8&sid=1&pic=https://img.xx.com/sss.png&user=游客&group=1&name=测试 [scode type="green"]下载地址[/scode] [button color="info" icon="fa fa-download" url="https:\/\/cos.muyu.love/2021/07/14/1626267542.zip" type=""]本地下载[/button] 正版购买：京都一只喵 压缩密码：(评论后请点击此按钮刷新页面： [button color="black" icon="" url="#" type=""]刷新[/button] )
关于 1.本资源并非本人开发！ 2.本人仅是收集，修改部分失效链接! 3.如有知道开发者的，请告知我会立即更改信息! 注意 感谢大佬提醒，请大家自行检查。 截图 [tabs] [tab name="电脑端" active="true"] [album type="photos"] [/album] [/tab] [tab name="手机端"] [album type="photos"] [/album] [/tab] [/tabs] 示例 后台美化：点我进入 修复头像 [collapse status="false" title="教程"] 因为国内gravatar头像地址被墙，需要更换第三方gravatar头像地址 博客根目录/var/Typecho下Common.php文件内搜索（获取gravatar头像地址）或者大概位置为932行 修改为以下 /** * 获取QQ头像，如果失败，获取Gravatar头像 * * @param string $mail * @param int $size * @param string $rating * @param string $default * @param bool $isSecure * @return string */ public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { $reg = "/^\d{5,11}@[qQ][Qq]\.(com)$/"; if (preg_match($reg, $mail)) { $img = explode("@", $mail); $url = "//q2.qlogo.cn/headimg_dl?dst_uin={$img[0]}&spec=100"; } else { if (defined('__TYPECHO_GRAVATAR_PREFIX__')) { $url = __TYPECHO_GRAVATAR_PREFIX__; } else { $url = $isSecure ? 'https://gravatar.muyu.love' : 'https://gravatar.inwao.com'; $url .= '/avatar/'; } if (!empty($mail)) { $url .= md5(strtolower(trim($mail))); } $url .= '?s=' . $size; $url .= '&r=' . $rating; $url .= '&d=' . $default; } return $url; } [/collapse] 使用说明 [collapse status="false" title="使用说明"] 注意，记得要备份文件夹。在做更改！！！ 下载压缩包内文件文件夹admin解压至博客目录下admin文件夹进行替换！ 压缩包内Menu.php文件上传至/var/Widget目录下进行替换！ [/collapse] [scode type="green"]下载地址[/scode] [button color="info" icon="fa fa-download" url="https:\/\/cos.muyu.love/2021/07/12/1626098112.zip" type=""]本地下载[/button] 提取码：(评论后请点击此按钮刷新页面： [button color="black" icon="" url="#" type=""]刷新[/button] )