Handsome-美化记录分享

## 前言
  昨天刚刚更新了Handsome主题的10.1.0 Pro版本，一看更新了不少内容，其中最吸引我的就是更新了五个新配色，然后看了看我现在用的紫色配色，还是觉得颜色过于鲜艳了，于是就在五款新配色里面选了樱桃粉作为博客的主题新色调，然后换了新色调后，打算调整一下博客的美化内容，然后一个不小心，就把Handsome备份的美化数据给整丢了，于是我就开始了博客的重新美化，其实说是美化，不如说是对博客细节的优化。一直以来，我对于博客样式的的调整一向都是以简洁、优雅为准则，然后在调整文件代码最少的情况下进行修改（懂得都懂，美化一时爽，更新火葬场），然后为了避免美化数据再次丢失，就打算把博客的美化数据记录一下，一方面方便自己以后调整，另一方面也可以为Handsome用户提供一点美化内容。（以下代码均来自互联网）

## 自定义CSS
在后台`更改外观`-`设置外观`-`开发者设置`复制相应CSS代码粘贴至`自定义CSS`即可。
### 1.主题标题居中

[collapse status="false" title="主题标题居中"]

/*主题标题居中*/
    header.bg-light.lter.wrapper-md {
        text-align: center;
    }
    /*new_year_css*/
    #new_year{
        position: absolute;
        pointer-events: none;
        opacity: 0.5;
        left: 0;
        right: 0;
        bottom: 0;
    }
    #post-panel header.wrapper-md.bg-light{
    position:relative;
    }

[/collapse]
### 2.首页文章标题居中

[collapse status="false" title="首页文章标题居中"]

/*首页文章标题居中*/
    .post_title_wrapper
    {
        justify-content: center;
    }

[/collapse]
### 3.首页文章列表悬停上浮

[collapse status="false" title="首页文章列表悬停上浮"]

/*首页文章列表悬停上浮*/
    .blog-post .panel-small:not(article),
    .blog-post .panel:not(article) {
        transition: all 0.3s;
    }
    
    .blog-post .panel-small:not(article):hover,
    .blog-post .panel:not(article):hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
    }

[/collapse]
### 4.引用字体

[collapse status="false" title="引用字体"]

/*引用字体*/
    @font-face{
      font-family:myfont;
      src:url(字体地址)format('woff'),
          url(字体地址)format('woff');
      font-display:swap;
    }
    *{
      font-family:myfont;
    }

[/collapse]
### 5.Logo扫光

[collapse status="false" title="Logo扫光"]

/* logo扫光 */
    .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

[/collapse]
### 6.文章一二三四级标题美化

[collapse status="false" title="文章一二三四级标题美化"]

/*文章一二三四级标题美化*/
    #post-content h1 {font-size: 30px}
    #post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
    #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 rgb(235,185,175);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}

[/collapse]
### 7.时光机圆形头像

[collapse status="false" title="时光机圆形头像"]

/* 时光机圆形头像*/
    .img-square {border-radius: 50%;}
    .list-group-item .thumb-sm .img-square {border-radius: 5px;}

[/collapse]
### 8.博客阴影

[collapse status="false" title="博客阴影"]

/*博客信息-搜索框-幻灯片 阴影*/
    .box-shadow-wrap-normal {
        box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
    }
    /*盒子四周阴影*/
    .app.container {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
    }
    /*文章圆角-阴影*/
    .panel {
      box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
      border-radius: 6px!important;
    }

[/collapse]
### 9.标签字体颜色

[collapse status="false" title="标签字体颜色"]

/*标签字体颜色*/
    .badge,.padder-v-ssm{
        color:#fff;
    }

[/collapse]
### 10.滑动条美化

[collapse status="false" title="滑动条美化"]

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
    ::-webkit-scrollbar {
        width:9px;
        height:8px;
    }
    /*定义滚动条轨道*/ 
    ::-webkit-scrollbar-track {
        background-color:white;
        -webkit-border-radius: 0em;
        -moz-border-radius: 0em;
        border-radius: 0em;
    }
    /*定义滑块 内阴影+圆角*/ 
    ::-webkit-scrollbar-thumb {
        background-color: #ff676c;
        background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
        cursor: pointer;
    }

[/collapse]
## 自定义JavaScript

在后台`更改外观`-`设置外观`-`开发者设置`复制相应JavaScript代码粘贴至`自定义JavaScript`即可。
### 1.彩色标签云

[collapse status="false" title="彩色标签云"]

/*彩色标签云*/
    let tags = document.querySelectorAll("#tag_cloud-2 a");
    let infos = document.querySelectorAll(".badge");
    let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
    tags.forEach(tag => {
        tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
        tag.style.backgroundColor = tagsColor;
    });
    infos.forEach(info => {
        infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
        info.style.backgroundColor = infosColor;
    });

[/collapse]
### 2.字体

[collapse status="false" title="字体"]

/* 字体*/ 
    if (document.fonts) {
        const font = new FontFace('myfont', 'url(https://sweetjing.cc/font.woff)');
        document.fonts.add(font);
        font.load();
        font.loaded.then(() => {
            document.body.style.fontFamily = 'myfont';
        }).catch(err => {
            console.log(err);
        });
    } else {
        console.error('抱歉，不支持的浏览器');
    }

[/collapse]
### 3.网站加载完成提示

[collapse status="false" title="网站加载完成提示"]

