Handsome8.3主题美化记录

博主：鲨鱼辣椒
发布时间：2022 年 02 月 26 日
12709 次浏览
15 条评论
3185字数
分类：建站

尝试了很多教程，有些美化操作因为主题版本不适配而失效，

所以这里只记录适用于`handsome8.3`版本的美化操作

有本文未提到的且适用于8.3版本的美化教程欢迎在评论区中留言。

本文会持续更新。

</div>

此栏美化教程需要在`主题设置/开发者设置`中自行添加`js`或者`css`代码，以及对主题源代码进行改动，若日后更新主题，可能需要重复美化过程，比较麻烦。个人更推荐使用插件。

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-147ddd77ae1676b6e1708521d33c18a587" aria-expanded="true"><div class="accordion-toggle"><span style="">一、 添加额外表情包</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-147ddd77ae1676b6e1708521d33c18a587" class="collapse collapse-content"><p></p>

1. 用压缩包内的`0w0.js`文件替换`usr/themes/handsome/usr`下的`同名文件`
2. 将压缩包中另外两个文件夹：`weibo`和`paopao`放入`/usr/themes/handsome/assets/img/emotion`目录下
3. 若感觉表情包尺寸太大或太小，可将下面的代码填入`开发者设置/自定义css`中自行调节大小，个人推荐25px左右
   
   ```
   .emotion-weibo { width: 100px; } .emotion-tieba { width: 100px; } .comment-content-true img.emotion-weibo { max-width: 100%!important; } .comment-content-true img.emotion-tieba { max-width: 100%!important; }
   ```

提取码：<div class="hideContent">阅读此处内容请在下方评论回复OωO</div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1e5c0b56678d6f7971d30cf90b97667750" aria-expanded="true"><div class="accordion-toggle"><span style="">二、 给左上角头像添加特效</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1e5c0b56678d6f7971d30cf90b97667750" class="collapse collapse-content"><p></p>在`开发者设置/css`中添加以下代码即可
旋转特效，可通过`totate`字段调节旋转角度

```mermaid
img-full {width: 100px;border-radius: 50%;animation: light 4s ease-in-out infinite;transition: 0.5s;}.img-full:hover {transform: scale(1.15) rotate(720deg);}
```

礼花特效

```mermaid
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}

50% {
box-shadow: 0 0 4px #00f;
}

75% {
box-shadow: 0 0 16px #0f0;
}

100% {
box-shadow: 0 0 4px #f00;
}
}
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1013c3639d31bf5266539ac03a0ab9168" aria-expanded="true"><div class="accordion-toggle"><span style="">三、 去除首页顶部博客名称</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1013c3639d31bf5266539ac03a0ab9168" class="collapse collapse-content"><p></p>

进入`/usr/themes/handsome/index.php`文件，删除以下代码

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-88f3444542b130e72d18eb9e86acb97a41" aria-expanded="true"><div class="accordion-toggle"><span style="">四、 彩色标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-88f3444542b130e72d18eb9e86acb97a41" class="collapse collapse-content"><p></p>在`开发者设置/java script`中添加以下代码

```

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8ac125f7b703f52f4afe6325a481923977" aria-expanded="true"><div class="accordion-toggle"><span style="">五、 底部栏框高度调节</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8ac125f7b703f52f4afe6325a481923977" class="collapse collapse-content"><p></p>进入`开发者设置/css`，添加以下代码

```

.wrapper {
    padding: 10px
}

```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0ee9bc210f3e1069283d606e579d0fe487" aria-expanded="true"><div class="accordion-toggle"><span style="">六、 文章底部添加版权信息</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0ee9bc210f3e1069283d606e579d0fe487" class="collapse collapse-content"><p></p>此操作达到的美化效果和`CopyRight`插件功能类似，但插件可以控制特定页面是否显示版权信息。个人觉得插件显示的版权信息的行间距太大。

首先在`usr/themes/handsome/post.php`添加以下代码

```

<ul class="post-copyright">
    <li class="post-copyright-author"><strong>本文作者：</strong><?php $this->author(); ?></li>
    <li class="post-copyright-link"><strong>本文链接：</strong><a href="<?php $this->permalink() ?>" title="<?php $this->title() ?>"><?php $this->permalink() ?></a></li>
    <li class="post-copyright-license"><strong>版权声明：</strong>本博客所有文章除特别声明外，均默认采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><strong> CC BY-NC-SA 4.0 </strong></a> 许可协议。</li>
</ul>
```

然后在`开发者设置/css`中添加以下代码

