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

首页 / 建站备忘 / 正文

前言
大部分的美化教程来自网络,少量做了修改
魔改一时爽,更新火葬场
本文仅仅列举了自己需要的部分,剩余可以去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美化插件


自定义部分

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"><span class="blog-info-icons"> <i data-feather="clock"></i></span>
    <span class="badge
    pull-right"><?php echo timer_stop();?></span><?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>
  • 添加完以后,去handsome主题所在的文件夹目录handsome/component/footer.php中删除原来的版权声明代码,大约在1~12行,以下为修改完以后的样子:

    <?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]

评论区
头像