# 使用雨云服务器安装Handsome主题，美化记录

**URL:** <https://forum.rainyun.com/t/topic/5529>\
**Category:** 云服务器 RCS\
**Created:** [2023 年10 月 3 日 16:29 UTC](https://forum.rainyun.com/t/topic/5529 "2023-10-03T16:29:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![夜盏](https://forum.rainyun.com/user_avatar/forum.rainyun.com/%E5%A4%9C%E7%9B%8F/32/8329_2.png) [@夜盏](https://forum.rainyun.com/u/%E5%A4%9C%E7%9B%8F)\
发布日期： [2023 年10 月 3 日 16:29 UTC](https://forum.rainyun.com/t/topic/5529/1 "2023-10-03T16:29:54Z")

</div>

* * *

## 前言

接上一篇，我们已成功安装typecho程序来「强力驱动」我们网站  
这一期我们来美化自己的网站  
演示站点：[https://yzyee.cn/](https://yzyee.cn/)

* * *

## 选择主题

这里我们选择`handsome主题`  
1.精心搭配和设计的纯白色调，适应各个设备和分辨率。十四种色调、多种布局可以随心切换。 ——— [引自ihewro.com](https://www.ihewro.com/archives/489/)  
2. handsome 时光机支持网页端、手机端、微信公众号、浏览器、chrome、Firefox、edge浏览器扩展，让你随时随时记录。 ——— [引自ihewro.com](https://www.ihewro.com/archives/489/)  
3. handsome主题首次将vditor 现代化markdown编辑器移植入typecho博客，完美支持附件上传和主题的相应功能，让图片上传、文字写作变得更加舒畅。 ——— [引自ihewro.com](https://www.ihewro.com/archives/489/)  
4. 喜欢变化，不拘泥于已有的设置，handsome后台设置让一切变得更简单。  
5. 使用人数众多，美化教程多样，使用教程丰富  
Handsome为付费主题，[官方及购买地址（唯一！！）](https://www.ihewro.com/archives/489/)

* * *

## 安装主题

下载主题文件，一般为压缩包，解压得到主题文件夹；  
将主题目录上传至 Typecho 网站目录的 usr/themes 文件夹里；  
进入网站后台：控制台 → 外观，启用该主题即可。

* * *

## 提醒

> [@雨云云服务器搭建Cloudreve网盘系统，并对接雨云ROS对象存储，部署公私网盘（图床）保姆级教程](https://forum.rainyun.com/t/topic/5494):
>
> 原文[雨云云服务器搭建Cloudreve网盘系统，并对接雨云ROS对象存储，部署公私网盘（图床）保姆级教程 - 夜盏小窝](https://yzyee.cn/index.php/course/2.html) 进入服务器 首先我们要购买雨云的云服务器并进入宝塔面板 详细教程见安装typecho教程「第一步」至「第十六步」 [购买雨云云服务器并进入宝塔面板教程](https://yzyee.cn/index.php/course/1.html) 搭建cloudreve 添加站点 下载cloudreve[下载链接](https://github.com/cloudreve/Cloudreve/releases) 根…

可参考这期文章来为文章做图床

* * *

## 美化记录

**1. 博客底部右侧信息**  
**展示网站云计算提供商，备案号，版权等信息**  
将一下代码放置在 `设置外观=>开发者设置=>博客底部右侧信息`内

```
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-tengxunyun"></i>本站由</span>
     <a href="https://rainyun.com" target="_blank">
         <span class="badge-value bg-blue">雨云提供服务</span>
      </a>
</div> 
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-beian"></i>Copyright</span>
    <a href="#" target="_blank">
        <span class="badge-value bg-orange"> © 2023 夜盏小窝</div>
</div>

```

将一下代码放置在 `设置外观=>开发者设置=>自定义CSS`内

```
/*底部页脚css*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    /*background-color: #abbac3;*/
    background-color:#4d4d4d;
    margin-bottom: 5px;
    text-shadow:0px 0.86px 0.2px #3333336b;
} 
.github-badge .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
    background-color: #00a1fd;
}
.github-badge .bg-orange {
    background-color: #ffa500;
}
.github-badge .bg-green {
    background-color: #3bca6e;
}
.github-badge .bg-purple{
    background-color:#ab34e9;
}
.github-badge .bg-red{
    background-color:#ff1010;
}
.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

```

**2.赞赏按钮跳动**

将一下代码放置在 `设置外观=>开发者设置=>自定义CSS`内

```
/*赞赏按钮跳动*/
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate; 
} 
@keyframes star { 
  from { transform: scale(1); } 
  to { transform: scale(1.1); } 
}

```

**3.左侧彩色图标&右侧彩色标签云**  
将一下代码放置在 `设置外观=>PJAX=>PJAX回调函数`内  
此美化教程来自[猫不吃鱼-Handsome主题美化记录](https://starsei.com/archives/1/)，如有侵权请留言删除！

```
 //左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
    tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);    
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});

```

**4.禁用F12**  
将一下代码放置在 `设置外观=>开发者设置=>JavaScript`内

```
document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        layer.msg("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }
}

```

**5.看板娘插件**  
此为猫不吃鱼大佬魔改而成，请大家移步佬的文章进行下载[文章/下载地址](https://starsei.com/archives/1/)