handsome主题美化

博主：阿七
发布时间：2022 年 07 月 05 日
129 次浏览
暂无评论
5010字数
分类： Typecho 网站开发

### 说明

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

### 浏览器动态标题

#### 效果图：

![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/浏览器动态标题_1.png)![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/浏览器动态标题_2.png)

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

### 复制弹窗提示

#### 效果图：

![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/复制弹窗.png)

<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"
    })
}}
```

### 自定义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="inner-content" >
<p class="inser-title">随机动漫图api源码</p>
<div class="inster-summary text-muted">
我目前使用的php随机动漫图源码，附带201张动漫图链接可以直接使用我的Api地址：https://blog.ra...
</div>
</div>
</a>

</div>

</div>

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

![修改的地方如图.png](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/修改的地方如图.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](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/将博客头图设置为随机.png)

### 栏目列表美化

<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;}}
```

### 首页轮播图
```
{"title":"欢迎光临阿七博客","link":"http://blog.a7a7.net/", "cover":"https://blog.rain888.cn/randomImage.php","desc":"浅情终似，行云无定，犹到梦魂中。"}
```

最后修改：2022 年 12 月 20 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

handsome主题美化

阿七 • 2022 年 07 月 05 日

### 说明

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

### 浏览器动态标题

#### 效果图：

![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/浏览器动态标题_1.png)![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/浏览器动态标题_2.png)

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-97b5147612a3768193304eca924e17e692" 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-97b5147612a3768193304eca924e17e692" class="collapse collapse-content"><p></p>

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

### 复制弹窗提示

#### 效果图：

![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/复制弹窗.png)

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2ec1631a539b25566a2e33011d2c2c4529" 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-2ec1631a539b25566a2e33011d2c2c4529" class="collapse collapse-content"><p></p>

1. 如果你开启了PJAX，那么需要在 `主题设置》PJAX》PJAX回调函数`一栏内填入以下函数，然后保存即可。

```
/*复制弹窗*/
kaygb_copy();
```

2. 最后复制下方代码到 `自定义JavaScript`即可

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2a39056b5ebf85433b1d53f8ac47af191" 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-2a39056b5ebf85433b1d53f8ac47af191" class="collapse collapse-content"><p></p>

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

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

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

![修改的地方如图.png](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/修改的地方如图.png)

**3.替换以下代码，可以自己设置链接**

**4. 在不设置头图的情况下，系统就会访问你设置的随机图链接获取头图。记得设置**

![将博客头图设置为随机.png](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/07/06/将博客头图设置为随机.png)

### 栏目列表美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-99959d2ee1818108d094020aa9ef2e1b60" 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-99959d2ee1818108d094020aa9ef2e1b60" class="collapse collapse-content"><p></p>

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

`/usr/themes/handsome/libs/Content.php`955行到960行代码如下：

替换为

`设置外观→开发者设置→自定义CSS`

handsome主题美化

发表评论取消回复

欢迎使用 Typecho

handsome主题美化

随机动漫图api源码

媛の碎碎恋

图片批量压缩小工具

typecho首页不显示指定分类插件

壁纸

仿网站无法访问源码

[Windows] 图片批量压缩工具，支持透明图片压缩

[Windows] 启动U盘制作工具Rufus v3.19.1911

handsome主题美化

发表评论 取消回复

handsome主题美化

发表评论取消回复