对于handsome到目前为止所做的优化

## 对于handsome到目前为止所做的优化

> 说明:  使用这个主题有几个月了，之前使用的一直都是别人的博客，虽然早就买了域名和服务器但是一直没玩。想搭博客的时候朋友介绍了 **typecho** ，然后就在朋友的帮助下买了主题~搭了博客。下面是在各个大佬的博客上学到的一些改动的方法。

---

## 1. 2233娘插件

唔， 第一个感觉好玩的就是 2233 了，当时在 SimpleZero 的博客上看见了觉得超好玩，于是就下载过来了。

[2233娘插件传送门](https://github.com/NicoNicooooo/Z2233)

附上大佬传送门 。[SimpleZero](https://lolicm.com/archives/357/)

---

## 2. 悬挂猫咪置顶插件

右边的那个猫咪置顶插件也是在 SimpleZero  大佬的博客上发现的，点击一下就可以返回最顶端啦~

[悬挂猫咪插件传送门](https://github.com/NicoNicooooo/GoTop)

附上大佬传送门 。[SimpleZero](https://lolicm.com/archives/357/)

---

## 3. 下雪特效插件

这个插件是在 Rat`s Blog  的博客上找到的,安装插件后可以实现有飘落雪花的效果，觉得挺好看就下载过来了~具体的操作在插件安装后可以看到~

[下雪特效插件传送门](https://github.com/journey-ad/Snow-Typecho-Plugin/)

[附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/468/)

---

## 4. 点击头像后放大并旋转

这个是在 Rat`s Blog  大佬的博客上找到的，具体代码如下，将代码加到后台的自定义  CSS  中即可。

```css
#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}
.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}
.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}
#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}
#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

```

[附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/)

---

## 5. 首页文章版式圆角化

这个也是在 Rat`s Blog  大佬的博客上找到的，这个修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS 即可启用~

```css
#圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 16px;
}
.panel-small{
    border: none;
    border-radius: 16px;
}
.item-thumb{
    border-radius: 16px;  
}

```

[附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/)

---

## 6. 首页文章图片获取焦点放大

这个也是在 Rat`s Blog 大佬的博客上找到的，这一个修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义CSS 即可启用

```css

#放大的时间和大小自行修改以下数值
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}
```

[附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/)

---

## 7. 文章标题居中

这一个修改的是文章标题，使其居中。将以下代码添加至后台主题设置 自定义CSS 即可启用 ， 仍然是在 Rat`s Blog 博客上找到的 ~

```css
/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

```

[附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/)

---

## 8. 首页文章版式阴影化

这一个修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS 即可启用 ， 也是在 Rat`s Blog 大佬的博客上找到的~

```css
#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

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

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 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(255, 112, 173, 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);
}
```

[附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/)

---

## 9. 自定义滚动条滑块

这个修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置 自定义CSS 就可以使用了，也是在 Rat`s Blog 大佬的博客上找到的~
参数可以自行修改，比如滑块、滑轨颜色大小宽度什么的~ 附上代码

```css

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
```

[附上 Rat`s Bolg 大佬传送门 ](https://www.moerats.com/archives/628/)

---

## 10. 鼠标点击特效

鼠标点击的特效有很多，我用的是点击出现爱心~
下面附上4种点击特效，将喜欢的特效代码复制到后台的自定义 JavaScript 即可启用，还有一种方式是 将以下代码放在主题的**handsome/component/footer.php**中的**</body>**之前即可 同是从 Rat`s Blog 大佬的博客上看到的~

##### 1. 鼠标点击出现文字

```css
#字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>
```

##### 2. 点击出现跳动的心

```css

$("html,body").click(function(e) {
    var gcd = new Array("♥", "♥", "♥");
    var n = Math.floor(Math.random() * gcd.length);
    var $i = $("<b/>").text(gcd[n]);
    var x = e.pageX,
        y = e.pageY;
    $i.css({
        "z-index": 99999,
        "top": y - 20,
        "left": x - 8,
        "position": "absolute",
        "color": "#FF706C",
        "animation": 'heartbeat .25s infinite .15s'
    });
    $("body").append($i);
    $i.animate({
        "opacity": 0
    }, 1500, function() {
        $i.remove()
    });
    e.stopPropagation()
});
```

##### 3. 点击出现向上飘动的心

```css

```

##### 4. 给博客网站添加鼠标点击水波动画效果

下载特效JS文件：[ripple.js](https://www.moerats.com/usr/down/ripple.js)，将其放在网站目录某个地方，然后编辑主题文件footer.php：

```css
#在</body>后面添加如下一句代码
<script type="text/javascript" src="(这个脚本的路径)"></script>
```

ps: typecho博客可以使用，其它博客暂未测试，感谢 Rat`s Blog大佬~

附上大佬传送门 [Rat`s Blog](https://www.moerats.com/archives/384/)

---

## 11. 修改首页标题栏及自定义文字

此处位于首页站点公告下方，文章上方，修改方法如下：

1. 后台“设置外观” → “主题增强功能” → “增强功能开关” → 勾选“首页的标题栏下启用一言接口”。
2. 接着去除此处的标题显示，修改方法为将下框中的代码在主题的**handsome/index.php**中删除。
3. 代码如下

<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

附上大佬传送门  [许建华](https://www.xujianhua.com/1.html)

---

## 12. 评论框特效

下载特效 JS 文件：[commentTyping.js](https://www.moerats.com/usr/down/commentTyping.js)，将其放在网站目录某个地方，然后编辑主题文件 **handsome/component/footer.php **  ，在<**/body>**后面添加以下代码就可以啦~

---

## 13. Typecho博客首页显示文章摘要的方法

ps：Typecho 博客默认没有自动摘要的功能，博客首页和分类归档页面显示的文章都是全文输出的，对于内容文字很多的文章，会把页面拉伸得很长，显示得也不怎么美观。但博主可以在发表文章的时候手动摘要。

方法:
在发表文章的时候，在文章内容中添加**<!–more–>**标签即可。

比如内容一共有五段，要显示前三段，就在第三段结束处添加**<!–more–>**标签代码

同样来自 Rat`s Blog 大佬的博客~ ，附上大佬传送门

[ Rat`s Blog ](https://www.moerats.com/archives/91/)

---

## 14. Typecho中去除URL中的index.php

在默认情况下，Typecho能够正常工作后，所有文章的URL都会是类似

https://www.murongmengjie.cn/index.php/archives/37.xxx
这里的 **index.php**对于强迫症患者影响还是挺大的，其实这里只需要进入Typecho后台控制面板
点击 设置->永久链接
将 是否使用地址重写功能 改为 启用 ，这里可能系统提示不支持地址重写，选择强制开启之类的就行了。
再在 自定义文章路径 中选择自己喜欢的URL格式，保存设置后马上就生效了。

ps:  如果修改之后发现点击文章出现 404  ，那就是 nginx 或者 Apache 的伪静态的原因了，因为个人用的是 nginx ，所以下面附上修改 nginx 配置文件的代码：

首先打开服务器上的 **/usr/local/nginx/conf/vhost** 路径下的  www.yourdomain.com.conf  文件 ，在其中添加如下代码

```css

if (!-e $request_filename) {
            rewrite ^(.*)$ /index.php$1 last;
        }

location ~ .*\.php(\/.*)*$ {
            include fastcgi.conf;
            fastcgi_pass  127.0.0.1:9000;
        }

```
改完后重启下 nginx 服务器 ， 就可以开启伪静态啦~
之后再按照前面说的重新设置地址重写功能，然后再刷新下页面就可以看到效果了。

---

## 彩色标签云

彩色标签云是在曦语大佬的博客中学到的。
对于typecho下的彩色标签云实现方式，handsome主题适用 改动不大 修改的有3个文件：
1. component/sidebar.php
2. 新增CSS文件
3. component/header.php

##### 1.  用以下这段代码替换原有的 sidebar.php 文件下的标签云

```php

<?php if (!($this->is('post'))) : ?>
      <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">   
            <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>          
            <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
            <?php if($tags->have()): ?>
                <?php while ($tags->next()): ?>
                <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,
                    <?php echo(rand(0,255)); ?>)">
                    <a  href="<?php $tags->permalink();?>">
                    <?php $tags->name(); ?></a>
                </span>
               <?php endwhile; ?>
        <?php endif; ?>
      </section>
    <?php else: ?>
</section>

```
这里简单解释一下：
实现方式主要是加一个span标签,让它的背景颜色采用RGB方式随机，从而达到不同颜色的标签效果

此处放一张实现的效果图

![彩色标签云.png][1]

##### 2. 增加CSS文件

新增一个CSS文件 起什么名字都可以，我起的名字是 tag-clould-color.css  ，刚好和文价内容相同
文件放置位置在 **/assets/css**   目录下
用 **CDN ** 的小伙伴也可以同步上传
然后添加如下内容
以后如果是对主题做什么样式上的修改也可以直接写在此文件中

```css
#tag-clould-color {
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}
```
##### 3. 在头文件中引用该CSS文件

在header.php中增加这行代码（表示在页面引用你新添加的CSS式文件）
filename.css为你自己的文件名
注意要加载在主题样式文件后（因为在html页面中是按顺序加载的，避免你以后写的样式不生效）

```php
  <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css">
```
下面是具体位置：

```php
  
    <?php if (!empty($this->options->featuresetup) && in_array('laodthefont', $this->options->featuresetup)): ?>
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/font.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <?php endif; ?>

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css">
   
   
    <style type="text/css">
        <?php echo Content::exportCss($this) ?>
    </style>

```
然后就可以看到效果了
个别用户可能需要清除一下浏览器缓存才有效果~~

附上曦语大佬传送门  [彩色标签云](https://ixiyu.me/archives/typecho-colorful-tag.html)

---

ps:  暂时就想到这些了，日后有新的会在添加上去~~

[1]: https://www.murongmengjie.cn/assets/usr/uploads/2018/06/3257794214.png

对于handsome到目前为止所做的优化

说明: 使用这个主题有几个月了，之前使用的一直都是别人的博客，虽然早就买了域名和服务器但是一直没玩。想搭博客的时候朋友介绍了 typecho ，然后就在朋友的帮助下买了主题~搭了博客。下面是在各个大佬的博客上学到的一些改动的方法。

1. 2233娘插件

唔，第一个感觉好玩的就是 2233 了，当时在 SimpleZero 的博客上看见了觉得超好玩，于是就下载过来了。

2233娘插件传送门

附上大佬传送门。SimpleZero

2. 悬挂猫咪置顶插件

右边的那个猫咪置顶插件也是在 SimpleZero 大佬的博客上发现的，点击一下就可以返回最顶端啦~

悬挂猫咪插件传送门

附上大佬传送门。SimpleZero

3. 下雪特效插件

这个插件是在 Rat`s Blog 的博客上找到的,安装插件后可以实现有飘落雪花的效果，觉得挺好看就下载过来了~具体的操作在插件安装后可以看到~

下雪特效插件传送门

附上 Rat`s Bolg 大佬传送门

4. 点击头像后放大并旋转

这个是在 Rat`s Blog 大佬的博客上找到的，具体代码如下，将代码加到后台的自定义 CSS 中即可。

#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}
.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}
.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}
#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}
#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

附上 Rat`s Bolg 大佬传送门

5. 首页文章版式圆角化

这个也是在 Rat`s Blog 大佬的博客上找到的，这个修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置自定义CSS 即可启用~

#圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 16px;
}
.panel-small{
    border: none;
    border-radius: 16px;
}
.item-thumb{
    border-radius: 16px;  
}

