前言
大部分的美化教程来自网络，少量做了修改
~~魔改一时爽，更新火葬场~~
本文仅仅列举了自己需要的部分，剩余可以去Handsome社区寻找
~~https://handsome.ihewro.com/forum/index.html~~
https://auth.ihewro.com/user/index.html
http://book.huat.xyz/handsome/1500818
https://handsome.ihewro.com/#/

插件推荐

AliceStyle美化插件

https://racns.com/374.html
可以实现后台美化、动态背景等功能，推荐
夜间模式插件
https://blog.baoshuo.ren/archives/364.html
宝硕大佬制作
使用简单，可以实现定制和手动功能
ColorfulTags插件
可以实现3D彩虹云和普通彩虹云，上手简单，支持PJAX
如果使用夜间模式推荐下面自定义操作，开启PJAX选项会导致页面闪烁
HoerMouse
炫彩鼠标插件
Access插件
获取访客信息，生成统计图表，由@一名宅部分优化重构。
GorgeousSky
基于神代綺凜魔改样式,动态背景洛小依
动态背景插件
https://keymoe.com/archives/31/
wangEditor
https://github.com/journey-ad/wangEditor-Typecho-Plugin
编辑器插件
UserAgent
评论区显示IP、设备、浏览器等信息的插件
Handsome版本:https://doge.uk/coding/useragent-modify.html
-原版:https://github.com/hakula139/UserAgent-for-Typecho
ShortLinks
跳转链接插件，可以实现对referer等进行控制
https://github.com/benzBrake/ShortLinks
APlayer-Typecho
typecho音乐播放器，可以实现帖内音乐播放
https://github.com/MoePlayer/APlayer-Typecho

自定义部分

1、夜间模式

[collapse status="false" title="1、夜间模式"]

推荐插件:https://blog.baoshuo.ren/archives/364.html
宝硕大佬的夜间插件，使用简单
以下代码仅仅作为备份
darkmode.css
darkmode.js
经过相应的修改和补充，基本把没有黑暗化的地方给补充完善了
使用方法
1、将文件放入相应文件夹内
2、插入usr/themes/handsome/component/headnev.php中

3、打开/usr/themes/handsome/component/footer.php，找到

<!--主题核心js-->
  <script src="<?php echo STATIC_PATH ?>js/function.min.js?v=<?php echo
Handsome::$version.Handsome_Config::$versionTag
  ?>"></script>
  <script src="<?php echo STATIC_PATH ?>js/core.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag
?>"></script>

-在下方加入

<!--darkmode.js-->
  <script src="<?php echo STATIC_PATH ?>js/darkmode.js?v=dedediy"></script>

4、打开/usr/themes/handsome/component/header.php，找到

  <style type="text/css">
      <?php echo Content::exportCss($this) ?>
  </style>

在下面加入

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

5、打开/usr/themes/handsome/component/headnav.php，找到

<?php if (!in_array('hideLogin',$this->options->featuresetup)): ?>

在下方加入

          <!--darkmode start-->
          <li>
              <a class="nav-switch-dark-mode" href="javascript:">
                <span class="icon-light-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 夜晚模式 ">
                    <i data-feather="sun"></i>
                </span>
                <span class="icon-dark-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 日间模式 ">
                    <i data-feather="moon"></i>
                </span>
              </a>
          </li>
          <!--darkmode end-->

6、加入手动切换按钮（非必须）
-将下方代码加入到headnav.php中

          <li>
              <a class="nav-switch-dark-mode" href="javascript:">
                <span class="icon-light-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 夜晚模式 ">
                    <i data-feather="sun"></i>
                </span>
                <span class="icon-dark-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 日间模式 ">
                    <i data-feather="moon"></i>
                </span>
              </a>
          </li>
          <!--darkmode end-->

[/collapse]

2、彩虹标签云

[collapse status="false" title="2、彩虹标签云"]

将下列代码加入自定义JS中

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;
});

加入完毕后再同样加入PJAX-PJAX回调函数中
[/collapse]

3、网页加载耗时

[collapse status="false" title="3、网页加载耗时"]
-~~将以下代码添加至Typecho根目录/usr/themes/handsome/functions.php末尾~~
-新版作者已经加密，请将下列代码放入/usr/themes/handsome/libs/content.php末尾

function timer_start() {
  global $timestart;
  $mtime     = explode( ' ', microtime() );
  $timestart = $mtime[1] + $mtime[0];
  return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
  global $timestart, $timeend;
  $mtime     = explode( ' ', microtime() );
  $timeend   = $mtime[1] + $mtime[0];
  $timetotal = number_format( $timeend - $timestart, $precision );
  $r         = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
  if ( $display ) {
      echo $r;
  }
  return $r;
}

