[scode type="red"]本文内容部分来源于网络，如有侵权请留言删除！[/scode] ## 浏览器动态标题 在主题设置-开发者设置的自定义输出body 尾部的HTML代码填入以下代码 ``` <script> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接"); document.title = 'ヽ(●-`Д´-)ノ别走啊！'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接"); document.title = 'ヾ(Ő∀Ő3)ノ想我啦！' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } }); </script> ``` ## 鼠标点击特效 将以下代码放在主题的handsome/component/footer.php中的之前即可。 ``` #字体自行修改 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> ``` ## 首页文章版式圆角化 本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS。 ``` /*首页文章版式圆角化*/ .panel{ border: none; border-radius: 15px; } .panel-small{ border: none; border-radius: 15px; } .item-thumb{ border-radius: 15px; } ``` ## 首页文章图片获取焦点放大 本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义CSS。 ``` /*首页头像自动旋转*/ .thumb-lg{ width:130px; } .avatar{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } .avatar:hover{ transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } #aside-user span.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1)!important; border:0 solid } #aside-user span.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s } ``` ## 首页文章版式阴影化 本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS。 ``` /*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); } ``` ## 生成当前文章标签 在当前文章内容尾部添加该文章的标签，在主题目录下的post.php文件中的适当地方加入以下代码。 ``` <!--生成当前文章标签--> 标签：<?php $this->tags('，', true, 'no tag'); ?> ``` ## 给网站加上复制后提示 将以下代码复制到自定义输出body尾部的HTML代码 ``` <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> ``` 将以下代码复制到自定义JavaScrpit ``` document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});}; ``` ## 博主介绍闪字效果 将以下代码加入后台设置->博主介绍中，当然，介绍文字要改成你自己的。 ``` <span class="text-muted text-xs block"> <div id="chakhsu"></div> <script> var chakhsu = function(r) { function t() { return b[Math.floor(Math.random() * b.length)] } function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n } function i() { var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "", o = ["客至汲泉烹茶，抚琴听者知音"].map(function(r) { return r + "" }), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)" ], c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span> ``` ## 修改后台路径 将admin文件夹改名，改成你需要的例如abc，然后找到Typecho根目录下的config.inc.php文件，将define('__TYPECHO_ADMIN_DIR__', '/admin/');中的的/admin/改成/abc/即可，以后要登录后台访问xxx.com/abc/即可 若使用handsome主题，还需要在 外观设置-外观设置开关，勾选 不显示左侧边栏底部菜单 ## 一键评论打卡 1、首先在设置外观-开发者设置-自定义JavaScript和PJAX回调函数都加入以下代码: ``` function a(a, b, c) { if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus(); else if (a.selectionStart || "0" == a.selectionStart) { var l = a.selectionStart, m = a.selectionEnd, n = m; c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length); c ? n += b.length + c.length : n += b.length - m + l; l == m && c && (n -= c.length); a.focus(); a.selectionStart = n; a.selectionEnd = n } else a.value += b + c, a.focus() } var b = (new Date).toLocaleTimeString(), c = document.getElementById("comment") || 0; window.SIMPALED = {}; window.SIMPALED.Editor = { daka: function() { a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~") }, zan: function() { a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ") }, cai: function() { a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ") } }; ``` 2、打开主题目录的component/comments.php的130行左右，找到以下代码： ``` <div class="OwO padder-v-sm"></div> ``` 3、在上面代码加上属性style="display: inline;"，且在其后面加入以下代码 ``` <!-- 一键打卡 --> <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext"></span></div></div> <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div> <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div> <!-- /一键打卡 --> ``` 4、在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码: ``` .secret_comment { top: 5px; } .OwO.OwO-open .OwO-body { display:table } ``` ## 随机播放音乐 找到文件handsome/libs/Get.php，在190行的break前插入以下代码。此行代码将歌单列表变成乱序，每次刷新网页就是一个新的乱序歌单，从而实现随机播放 ``` shuffle($info); // 随机音乐 ``` 在如下位置插入： ``` <?php // ....................................... case 'collect': $datas = $api->format(true)->playlist($id); $datas = json_decode($datas,true); foreach ( $datas as $keys => $data){ $cover = json_decode($api->format(true)->pic($data['pic_id']),true)['url']; $info[$keys] = array( 'name' => $data['name'], 'url' => '', 'song_id' => $data['id'], 'cover' => $cover, 'author' => $data['artist'][0] ); } shuffle($info); /** 插入此行 */ break; default: $data = "";break; } return json_encode($info,true); } ``` ## Font-Awesome旋转图标 先在自定义Head中引入字体： ``` <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> ``` fa-spin可以使任何图标执行旋转动画，fa-pulse可以使图标以 8 步为周期进行旋转 可以完美执行旋转动画的图标有：加载fa-spinner，刷新fa-refresh、 齿轮fa-cog等图标，举个栗子： ``` {"name":"Spin","class":"fa fa-spinner fa-spin","link":"#","target":"_self"}, {"name":"Pulse","class":"fa fa-cog fa-pulse","link":"#","target":"_self"} ``` ## 底部徽标 ####修改方式一 打开/handsome/component/footer.php，找到<div class="wrapper bg-light">，修改成想要的样式 ``` <!-- 底部信息 --> <div class="wrapper bg-light"> <!-- 左侧底部 --> <div class="github-badge"> <a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动"> <span class="badge-subject">Powered</span> <span class="badge-value bg-green">Typecho</span></a> </div> <!-- 右侧底部 --> <span class="pull-right hidden-xs text-ellipsis"> <?php $this->options->BottomInfo(); ?> <div class="github-badge"> <a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="粤ICP备XXXX号"> <span class="badge-subject">©<?php echo date("Y");?></span> <span class="badge-value bg-blue">粤ICP备XXXX号</span></a> </div> </span> </div> <!-- /底部信息 --> ``` 自定义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: #4d4d4d; 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-color: #3282b8} .github-badge .bg-purple {background-color: #3F51B5} .github-badge .bg-green {background-color: #3bca6e} ``` ####修改方式二 1.将以下代码加入主题后台的开发者选项中的自定义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: #4d4d4d; 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-color: #007ec6 } .github-badge .bg-orange { background-color: #ffa500 } .github-badge .bg-red { background-color: #f00 } .github-badge .bg-green { background-color: #3bca6e } .github-badge .bg-purple { background-color: #ab34e9 } ``` 2.将以下代码添加至后台主题设置博客底部左侧信息，信息修改成自己的: ``` <div class="github-badge"> <a href="./" title="©2019 Rudy"> <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Rudy</span> </a> </div> | <div class="github-badge"> <a href="http://www.miitbeian.gov.cn/" target="_blank" title="湘ICP备 xxxxxxxx号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;"> <span class="badge-subject">湘ICP备</span><span class="badge-value bg-green">20002004号</span> </a> </div> ``` 3.将以下代码添加至后台主题设置博客底部右侧信息: ``` <div class="github-badge"> <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" > <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span> </a> </div> | <div class="github-badge"> <a href="https://www.baidu.com/" target="_blank" title="baidu" > <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span> </a> </div> | <div class="github-badge"> <a href="https://baidu.comt/" target="_blank" title="baidu"> <span class="badge-subject">Modified</span><span class="badge-value bg-red">baidu</span> </a> </div> ``` 4.添加完成后，需要去handsome/component/footer.php删除原有底部代码，需要删除的代码如下： ``` <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <?php Content::outputCommentJS($this, $this->security); ?> </div><!-- /content --> <footer id="footer" class="app-footer" role="footer"> <div class="wrapper b-t bg-light"> <span class="pull-right hidden-xs text-ellipsis"> <?php $this->options->BottomInfo(); ?> <!-- Powered by <a target="blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="blank" href="https://baidu.com">baidu</a> 删除本行--> </span> <span class="text-ellipsis"> <!-- © <?php echo date("Y");?> Copyright 删除本行--> <?php $this->options->BottomleftInfo(); ?></span> </div> ``` ## 头像呼吸光环和悬停旋转 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*头像呼吸光环和鼠标悬停旋转放大*/ .img-full { width: 100px; border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } } /*评论头像旋转*/ .img-circle { transition: all 0.3s; } .img-circle:hover { transform: rotate(360deg); } ``` ## 文章内图片悬停放大 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*文章内图片悬停放大并将超出范围隐藏*/ .entry-thumbnail { overflow: hidden; } #post-content img { border-radius: 10px; transition: 0.5s; } #post-content img:hover { transform: scale(1.05); } ``` ## 文章内打赏图标跳动 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*文章内打赏图标跳动*/ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } } ``` ## 给网站添加加载耗时显示 1.在/usr/themes/handsome/functions.php末尾添加如下代码 ``` //加载耗时 function timer_start() { global $timestart; $mtime = explode( ' ', microtime() ); $timestart = $mtime[1] + $mtime[0]; return true; } timer_start(); function timer_stop( $display = 0, $precision = 3 ) { global $timestart, $timeend; $mtime = explode( ' ', microtime() ); $timeend = $mtime[1] + $mtime[0]; $timetotal = number_format( $timeend - $timestart, $precision ); $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s"; if ( $display ) { echo $r; } return $r; } ``` 2.然后在/usr/themes/handsome/component/sidebar.php下添加显示代码 ``` <li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li> ``` ## 复制弹框 1.首先将下方代码复制添加至后台设置自定义输出body 尾部的HTML代码 ``` <!--复制弹框--> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> ``` 2.最后复制下方代码到自定义JavaScript即可 ``` <!--复制弹框--> document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});}; ``` ## 彩虹标签云 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript ``` <!--彩色标签云--> let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); ``` ## 在文章页右侧添加标签云 在/usr/themes/handsome/component/sidebar.php文件的<?php if (IS_TOC): ?>前添加下面代码 ``` <!--在文章页面内显示标签云--> <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear"> <h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3> <div class="tags l-h-2x"> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a> <?php endwhile; ?> <?php endif; ?> </div> </section> ``` ## 在文章顶部添加百度是否收录 1.在handsome/functions.php下添加代码 ``` /** * 提示文章百度是否收录 * */ function baidu_record() { $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; if(checkBaidu($url)==1){ echo "百度已收录"; } else{ echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";} } function checkBaidu($url) { $url = 'http://www.baidu.com/s?wd=' . urlencode($url); $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); $rs = curl_exec($curl); curl_close($curl); if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录 return 1; } else { return -1; } } ``` 2.然后在handsome/post.php约80行下添加代码 ``` <!--百度收录--> <li><i class="glyphicon glyphicon-globe"></i> <?php echo baidu_record() ?></li> ``` ##为 Typecho编辑器增加 HTML标签支持 Typecho 默认文章只支持kbd|b|i|strong|em|sup|sub|br|code|del|a|hr|small这几个标签。 修改/var/HyperDown.php文件第17行，在现有标签中直接增加新标签即可。 标签之间使用|分隔。 ## 文章标题美化 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /* * 文章一二三四级标题美化 */ #post-content h1 {font-size: 30px} #post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;} #post-content h3 {font-size: 20px} #post-content h4 {font-size: 15px} #post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;} #post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute} #post-content h2:hover::after {width: 2.5em;} #post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0} ``` ## 首页预览头图走cos 1./libs/Content.php第715行左右 ``` $random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined ``` 2.修改为（xxx填写自己的cos地址）： ``` $random = 'https://xxx/' . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined ``` ## 超链接美化 1.删除/usr/themes/handsome/assets/css/handsome.min.css下原超链接CSS： ``` .comment-content-true a:hover,.wrapper-lg .entry-content a:not(.nav-link):hover { color: #222; border-bottom-color: #222 } .comment-content-true a,.wrapper-lg .entry-content a:not(.nav-link) { color: #3f88bf; border-bottom-color: #222; border-bottom: 1px solid #3f88bf; word-wrap: break-word; word-break: break-all } ``` 2.添加如下CSS： ``` /*超链接特效*/ .comment-content-true a:not(.light-link):not(.nav-link), .wrapper-lg .entry-content a:not(.light-link):not(.nav-link) { position: relative; margin: auto 4px; color: #23b7e5; -webkit-transition: color 0.3s; transition: color 0.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(.nav-link):hover, .comment-content-true a:not(.light-link):not(.nav-link):focus, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus { color: #fff; } .comment-content-true a:not(.light-link):not(.nav-link)::before, .comment-content-true a:not(.light-link):not(.nav-link)::after, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after { 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(.nav-link)::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before { background-color: #23b7e5; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 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(.nav-link):hover::before, .comment-content-true a:not(.light-link):not(.nav-link):focus::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus::before { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .comment-content-true a:not(.light-link):not(.nav-link)::after, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after { border-bottom: 1px solid #23b7e5; } .content-copyright { overflow: hidden; } ``` ## 导航栏输出二级菜单 ####添加二级菜单字段 /usr/themes/handsome/component/aside.php第87行左右$asideItemsOutput = "";后面添加如下内容： ``` $asideSecondItemsOutput = ""; ``` ####修改二级菜单字段判断语句 将101-106行左右的下列字段： ``` if (@$itemTarget){ $linkStatus = 'target="'.$itemTarget.'"'; }else{ $linkStatus = 'target="_blank"'; } if (trim($itemFeather)!==""){ ``` 替换为 ``` if (strtoupper($itemStatus) === 'SEC'){ if (trim($itemFeather)!==""){ $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>'; }else if (trim($itemClass)!==""){ $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>'; } } else if (trim($itemFeather)!==""){ ``` ####添加二级菜单输出语句 在125行左右的<?php if (@!in_array('component',$this->options->asideSetting)): ?>语句上面添加下列代码： ``` <?php if (@$asideSecondItemsOutput): ?> <li><a class="auto"><span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-new-window"></i><span><?php _me("外站工具"); ?></span></a><!-- 默认图标与名称，可以随意修改 --> <ul class="nav nav-sub dk"><li class="nav-sub-header"><a data-no-instant><span><?php _me("外站工具"); ?></span></a></li> <?php echo @$asideSecondItemsOutput ?> </ul></li> <?php endif; ?> ``` ####如何使用？ ``` {"name":"归档","class":"glyphicon glyphicon-tasks","link":"https://你的域名/","target":"_self"}, {"name":"网页版","class":"glyphicon glyphicon-cloud-download","link":"https://你的域名/","status":"sec"}, {"name":"百度盘提取码","class":"glyphicon glyphicon-link","link":"https://你的域名/","status":"sec"}, {"name":"磁链转换","class":"glyphicon glyphicon-magnet","link":"https://你的域名/","status":"sec"}, {"name":"局域网传文件","class":"glyphicon glyphicon-transfer","link":"https://你的域名/","status":"sec"}, {"name":"图床","class":"glyphicon glyphicon-picture","link":"https://你的域名/","status":"sec"}, {"name":"音乐解锁","feather":"music","link":"https://你的域名/","status":"sec"}, {"name":"网盘","feather":"hard-drive","link":"https://你的域名/","status":"sec"} ``` ####怕麻烦可以跳过上面 在124行下面，即下面代码下面： ``` <!-- /主页 --> <?php endif; ?> <?php echo @$asideItemsOutput ?> ``` 添加下列代码： ``` <!--折叠菜单--> <li> <a class="auto"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <!--下方为菜单栏图标--> <i class="glyphicon glyphicon-phone"></i> <span> <?php _me( "小游戏"); ?></span> </a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant> <span> <?php _me( "小游戏"); ?></span> </a> </li> <li> <a href="https://www.cooyf.com/mikutap/" class="auto" target="_blank"> <span class="nav-icon"> <!--下方为小栏目图标--> <i data-feather="slack"></i> </span> <span>mikutap</span></a> </li> </ul> </li> <!--/折叠菜单----> ``` ## 首页文章列表悬停上浮 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` .blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47); } ``` ## 左侧文章图标和评论头像鼠标悬停旋转 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*左侧文章图标和评论头像鼠标悬停旋转*/ .img-circle { transition: all 0.3s; } .img-circle:hover { transform: rotate(360deg); } ``` ## 首页倒计时 将以下代码添加至后台-开发者设置-首页列表最前方广告位。 ``` <style> .gn_box{ border: none; border-radius: 15px; } .gn_box { padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff; } #t_d{ color: #982585; font-size: 18px; } #t_h{ color: #8f79c1; font-size: 18px; } #t_m{ color: #65b4b5; font-size: 18px; } #t_s{ color: #83caa3; font-size: 18px; } </style> <div class="gn_box"> <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font color=#8C0073>年</font><font color=#75008A>-</font> <font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font></h1><center> <div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span id="t_s"> 秒</span></div></center> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2021/01/25 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); var day = document.getElementById("t_d"); if (day != null) { day.innerHTML = d + " 天"; } var hour = document.getElementById("t_h"); if (hour != null) { hour.innerHTML = h + " 时"; } var min = document.getElementById("t_m"); if (min != null) { min.innerHTML = m + " 分"; } var sec = document.getElementById("t_s"); if (sec != null) { sec.innerHTML = s + " 秒"; } } setInterval(getRTime, 1000); </script> </div> ``` ## 屏蔽F12 1.事先引入layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码； ``` <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> ``` 2.将以下代码添加至后台-开发者设置-自定义JavaScript。 ``` document.onkeydown = function(){ if(window.event && window.event.keyCode == 123) { layer.msg("F12被禁用"); event.keyCode=0; event.returnValue=false; } } ``` ## 右键自定义 1.事先引入layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码； ``` <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> ``` 2.将以下代码添加至后台-开发者设置-自定义输出body 尾部的HTML代码； ``` <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="https://你的域名/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li> <li><a href="https://你的友链地址"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li> <li><a href="https://你的留言板地址l"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy") } function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a) } $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script> ``` ## 404页面自动返回 1：打开/usr/themes/handsome/404.php，在第130行左右，在<h1 class="text-shadow text-white">404</h1>后面添加： ``` <br> <small class="text-muted letterspacing"> <b id="sp">10</b>秒后自动返回···<br> <a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a> ``` 2:然后把下面这段放到最后的</body>前 ``` <script type="text/javascript"> onload = function(){setInterval(go, 1000);};var x=10; function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}} </script> ``` ## 给typecho加上心知天气 1：知心天气官网www.seniverse.com注册申请免费API 密钥 2：将以下代码放入/usr/themes/handsome/component/headnav.php第55行<!-- / search form -->之后并更换你的公钥秘钥即可 ``` <!-- 知心天气--> <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div> <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script> <script>tpwidget("init", { "flavor": "slim", "location": "WX4FBXXFKE4F", "geolocation": "enabled", "language": "auto", "unit": "c", "theme": "chameleon", "container": "tp-weather-widget", "bubble": "enabled", "alarmType": "badge", "color": "#C6C6C6", "uid": "公钥", "hash": "密钥" }); tpwidget("show");</script> <!-- 知心结束--> ``` ## 手机适配中不显示热门及标签云 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` @media (max-width:767px) { #tabs-4,#tag_cloud-2 { display: none; } } ``` ## 给你的友链换一个更好看的样式吧 1：首先更换/usr/themes/handsome/links.php中51-100行的数据： ``` <div class="tab-pane fade in" id="tab_2"> <div class="link-box"> <?php $mypattern = <<<eof <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> <div class="thumb"> <img width="200" height="200" src={image} alt="{title}" /> </div> <div class="content"> <p class="title">{name}</p> </div> </a> eof; Handsome_Plugin::output($mypattern, 0, "one"); ?> </div> </div> <div class="tab-pane fade in" id="tab_3"> <div class="link-box"> <?php $mypattern = <<<eof <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> <div class="thumb"> <img width="200" height="200" src={image} alt="{title}" /> </div> <div class="content"> <p class="title">{name}</p> </div> </a> eof; Handsome_Plugin::output($mypattern, 0, "good"); ?> </div> </div> <div class="tab-pane fade in" id="tab_4"> <div class="link-box"> <?php $mypattern = <<<eof <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> <div class="thumb"> <img width="200" height="200" src={image} alt="{title}" /> </div> <div class="content"> <p class="title">{name}</p> </div> </a> eof; Handsome_Plugin::output($mypattern, 0, "ten"); ``` 2：将以下代码添加至后台-开发者设置-自定义CSS。 ``` .link-box a .thumb { font-size: 0; overflow: hidden; background-color: #fff; margin: 0; border-top-left-radius: .25rem; border-top-right-radius: .25rem; width: 100%; } .link-box { overflow: hidden; padding: 4.375rem 2.1875rem 2.1875rem; margin: -3.125rem; display: flex; flex-direction: row; flex-wrap: wrap; } .link-box a{ width: 16%; text-align: center; margin: 14px; border-radius: 1.3125rem; } .link-box a: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); } ``` ## 文章标题简介头图显示且居中 本项修改的是首页文章显示样式的美化。将以下代码添加至后台主题设置-开发者设置-自定义输出body 尾部的HTML代码。 ``` <link rel="stylesheet"href="https://img.lxzzz.cn/handsome/handsome.css"media="all"> <script> ``` ## 左侧下拉框 本项修改的是首页左侧边栏收缩框效果，修改/component/asind.php 124行加入以下代码 ``` <a class="auto"> <li class="active"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-link"></i> <span>实用工具</span></a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant=""> <span>实用站点</span></a> </li> <!--网站--> <li> <a href="https://tc.lxzzz.cn"> <i class="glyphicon glyphicon-picture icon text-md"></i> <span>图床</span></a> </li> <li> <a href="https://yy.lxzzz.cn"> <i class="glyphicon glyphicon-music"></i> <span>曦音乐播放器</span></a> </li> <li> <a href="http://ys.lxzzz.cn/"> <i class="glyphicon glyphicon-facetime-video"></i> <span>影视解析</span></a> </li> <li> <a href="http://dwz.lxzzz.cn"> <i class="iconfont icon-links"></i> <span>短网址生成</span></a> </li> </ul> </li> <li> <a class="auto"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-sunglasses"></i> <span>动漫追番</span></a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant=""> <span>站点</span></a> </li> <!--网站--> <li> <a href="/image.html"> <i class="fontello fontello-picture"></i> <span>相册</span></a> </li> <li> <a href="/fan.html"> <i class="glyphicon glyphicon-heart"></i> <span>追番</span></a> </li> <li> <a href="http://bz.lxzzz.cn"> <i class="glyphicon glyphicon-picture"></i> <span>在线壁纸</span></a> </li> </ul> </li> <li> <a class="auto"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-phone"></i> <span>小游戏</span></a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant=""> <span>小游戏</span></a> </li> <!--网站--> <li> <a href="/klkp.html"> <i class="glyphicon glyphicon-plane"></i> <span>恐龙快跑</span></a> </li> <li> <a href="https://www.lxzzz.cn/yanshi/taptap"> <i class="glyphicon glyphicon-blackboard"></i> <span>taptap</span></a> </li> </ul> ``` ## 让被复制的文章自带版权说明 将这段js代码我是放在post.php的 文章内页php ``` <script> document.body.addEventListener('copy', function (e) { if (window.getSelection().toString() && window.getSelection().toString().length > 42) { setClipboardText(e); // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)'); } }); function setClipboardText(event) { var clipboardData = event.clipboardData || window.clipboardData; if (clipboardData) { event.preventDefault(); var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' + '作者：<?php $this->author() ?><br>' + '链接：' + window.location.href + '<br>' + '来源：<?php $this->options->siteUrl(); ?><br><br>' + window.getSelection().toString(); var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权，非商业转载请注明出处。\n' + '作者：<?php $this->author() ?>\n' + '链接：' + window.location.href + '\n' + '来源：<?php $this->options->siteUrl(); ?>\n\n' + window.getSelection().toString(); clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain',textData); } } </script> ``` ## 防止复制 放在全局的js中 ``` <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> ``` ##速度优化 ####GZIP加速网站 找到你的Typecho的网站根目录中的index.php，添加如下代码 ``` <?php /** * Typecho Blog Platform * * @copyright Copyright (c) 2008 Typecho team (http://www.typecho.org) * @license GNU General Public License 2.0 * @version $Id: index.php 1153 2009-07-02 10:53:22Z magike.net $ */ /**开启gzip */ ob_start('ob_gzhandler'); /** 载入配置支持 */ if (!defined('__TYPECHO_ROOT_DIR__') && !@include_once 'config.inc.php') { file_exists('./install.php') ? header('Location: install.php') : print('Missing Config File'); exit; } /** 初始化组件 */ Typecho_Widget::widget('Widget_Init'); /** 注册一个初始化插件 */ Typecho_Plugin::factory('index.php')->begin(); /** 开始路由分发 */ Typecho_Router::dispatch(); /** 注册一个结束插件 */ Typecho_Plugin::factory('index.php')->end(); ``` ####Gravatar国内源 找到Typecho的安装目录中的config.inc.php文件，添加一行代码更换为国内v2ex源 ``` define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/'); ``` Handsome主题可以直接在外观设置-速度优化-Gravatar镜像源地址中填入https://cdn.v2ex.com/gravatar/ [scode type="blue"]参考文章 [Handsome美化](https://www.kancloud.cn/jarvis0912/handsome/) [/scode] Loading... <div class="tip inlineBlock error"> 本文内容部分来源于网络，如有侵权请留言删除！ </div> ## 浏览器动态标题 在主题设置-开发者设置的自定义输出body 尾部的HTML代码填入以下代码 ``` <script> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接"); document.title = 'ヽ(●-`Д´-)ノ别走啊！'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接"); document.title = 'ヾ(Ő∀Ő3)ノ想我啦！' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } }); </script> ``` ## 鼠标点击特效 将以下代码放在主题的handsome/component/footer.php中的之前即可。 ``` #字体自行修改 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> ``` ## 首页文章版式圆角化 本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS。 ``` /*首页文章版式圆角化*/ .panel{ border: none; border-radius: 15px; } .panel-small{ border: none; border-radius: 15px; } .item-thumb{ border-radius: 15px; } ``` ## 首页文章图片获取焦点放大 本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义CSS。 ``` /*首页头像自动旋转*/ .thumb-lg{ width:130px; } .avatar{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } .avatar:hover{ transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } #aside-user span.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1)!important; border:0 solid } #aside-user span.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s } ``` ## 首页文章版式阴影化 本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS。 ``` /*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); } ``` ## 生成当前文章标签 在当前文章内容尾部添加该文章的标签，在主题目录下的post.php文件中的适当地方加入以下代码。 ``` <!--生成当前文章标签--> 标签：<?php $this->tags('，', true, 'no tag'); ?> ``` ## 给网站加上复制后提示 将以下代码复制到自定义输出body尾部的HTML代码 ``` <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> ``` 将以下代码复制到自定义JavaScrpit ``` document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});}; ``` ## 博主介绍闪字效果 将以下代码加入后台设置->博主介绍中，当然，介绍文字要改成你自己的。 ``` <span class="text-muted text-xs block"> <div id="chakhsu"></div> <script> var chakhsu = function(r) { function t() { return b[Math.floor(Math.random() * b.length)] } function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n } function i() { var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "", o = ["客至汲泉烹茶，抚琴听者知音"].map(function(r) { return r + "" }), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)" ], c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span> ``` ## 修改后台路径 将admin文件夹改名，改成你需要的例如abc，然后找到Typecho根目录下的config.inc.php文件，将define('__TYPECHO_ADMIN_DIR__', '/admin/');中的的/admin/改成/abc/即可，以后要登录后台访问xxx.com/abc/即可 若使用handsome主题，还需要在 外观设置-外观设置开关，勾选 不显示左侧边栏底部菜单 ## 一键评论打卡 1、首先在设置外观-开发者设置-自定义JavaScript和PJAX回调函数都加入以下代码: ``` function a(a, b, c) { if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus(); else if (a.selectionStart || "0" == a.selectionStart) { var l = a.selectionStart, m = a.selectionEnd, n = m; c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length); c ? n += b.length + c.length : n += b.length - m + l; l == m && c && (n -= c.length); a.focus(); a.selectionStart = n; a.selectionEnd = n } else a.value += b + c, a.focus() } var b = (new Date).toLocaleTimeString(), c = document.getElementById("comment") || 0; window.SIMPALED = {}; window.SIMPALED.Editor = { daka: function() { a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~") }, zan: function() { a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ") }, cai: function() { a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ") } }; ``` 2、打开主题目录的component/comments.php的130行左右，找到以下代码： ``` <div class="OwO padder-v-sm"></div> ``` 3、在上面代码加上属性style="display: inline;"，且在其后面加入以下代码 ``` <!-- 一键打卡 --> <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext"></span></div></div> <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div> <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div> <!-- /一键打卡 --> ``` 4、在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码: ``` .secret_comment { top: 5px; } .OwO.OwO-open .OwO-body { display:table } ``` ## 随机播放音乐 找到文件handsome/libs/Get.php，在190行的break前插入以下代码。此行代码将歌单列表变成乱序，每次刷新网页就是一个新的乱序歌单，从而实现随机播放 ``` shuffle($info); // 随机音乐 ``` 在如下位置插入： ``` <?php // ....................................... case 'collect': $datas = $api->format(true)->playlist($id); $datas = json_decode($datas,true); foreach ( $datas as $keys => $data){ $cover = json_decode($api->format(true)->pic($data['pic_id']),true)['url']; $info[$keys] = array( 'name' => $data['name'], 'url' => '', 'song_id' => $data['id'], 'cover' => $cover, 'author' => $data['artist'][0] ); } shuffle($info); /** 插入此行 */ break; default: $data = "";break; } return json_encode($info,true); } ``` ## Font-Awesome旋转图标 先在自定义Head中引入字体： ``` <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> ``` fa-spin可以使任何图标执行旋转动画，fa-pulse可以使图标以 8 步为周期进行旋转 可以完美执行旋转动画的图标有：加载fa-spinner，刷新fa-refresh、 齿轮fa-cog等图标，举个栗子： ``` {"name":"Spin","class":"fa fa-spinner fa-spin","link":"#","target":"_self"}, {"name":"Pulse","class":"fa fa-cog fa-pulse","link":"#","target":"_self"} ``` ## 底部徽标 ####修改方式一 打开/handsome/component/footer.php，找到<div class="wrapper bg-light">，修改成想要的样式 ``` <!-- 底部信息 --> <div class="wrapper bg-light"> <!-- 左侧底部 --> <div class="github-badge"> <a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动"> <span class="badge-subject">Powered</span> <span class="badge-value bg-green">Typecho</span></a> </div> <!-- 右侧底部 --> <span class="pull-right hidden-xs text-ellipsis"> <?php $this->options->BottomInfo(); ?> <div class="github-badge"> <a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="粤ICP备XXXX号"> <span class="badge-subject">©<?php echo date("Y");?></span> <span class="badge-value bg-blue">粤ICP备XXXX号</span></a> </div> </span> </div> <!-- /底部信息 --> ``` 自定义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: #4d4d4d; 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-color: #3282b8} .github-badge .bg-purple {background-color: #3F51B5} .github-badge .bg-green {background-color: #3bca6e} ``` ####修改方式二 1.将以下代码加入主题后台的开发者选项中的自定义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: #4d4d4d; 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-color: #007ec6 } .github-badge .bg-orange { background-color: #ffa500 } .github-badge .bg-red { background-color: #f00 } .github-badge .bg-green { background-color: #3bca6e } .github-badge .bg-purple { background-color: #ab34e9 } ``` 2.将以下代码添加至后台主题设置博客底部左侧信息，信息修改成自己的: ``` <div class="github-badge"> <a href="./" title="©2019 Rudy"> <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Rudy</span> </a> </div> | <div class="github-badge"> <a href="http://www.miitbeian.gov.cn/" target="_blank" title="湘ICP备 xxxxxxxx号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;"> <span class="badge-subject">湘ICP备</span><span class="badge-value bg-green">20002004号</span> </a> </div> ``` 3.将以下代码添加至后台主题设置博客底部右侧信息: ``` <div class="github-badge"> <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" > <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span> </a> </div> | <div class="github-badge"> <a href="https://www.baidu.com/" target="_blank" title="baidu" > <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span> </a> </div> | <div class="github-badge"> <a href="https://baidu.comt/" target="_blank" title="baidu"> <span class="badge-subject">Modified</span><span class="badge-value bg-red">baidu</span> </a> </div> ``` 4.添加完成后，需要去handsome/component/footer.php删除原有底部代码，需要删除的代码如下： ``` <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <?php Content::outputCommentJS($this, $this->security); ?> </div><!-- /content --> <footer id="footer" class="app-footer" role="footer"> <div class="wrapper b-t bg-light"> <span class="pull-right hidden-xs text-ellipsis"> <?php $this->options->BottomInfo(); ?> <!-- Powered by <a target="blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="blank" href="https://baidu.com">baidu</a> 删除本行--> </span> <span class="text-ellipsis"> <!-- © <?php echo date("Y");?> Copyright 删除本行--> <?php $this->options->BottomleftInfo(); ?></span> </div> ``` ## 头像呼吸光环和悬停旋转 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*头像呼吸光环和鼠标悬停旋转放大*/ .img-full { width: 100px; border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } } /*评论头像旋转*/ .img-circle { transition: all 0.3s; } .img-circle:hover { transform: rotate(360deg); } ``` ## 文章内图片悬停放大 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*文章内图片悬停放大并将超出范围隐藏*/ .entry-thumbnail { overflow: hidden; } #post-content img { border-radius: 10px; transition: 0.5s; } #post-content img:hover { transform: scale(1.05); } ``` ## 文章内打赏图标跳动 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*文章内打赏图标跳动*/ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } } ``` ## 给网站添加加载耗时显示 1.在/usr/themes/handsome/functions.php末尾添加如下代码 ``` //加载耗时 function timer_start() { global $timestart; $mtime = explode( ' ', microtime() ); $timestart = $mtime[1] + $mtime[0]; return true; } timer_start(); function timer_stop( $display = 0, $precision = 3 ) { global $timestart, $timeend; $mtime = explode( ' ', microtime() ); $timeend = $mtime[1] + $mtime[0]; $timetotal = number_format( $timeend - $timestart, $precision ); $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s"; if ( $display ) { echo $r; } return $r; } ``` 2.然后在/usr/themes/handsome/component/sidebar.php下添加显示代码 ``` <li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li> ``` ## 复制弹框 1.首先将下方代码复制添加至后台设置自定义输出body 尾部的HTML代码 ``` <!--复制弹框--> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> ``` 2.最后复制下方代码到自定义JavaScript即可 ``` <!--复制弹框--> document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});}; ``` ## 彩虹标签云 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript ``` <!--彩色标签云--> let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); ``` ## 在文章页右侧添加标签云 在/usr/themes/handsome/component/sidebar.php文件的<?php if (IS_TOC): ?>前添加下面代码 ``` <!--在文章页面内显示标签云--> <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear"> <h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3> <div class="tags l-h-2x"> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a> <?php endwhile; ?> <?php endif; ?> </div> </section> ``` ## 在文章顶部添加百度是否收录 1.在handsome/functions.php下添加代码 ``` /** * 提示文章百度是否收录 * */ function baidu_record() { $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; if(checkBaidu($url)==1){ echo "百度已收录"; } else{ echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";} } function checkBaidu($url) { $url = 'http://www.baidu.com/s?wd=' . urlencode($url); $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); $rs = curl_exec($curl); curl_close($curl); if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录 return 1; } else { return -1; } } ``` 2.然后在handsome/post.php约80行下添加代码 ``` <!--百度收录--> <li><i class="glyphicon glyphicon-globe"></i> <?php echo baidu_record() ?></li> ``` ##为 Typecho编辑器增加 HTML标签支持 Typecho 默认文章只支持kbd|b|i|strong|em|sup|sub|br|code|del|a|hr|small这几个标签。 修改/var/HyperDown.php文件第17行，在现有标签中直接增加新标签即可。 标签之间使用|分隔。 ## 文章标题美化 打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /* * 文章一二三四级标题美化 */ #post-content h1 {font-size: 30px} #post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;} #post-content h3 {font-size: 20px} #post-content h4 {font-size: 15px} #post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;} #post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute} #post-content h2:hover::after {width: 2.5em;} #post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0} ``` ## 首页预览头图走cos 1./libs/Content.php第715行左右 ``` $random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined ``` 2.修改为（xxx填写自己的cos地址）： ``` $random = 'https://xxx/' . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined ``` ## 超链接美化 1.删除/usr/themes/handsome/assets/css/handsome.min.css下原超链接CSS： ``` .comment-content-true a:hover,.wrapper-lg .entry-content a:not(.nav-link):hover { color: #222; border-bottom-color: #222 } .comment-content-true a,.wrapper-lg .entry-content a:not(.nav-link) { color: #3f88bf; border-bottom-color: #222; border-bottom: 1px solid #3f88bf; word-wrap: break-word; word-break: break-all } ``` 2.添加如下CSS： ``` /*超链接特效*/ .comment-content-true a:not(.light-link):not(.nav-link), .wrapper-lg .entry-content a:not(.light-link):not(.nav-link) { position: relative; margin: auto 4px; color: #23b7e5; -webkit-transition: color 0.3s; transition: color 0.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(.nav-link):hover, .comment-content-true a:not(.light-link):not(.nav-link):focus, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus { color: #fff; } .comment-content-true a:not(.light-link):not(.nav-link)::before, .comment-content-true a:not(.light-link):not(.nav-link)::after, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after { 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(.nav-link)::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before { background-color: #23b7e5; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 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(.nav-link):hover::before, .comment-content-true a:not(.light-link):not(.nav-link):focus::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover::before, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus::before { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .comment-content-true a:not(.light-link):not(.nav-link)::after, .wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after { border-bottom: 1px solid #23b7e5; } .content-copyright { overflow: hidden; } ``` ## 导航栏输出二级菜单 ####添加二级菜单字段 /usr/themes/handsome/component/aside.php第87行左右$asideItemsOutput = "";后面添加如下内容： ``` $asideSecondItemsOutput = ""; ``` ####修改二级菜单字段判断语句 将101-106行左右的下列字段： ``` if (@$itemTarget){ $linkStatus = 'target="'.$itemTarget.'"'; }else{ $linkStatus = 'target="_blank"'; } if (trim($itemFeather)!==""){ ``` 替换为 ``` if (strtoupper($itemStatus) === 'SEC'){ if (trim($itemFeather)!==""){ $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>'; }else if (trim($itemClass)!==""){ $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>'; } } else if (trim($itemFeather)!==""){ ``` ####添加二级菜单输出语句 在125行左右的<?php if (@!in_array('component',$this->options->asideSetting)): ?>语句上面添加下列代码： ``` <?php if (@$asideSecondItemsOutput): ?> <li><a class="auto"><span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-new-window"></i><span><?php _me("外站工具"); ?></span></a><!-- 默认图标与名称，可以随意修改 --> <ul class="nav nav-sub dk"><li class="nav-sub-header"><a data-no-instant><span><?php _me("外站工具"); ?></span></a></li> <?php echo @$asideSecondItemsOutput ?> </ul></li> <?php endif; ?> ``` ####如何使用？ ``` {"name":"归档","class":"glyphicon glyphicon-tasks","link":"https://你的域名/","target":"_self"}, {"name":"网页版","class":"glyphicon glyphicon-cloud-download","link":"https://你的域名/","status":"sec"}, {"name":"百度盘提取码","class":"glyphicon glyphicon-link","link":"https://你的域名/","status":"sec"}, {"name":"磁链转换","class":"glyphicon glyphicon-magnet","link":"https://你的域名/","status":"sec"}, {"name":"局域网传文件","class":"glyphicon glyphicon-transfer","link":"https://你的域名/","status":"sec"}, {"name":"图床","class":"glyphicon glyphicon-picture","link":"https://你的域名/","status":"sec"}, {"name":"音乐解锁","feather":"music","link":"https://你的域名/","status":"sec"}, {"name":"网盘","feather":"hard-drive","link":"https://你的域名/","status":"sec"} ``` ####怕麻烦可以跳过上面 在124行下面，即下面代码下面： ``` <!-- /主页 --> <?php endif; ?> <?php echo @$asideItemsOutput ?> ``` 添加下列代码： ``` <!--折叠菜单--> <li> <a class="auto"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <!--下方为菜单栏图标--> <i class="glyphicon glyphicon-phone"></i> <span> <?php _me( "小游戏"); ?></span> </a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant> <span> <?php _me( "小游戏"); ?></span> </a> </li> <li> <a href="https://www.cooyf.com/mikutap/" class="auto" target="_blank"> <span class="nav-icon"> <!--下方为小栏目图标--> <i data-feather="slack"></i> </span> <span>mikutap</span></a> </li> </ul> </li> <!--/折叠菜单----> ``` ## 首页文章列表悬停上浮 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` .blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47); } ``` ## 左侧文章图标和评论头像鼠标悬停旋转 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` /*左侧文章图标和评论头像鼠标悬停旋转*/ .img-circle { transition: all 0.3s; } .img-circle:hover { transform: rotate(360deg); } ``` ## 首页倒计时 将以下代码添加至后台-开发者设置-首页列表最前方广告位。 ``` <style> .gn_box{ border: none; border-radius: 15px; } .gn_box { padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff; } #t_d{ color: #982585; font-size: 18px; } #t_h{ color: #8f79c1; font-size: 18px; } #t_m{ color: #65b4b5; font-size: 18px; } #t_s{ color: #83caa3; font-size: 18px; } </style> <div class="gn_box"> <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font color=#8C0073>年</font><font color=#75008A>-</font> <font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font></h1><center> <div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span id="t_s"> 秒</span></div></center> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2021/01/25 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); var day = document.getElementById("t_d"); if (day != null) { day.innerHTML = d + " 天"; } var hour = document.getElementById("t_h"); if (hour != null) { hour.innerHTML = h + " 时"; } var min = document.getElementById("t_m"); if (min != null) { min.innerHTML = m + " 分"; } var sec = document.getElementById("t_s"); if (sec != null) { sec.innerHTML = s + " 秒"; } } setInterval(getRTime, 1000); </script> </div> ``` ## 屏蔽F12 1.事先引入layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码； ``` <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> ``` 2.将以下代码添加至后台-开发者设置-自定义JavaScript。 ``` document.onkeydown = function(){ if(window.event && window.event.keyCode == 123) { layer.msg("F12被禁用"); event.keyCode=0; event.returnValue=false; } } ``` ## 右键自定义 1.事先引入layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码； ``` <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> ``` 2.将以下代码添加至后台-开发者设置-自定义输出body 尾部的HTML代码； ``` <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><span class="external-link"><a class="no-external-link" href="https://你的域名/" target="_blank"><i data-feather="external-link"></i><i class="fa fa-home fa-fw"></i><span>首页</span></a></span></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li> <li><span class="external-link"><a class="no-external-link" href="https://你的友链地址" target="_blank"><i data-feather="external-link"></i><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></span></li> <li><span class="external-link"><a class="no-external-link" href="https://你的留言板地址l" target="_blank"><i data-feather="external-link"></i><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></span></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy") } function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a) } $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script> ``` ## 404页面自动返回 1：打开/usr/themes/handsome/404.php，在第130行左右，在<h1 class="text-shadow text-white">404</h1>后面添加： ``` <br> <small class="text-muted letterspacing"> <b id="sp">10</b>秒后自动返回···<br> <a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a> ``` 2:然后把下面这段放到最后的</body>前 ``` <script type="text/javascript"> onload = function(){setInterval(go, 1000);};var x=10; function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}} </script> ``` ## 给typecho加上心知天气 1：知心天气官网www.seniverse.com注册申请免费API 密钥 2：将以下代码放入/usr/themes/handsome/component/headnav.php第55行<!-- / search form -->之后并更换你的公钥秘钥即可 ``` <!-- 知心天气--> <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div> <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script> <script>tpwidget("init", { "flavor": "slim", "location": "WX4FBXXFKE4F", "geolocation": "enabled", "language": "auto", "unit": "c", "theme": "chameleon", "container": "tp-weather-widget", "bubble": "enabled", "alarmType": "badge", "color": "#C6C6C6", "uid": "公钥", "hash": "密钥" }); tpwidget("show");</script> <!-- 知心结束--> ``` ## 手机适配中不显示热门及标签云 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 ``` @media (max-width:767px) { #tabs-4,#tag_cloud-2 { display: none; } } ``` ## 给你的友链换一个更好看的样式吧 1：首先更换/usr/themes/handsome/links.php中51-100行的数据： ``` <div class="tab-pane fade in" id="tab_2"> <div class="link-box"> <?php $mypattern = <<<eof <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> <div class="thumb"> <img width="200" height="200" src={image} alt="{title}" /> </div> <div class="content"> <p class="title">{name}</p> </div> </a> eof; Handsome_Plugin::output($mypattern, 0, "one"); ?> </div> </div> <div class="tab-pane fade in" id="tab_3"> <div class="link-box"> <?php $mypattern = <<<eof <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> <div class="thumb"> <img width="200" height="200" src={image} alt="{title}" /> </div> <div class="content"> <p class="title">{name}</p> </div> </a> eof; Handsome_Plugin::output($mypattern, 0, "good"); ?> </div> </div> <div class="tab-pane fade in" id="tab_4"> <div class="link-box"> <?php $mypattern = <<<eof <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> <div class="thumb"> <img width="200" height="200" src={image} alt="{title}" /> </div> <div class="content"> <p class="title">{name}</p> </div> </a> eof; Handsome_Plugin::output($mypattern, 0, "ten"); ``` 2：将以下代码添加至后台-开发者设置-自定义CSS。 ``` .link-box a .thumb { font-size: 0; overflow: hidden; background-color: #fff; margin: 0; border-top-left-radius: .25rem; border-top-right-radius: .25rem; width: 100%; } .link-box { overflow: hidden; padding: 4.375rem 2.1875rem 2.1875rem; margin: -3.125rem; display: flex; flex-direction: row; flex-wrap: wrap; } .link-box a{ width: 16%; text-align: center; margin: 14px; border-radius: 1.3125rem; } .link-box a: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); } ``` ## 文章标题简介头图显示且居中 本项修改的是首页文章显示样式的美化。将以下代码添加至后台主题设置-开发者设置-自定义输出body 尾部的HTML代码。 ``` <link rel="stylesheet"href="https://img.lxzzz.cn/handsome/handsome.css"media="all"> <script> ``` ## 左侧下拉框 本项修改的是首页左侧边栏收缩框效果，修改/component/asind.php 124行加入以下代码 ``` <a class="auto"> <li class="active"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-link"></i> <span>实用工具</span></a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant=""> <span>实用站点</span></a> </li> <!--网站--> <li> <a href="https://tc.lxzzz.cn"> <i class="glyphicon glyphicon-picture icon text-md"></i> <span>图床</span></a> </li> <li> <a href="https://yy.lxzzz.cn"> <i class="glyphicon glyphicon-music"></i> <span>曦音乐播放器</span></a> </li> <li> <a href="http://ys.lxzzz.cn/"> <i class="glyphicon glyphicon-facetime-video"></i> <span>影视解析</span></a> </li> <li> <a href="http://dwz.lxzzz.cn"> <i class="iconfont icon-links"></i> <span>短网址生成</span></a> </li> </ul> </li> <li> <a class="auto"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-sunglasses"></i> <span>动漫追番</span></a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant=""> <span>站点</span></a> </li> <!--网站--> <li> <a href="/image.html"> <i class="fontello fontello-picture"></i> <span>相册</span></a> </li> <li> <a href="/fan.html"> <i class="glyphicon glyphicon-heart"></i> <span>追番</span></a> </li> <li> <a href="http://bz.lxzzz.cn"> <i class="glyphicon glyphicon-picture"></i> <span>在线壁纸</span></a> </li> </ul> </li> <li> <a class="auto"> <span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <i class="glyphicon glyphicon-phone"></i> <span>小游戏</span></a> <ul class="nav nav-sub dk"> <li class="nav-sub-header"> <a data-no-instant=""> <span>小游戏</span></a> </li> <!--网站--> <li> <a href="/klkp.html"> <i class="glyphicon glyphicon-plane"></i> <span>恐龙快跑</span></a> </li> <li> <a href="https://www.lxzzz.cn/yanshi/taptap"> <i class="glyphicon glyphicon-blackboard"></i> <span>taptap</span></a> </li> </ul> ``` ## 让被复制的文章自带版权说明 将这段js代码我是放在post.php的 文章内页php ``` <script> document.body.addEventListener('copy', function (e) { if (window.getSelection().toString() && window.getSelection().toString().length > 42) { setClipboardText(e); // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)'); } }); function setClipboardText(event) { var clipboardData = event.clipboardData || window.clipboardData; if (clipboardData) { event.preventDefault(); var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' + '作者：<?php $this->author() ?><br>' + '链接：' + window.location.href + '<br>' + '来源：<?php $this->options->siteUrl(); ?><br><br>' + window.getSelection().toString(); var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权，非商业转载请注明出处。\n' + '作者：<?php $this->author() ?>\n' + '链接：' + window.location.href + '\n' + '来源：<?php $this->options->siteUrl(); ?>\n\n' + window.getSelection().toString(); clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain',textData); } } </script> ``` ## 防止复制 放在全局的js中 ``` <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> ``` ##速度优化 ####GZIP加速网站 找到你的Typecho的网站根目录中的index.php，添加如下代码 ``` <?php /** * Typecho Blog Platform * * @copyright Copyright (c) 2008 Typecho team (http://www.typecho.org) * @license GNU General Public License 2.0 * @version $Id: index.php 1153 2009-07-02 10:53:22Z magike.net $ */ /**开启gzip */ ob_start('ob_gzhandler'); /** 载入配置支持 */ if (!defined('__TYPECHO_ROOT_DIR__') && !@include_once 'config.inc.php') { file_exists('./install.php') ? header('Location: install.php') : print('Missing Config File'); exit; } /** 初始化组件 */ Typecho_Widget::widget('Widget_Init'); /** 注册一个初始化插件 */ Typecho_Plugin::factory('index.php')->begin(); /** 开始路由分发 */ Typecho_Router::dispatch(); /** 注册一个结束插件 */ Typecho_Plugin::factory('index.php')->end(); ``` ####Gravatar国内源 找到Typecho的安装目录中的config.inc.php文件，添加一行代码更换为国内v2ex源 ``` define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/'); ``` Handsome主题可以直接在外观设置-速度优化-Gravatar镜像源地址中填入https://cdn.v2ex.com/gravatar/ <div class="tip inlineBlock info"> 参考文章 [Handsome美化](https://www.kancloud.cn/jarvis0912/handsome/) </div> © 允许规范转载
