博客历程与优化记录~

博主：羁鸟
发布时间：2022 年 04 月 26 日
2232 次浏览
19 条评论
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-f16480cc3ccb159d628d71ac20d76c8915" 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-f16480cc3ccb159d628d71ac20d76c8915" 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-e0df7973b59d79c9d507c8795b77aa1869" 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-e0df7973b59d79c9d507c8795b77aa1869" 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-185a5a4630e43cc366863d71135482a64" 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-185a5a4630e43cc366863d71135482a64" 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-7c3be07fd55d57af23a61aab3d219a3269" 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-7c3be07fd55d57af23a61aab3d219a3269" 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-786b6eeee51cd86b3db162e6a2f91db620" 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-786b6eeee51cd86b3db162e6a2f91db620" 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-f36efcf10d4a27231ccdf30b14691fa226" 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-f36efcf10d4a27231ccdf30b14691fa226" 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-0441871d51f0912050cd34e169bc34fb82" 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-0441871d51f0912050cd34e169bc34fb82" 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-3bf9c2392dd2ad0461b4045e2e961c6483" 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-3bf9c2392dd2ad0461b4045e2e961c6483" 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-95f05f993d1e9f05ddc25b177b96ac2930" 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-95f05f993d1e9f05ddc25b177b96ac2930" 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-1f4d1d7a4b03ccab828df74c2a2b70c759" 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-1f4d1d7a4b03ccab828df74c2a2b70c759" 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-8997b52a17dd6f55c99e22297f0d867790" 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-8997b52a17dd6f55c99e22297f0d867790" 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 日

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

19 条评论

酷酷哒 Google Chrome 113.0.0.0 Windows 11
May 27th, 2023 at 10:07 am

回复
小有名气的男孩 Google Chrome 113.0.0.0 Windows 11
May 23rd, 2023 at 12:46 am

回复
看透一切的贫僧 QQ浏览器 13.8 Android 13
May 23rd, 2023 at 12:35 am

回复
挺胸的道士 QQ浏览器 13.8 Android 13
May 23rd, 2023 at 12:32 am

回复
看透一切的贫僧 QQ浏览器 13.8 Android 13
May 23rd, 2023 at 12:27 am

回复
看透一切的贫僧 QQ浏览器 13.8 Android 13
May 23rd, 2023 at 12:25 am

该评论仅登录用户及评论双方可见

回复
Kaspa小矿工 Edge 111.0.1661.48 Android 13
March 29th, 2023 at 11:56 am

感谢分享，Centos已经彻底凉了

回复
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
  
  @暮城留风
  
  Σ(っ °Д °;)っ
  
  回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

博客历程与优化记录~

羁鸟 • 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-b21f08ef3d6f6f259a7722d2c827f15d14" 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-b21f08ef3d6f6f259a7722d2c827f15d14" 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-1d9491dfd09571081586d65f9f355b702" 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-1d9491dfd09571081586d65f9f355b702" 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-38b0cf38b48cd5d836a5b1c1dd96730861" 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-38b0cf38b48cd5d836a5b1c1dd96730861" 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-eb96e21900043168dc52f3662200bfab4" 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-eb96e21900043168dc52f3662200bfab4" 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-178656129018a5d936891f2505eb2ae028" 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-178656129018a5d936891f2505eb2ae028" 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-1bb4ea19dcf3087f34500f28e9d1608555" 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-1bb4ea19dcf3087f34500f28e9d1608555" 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-29d329bd7cfa86e25ad48edbb3f00efb72" 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-29d329bd7cfa86e25ad48edbb3f00efb72" 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-381ede6b59d3493f55c27364f8e6f9c312" 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-381ede6b59d3493f55c27364f8e6f9c312" 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-b922006dcef092987f67d18b509343ee1" 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-b922006dcef092987f67d18b509343ee1" 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-807ed98654e72889ecb89ce0afafcc3449" 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-807ed98654e72889ecb89ce0afafcc3449" 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-a42e9e620085bc79ac6f9a1147aeec7570" 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-a42e9e620085bc79ac6f9a1147aeec7570" 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>

博客历程与优化记录~

19 条评论

发表评论取消回复

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

BiliBili视频解析-Python开源

博客历程与优化记录~

网页JSON采集器-python开源

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

鬼刀ACG

为首页添加每日60s早报

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

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

世界级渲染大赛作品

博客历程与优化记录~

19 条评论

发表评论 取消回复

博客历程与优化记录~

发表评论取消回复