附上 Rat`s Bolg 大佬传送门

6. 首页文章图片获取焦点放大


#放大的时间和大小自行修改以下数值
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

附上 Rat`s Bolg 大佬传送门

7. 文章标题居中

这一个修改的是文章标题，使其居中。将以下代码添加至后台主题设置自定义CSS 即可启用，仍然是在 Rat`s Blog 博客上找到的 ~

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

附上 Rat`s Bolg 大佬传送门

8. 首页文章版式阴影化

这一个修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置自定义CSS 即可启用，也是在 Rat`s Blog 大佬的博客上找到的~

#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

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

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 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(255, 112, 173, 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);
}

附上 Rat`s Bolg 大佬传送门

9. 自定义滚动条滑块

这个修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置自定义CSS 就可以使用了，也是在 Rat`s Blog 大佬的博客上找到的~
参数可以自行修改，比如滑块、滑轨颜色大小宽度什么的~ 附上代码


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;

附上 Rat`s Bolg 大佬传送门

10. 鼠标点击特效

鼠标点击的特效有很多，我用的是点击出现爱心~
下面附上4种点击特效，将喜欢的特效代码复制到后台的自定义 JavaScript 即可启用，还有一种方式是将以下代码放在主题的handsome/component/footer.php中的之前即可同是从 Rat`s Blog 大佬的博客上看到的~

1. 鼠标点击出现文字

#字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

2. 点击出现跳动的心


$("html,body").click(function(e) {
    var gcd = new Array("♥", "♥", "♥");
    var n = Math.floor(Math.random() * gcd.length);
    var $i = $("<b/>").text(gcd[n]);
    var x = e.pageX,
        y = e.pageY;
    $i.css({
        "z-index": 99999,
        "top": y - 20,
        "left": x - 8,
        "position": "absolute",
        "color": "#FF706C",
        "animation": 'heartbeat .25s infinite .15s'
    });
    $("body").append($i);
    $i.animate({
        "opacity": 0
    }, 1500, function() {
        $i.remove()
    });
    e.stopPropagation()
});

3. 点击出现向上飘动的心


(function(window,document,undefined){
    var hearts = [];
    window.requestAnimationFrame = (function(){
            return window.requestAnimationFrame ||
                       window.webkitRequestAnimationFrame ||
                       window.mozRequestAnimationFrame ||
                       window.oRequestAnimationFrame ||
                       window.msRequestAnimationFrame ||
                       function (callback){
                               setTimeout(callback,1000/60);
                       }
    })();
    init();
    function init(){
            css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
    }
    function gameloop(){
            for(var i=0;i<hearts.length;i++){
                if(hearts[i].alpha <=0){
                        document.body.removeChild(hearts[i].el);
                        hearts.splice(i,1);
                        continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
        }
        requestAnimationFrame(gameloop);
    }
    function attachEvent(){
            var old = typeof window.onclick==="function" && window.onclick;
            window.onclick = function(event){
                    old && old();
                    createHeart(event);
            }
    }
    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
                el : d,
                x : event.clientX - 5,
                y : event.clientY - 5,
                scale : 1,
                alpha : 1,
                color : randomColor()
        });
        document.body.appendChild(d);
}
function css(css){
        var style = document.createElement("style");
            style.type="text/css";
            try{
                style.appendChild(document.createTextNode(css));
            }catch(ex){
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
}
    function randomColor(){
            return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }})(window,document);

4. 给博客网站添加鼠标点击水波动画效果

下载特效JS文件：ripple.js，将其放在网站目录某个地方，然后编辑主题文件footer.php：

#在</body>后面添加如下一句代码
<script type="text/javascript" src="(这个脚本的路径)"></script>

ps: typecho博客可以使用，其它博客暂未测试，感谢 Rat`s Blog大佬~

