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]
注：此插件为收费插件，展示效果详情见左侧导航栏追番页面。

前言

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

自定义CSS

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

1.主题标题居中

主题标题居中

/*主题标题居中*/
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;
}

2.首页文章标题居中

首页文章标题居中

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

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

首页文章列表悬停上浮

/*首页文章列表悬停上浮*/
.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);
}

4.引用字体

引用字体

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

5.Logo扫光

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

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

文章一二三四级标题美化

/*文章一二三四级标题美化*/
#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}

7.时光机圆形头像

时光机圆形头像

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

8.博客阴影

博客阴影

/*博客信息-搜索框-幻灯片 阴影*/
.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;
}

9.标签字体颜色

标签字体颜色

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

10.滑动条美化

滑动条美化

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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;
}

自定义JavaScript

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

1.彩色标签云

彩色标签云

/*彩色标签云*/
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;
});

2.字体

字体

/* 字体*/ 
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('抱歉，不支持的浏览器');
}

3.网站加载完成提示

网站加载完成提示

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

开发者高级设置

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

开发者高级设置

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

添加ICP备案号标识

修改Handsome主题，Component目录下的footer.php代码文件
找到<?php /////////// 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解/////////?>，在它下一行添加以下代码：

        <a class="highlightlink" href="https://beian.miit.gov.cn/" target="_blank">
            <span class="badge-subject"><img src="/other/beian.png" style="height: 1em;"> 晋ICP备</span><span class="badge-value bg-green">2022003514号-1</span>

本站使用插件记录

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