说明

关于handsome主题的一些美化和修改统一记录,方便以后开速查找

浏览器动态标题

效果图:

浏览器动态标题

主题设置 – 开发者设置 – 自定义输出body尾部的HTML代码添加以下代码

<!--浏览器动态标题开始--> <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> <!--浏览器动态标题结束-->

复制弹窗提示

效果图:

复制弹窗提示

  1. 如果你开启了PJAX,那么需要在 主题设置》PJAX》PJAX回调函数一栏内填入以下函数,然后保存即可。
/*复制弹窗*/
kaygb_copy();
  1. 最后复制下方代码到 自定义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"
    })
}}

自定义handsome主题默认文章头图

自定义handsome主题默认文章头图

1. 先准备好自己的随机图链接

需要链接进我的另一篇文章获取

2. 进入\usr\themes\handsome\libs\Content.php页面

修改的地方如图.png

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. 在不设置头图的情况下,系统就会访问你设置的随机图链接获取头图。记得设置

将博客头图设置为随机.png

栏目列表美化

栏目列表美化

美化前提:文章头图样式选择选择小版式

/usr/themes/handsome/libs/Content.php955行到960行代码如下:

<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>

替换为

<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

/*栏目列表美化*/
.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;}}

最后修改:2022 年 07 月 09 日
如果觉得我的文章对你有用,请随意赞赏