附上大佬传送门 Rat`s Blog

11. 修改首页标题栏及自定义文字

此处位于首页站点公告下方，文章上方，修改方法如下：

后台“设置外观” → “主题增强功能” → “增强功能开关” → 勾选“首页的标题栏下启用一言接口”。
接着去除此处的标题显示，修改方法为将下框中的代码在主题的handsome/index.php中删除。
代码如下
options->title(); ?>

附上大佬传送门许建华

12. 评论框特效

下载特效 JS 文件：commentTyping.js，将其放在网站目录某个地方，然后编辑主题文件 handsome/component/footer.php ，在</body>后面添加以下代码就可以啦~

附上大佬传送门 Rat``s Blog

13. Typecho博客首页显示文章摘要的方法

方法:
在发表文章的时候，在文章内容中添加<!–more–>标签即可。

比如内容一共有五段，要显示前三段，就在第三段结束处添加<!–more–>标签代码

同样来自 Rat`s Blog 大佬的博客~ ，附上大佬传送门

Rat`s Blog

14. Typecho中去除URL中的index.php

在默认情况下，Typecho能够正常工作后，所有文章的URL都会是类似

https://www.murongmengjie.cn/index.php/archives/37.xxx

这里的 index.php对于强迫症患者影响还是挺大的，其实这里只需要进入Typecho后台控制面板
点击设置->永久链接
将是否使用地址重写功能改为启用，这里可能系统提示不支持地址重写，选择强制开启之类的就行了。
再在自定义文章路径中选择自己喜欢的URL格式，保存设置后马上就生效了。

ps: 如果修改之后发现点击文章出现 404 ，那就是 nginx 或者 Apache 的伪静态的原因了，因为个人用的是 nginx ，所以下面附上修改 nginx 配置文件的代码：

首先打开服务器上的 /usr/local/nginx/conf/vhost 路径下的 www.yourdomain.com.conf 文件，在其中添加如下代码


         if (!-e $request_filename) {
            rewrite ^(.*)$ /index.php$1 last;
        }

        location ~ .*\.php(\/.*)*$ {
            include fastcgi.conf;
            fastcgi_pass  127.0.0.1:9000;
        }

改完后重启下 nginx 服务器，就可以开启伪静态啦~
之后再按照前面说的重新设置地址重写功能，然后再刷新下页面就可以看到效果了。

彩色标签云

彩色标签云是在曦语大佬的博客中学到的。
对于typecho下的彩色标签云实现方式，handsome主题适用改动不大修改的有3个文件：

component/sidebar.php
新增CSS文件
component/header.php

1. 用以下这段代码替换原有的 sidebar.php 文件下的标签云


<?php if (!($this->is('post'))) : ?>
      <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">   
            <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>          
            <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
            <?php if($tags->have()): ?>
                <?php while ($tags->next()): ?>
                <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,
                    <?php echo(rand(0,255)); ?>)">
                    <a  href="<?php $tags->permalink();?>">
                    <?php $tags->name(); ?></a>
                </span>
               <?php endwhile; ?>
        <?php endif; ?>
      </section>
    <?php else: ?>
</section>

这里简单解释一下：
实现方式主要是加一个span标签,让它的背景颜色采用RGB方式随机，从而达到不同颜色的标签效果

此处放一张实现的效果图

2. 增加CSS文件

新增一个CSS文件起什么名字都可以，我起的名字是 tag-clould-color.css ，刚好和文价内容相同
文件放置位置在 /assets/css 目录下
用 CDN 的小伙伴也可以同步上传
然后添加如下内容
以后如果是对主题做什么样式上的修改也可以直接写在此文件中

#tag-clould-color {
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}

3. 在头文件中引用该CSS文件

  <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css">

下面是具体位置：

  <!--引入英文字体文件-->
    <?php if (!empty($this->options->featuresetup) && in_array('laodthefont', $this->options->featuresetup)): ?>
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/font.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <?php endif; ?>

    <!-- 修改部分主体样式，添加css文件，主要是彩色标签云 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css">
   
   
    <style type="text/css">
        <?php echo Content::exportCss($this) ?>
    </style>

然后就可以看到效果了
个别用户可能需要清除一下浏览器缓存才有效果~~

附上曦语大佬传送门彩色标签云

ps: 暂时就想到这些了，日后有新的会在添加上去~~

最后修改：2020 年 08 月 28 日

哇卡哇卡

对于handsome到目前为止所做的优化

对于handsome到目前为止所做的优化

1. 2233娘插件

2. 悬挂猫咪置顶插件

3. 下雪特效插件

4. 点击头像后放大并旋转

5. 首页文章版式圆角化

6. 首页文章图片获取焦点放大

7. 文章标题居中

8. 首页文章版式阴影化

9. 自定义滚动条滑块

10. 鼠标点击特效

1. 鼠标点击出现文字

2. 点击出现跳动的心

3. 点击出现向上飘动的心

4. 给博客网站添加鼠标点击水波动画效果

11. 修改首页标题栏及自定义文字

options->title(); ?>

12. 评论框特效

13. Typecho博客首页显示文章摘要的方法

14. Typecho中去除URL中的index.php

彩色标签云

1. 用以下这段代码替换原有的 sidebar.php 文件下的标签云

2. 增加CSS文件

3. 在头文件中引用该CSS文件

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

对于handsome到目前为止所做的优化

美好的文字

古风、动漫

Java获取当前时间，并转化为String类型

关于这次去西安游玩

2019过年的故事以及年初的计划

关于樱花的味道

十月的生活

JAVA 第五章

nginx 强制使用 https 访问 (http跳转到https)

对于handsome到目前为止所做的优化

对于handsome到目前为止所做的优化

1. 2233娘插件

2. 悬挂猫咪置顶插件

3. 下雪特效插件

4. 点击头像后放大并旋转

5. 首页文章版式圆角化

6. 首页文章图片获取焦点放大

7. 文章标题居中

8. 首页文章版式阴影化

9. 自定义滚动条滑块

10. 鼠标点击特效

1. 鼠标点击出现文字

2. 点击出现跳动的心

3. 点击出现向上飘动的心

4. 给博客网站添加鼠标点击水波动画效果

11. 修改首页标题栏及自定义文字

options->title(); ?>

12. 评论框特效

13. Typecho博客首页显示文章摘要的方法

14. Typecho中去除URL中的index.php

彩色标签云

1. 用以下这段代码替换原有的 sidebar.php 文件下的标签云

2. 增加CSS文件

3. 在头文件中引用该CSS文件

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

对于handsome到目前为止所做的优化

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款