重新设计了博客Logo和博客的其他美化修改教程

Author： Anleeno
发布时间：September 11, 2020
306views
2 comments
1845 words
Categories：默认分类设计

## 1. 博客Logo设计

很简洁，一个蝴蝶停在了英文名上，就像驻足在花上一样，寓意是希望该博客能像缤纷的鲜花一样吸引来自各地的朋友们。

### 1.1 背景透明

由于设计时保存的可选格式只有png，所以我在PhotoShop里面使用魔术橡皮擦工具将背景设置为了透明，以避免png图片原本背景颜色在切换时的突兀感（即便图片背景和网页背景色一样，但在切换时肯定会有延迟，很是突兀，而且网页经常会更改配色，所以背景透明很必要）。

### 1.2 效果

![Anleeno的网站logo](https://www.anleenoxu.top/usr/uploads/images/logo.png)

## 2. 标签云随机色彩

这个就更简单了，直接在php文件里面对应标签的内联样式加上下述代码：

```
style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)"
```

上面的就比较随机了，当然还可以加上自己喜欢的颜色。在Utils.php里面写一个函数：

```
public static function randomColor(){
	//颜色代码的数组，例：#FDA7DF、#12CBC4、#C4E538
	$colors = array("#FDA7DF","#12CBC4","#C4E538");
	$randomColor=$color[rand(0,2)];
	return $randomColor;
}
```

然后把刚才的style改为：

```
style="background-color:<?php echo Utils::randomColor(); ?>;"
```

## 3. 首页全站友链显示图片

![](https://www.anleenoxu.top/usr/uploads/2020/10/1715169902.jpg)

在aside.php里面大约210行的地方修改代码，在a标签内加上：
![](https://www.anleenoxu.top/usr/uploads/2020/10/1973498310.jpg)

```html
<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=" data-original=\"{image}\" />
```

## 4. JS实现输入框打字彩色气泡（烟花）

<div class="inner-content" >
<p class="inser-title">JS实现输入框打字彩色气泡（烟花）</p>
<div class="inster-summary text-muted">
分享一个打字彩色气泡（烟花）的JS代码，在原有基础上兼容了handsome主题的搜索框：(function web...
</div>
</div>
</a>

</div>

</div>

## 5. RSSHub订阅优质资源

### 5.1 搭建

<div class="inner-content" >
<p class="inser-title">RSS-万物皆可&quot;吃&quot;，零基础用PM2管理器搭建私人RSSHub和跨域服务订阅微博和B站等优质内容</p>
<div class="inster-summary text-muted">
1.标题释疑首先解释一下为什么说是万物皆可"吃"呢？本来想写万物皆可"订"的，"feed"在这里是订阅源的意思，并...
</div>
</div>
</a>

</div>

</div>

### 5.2 标题+内容混合输出模式

由于作者没有实现标题加内容的显示，description模式和mix模式都是一样的只输出摘要。
![](https://www.anleenoxu.top/usr/uploads/2020/10/3815444281.jpg)
![](https://www.anleenoxu.top/usr/uploads/2020/10/4233364188.jpg)

在cross.php文件里面把对应位置替换为`itemContent = '<p style="color:#f05050;">'+item.title+'</p>'+item.description.replace("http:","https:");`就行了。之所以加上replace，是因为有的网站的rss资源图片是http链接，显示会报错，前提是该图片http和https都有，不然该图片资源404。

## 6. 小清新音乐播放器

<div class="inner-content" >
<p class="inser-title">Typecho博客自定义高斯模糊背景小清新音乐播放器界面</p>
<div class="inster-summary text-muted">
&lt;?php
/**
* 音乐
*
* @package custom
*/
?&gt;效果：
</div>
</div>
</a>

</div>

</div>

## 7. 引用文章的图片缩放居中显示

handsome的引用文章的图片总是显示的左侧内容，很不好看。在自定义css里面加入如下代码，就会居中裁剪，好看多了。

```
.post-inser .inner-image{
    background-position-x:center;
    background-position-y:center;
    background-repeat:no-repeat;
}
```

Last modification：October 29th, 2020 at 08:04 pm

喜欢就加个鸡腿吧！