```
.post-copyright {
    font-size: 13px;
    margin: 8px 0;
    padding: 10px;
    border-left: 4px solid #7fff00;
    background-color: rgba(220, 220, 220, 0.1);
    list-style: none;
    word-break: break-all;
    position: relative;
    overflow: hidden;
}
.post-copyright li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.post-copyright a {
    color: rgba(0, 120, 231, 1);
    text-decoration: none;
    transition: color .1s;
}
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7b6cdbd7d0bcfb7f7c12ff749dbed77d67" aria-expanded="true"><div class="accordion-toggle"><span style="">七、 给文章卡片周围添加灰色阴影</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7b6cdbd7d0bcfb7f7c12ff749dbed77d67" class="collapse collapse-content"><p></p>在`开发者设置/css`中添加以下代码

```
.panel{
   box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
    -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
    -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
    -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
    -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2);
}

#如果也想使盒子四周也有阴影，加上以下代码
.app.container {
    box-shadow: 0 0 30px rgba(169,169,169,2);
}
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-351fcb0d7db868b0b78c4bcb5d5e160e78" aria-expanded="true"><div class="accordion-toggle"><span style="">持续更新中....</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-351fcb0d7db868b0b78c4bcb5d5e160e78" class="collapse collapse-content"><p></p>暂无
<p></p></div></div></div>

</div><div role="tabpanel" id='tabs-5be0410c7ce2445cc6a7fc571d678df6871' class="tab-pane fade  ">

此栏目所介绍的插件都可以通过[typecho官网](https://www.typecho.wiki/plugins/)下载，这里只介绍我本人使用过且觉得不错的插件。

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-07343ce33813ab972a349c29ef05007261" aria-expanded="true"><div class="accordion-toggle"><span style="">一、 添加评论回复提醒</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-07343ce33813ab972a349c29ef05007261" class="collapse collapse-content"><p></p>添加评论提醒有很多插件，这里只介绍4种：CommentToMail、CommentToWechat、WeChatNotice、LoveKKComment。

CommentToMail比较老了，我当时安装的时候测试显示没问题，但是在实际环境中始终收不到提醒，捣鼓了很久也没弄好；
</div>

CommentToWechat、WeChatNotice这两个插件可以让博主在微信上收到读者的评论提醒，但是博主如果回复了评论，读者是收不到提醒的；
</div>

LoveKKComment是目前功能比较玩完善的评论提醒插件了，支持阿里云的邮件服务，读者和博主双方都能收到彼此的评论提醒，响应速度也比较快。

具体的使用方法下面这个链接里的教程非常详细，不再重复赘述，这里只说我自己踩到的坑：

**进行`验证回复地址`这个步骤时，尽量不要在移动端进行验证，否则可能导致验证无法通过。**

</div>

<button class=" btn m-b-xs btn-success btn-addon" onclick='window.open("https://www.wuqintai.com/archives/2157.html","_blank")'><i class="glyphicon glyphicon-link"></i>插件使用教程</button>
<p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0e940a1076de6b2e1ee1ac2edcc444e571" aria-expanded="true"><div class="accordion-toggle"><span style="">持续更新中....</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0e940a1076de6b2e1ee1ac2edcc444e571" class="collapse collapse-content"><p></p>暂无
<p></p></div></div></div>

</div>
</div>
</div>

最后修改：2024 年 01 月 06 日

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

15 条评论

pxjvzkosvv
September 23rd, 2024 at 09:40 am

看的我热血沸腾啊
鲨鱼辣椒
October 22nd, 2022 at 08:53 pm

::paopao:tieba_emotion_03::
鲨鱼辣椒
February 27th, 2022 at 07:38 pm

::paopao:tieba_emotion_22::
挺胸的匿名人士
February 27th, 2022 at 07:30 pm

::paopao:tieba_emotion_22::
挺胸的匿名人士
February 27th, 2022 at 07:28 pm

::paopao:tieba_emotion_16::
挺胸的匿名人士
February 27th, 2022 at 07:25 pm

::paopao:tieba_emotion_05::
1. 鲨鱼辣椒
  February 27th, 2022 at 07:26 pm
  
  @挺胸的匿名人士
  
  ::paopao:tieba_emotion_20::
挺胸的匿名人士
February 27th, 2022 at 07:23 pm

::paopao:tieba_emotion_08::
1. 鲨鱼辣椒
  February 27th, 2022 at 07:34 pm
  
  @挺胸的匿名人士
  
  ::paopao:tieba_emotion_90::
鲨鱼辣椒
February 27th, 2022 at 07:21 pm

::paopao:tieba_emotion_73::
？？？
February 27th, 2022 at 07:20 pm

::paopao:tieba_emotion_20::
鲨鱼辣椒
February 27th, 2022 at 07:19 pm

::paopao:tieba_emotion_20::
刚下飞机的女士
February 26th, 2022 at 07:18 pm

不错 ::paopao:tieba_emotion_25::
1. fengjian
  February 26th, 2022 at 07:19 pm
  
  @刚下飞机的女士
  
  ::paopao:tieba_emotion_93::
  1. 鲨鱼辣椒
    February 26th, 2022 at 07:23 pm
    
    @fengjian
    
    ::paopao:tieba_emotion_73::

此处评论已关闭

Handsome8.3主题美化记录

鲨鱼辣椒 • 2022 年 02 月 26 日