将以下代码添加至Typecho根目录/usr/themes/handsome/component/sidebar.php对应位置,代码排列对应实际预览效果。
```
<li class="list-group-item text-second"> 
<?php echo timer_stop();?><?php _me("加载耗时") ?></li>
```
[/collapse]
4、访客总数统计
[collapse status="false" title="访客总数统计"]
右侧博客信息中增加访客总数信息。
~~将以下代码添加至Typecho根目录/usr/themes/handsome/functions.php末尾~~

新版作者已经加密，请将下列代码放入/usr/themes/handsome/libs/content.php末尾

//总访问量
function theAllViews()
  {
      $db = Typecho_Db::get();
      $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
          echo number_format($row[0]['SUM(VIEWS)']);
  }

-将以下代码添加至Typecho根目录/usr/themes/handsome/component/sidebar.php对应位置,代码排列对应实际预览效果。

 <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
             <span class="badge
         pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

[/collapse]

5、底部标签样式修改

[collapse status="false" title="底部标签样式修改"]
-方法:添加到后台自定义CSS中

/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.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: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}

-在handsome后台开发者设置->博客底部左侧信息填入下面代码，修改成自己的信息

<div class="github-badge">
<a href="./" title="©2020&nbsp;白色の物语">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020&nbsp;白色の物语</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="鲁ICP备123456号">
<span class="badge-subject">鲁ICP备</span><span class="badge-value bg-green">123456号</span>
</a>
</div>

在handsome后台开发者设置->博客底部右侧信息填入下面代码，修改成自己的信息：

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
<footer id="footer" class="app-footer" role="footer">
  <div class="wrapper b-t bg-light">
    <span class="pull-right hidden-xs text-ellipsis">
    <?php $this->options->BottomInfo(); ?>
   
    </span>
      <span class="text-ellipsis"><?php $this->options->BottomleftInfo(); ?></span>
  </div>

[/collapse]

6、文章标题居中(AliceStyle美化插件中有)

[collapse status="false" title="文章标题居中"]

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

[/collapse]

7、头像鼠标放入旋转(AliceStyle美化插件中有)

[collapse status="false" title="头像旋转"]

#旋转速度请修改3s数值
/*头像呼吸光环和鼠标悬停旋转放大*/
.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);
}

@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;
  }
}

[/collapse]

8、盒子阴影(AliceStyle美化插件中有)

[collapse status="false" title="盒子阴影"]

/*panel阴影*/
.panel,.panel-small,.panel-picture{
 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);
}

[/collapse]

9、自定义CSS部分

[collapse status="false" title="自定义CSS"]

用于统一盒子内各区块的颜色，把颜色改成自己需要的就可以

本站选择后台颜色为light-light-light，其余自行调节

body  #post-panel{
  background: #F9F9F9;
}
.bg-light.lter {
  background-color: #F1F3F4;
}
.bg-white-only {
  background-color: #F1F3F4;
}
#aside #left_footer{
background-color: #F1F3F4;
}
.alert-warning {
  color: #000000;
  background-color: #F1F3F4;
  border-color: #f1f3f4;
}
.wrapper-lg {
  padding: 30px;
  background-color: #F1F3F4;
}
#search_input {
  border: none!important;
  background-color: #F1F3F4;
}
#search_submit button {
  color: #000;
  background-color: #F1F3F4;
}
#blog_info .list-group-item {
  border: none!important;
  padding: 15px 15px;
  background-color: #F1F3F4;
}
.badge{
  line-height: 2em;
}
.bg-white-pure {
  background: #F1F3F4;
}
textarea#comment {
  background-color: #F1F3F4;
}
.OwO .OwO-logo{
     background-color: #F1F3F4;
}

[/collapse]

10、自带音乐播放器随机播放

[collapse status="false" title="随机播放"]

代码如下
```
shuffle($info);
```
使用方法
将上述代码加入文件handsome/libs/Get.php的190行下面

修改后效果

case 'collect':
  $datas = $api->format(true)->playlist($id);
  $datas = json_decode($datas,true);
  foreach ( $datas as $keys => $data){

      $cover = json_decode($api->format(true)->pic($data['pic_id']),true)['url'];

      $info[$keys] = array(
          'name' => $data['name'],
          'url' => '',
          'song_id' => $data['id'],
          'cover' => $cover,
          'author' => $data['artist'][0]
      );
  }
  shuffle($info);
  break;

[/collapse]

Handsome魔改教程备份(6.0适用)

插件推荐

AliceStyle美化插件

夜间模式插件

ColorfulTags插件

HoerMouse

Access插件

GorgeousSky

wangEditor

UserAgent

ShortLinks

APlayer-Typecho

自定义部分

1、夜间模式

2、彩虹标签云

3、网页加载耗时

4、访客总数统计

5、底部标签样式修改

6、文章标题居中(AliceStyle美化插件中有)

7、头像鼠标放入旋转(AliceStyle美化插件中有)

8、盒子阴影(AliceStyle美化插件中有)

9、自定义CSS部分

10、自带音乐播放器随机播放