Loading... <div class="tip share">请注意,本文编写于 1784 天前,最后修改于 15 天前,其中某些信息可能已经过时。</div> 基本上参考和复制了[官方教程](https://handsome2.ihewro.com/#/)和[史上最全的handsome美化,没有之一!(持续更新)](http://book.huat.xyz/handsome)。 ## Typecho 插件添加 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9c216b7387b3d0994bd0968552639e2193" aria-expanded="true"><div class="accordion-toggle"><span style="">UserAgent插件(显示评论人使用的操作系统和浏览器信息(Handsome主题专用)</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-9c216b7387b3d0994bd0968552639e2193" class="collapse collapse-content"><p></p> <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://doge.uk/coding/useragent-modify.html" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-image bg" style="background-image: url(https://doge.uk/usr/uploads/2019/04/2919419827.png);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">安利一款Hansome主题专用的UserAgent插件</p> <div class="inster-summary text-muted"> </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-87fb555c7e7c3082a1613f6aa3885e2857" aria-expanded="true"><div class="accordion-toggle"><span style="">Bangumi 追番列表插件 Typecho 版</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-87fb555c7e7c3082a1613f6aa3885e2857" class="collapse collapse-content"><p></p> <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://blog.sspirits.top/archives/typecho-anime-list-plugin" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-image bg" style="background-image: url(https://static.shadowyspirits.cn/blog/uploads/2019/02/945115605.png?_upt=9a26b2771585745515);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">Typecho 追番列表插件</p> <div class="inster-summary text-muted"> </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> <p></p></div></div></div> ## 修改php文件 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ee05a7c389c110714c06b114501cad3d58" aria-expanded="true"><div class="accordion-toggle"><span style="">博客信息添加访客总数和响应耗时</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-ee05a7c389c110714c06b114501cad3d58" class="collapse collapse-content"><p></p> 1. handsome主题的文件夹中的`functions.php`的最底下添加: ``` /*加载时间 @return bool*/ 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; } /*总访问量*/ function theAllViews(){ $db = Typecho_Db::get(); $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`'); echo number_format($row[0]['SUM(VIEWS)']); } ``` 2. handsome主题的文件夹中的`/component/sidebar.php`中找到博客信息的代码并添加(约为第99行): <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="eye"></i></span> <span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li> <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li> <p></p></div></div></div> ## 修改其他文件 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-66a37c3f84bdb995fa6e219a91029a9d63" aria-expanded="true"><div class="accordion-toggle"><span style="">添加额外的表情</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-66a37c3f84bdb995fa6e219a91029a9d63" class="collapse collapse-content"><p></p> <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://sirblog.cn/bzhanowo.html" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-content" style="margin-left: 10px;"> <p class="inser-title">handsome主题B站新表情</p> <div class="inster-summary text-muted"> </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> 内含 阿鲁+滑稽+小电视+新表情 的集成包 修改表情大小: ``` .emotion-bs { width: 30px; } .emotion-BZ { width: 50px; } ``` <p></p></div></div></div> ## 自定义 CSS <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3188a26a74c333319de145464c17d06e59" aria-expanded="true"><div class="accordion-toggle"><span style="">头像呼吸光环和鼠标悬停旋转放大</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-3188a26a74c333319de145464c17d06e59" class="collapse collapse-content"><p></p> /*头像呼吸光环和鼠标悬停旋转放大*/ .img-full { 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 #22ACD6; } 50% { box-shadow: 0 0 16px #22ACD6; } 100% { box-shadow: 0 0 4px #22ACD6; } } <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7ef88c53a8529945f1c2bd41aa67f8f932" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章标题居中</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-7ef88c53a8529945f1c2bd41aa67f8f932" class="collapse collapse-content"><p></p> /*首页文章标题居中*/ .panel:not(article) h2{ text-align: center; } .panel-small:not(article) h2{ text-align: center; } .panel-picture:not(article) h3{ text-align: center; } .post-item-foot-icon:not(article){ text-align: center; } <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0012be0869ded31cc035ea79caf3808318" aria-expanded="true"><div class="accordion-toggle"><span style="">文章阴影及头图放大特效</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-0012be0869ded31cc035ea79caf3808318" class="collapse collapse-content"><p></p> /*文章阴影及头图放大特效,修正放大后头图的版权位置*/ .blog-post .panel { transition: all 0.3s; box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47); } .blog-post .panel:hover { transform: translateY(-8px); box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47); } .blog-post .panel-small { transition: all 0.3s; box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47); } .blog-post .panel-small:hover { transform: translateY(-8px); box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47); } .blog-post .panel-picture { transition: all 0.3s; box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47); } .blog-post .panel-picture:hover { transform: translateY(-8px); box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47); } .index-post-img { overflow: hidden; } .index-post-img-small { overflow: hidden; } .item-thumb { transition: all 0.3s; } .item-thumb:hover { transform: scale(1.1) } .item-thumb-small { transition: all 0.3s; } .item-thumb-small:hover { transform: scale(1.1) } .item-thumb .img_copyright{ transition: all 0.3s; } .item-thumb:hover .img_copyright{ transform: translateX(-24px); } .entry-thumbnail { overflow: hidden; } .post-content img { border-radius: 10px; transition: 0.5s; } .post-content img:hover { transform: scale(1.1); } <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-786e5d07c83d84ac7a759580be368b8c71" aria-expanded="true"><div class="accordion-toggle"><span style="">盒子四周、上导航栏、文章小框、文章图片、引用文章及博客信息阴影调整</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-786e5d07c83d84ac7a759580be368b8c71" class="collapse collapse-content"><p></p> /*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整*/ .app.container { box-shadow: 0 0 30px rgba(73, 90, 47, 0.47); } .navbar{ box-shadow: 0 1px 10px rgba(73, 90, 47, 0.47); } .breadcrumb{ transition: all 0.3s; box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47); } .breadcrumb:hover { transform: translateY(-6px); box-shadow: 0 6px 8px rgba(73, 90, 47, 0.47); } .wrapper-lg img { transition: all 0.3s; box-shadow: 0 3px 5px rgba(73, 90, 47, 0.47); } .wrapper-lg img:hover { transform: translateY(-8px); box-shadow: 0 6px 10px rgba(73, 90, 47, 0.47); } .preview{ box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47); } #blog_info .list-group{ transition: all 0.3s; } #blog_info .list-group:hover { transform: translateY(-4px); box-shadow: 0 4px 6px rgba(73, 90, 47, 0.47); } <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1db1c1bf9ff2d59a11ccb8b7f1e3035724" aria-expanded="true"><div class="accordion-toggle"><span style="">bilibili视频挂载</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-1db1c1bf9ff2d59a11ccb8b7f1e3035724" class="collapse collapse-content"><p></p> /*bilibili视频挂载*/ .bilibili{ position: relative; width: 100%; height: 0; /*高度设置这里无效,设置为0,用padding撑开div*/ padding-bottom: 75%; /*68%到80%都可以*/ } .bilibili iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-71938afa0a5edbd6c82db49dd9c2d31494" aria-expanded="true"><div class="accordion-toggle"><span style="">右侧栏的条条更改为蓝色</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-71938afa0a5edbd6c82db49dd9c2d31494" class="collapse collapse-content"><p></p> /*右侧栏的条条更改为蓝色*/ .navs-slider-bar{ background-color: #23B7E5; } <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c217679df378807fcf88b40e9c375e3f65" aria-expanded="true"><div class="accordion-toggle"><span style="">文章一二三四级标题美化</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-c217679df378807fcf88b40e9c375e3f65" class="collapse collapse-content"><p></p> /*文章一二三四级标题美化*/ #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} <p></p></div></div></div> ## 自定义 JavaScript <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9e6669ebea47741843a47664303cb84b85" aria-expanded="true"><div class="accordion-toggle"><span style="">彩色标签云</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-9e6669ebea47741843a47664303cb84b85" class="collapse collapse-content"><p></p> ``` let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let lightColorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; let darkColorArr = ["#1E3A8A", "#065F46", "#9B2C2C", "#6B21A8", "#B45309", "#92400E"]; function updateColors() { let isDarkMode = document.documentElement.classList.contains('theme-dark'); let colorArr = isDarkMode ? darkColorArr : lightColorArr; tags.forEach(tag => { let tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { let infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); } let observer = new MutationObserver((mutationsList) => {updateColors();}); observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); updateColors(); ``` <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7de0a74c75368b037f8dcea858f8412236" aria-expanded="true"><div class="accordion-toggle"><span style="">转载提醒(还需要设定head 头部的HTML代码(详见下面))</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-7de0a74c75368b037f8dcea858f8412236" class="collapse collapse-content"><p></p> <!--转载提醒--> document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接!');}; <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3047d4c54557182dafdee7f91a040e8a66" aria-expanded="true"><div class="accordion-toggle"><span style="">地址栏变化</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-3047d4c54557182dafdee7f91a040e8a66" class="collapse collapse-content"><p></p> <!--地址栏变化--> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () {if (document.hidden) {document.title = '(๐•̆ ·̭ •̆๐) 不在了吗?'; clearTimeout(titleTime);} else {document.title = 'ヾ(Ő∀Ő3)ノ你回来啦!'; titleTime = setTimeout(function () {document.title = OriginTitle;}, 2000);}}); <p></p></div></div></div> ## 自定义输出head 头部的HTML代码 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2d8250035790521e442270bd263052a963" aria-expanded="true"><div class="accordion-toggle"><span style="">转载提醒(还需要设定JavaScript(详见上面))</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-2d8250035790521e442270bd263052a963" class="collapse collapse-content"><p></p> <!--转载提醒--> <script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script> <p></p></div></div></div> <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c9fa1b7899c4bc1afbabca0a7481387d53" aria-expanded="true"><div class="accordion-toggle"><span style="">拓展按钮</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-c9fa1b7899c4bc1afbabca0a7481387d53" class="collapse collapse-content"><p></p> <link rel="stylesheet" href="/usr/themes/handsome/assets/css/buttons.css"> css文件来自:https://www.bootcss.com/p/buttons/ <p></p></div></div></div> ## 自定义输出body 尾部的HTML代码 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-57a902606691959fa411f896958caed76" aria-expanded="true"><div class="accordion-toggle"><span style="">Live2d——萌萌的血小板</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-57a902606691959fa411f896958caed76" class="collapse collapse-content"><p></p> > 注:模型来自[jad大佬的博客](https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-03/)。 > 由于[live2d-widget.js](https://github.com/xiazeyu/live2d-widget.js)的官方文档404了…… > 以下代码和部分js文件扒取自jad大佬的博客。 > live2d-widget.js核心及模型文件下载:[点击此处](/usr/live2dw/live2dw+kesshouban_model.zip) > 1. 下载文件,将解压后的`usr文件夹`存放于网站根目录下。 2. 自定义输出body 尾部的HTML代码 <!--Live2d--> <script src = "/usr/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/usr/live2dw/assets/kesshouban.model.json"},"display":{"position":"right","width":325,"height":300,"hOffset":-110,"vOffset":0},"dialog":{"enable":true},"mobile":{"show":false},"react":{"opacity":1},"log":false}); </script> <p></p></div></div></div> ## 全局右侧边栏广告位 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1aa9eb612aa40b25718f3ad8145b0f8a77" aria-expanded="true"><div class="accordion-toggle"><span style="">浏览人数统计</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-1aa9eb612aa40b25718f3ad8145b0f8a77" class="collapse collapse-content"><p></p> ```html <span class="external-link"><a class="no-external-link" href="http://s01.flagcounter.com/more/yq3" target="_blank"><i data-feather="external-link"></i><img src="https://s01.flagcounter.com/count2/yq3/bg_F9F9F9/txt_222222/border_F9F9F9/columns_2/maxflags_20/viewers_0/labels_1/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0" style=""></a></span> ``` <p></p></div></div></div> 最后修改:2024 年 12 月 30 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏
6 条评论
大佬你好,请问怎么让页脚底部的信息可以延长到这个右侧栏呢,我只能显示在中间
大佬,请问一下你的文章折叠模块怎么弄的( ๑´•ω•) "(ㆆᴗㆆ)
备案号地址打不开,可改成https://beian.miit.gov.cn/
博主为什么我的自定义css 头像旋转呼吸灯以及文章阴影及头图放大特效 设置了没作用
Hi,友链一个可以吗?
博客名称:乔戈路阔阔;
博客网址:https://chelgr.com;
博客头像:https://chelgr.com/share/chelgr-com-icon.png;
博客介绍:缅怀过去 | 记录现在 | 心存未来...
想问一下你这边一级-四级标题除了自定义css以外是不是还做了什么操作才有现在的显示效果?我看我加了以后和这位 https://www.creater.ltd/blog/37.html (十九)的一模一样……谢谢!