/* 网站加载完成提示 */ 
 function kaygb_referrer(){
 var kaygb_referrer = document.referrer;
 if (kaygb_referrer != ""){
 return "感谢您的访问！ 您来自： " + document.referrer;
 }else{
 return "";
 }}
 $.message({
 message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！ " + kaygb_referrer(),
 title: "网站加载完成",
 type: "success",
 autoHide: !1,
 time: "3000"
 })

[/collapse]
## 开发者高级设置

在后台`更改外观`-`设置外观`-`开发者设置`复制相应代码粘贴至`开发者高级设置`即可。
[collapse status="false" title="开发者高级设置"]

{
      "show_post_last_date":false,
      "rank_num":20
    }

[/collapse]
## 添加ICP备案号标识

修改`Handsome`主题，`Component`目录下的`footer.php`代码文件
找到`<?php /////////// 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解/////////?>`，在它下一行添加以下代码：
 <a class="highlightlink" href="https://beian.miit.gov.cn/" target="_blank">
 <img src="/other/beian.png" style="height: 1em;"> 晋ICP备2022003514号-1

## 本站使用插件记录

**1.UserAgent：一款Hansome主题专用的UserAgent插件，显示评论人使用的操作系统和浏览器信息（Handsome主题专用）**
下载地址：[button color="success" icon="arrow-down-circle" url="https://doge.uk/coding/useragent-modify.html" type=""]一键抵达[/button]
**2.Mailer：一个极简的邮件评论提醒插件**
下载地址：[button color="success" icon="arrow-down-circle" url="https://www.zhaoyingtian.com/archives/mailer.html" type=""]一键抵达[/button]
**2.Mbili：哔哩哔哩视频卡片及哔哩哔哩追番追剧页面展示插件**
购买下载地址：[button color="success" icon="arrow-down-circle" url="https://store.mmbkz.cn" type=""]一键抵达[/button]
注：此插件为收费插件，展示效果详情见左侧导航栏追番页面。

1.主题标题居中

主题标题居中

2.首页文章标题居中

首页文章标题居中

3.首页文章列表悬停上浮

首页文章列表悬停上浮

4.引用字体

引用字体

5.Logo扫光

Logo扫光

6.文章一二三四级标题美化

文章一二三四级标题美化

7.时光机圆形头像

时光机圆形头像

8.博客阴影

博客阴影

9.标签字体颜色

标签字体颜色

10.滑动条美化

滑动条美化

1.彩色标签云

彩色标签云

2.字体

字体

3.网站加载完成提示

网站加载完成提示

开发者高级设置

在后台更改外观-设置外观-开发者设置复制相应代码粘贴至开发者高级设置即可。

开发者高级设置

添加ICP备案号标识

本站使用插件记录

1.UserAgent：一款Hansome主题专用的UserAgent插件，显示评论人使用的操作系统和浏览器信息（Handsome主题专用）
下载地址：
2.Mailer：一个极简的邮件评论提醒插件
下载地址：
2.Mbili：哔哩哔哩视频卡片及哔哩哔哩追番追剧页面展示插件
购买下载地址：
注：此插件为收费插件，展示效果详情见左侧导航栏追番页面。

最后修改：2025 年 07 月 23 日

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

12 条评论

MX
April 18th, 2026 at 04:58 pm

发现恋爱计时怎么删掉了（

回复
小赵同学
January 24th, 2026 at 08:28 pm

typecho 更新1.3了可以折腾了

回复
道不知
November 28th, 2025 at 10:20 pm

试用过这个主题，很喜欢，但是还得安装一个typecho，就放弃了。
感觉typecho被流放了的样子。
不过你的确很漂亮。

回复
1. 小刘同学
  November 28th, 2025 at 10:29 pm
  
  @道不知
  
  感谢夸奖，你的站点也很漂亮！我感觉typecho很简洁，很好用呀，也不臃肿，很适合个人用户用，typecho现在用户也不少，可能是我周围大家都在用的原因吧，我没有这种被流放的感觉，哈哈哈哈～
  
  回复
小赵同学
November 22nd, 2025 at 09:52 am

串下门

回复
1. 小刘同学
  November 23rd, 2025 at 04:34 pm
  
  @小赵同学
  
  好久不见
  
  回复
decat
November 19th, 2025 at 09:02 pm

博主大大，左侧边栏彩色svg图标怎么实现的，没看到

回复
1. 小刘同学
 November 19th, 2025 at 09:07 pm
 
 @decat
 
 下面代码填在后台的[初级设置]—>[日间模式下博客logo的HTML结构]/[夜间模式下博客logo的HTML结构]
 <img src="你的svg logo地址" type="image/svg+xml" style="width: 230px;height: 120px;margin-top: -7px;max-height: 50px;">
 
 回复
 1. decat 1
 November 19th, 2025 at 09:14 pm
 
 @小刘同学
 
 不对这个是左上角logo的，是左侧首页音乐相册这些彩色的svg什么实现的，好看，而且还是随机颜色
 
 回复
 
 小刘同学
 November 19th, 2025 at 09:17 pm
 
 @decat
 
 这是下午刚搞得，还没更新到这个文章里，你加我QQ吧，我发给你，评论区发代码有点呆
 
 回复
 
 decat
 November 19th, 2025 at 09:17 pm
 
 @小刘同学
 
 好的
 
 回复
 2. decat
 November 19th, 2025 at 09:08 pm
 
 @小刘同学
 
 回复好快啊，感谢~
 
 回复