博客历程与优化记录~

博主：羁鸟
发布时间：2022 年 04 月 26 日
1541 次浏览
12 条评论
16720字数
分类：随笔文章
加载中

# 前言

本文会记录本站自2022年2月15日上线后的一系列优化和美化操作
</div>

2022年2月15日偶然看到腾讯云服务器促销活动，便萌生了建立这个网站的想法，开始搭建网站，我选择将服务器安装宝塔面板易于以后的管理，服务器的系统为CentOS，安装了PHP、MySQL等相关配置。将闲置已久的域名data-era.cn绑定到服务器中，并安装了SSL证书采用流行的HTTPS传输协议，博客采用的是 typecho框架，购买并设置了handsome主题，到此，我的博客网站便初步搭建完成了。有关typecho和handsome操作这里不再做赘述
</div>

# 美化

2022年2月16日将文章头图更换为随机的动漫图片
</div>

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

#### 随机动漫头图

![](https://www.data-era.cn/usr/uploads/2022/04/186641491.png "随机动漫头图效果")

修改主题目录下 `Content.php`文件中的代码，在 `489行`左右
</div>

```php
// 随机缩略图路径
        //$random = STATIC_PATH . 'img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined 注意这个是原来的图片设置
        $random ='https://cdn.data-era.cn/api/as/?type=link&'. @$randomNum[$index].rand(0,100);//更换后的
```

2022年2月17日为博客右下角添加看板娘
</div>

#### 看板娘

![](https://www.data-era.cn/usr/uploads/2022/04/873132913.png "看板娘效果")

开发者设置➡自定义CSS
</div>

```css
/*看板娘*/
#live2dcanvas {
    width: 10% !important;
    opacity: 1 !important;
    }
@media (max-width: 1000px) {
    #live2dcanvas {
    display:none !important;
    }
}
```

开发者设置➡自定义 JavaScript
</div>

```javascript
//看板娘
 if (screen && screen.width > 768) {
  document.write('<script type="text/javascript" src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"><\/script><script>L2Dwidget.init({"model":{"jsonPath":"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json","scale":1},"display":{"position":"right","width":150,"height":300,"hOffset":0,"vOffset":-20},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.2}});<\/script>');}

```

***看板娘模型直接覆盖上面代码中的*** `jsonPath`***字段就好了***

黑猫：[https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json](https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json)

萌娘：[https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json](https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json)

白猫：[https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json](https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json)

狗狗：[https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json](https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json)

小可爱：[https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json](https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json)

大可爱：[https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json](https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json)

</div>

2022年2月18日对博客进行了小部分美化
</div>

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

#### 底部版权信息

![](https://www.data-era.cn/usr/uploads/2022/04/295984635.png "底部版权信息效果")

开发者设置➡博客底部左侧信息
</div>

```html
<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-orange">©<script>document.write(new Date().getFullYear())</script> 羁鸟博客</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn/">
     <span class="badge-subject">鄂ICP备</span>
     <span class="badge-value bg-green">2020018165号-3</span>
</a>
```

开发者设置➡博客底部左侧信息
</div>

```html
<a class="github-badge" target="_blank" href="https://www.ihewro.com/" title="Handsome">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org" title="Typecho">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-purple">Typecho</span>
</a>
```

开发者设置➡自定义CSS
</div>

```css
/*底部版权与备案信息*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
  background-color: #007ec6
}
.github-badge .bg-orange {
  background-color: #ffa500
}
.github-badge .bg-red {
  background-color: #f00
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-purple {
  background-color: #ab34e9
}

```

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

#### 文章版式阴影和字体

![](https://www.data-era.cn/usr/uploads/2022/04/1462858644.png "音乐和字体效果")

开发者设置➡自定义CSS
</div>

```css
/*文章版式阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
/*字体样式美化*/
body{font-family: "楷体";}
```

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

#### 右侧导航栏彩色图标

![](https://www.data-era.cn/usr/uploads/2022/04/996650848.png "右侧导航栏彩色图标")

开发者设置➡自定义CSS
</div>

```css
/*右侧导航栏图标*/
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}
```

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

#### 赞赏按钮跳动特效

![](https://www.data-era.cn/usr/uploads/2022/04/2915478682.png "赞赏按钮跳动特效")

开发者设置➡自定义CSS
</div>

```css
/*赞赏按钮跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

to {
        transform: scale(1.1);
    }
}
```

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

#### 等距标签云

开发者设置➡自定义CSS
</div>

```css
/*等距标签云*/
#tag_cloud-2 a {
    border-radius: 5px;
    width: 31%;
}
```

2022年3月1日因为博客主题颜色太过单一，对一些小部件进行彩色化
</div>

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

#### 彩色标签云和博客信息

![](https://www.data-era.cn/usr/uploads/2022/04/771600175.png "彩色标签云效果")

开发者设置➡自定义JavaScript
</div>

PJAX➡PJAX回调函数
</div>

```javascript
//彩色标签云
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;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
```

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

#### 左侧彩色导航

![](https://www.data-era.cn/usr/uploads/2022/04/2939348565.png "左侧彩色导航效果")

开发者设置➡自定义JavaScript
</div>

PJAX➡PJAX回调函数
</div>

```javascript
//左侧彩色导航
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];
leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});
```

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

#### 右侧彩色博客信息图标

![](https://www.data-era.cn/usr/uploads/2022/04/73875021.png "右侧彩色博客信息图标效果")

开发者设置➡自定义JavaScript
</div>

PJAX➡PJAX回调函数
</div>

```javascript
//彩色博客信息
let svgs = document.querySelectorAll(".list-group .blog-info-icons");
let colorsvg = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
svgs.forEach(svg => {
    svgsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    svg.style.color = svgsColor;
});
```

2022年3月5日对博客滚动条进行美化
</div>

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

#### 滚动条美化

![](https://www.data-era.cn/usr/uploads/2022/04/3554658400.png "滚动条美化效果")

开发者设置➡自定义CSS
</div>

```css
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #30B07F;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,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
}
```

2022年3月6日添加友链自助申请插件[ErcerLink](https://github.com/ccdalao/typecho_ercerlink "ErcerLink")
</div>

* 申请后会自动提交到你typecho程序的links数据库中 后台-管理-友情链接 可查看

2022年3月7日添加Typecho猫耳FM置顶插件[GoTop](https://github.com/MisakaTAT/GoTop "GoTop")
</div>

* 这是一款Q萌的小猫返回顶部插件，用起来非常丝滑

2022年3月10日添加插件仓库[TeStore](http://forum.typecho.org/viewtopic.php?f=6&t=11097 "TeStore")
</div>

* 发现[typecho粉丝插件社区](https://github.com/typecho-fans/plugins "typecho粉丝插件社区")，安装了TE插件管理插件，可以方便的从该插件中直接浏览github上所有有关typecho的插件，并且一键自动安装，十分方便强大，强烈推荐！

2022年3月11日添加评论UA插件[UserAgent](https://doge.uk/coding/useragent-modify.html "UserAgent")
</div>

* 用于显示评论人使用的操作系统和浏览器信息（Handsome主题专用），非常好用

2022年3月15日添加高德天气插件[Wiather](https://github.com/wibus-wee/Typecho-Plugin-Wiather "Wiather")
</div>

* 开启后在博客左侧导航栏头像下方显示当天的天气等信息，需要申请高德天气api

2022年3月16日添加邮件通知插件[LoveKKCommentModify](https://github.com/gogobody/LoveKKCommentModify "LoveKKCommentModify")
</div>

* 功能有Typecho 评论通知、找回密码插件 gogobody 美化 适配 joe主题

2022年3月18日添加炫彩鼠标插件[HoerMouse](https://gitee.com/HoeXhe/HoerMouse "HoerMouse")
</div>

* 该插件内置多种鼠标样式和点击特效，非常好看，快去试试吧

2022年3月20日对博客的鼠标右键样式进行美化
</div>

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

#### 鼠标右键样式美化

![](https://www.data-era.cn/usr/uploads/2022/05/1177366660.png "鼠标右键样式美化效果")

开发者设置➡自定义输出body 尾部的HTML代码
</div>

```html

2022年6月21日对博客的文章小图版式进行美化
</div>

![image.png](https://www.data-era.cn/usr/uploads/2022/06/3384389519.png)

开发者设置➡自定义CSS
</div>

```
/*文章小图版式*/
.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,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 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;}}
```

：`Content.php`文件，位于：主题 / handsome / libs /
</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>
```

正文到此结束

本文作者：羁鸟
本文链接：https://www.data-era.cn/archives/blog-history.html
版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 4.0 许可协议。

最后修改：2022 年 06 月 21 日

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

12 条评论

TImochan Google Chrome 104.0.0.0 Windows 11
August 21st, 2022 at 06:47 pm

个人觉得， CentOS 已经凉了，不要怀念，建议上 Ubuntu / Debian 或者其他的

回复
1. 羁鸟 Google Chrome 104.0.0.0 Windows 11
  August 21st, 2022 at 09:06 pm
  
  @TImochan
  
  确实，但因为购买服务器时选的CentOS是现有的环境懒得自己搭了，之后也一直没换，感觉这套系统挺吃资源的
  
  回复
晴和君 Google Chrome 102.0.5005.61 Mac OS X Lion 10.15.7
June 11th, 2022 at 02:17 pm

统计图有点意思

回复
暮城留风 Google Chrome 101.0.0.0 Windows 11
June 6th, 2022 at 11:28 am

图片不错

回复
1. 羁鸟 Google Chrome 102.0.0.0 Windows 11
  June 6th, 2022 at 11:30 am
  
  @暮城留风
  
  Σ(っ °Д °;)っ
  
  回复
羁鸟 Google Chrome 101.0.4951.54 Windows 11
May 18th, 2022 at 05:13 pm

回复
1. 羁鸟 Google Chrome 101.0.4951.54 Windows 11
  May 18th, 2022 at 05:27 pm
  
  @羁鸟
  
  OωO
  
  回复
陶小桃Blog Google Chrome 101.0.4951.67 Windows 11
May 18th, 2022 at 02:44 pm

你这看板娘和猫猫叠合了，可以把看板娘放到左边。网站的速度还是很快的。加油！╮(╯▽╰)╭

回复
1. 羁鸟简单搜索 3.9.1 Android 11
  May 18th, 2022 at 02:52 pm
  
  @陶小桃Blog
  
  谢谢支持，正常应该是不重合的，你看看你的浏览器或者系统缩放比例是不是100％，不过还是可以考虑把看板娘放到左边
  
  回复
羁鸟 Google Chrome 100.0.4896.127 Windows 11
May 5th, 2022 at 04:35 pm

有什么优化建议可以在这里提一下

回复
robotmaid QQ 8. Android 10
May 5th, 2022 at 10:02 am

大佬美工好强，我也去整一个

回复
十三 Google Chrome 86.0.4240.198 Windows 10
May 1st, 2022 at 09:32 pm

优化的很好，不错。没事的时候别忘了多来我的小站走访走访，评论留言一下哦|´・ω・)ノ

回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

晚风
1
JIWU
新年快乐，祝安好！
krau
让咱康康！（震声）
s
s
DoNotKnow
1

博客历程与优化记录~

羁鸟 • 2022 年 04 月 26 日

# 前言

本文会记录本站自2022年2月15日上线后的一系列优化和美化操作
</div>

# 美化

2022年2月16日将文章头图更换为随机的动漫图片
</div>

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

#### 随机动漫头图

![](https://www.data-era.cn/usr/uploads/2022/04/186641491.png "随机动漫头图效果")

修改主题目录下 `Content.php`文件中的代码，在 `489行`左右
</div>

2022年2月17日为博客右下角添加看板娘
</div>

#### 看板娘

![](https://www.data-era.cn/usr/uploads/2022/04/873132913.png "看板娘效果")

开发者设置➡自定义CSS
</div>

```css
/*看板娘*/
#live2dcanvas {
    width: 10% !important;
    opacity: 1 !important;
    }
@media (max-width: 1000px) {
    #live2dcanvas {
    display:none !important;
    }
}
```

开发者设置➡自定义 JavaScript
</div>

```

***看板娘模型直接覆盖上面代码中的*** `jsonPath`***字段就好了***

黑猫：[https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json](https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json)

萌娘：[https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json](https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json)

白猫：[https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json](https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json)

狗狗：[https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json](https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json)

小可爱：[https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json](https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json)

大可爱：[https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json](https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json)

</div>

2022年2月18日对博客进行了小部分美化
</div>

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

#### 底部版权信息

![](https://www.data-era.cn/usr/uploads/2022/04/295984635.png "底部版权信息效果")

开发者设置➡博客底部左侧信息
</div>

开发者设置➡博客底部左侧信息
</div>

开发者设置➡自定义CSS
</div>

```

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

#### 文章版式阴影和字体

![](https://www.data-era.cn/usr/uploads/2022/04/1462858644.png "音乐和字体效果")

开发者设置➡自定义CSS
</div>

```css
/*文章版式阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

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

#### 右侧导航栏彩色图标

![](https://www.data-era.cn/usr/uploads/2022/04/996650848.png "右侧导航栏彩色图标")

开发者设置➡自定义CSS
</div>

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

#### 赞赏按钮跳动特效

![](https://www.data-era.cn/usr/uploads/2022/04/2915478682.png "赞赏按钮跳动特效")

开发者设置➡自定义CSS
</div>

```css
/*赞赏按钮跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

to {
        transform: scale(1.1);
    }
}
```

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

#### 等距标签云

开发者设置➡自定义CSS
</div>

```css
/*等距标签云*/
#tag_cloud-2 a {
    border-radius: 5px;
    width: 31%;
}
```

2022年3月1日因为博客主题颜色太过单一，对一些小部件进行彩色化
</div>

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

#### 彩色标签云和博客信息

![](https://www.data-era.cn/usr/uploads/2022/04/771600175.png "彩色标签云效果")

开发者设置➡自定义JavaScript
</div>

PJAX➡PJAX回调函数
</div>

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

#### 左侧彩色导航

![](https://www.data-era.cn/usr/uploads/2022/04/2939348565.png "左侧彩色导航效果")

开发者设置➡自定义JavaScript
</div>

PJAX➡PJAX回调函数
</div>

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

#### 右侧彩色博客信息图标

![](https://www.data-era.cn/usr/uploads/2022/04/73875021.png "右侧彩色博客信息图标效果")

开发者设置➡自定义JavaScript
</div>

PJAX➡PJAX回调函数
</div>

2022年3月5日对博客滚动条进行美化
</div>

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

#### 滚动条美化

![](https://www.data-era.cn/usr/uploads/2022/04/3554658400.png "滚动条美化效果")

开发者设置➡自定义CSS
</div>

2022年3月6日添加友链自助申请插件[ErcerLink](https://github.com/ccdalao/typecho_ercerlink "ErcerLink")
</div>

* 申请后会自动提交到你typecho程序的links数据库中 后台-管理-友情链接 可查看

2022年3月7日添加Typecho猫耳FM置顶插件[GoTop](https://github.com/MisakaTAT/GoTop "GoTop")
</div>

* 这是一款Q萌的小猫返回顶部插件，用起来非常丝滑

2022年3月10日添加插件仓库[TeStore](http://forum.typecho.org/viewtopic.php?f=6&t=11097 "TeStore")
</div>

2022年3月11日添加评论UA插件[UserAgent](https://doge.uk/coding/useragent-modify.html "UserAgent")
</div>

* 用于显示评论人使用的操作系统和浏览器信息（Handsome主题专用），非常好用

2022年3月15日添加高德天气插件[Wiather](https://github.com/wibus-wee/Typecho-Plugin-Wiather "Wiather")
</div>

* 开启后在博客左侧导航栏头像下方显示当天的天气等信息，需要申请高德天气api

2022年3月16日添加邮件通知插件[LoveKKCommentModify](https://github.com/gogobody/LoveKKCommentModify "LoveKKCommentModify")
</div>

* 功能有Typecho 评论通知、找回密码插件 gogobody 美化 适配 joe主题

2022年3月18日添加炫彩鼠标插件[HoerMouse](https://gitee.com/HoeXhe/HoerMouse "HoerMouse")
</div>

* 该插件内置多种鼠标样式和点击特效，非常好看，快去试试吧

2022年3月20日对博客的鼠标右键样式进行美化
</div>

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

#### 鼠标右键样式美化

![](https://www.data-era.cn/usr/uploads/2022/05/1177366660.png "鼠标右键样式美化效果")

开发者设置➡自定义输出body 尾部的HTML代码
</div>

```html

2022年6月21日对博客的文章小图版式进行美化
</div>

![image.png](https://www.data-era.cn/usr/uploads/2022/06/3384389519.png)

开发者设置➡自定义CSS
</div>

：`Content.php`文件，位于：主题 / handsome / libs /
</div>

博客历程与优化记录~

12 条评论

发表评论取消回复

PC网易云音乐解锁灰色歌曲版权

博客历程与优化记录~

网页JSON采集器-python开源

Python实战-调用JS逆向解析网易云音乐

BiliBili视频解析-Python开源

Java-序列化与反序列化&Hadoop API

Typecho后台评论头像解析为QQ头像

Python实战-猫狗大战

为首页添加每日60s早报

鬼刀ACG

博客历程与优化记录~

12 条评论

发表评论 取消回复

博客历程与优化记录~

发表评论取消回复