Loading... ### 说明 关于handsome主题的一些美化和修改统一记录,方便以后开速查找 ### 浏览器动态标题 #### 效果图:  <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1d262700c2a614ec385a25e0694eee1762" aria-expanded="true"><div class="accordion-toggle"><span>浏览器动态标题</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-1d262700c2a614ec385a25e0694eee1762" class="collapse collapse-content"><p></p> 主题设置 – 开发者设置 – 自定义输出body尾部的HTML代码添加以下代码 ```css <!--浏览器动态标题开始--> <script> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png"); document.title = 'ヽ(●-`Д´-)ノ我藏好了哦!'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png"); document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~!' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } }); </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-5b6b78a0a1db38de5e201a145fd24cb69" aria-expanded="true"><div class="accordion-toggle"><span>复制弹窗提示</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-5b6b78a0a1db38de5e201a145fd24cb69" class="collapse collapse-content"><p></p> 1. 如果你开启了PJAX,那么需要在 `主题设置》PJAX》PJAX回调函数`一栏内填入以下函数,然后保存即可。 ``` /*复制弹窗*/ kaygb_copy(); ``` 2. 最后复制下方代码到 `自定义JavaScript`即可 ``` /*复制弹窗*/ kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){ $.message({ message: "尊重原创,转载请注明出处!<br> 本文作者:阿七<br>原文链接:<br>"+sitesurl, title: "复制成功", type: "success", autoHide: !1, time: "5000" }) }} ``` <p></p></div></div></div> ### 自定义handsome主题默认文章头图 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-53324dce877c0936623c0d5f4b8f350954" aria-expanded="true"><div class="accordion-toggle"><span>自定义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-53324dce877c0936623c0d5f4b8f350954" class="collapse collapse-content"><p></p> **1. 先准备好自己的随机图链接** 需要链接进我的另一篇文章获取 <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="http://blog.a7a7.net/11.html" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-image bg" style="background-image: url(http://tva1.sinaimg.cn/large/00828lbuly1gkjb34p3paj31yo1e07kl.jpg);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">随机动漫图api源码</p> <div class="inster-summary text-muted"> 我目前使用的php随机动漫图源码,附带201张动漫图链接可以直接使用我的Api地址:https://blog.ra... </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> **2. 进入\usr\themes\handsome\libs\Content.php页面**  **3.替换以下代码,可以自己设置链接** ``` srand( microtime() * 1000000 ); $num = rand( 1, 45 ); switch( $num ) { case 1: $image_file = "https://tva1.sinaimg.cn/mw690/00828lbuly1gk5xjus4lzj31hc0u0ds9.jpg";break; case 2: $image_file = "https://tva1.sinaimg.cn/mw690/00828lbuly1gk5xjusopaj31hc0u0491.jpg";break; case 3: $image_file = "https://tva1.sinaimg.cn/mw690/00828lbuly1gk5xk2w0f4j31hc0u0qi9.jpg";break; case 4: $image_file = "https://tva1.sinaimg.cn/mw690/00828lbuly1gk5xjuuqz5j31hc0u0wre.jpg";break; case 5: $image_file = "https://tva1.sinaimg.cn/mw690/00828lbuly1gk5xk2ep96j31hc0u0ncd.jpg";break; case 6: $image_file = "https://tva1.sinaimg.cn/mw690/00828lbuly1gk5xk2vux9j31hc0u01di.jpg";break; }; // 随机缩略图路径 // $random = STATIC_PATH . 'img/sj/' . @$randomNum[$index] . '.jpg'; $random = $image_file; ``` **4. 在不设置头图的情况下,系统就会访问你设置的随机图链接获取头图。记得设置**  <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-96c1828b43cd9feee807179bffeb4f7421" aria-expanded="true"><div class="accordion-toggle"><span>栏目列表美化</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-96c1828b43cd9feee807179bffeb4f7421" class="collapse collapse-content"><p></p> **美化前提:文章头图样式选择选择小版式** `/usr/themes/handsome/libs/Content.php`955行到960行代码如下: ```html <div class="panel-small single-post box-shadow-wrap-normal"> <div class="index-post-img-small post-feature index-img-small"> <a href="{$parameterArray['linkUrl']}"> <div class="item-thumb-small lazy" {$backgroundImageHtml}></div> </a> </div> ``` 替换为 ```html <div class="panel-small single-post box-shadow-wrap-normal tt-small-blur"> <div class="index-post-img-small post-feature index-img-small tt-left-box"> <a href="{$parameterArray['linkUrl']}"> <div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div> </a> </div> <div class="tt-blur-img" {$backgroundImageHtml}></div> ``` `设置外观→开发者设置→自定义CSS` ```css /*栏目列表美化*/ .tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;} .tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);} .tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;} .tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);} .tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;} .tt-small-blur .text-title{color:inherit;} .tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;} .tt-small-blur .text-muted{color:inherit;} .tt-small-blur .post-meta {padding: 30px 30px 15px 30px;} @media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}} @media (max-width:500px){.tt-small-blur .summary{display:none;}} @media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}} @media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}} ``` <p></p></div></div></div> ### 首页轮播图 ``` {"title":"欢迎光临阿七博客","link":"http://blog.a7a7.net/", "cover":"https://blog.rain888.cn/randomImage.php","desc":"浅情终似,行云无定,犹到梦魂中。"} ``` 最后修改:2022 年 12 月 20 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 1 如果觉得我的文章对你有用,请随意赞赏