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

Author： Anleeno
发布时间：September 11, 2020
836views
4 comments
2953 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-万物皆可订，零基础用PM2管理器搭建私人RSSHub和跨域服务订阅微博和B站等优质内容</p>
<div class="inster-summary text-muted">
1.RSSRSS 的全称是 Really Simple Syndication（简易信息聚合），它是一种消息来源的...
</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。

如果点击rss里面内容导航出现网站绿锁不见了把下面的一行代码改为：

```
replace("{CONTENT}",itemContent.replace("http:","https:")).
```

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

## 8. 特定月份（11-1月）雪花特效

11月1日看到博客多了一个特效才知道自己之前装了这个插件，全年又比较别扭，又懒得管它开关了，所以改了显示时间，不到11月还不知道呢o(*////▽////*)q 。
<button class="btn m-b-xs btn-success  " onclick='window.open("https://plugins.typecho.me/plugins/snow-xmas.html","_blank")'>Snow插件</button>
把源码里面的config方法加入如下代码，得到配置面板：

```php
$showmonth = new Typecho_Widget_Helper_Form_Element_Radio('showmonth', array('1'=> '全年','0'=> '冬天（11月到次年1月）'), 1, _t('选择雪花特效作用时间'), _t('显示下雪月份，默认全年'));
$form->addInput($showmonth);
```

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

footer方法加上如下代码，获取配置值：

```
$showmonth = $options->showmonth;
```

script里面用对应月份区别开来就行：

```
if({$showmonth}){
    //"1"对应全年
}else{
    var date=new Date();
    if(date.getMonth()==10||date.getMonth()==11||date.getMonth()==0){
        //非全年看月份，月份值是从0-11的
    }
}
```

如果觉得手机端雪花过多影响观感可以用下列代码判断是否为手机端，然后减一些雪花数量，在定义雪花数量的变量flakeCount后面加即可。

```
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    flakeCount=flakeCount-70;
}
```

Last modification：January 14th, 2021 at 10:35 am

喜欢就加个鸡腿吧！

4 comments

芭比
2020年12月1日 17:07

那个音乐播放器好喜欢

Reply
1. Anleeno
  2020年12月1日 19:24
  
  @芭比
  
  Reply
张智坤
2020年10月18日 15:41

留个联系方式嘛

Reply
1. Anleeno
  2020年10月18日 15:45
  
  @张智坤
  可以点头像获取呢
  
  Reply