Handsome8.3主题美化记录

博主：鲨鱼辣椒
发布时间：2022 年 02 月 26 日
17440 次浏览
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-5f957e282cc1179f7438f7a10a5a682a93" 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-5f957e282cc1179f7438f7a10a5a682a93" 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">此处内容需要评论回复后（审核通过）方可阅读。</div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-eec087e6c53c7bd6cb6510eda52e07f453" 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-eec087e6c53c7bd6cb6510eda52e07f453" 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-a07e5e08a52dda2e210152a3161ff6b183" 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-a07e5e08a52dda2e210152a3161ff6b183" 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-b89ec37f6fa5acee41568ca9599ed0ec23" 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-b89ec37f6fa5acee41568ca9599ed0ec23" 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-7ad2974228b475245e70efcbf93a0b0913" 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-7ad2974228b475245e70efcbf93a0b0913" 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-9c30d2e4ddd792dabcadb8f1ba8ea3e540" 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-9c30d2e4ddd792dabcadb8f1ba8ea3e540" 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-e7100faf35e3e30e98d90e496ee8a2dc57" 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-e7100faf35e3e30e98d90e496ee8a2dc57" 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-44e6b48743ea32cd4b403ca28fca59a03" 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-44e6b48743ea32cd4b403ca28fca59a03" class="collapse collapse-content"><p></p>暂无
<p></p></div></div></div>

</div><div role="tabpanel" id='tabs-efa4d1b75495024e4e1d454cd282fdf5851' 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-7c8edbbb84d64f7c4e8a29a106988c7d38" 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-7c8edbbb84d64f7c4e8a29a106988c7d38" 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-78af2328d81721facc268deabb35684a11" 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-78af2328d81721facc268deabb35684a11" 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主题美化记录
评论数： 15
Joern安装
评论数： 10
事记
评论数： 2
工具聚合
评论数： 2
从零实现KV存储-1
评论数： 1

vzpdkfmzbb
想想你的文章写的特别好
rxicpqqkjk
看的我热血沸腾啊
vxfmncrtjf
不错不错，我喜欢看
pxjvzkosvv
看的我热血沸腾啊
kjcpuijbke
博主真是太厉害了！！！

工具聚合
评论数： 2
事记
评论数： 2
BitCask论文翻译/笔记
评论数： 0
六六
评论数： 1
Joern安装
评论数： 10

Handsome8.3主题美化记录

鲨鱼辣椒 • 2022 年 02 月 26 日