说明

  • 程序平台：Typecho
  • 相关主题：handsome
  • 主题版本：v 8.4.1
  • 内容出处：60%取自互联网，40%后台摸索；100%动手整理并持续更新...
  • 效果说明：以下的美化教程所对应的样式效果如：乔戈万事屋网站展示；
  • 美化建议：新手同学可以尝试先把这个网站当成模板去直接套用以下美化内容，然后在美化过程中慢慢熟悉了网站的结构和标签/属性等之后，再去参照你喜欢的网站样式进行自定义调整，这样更能快速上手（这是我作为非代码人士出身的成长心得）；
  • 博主寄语：此教程仅供和我一样非代码专业的人士参考，代码高手请指点一二；

了解网站框架

美化网站之前，先了解前端页面的框架和布局，然后对需要整改的地方进行针对性美化。（备注：此文章所指的前端页面“框架/布局”是为了方便普通人非码民们容易区分和按步骤美化而自定义的，而非网站代码文件或者建站逻辑思维的专业框架划分）

handsome主题顶部栏
handsome主题左侧栏
handsome主题右侧栏
handsome主题底部栏
handsome主题首页中间内容模块handsome主题文章中间内容模块
handsome主题前端全局handsome主题盒子模块

① 顶部栏美化

网站图标Favicon 添加

favicon

操作要点：favicon地址（后台-控制台-外观-设置外观-初级设置-favicon地址）
  • 第一步： 上传.png图标图片到网站服务器后台；
  • 第二步： 在网站后台-控制台-外观-设置外观-初级设置-favicon地址选项里，填上第一步上传到服务器的图标图片地址；

浏览器标签页动态标题 添加

浏览器标签页网站标题

操作要点：头部HTML（后台-控制台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码）
  • 第一步： 先将网站自带的站点名称“Hello Word”改掉，在后台-设置-基本-站点名称选项里进行修改；
  • 第二步： 在后台设置的‘自定义输出head 头部的HTML’选项里，填上以下代码，保存即可；
<!--动态标题-->
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='在这里可以填上你想写的文字';}else{document.title=normal_title;}});</script>

首页名称和图标 更换

这是首页名称

操作要点：站点名称（后台-控制台-外观-设置外观-初级设置-首页名称/首页名称左侧图标）

步骤： 在后台设置的‘首页名称’和‘首页名称左侧图标’选项里，填上自定义内容，保存即可；

统计表图标 关闭

统计表

操作要点：开发者高级设置（后台-控制台-外观-设置外观-开发者设置-开发者高级设置）

步骤： 在后台设置的‘开发者高级设置’里面填上以下代码，保存即可；

{ "show_static":false,}

音乐播放器 关闭

网站音乐盒

操作要点：增强功能开关（后台-控制台-外观-设置外观-主题增强功能-增强功能开关-启用全局顶部音乐播放器）

步骤： 在后台设置的‘增强功能开关’关闭并保存即可；

闲言碎语图标和名称 更换（时光机）

这里下拉内容来自时光机

操作要点：headnav.php（网站文件-/usr/themes/handsome/component/headnav.php）

第一步： 找到网站文件headnav.php并打开；

第二步： 按Ctrl+F搜索代码："twitch"，把它改成你想要的图标文字（可以从这个网站搜索并选一个你喜欢的替代掉"twitch"）；

第三步： 把`"twitch"下面的“闲言碎语”文字改成你想要展示的文字，然后保存文件就可以了；

修改前：

<!--闲言碎语-->
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle">
                    <i data-feather="twitch"></i>
                    <span class="visible-xs-inline">
              <?php _me("闲言碎语") ?>
              </span>

修改后：

<!--闲言碎语-->
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle">
                    <i data-feather="paperclip"></i>
                    <span class="visible-xs-inline">
              <?php _me("心情说说") ?>
              </span>

后台登录入口 关闭（网站安全起见）

后台登录入口

操作要点：增强功能开关（后台-控制台-外观-设置外观-主题增强功能-增强功能开关）

步骤： 在后台设置的‘增强功能开关’关闭并保存即可；

顶部导航栏模块阴影效果 添加

顶部栏阴影效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’填上以下代码，保存即可；

/*顶部-导航栏模块阴影效果*/
.navbar{
   box-shadow: 0 1px 8px rgba(70, 90, 48, 0.5);
}

网站导航栏配色 修改

handsome基本配色

操作要点：主题色调自定义搭配（后台-控制台-外观-设置外观-外观设置-主色调自定义搭配）；

主题色调选择（后台-控制台-外观-设置外观-外观设置-主色选择色调）；

步骤一： 在后台设置的‘主题色调自定义搭配’里填上“black-white-dark”（备注：不用带引号，其中第一个参数是左边栏上面的颜色，第二个参数是顶部栏颜色，第三个参数代表左边栏主体颜色，颜色参数可以参考主题说明文档的其他参数进行组合，但是格式一定是"xxx-xxx-xxx"）;

步骤二： 或者直接在后台设置的‘主题色调选择’里面直接选择一个 （备注：如果直接选择主题色调选择的配色选项，请在‘主题色调自定义搭配’保持空白/不填）；

手机端页面-顶部菜单图标 更换和配色

handsome手机版图标

操作要点：headnav.php（网站文件-/usr/themes/handsome/component/headnav.php）；

自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）；

更换图标： 打开headnav.php文件，然后按Ctrl+F搜索关键词data-feather然后找到data-feather="search"和data-feather="menu"；然后“search”对应的是手机端右边顶部图标，“menu”对应左边，只要把这两个图标文字改成你想要的图标就可以了，图标可以从个网站查找，复制英文然后替换即可；

更换图标颜色： 在后台的‘自定义CSS’填上以下代码，保存即可；

/*顶部-手机端页面菜单图标*/
button.pull-left.visible-xs,
button.pull-right.visible-xs {
color: #ffb600
}

② 左边栏美化

博主头像/名称/介绍 更换

handsome主题博主信息

操作要点：博主的名称/博主的介绍/头像图片地址（后台-控制台-外观-设置外观-外观设置-）

步骤： 在后台对应的‘博主的名称’，‘博主的介绍’，‘头像图片地址’这三个选项里填上你的内容即可 （备注：头像图片的地址记得提前把图片先上传到网站后台，然后找到图片地址复制地址来源格式再粘贴进去，例如：https:chelgr.com/share/chelgr-com-icon.png）;

博主头像悬停旋转放大效果 添加

handsome主题博主头像效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

效果一【悬停放大】： 在后台设置的‘自定义CSS’里面填上以下代码，保存即可；

/*左边-博主头像悬停旋转放大效果*/
.thumb-lg{
    width:90px;
}
.avatar{
    -webkit-transition: 0.2s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}
.avatar:hover{
    transform: rotateZ(720deg);
    -webkit-transform: rotateZ(361deg);
    -moz-transform: rotateZ(361deg);
}
#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}
#aside-user span.avatar:hover{
    transform:rotate(361deg) scale(1.2);
    border-width:5px;
    animation:avatar 1s
}

效果二【自动旋转】： 在后台设置的‘自定义CSS’里面填上以下代码，保存即可；

/*左边-博主头像自动旋转*/
.thumb-lg{width:90px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(361deg);}
}
.img-full{
    -webkit-transform: rotate(361deg);
    animation: rotation 5s linear infinite;
    -moz-animation: rotation 4s linear infinite;
    -webkit-animation: rotation 5s linear infinite;
    -o-animation: rotation 4s linear infinite;
}

效果三【悬停放大+呼吸阴影】：

/*左边-博主头像呼吸光环和悬停旋转放大*/
.img-full {
    width: 90px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.4s;
}
.img-full:hover {
    transform: scale(1.08) rotate(361deg);
}
@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;
    }
}

博主头像下拉文字 更换

handsome主题博主下拉信息

操作要点：aside.php（网站文件-/usr/themes/handsome/component/aside.php）

步骤： 打开aside.php文件，然后按Ctrl+F搜索关键词早上好，然后替换‘早上好’及其下面的两行信息为你想要展示的内容即可；

导航菜单选项和图标 添加

handsome主题添加导航菜单

操作要点：左侧边栏导航（后台-控制台-外观-设置外观-高级设置-左侧边栏导航）

步骤： 在后台设置的‘左侧边栏导航’里填上格式为{"name":"填菜单名称","class":"图标名称","link":"文章地址","target":"_self"}, 的代码，其中对应的内容替换成自己想要的信息即可，如果不是很清楚，可以查看主题的官方说明文档；

以下是我的菜单栏信息范本 （仅供参考）

{"name":"智能家居","class":"fontello fontello-emo-sunglasses","link":"https://chelgr.com/smarthome.html","target":"_self"},
{"name":"直播技术","class":"fontello fontello-eye","link":"https://chelgr.com/livestreaming.html","target":"_self"},
{"name":"视频短剧","class":"fontello fontello-youtube-play","link":"https://chelgr.com/videoproduction.html","target":"_self"},
{"name":"网站知识","class":"fontello fontello-cogs","link":"https://chelgr.com/websitebuilding.html","target":"_self"},

组成菜单选项和图标 添加

handsome主题添加新组成菜单

操作要点：aside.php（网站文件-/usr/themes/handsome/component/aside.php）

步骤： 打开aside.php文件，然后按Ctrl+F搜索关键词data-feather，然后找到data-feather="flie" ,data-feather="grid" ,data-feather="user" 这三个关键词之后，把对应的file ，grid 和user 三处内容改成其他图标名称即可 （图标可以从这个网站搜索） ；

以下是我的图标修改范本 （仅供参考）

data-feather="codesandbox"
data-feather="file-text"
data-feather="external-link"

“导航”和“组成”标签 移除

handsome主题移除导航和组成

操作要点：aside.php（网站文件-/usr/themes/handsome/component/aside.php）

步骤： 打开aside.php文件，然后按Ctrl+F搜索关键词导航 和组成 ，然后删除即可；

《时光机页面》添加

添加时光机页面

操作要点：时光机（后台-管理-独立页面-新建-自定义模板-时光机）；

时光机身份验证编码（后台-控制台-外观-设置外观-时光机配置-时光机身份验证编码）；

第一步： 在后台新建一个页面，然后在页面标题下方的链接xxx.com/空白.html的空白位置填上cross （必须是这个地址：xxx.com/cross.html) ，最后就是在右侧自定义模板选项里选择时光机 ，保存页面之后再点进去编辑，记下此时浏览器地址栏出现的网址后面cid=数字 中的数值，为下一步使用；

第二步： 在后台设置的‘时光机身份验证编码’里面填上你自己定义的英文或数字，并且记住为下一步使用；

第三步： 打开微信搜索并关注公众号ihewro 或者我要起飞啦熬 ，然后给公众号发一条格式为绑定handsome(加号)完整博客地址(加号)时光机验证编码(加号)时光机cid 的信息，例如： 绑定handsome+https://xxx.com+abcdefg+5 ，其中https://xxx.com 改为你的网址，abcdefg 改为第二步你在后台设置的时光机身份验证编码，5 改成第一步你自己的新建cross页面的cid后面的数字，完毕 （更多详细说明：请移步查看官方说明文档的介绍） ；

《文章归档页面》添加

添加文章归档页面

操作要点：文章归档（后台-管理-独立页面-新建-自定义模板-文章归档）

步骤： 在后台新建一个页面，然后在页面标题下方的链接xxx.com/空白.html的空白位置填上随意名字，例如post-line （然后完整的地址就是：xxx.com/post-line.html） ，最后就是在右侧自定义模板选项里选择文章归档 保存即可；

《友情链接页面》添加

添加友情链接页面

操作要点：友情链接（后台-管理-独立页面-新建-自定义模板-友情链接）

步骤： 在后台新建一个页面，然后在页面标题下方的链接xxx.com/空白.html的空白位置填上随意名字，例如links （然后完整的地址就是：xxx.com/links.html） ，最后就是在右侧自定义模板选项里选择友情链接 保存即可；

网站友情链接 添加

handsome主题添加友情链接

操作要点：友情链接（后台-管理-友情链接）

步骤： 在后台管理选项下的友情链接页面里添加新信息，对应填上链接名称 ，链接地址 ，链接输出位置 保存即可；

指定某个分类 移除

左侧栏不显示某个分类

操作要点：分类描述（后台-管理-分类-某一个分类编辑页面下-分类描述）

步骤： 打开后台的文章分类页面，选择编辑你要隐藏的分类，然后在其页面中的分类描述 里面填上代码 {"hide":true} ，保存即可；

③ 右边栏美化

文章信息-菜单图标 更换和配色

右边栏顶部图标

操作要点：sidebar.php（网站文件-/usr/themes/handsome/component/sidebar.php）;

自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）；

① 图标更换： 打开aside.php文件，然后按Ctrl+F搜索关键词data-feather，然后找到data-feather="thumbs-up"，data-feather="message-square"和data-feather="gift"这三个关键词之后，把对应的thumbs-up ，message-square 和gift 三处内容改成其他图标名称即可 （图标可以从这个网站搜索） ；

以下是我的图标修改范本 （仅供参考）

data-feather="trending-up"
data-feather="message-square"
data-feather="refresh-cw"

② 颜色更换： 在后台设置的‘自定义CSS’里面填上以下代码，保存即可；

/*右边栏-上顶图标颜色*/
svg.feather.feather-trending-up {
color: red
}
svg.feather.feather-message-square {
color: #ffb600
}
svg.feather.feather-refresh-cw {
color: green
}

文章信息-热门文章头像 更换

热门文章头像

操作要点：sj2文件夹（网站文件-/usr/themes/handsome/assets/img/sj2）

步骤： 打开网站文件里面的‘sj2文件夹’，然后将准备好的头像图片替换里面的图片并命名一致即可；（备注：换完图片刷新网站页面之后，可能不会立即显示新图片，需要清除浏览器缓存再刷新）

文章信息-热门文章头像悬停效果 添加

头像悬停旋转效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里面填上以下代码，保存即可；

/*右边-热门文章头像悬停效果*/
.img-square {
    transition: all 0.3s;
}
.img-square:hover {
    transform: rotate(360deg);
}

文章信息-模块效果 添加（不会）


文章信息-评论图标换成阅读量参数

评论数改成浏览数

操作要点：热门文章的排序规则（后台-控制台-外观-设置外观-主题增强功能-热门文章的排序规则）

步骤： 在后台设置的‘热门文章的排序规则’里切换按浏览数排序即可；

博客信息-运行天数/最后活动 移除

移除博客信息里的内容

操作要点：sidebar.php（网站文件-/usr/themes/handsome/component/sidebar.php）

第一步： 打开sidebar.php文件，然后按Ctrl+F搜索关键词运行天数，然后找到以下的代码段之后；

 <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="calendar"></i></span>
               <span class="badge
           pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li>

第二步： 注释掉这段代码，保存文件即可；（用<!--加在代码前面，和-->加在代码后面，如以下：）

<!-- <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="calendar"></i></span>
               <span class="badge
           pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li> -->

第三步： 移除‘最后天数’同理以上两步；

博客信息-在线人数+历史访客 添加

添加博客信息内容

操作要点：functions.php（网站文件-/usr/themes/handsome/component/functions.php）;

sidebar.php（网站文件-/usr/themes/handsome/component/sidebar.php）;

第一步： 打开functions.php文件，然后找到以下代码之后；

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

第二步： 在第一步找到的代码段下方添加以下代码，保存即可；

//在线人数
    function online_users() {
        $filename='online.txt'; //数据文件
        $cookiename='Nanlon_OnLineCount'; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER['REQUEST_TIME']; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode('|',$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)<=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid='U'.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,'w')){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=>$ftime){ 
                    $fline=$fuid.'|'.$ftime."\n"; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo "$total_online"; 
    } 
//历史访客
    function theAllViews()
        {
            $db = Typecho_Db::get();
            $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                echo number_format($row[0]['SUM(VIEWS)']);
        }

第三步： 打开sidebar.php文件，然后按Ctrl+F搜索关键词博客信息，然后找到以下代码之后；

<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span> <span class="badge
           pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>

第四步： 在第三步找到的代码段后面添加以下代码，保存即可；

 <li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge
            pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
            <li class="list-group-item"> <i class="glyphicon glyphicon-globe text-muted"></i> <span class="badge
            pull-right"><?php echo theAllViews();?></span><?php _me("历史访客") ?></li>

博客信息-加载耗时+字数统计 添加

添加博客信息内容

操作要点：functions.php（网站文件-/usr/themes/handsome/component/functions.php）;

sidebar.php（网站文件-/usr/themes/handsome/component/sidebar.php）;

第一步： 打开functions.php文件，然后找到以下代码之后；

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

第二步： 在第一步找到的代码段下方添加以下代码，保存即可；

//加载耗时
    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;
    }
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = 'w'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = 'k'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}

第三步： 打开sidebar.php文件，然后按Ctrl+F搜索关键词博客信息，然后找到以下代码之后；

<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span> <span class="badge
           pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>

第四步： 在第三步找到的代码段后面添加以下代码，保存即可；

<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
            pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>
            <li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge 
            pull-right"><?php echo allOfCharacters(); ?></span><?php _me("字数统计") ?></li>

博客信息-模块效果 添加

博客信息模块效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里面填上以下代码，保存即可；

/*右边-博客信息-模块效果*/
#blog_info .list-group-item,
#blog_info .list-group {
transition: all 0.4s;
border: solid;
border-width: 1px;
border-color: #dee5e7;
}
#blog_info .list-group:hover {
    transform: translateY(-3px);
    transition: 0.4s;
   box-shadow: 0 4px 6px rgba(70, 90, 48, 0.5);
}
#blog_info .list-group-item {
opacity: 0.8
}
/*右边-博客信息-模块参数*/
.badge {
    background-color: #ABB6F5;
    font-size: 13px

广告板块-图片/内容 添加

右边栏广告位

操作要点：全局右侧边栏广告位（后台-控制台-外观-设置外观-开发者设置-全局右侧边栏广告位）

步骤： 在后台设置的‘全局右侧边栏广告位’里填上格式为以下展示的‘图片来源’代码，保存即可；

<img src="https://chelgr.com/usr/uploads/webelement/chelgr-com-ad.jpg">

广告板块-模块效果 添加

右边栏广告位模块效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*右边-广告板块-模块效果*/
#a_d_sidebar img {
   border-radius: 6px;
   border: solid;
   border-width: 1px;
   border-color: #dee5e7;
   box-shadow: 0 3px 5px rgba(70, 90, 48, 0.5);
}

标签云-配色

标签云配色

操作要点：自定义 JavaScript（后台-控制台-外观-设置外观-开发者设置-自定义 JavaScript）；

自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）；

全局标签云： 在后台设置的‘自定义JavaScript’里填上以下代码（只选择任意一个颜色代码），保存即可；

<!--纯黑标签云-->
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 = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
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;
});
<!--自定义颜色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ffb600", "#ffb600", "#ffb600", "#ffb600", "#ffb600", "#ffb600"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

文章页标签云： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*右边-标签云-配色（仅文章页面）*/
.post-tags a{
background-color: #BBC4F6
}
/*右边-标签云-模块参数*/
.post-tags a{
font-size: 13px;
padding: 4px 8px;
}
.post-tags {
padding: 5px
}

标签云-动态特效 添加（不会）

操作要点：

标签云-模块参数 调整

标签云模块效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*右边-标签云-模块参数*/
.post-tags a{
font-size: 13px;
padding: 4px 8px;
}
.post-tags {
padding: 5px
}

手机端页面-文章信息和标签云板块 移除

手机端页面-无标签云

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*手机端页面-标签云-不显示*/
@media (max-width:767px) {
    #tag_cloud-2 {
        display: none;
    }
}

文章详情页内的右边栏 创建

文章页面-右边栏

操作要点：sidebar.php（网站文件-/usr/themes/handsome/component/sidebar.php）；

post.php（网站文件-/usr/themes/handsome/post.php）

第一步： 复制sidebar.php文件并重命名为其他名称（例如：post-sidebar.php）；

第二步： 打开post.php文件，然后按Ctrl+F搜索关键词$this->need('component/sidebar.php');，把这段内容里面的sidebar.php改成第一步完成的重命名文件的新文件名（例如：$this->need('component/post-sidebar.php');）,保存即可；

第三步： 修改post-sidebar.php文件里的内容并保存后，即可实现【首页/全局右边栏的内容与文章页面里面的右边栏不一样】；

④ 底部栏美化

网站版权信息/主题版权信息 移除

移除网站底部信息

操作要点：footer.php（网站文件-/usr/themes/handsome/component/footer.php）

第一步： 打开footer.php文件，然后按Ctrl+F搜索关键词Powered by <a target="_blank"，然后找到以下代码之后；

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank" 
                                           href="https://www.ihewro.com/archives/489/">handsome</a>

第二步： 注释掉这段代码，保存文件即可；（用<!--加在代码前面，和-->加在代码后面，如以下：）

<!--  Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank" 
                                                   href="https://www.ihewro.com/archives/489/">handsome</a> -->

第三步： 再按Ctrl+F搜索关键词<span class="text-ellipsis">，然后找到以下代码之后；

<span class="text-ellipsis">© <?php echo date("Y"); ?> Copyright <?php
            $this->options->BottomleftInfo(); ?></span> 
    </div>

第四步： 注释掉这段代码，保存文件即可；（用<!--加在代码前面，和-->加在代码后面，如以下：）

<!-- <span class="text-ellipsis">© <?php echo date("Y"); ?> Copyright <?php
            $this->options->BottomleftInfo(); ?></span> 
    </div> -->

个性化网站版权信息/备案信息 添加

个性化网站底部信息

操作要点：博客底部左侧信息（后台-控制台-外观-设置外观-开发者设置-博客底部左侧信息）；

自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）；

第一步： 在后台设置的‘博客底部左侧信息’里填上以下代码；

<!--底部Copyright-->
<div class="github-badge">
  <span class="badge-subject">Copyright</span>
  <a href="./" target="_blank">
    <span class="badge-value bg-blue">©2022 chelgr.com</span></a>
</div>

第二步： 代码里面的Copyright和©2022 chelgr.com内容可以根据自己的需求更改，保存即可；

第三步： 在后台设置的‘自定义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-green {
  background-color: #3bca6e
}

网站运行计时 添加

添加网站运行时间

操作要点：博客底部左侧信息（后台-控制台-外观-设置外观-开发者设置-博客底部左侧信息）

第一步： 在后台设置的‘博客底部左侧信息’里填上以下代码；

<!--建站时间-->
<span>
    运行时间
</span>
<span id="span_dt_dt">
</span>
<script>
    /*建站时间*/
    function show_date_time() {
        window.setTimeout("show_date_time()", 1e3);
        var BirthDay = new Date("2022/05/31 02:30:41"),
        today = new Date,
        timeold = today.getTime() - BirthDay.getTime(),
        msPerDay = 864e5,
        e_daysold = timeold / msPerDay,
        daysold = Math.floor(e_daysold),
        e_hrsold = 24 * (e_daysold - daysold),
        hrsold = Math.floor(e_hrsold),
        e_minsold = 60 * (e_hrsold - hrsold),
        minsold = Math.floor(60 * (e_hrsold - hrsold)),
        seconds = Math.floor(60 * (e_minsold - minsold));
        span_dt_dt.innerHTML = daysold + "天" + hrsold + "时" + minsold + "分" + seconds + "秒";
    }
    show_date_time();
</script>

第二步： 代码里面的2022/05/31内容可以根据自己的需求更改为自己想要的网站运行时间，保存即可；

底部栏参数 调整

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*底部-底部栏参数*/
.wrapper {
  padding: 11px;
}

⑤ 中间Panel美化

首页-站点名称和下面的文字 移除

handsome网站标题

操作要点：index.php（网站文件-/usr/themes/handsome/index.php）

第一步： 打开index.php文件，再按Ctrl+F搜索关键词<?php $this->options->title(); ?>，然后找到以下代码之后；

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

第二步： 注释掉这段代码，保存文件即可；（用<!--加在代码前面，和-->加在代码后面，如以下：）

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

首页-通知信息 添加

handsome网站通知

操作要点：博客公告消息（后台-控制台-外观-设置外观-初级设置-博客公告消息）

步骤： 在后台设置的‘博客公告消息’里填上自定义内容，保存即可；

首页-轮播图 添加

handsome轮播图

操作要点：首页轮播图设置（后台-控制台-外观-设置外观-高级设置-首页轮播图设置）

步骤： 在后台设置的‘首页轮播图设置’里填上以下范例格式的自定义内容，保存即可；

{"title":"填写标题","link":"填写文章地址","cover":"填写图片地址","desc":"填写描述"}

（例如以下）

{"title":"handsome美化最全面","link":"https://chelgr.com/3.html","cover":"https://chelgr.com/usr/uploads/webelement/chelgr-com-homebanner.jpg","desc":"2022最新攻略文章"}

首页-文章悬停上浮效果 添加

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*中间-首页文章模块-悬停上浮效果*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.4s;
}
.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 10px rgba(70, 90, 48, 0.5);
}

首页-文章图片悬停放大并隐藏超出效果 添加

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*首页头图悬停放大并隐藏超出*/
.index-post-img {
    overflow: hidden;
}
.item-thumb {
    transition: all 0.4s;
}
.item-thumb:hover {
    transform: scale(1.04)
}

首页-置顶文章 设置

置顶文章

操作要点：插件设置（后台-控制台-插件-Handsome-设置-文章设置-置顶文章的cid）

第一步： 后台打开要置顶的文章编辑界面，看到浏览器地址栏地址末尾 cid=?中的?数值并记下；

第二步： 打开后台‘主题插件设置’，找到‘置顶文章的cid’选项，并填入第一步记下的数值，保存即可；

首页-指定某个分类下的文章 不显示

操作要点：插件设置（后台-控制台-插件-Handsome-设置-分类设置-首页不显示的分类的mid）

第一步： 后台打开要隐藏的某个分类编辑界面，看到浏览器地址栏地址末尾 mid=?中的?数值并记下；

第二步： 打开后台‘主题插件设置’，找到‘首页不显示的分类的mid’选项，并填入第一步记下的数值，保存即可；

文章-标题大小 调整

handsome文章标题大小

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*中间-文章-标题*/
.entry-title {font-size: 24px;}

文章-标题尾部的图标 更换或移除

标题尾部图标

操作要点：content.php（网站文件-/usr/themes/handsome/libs/content.php）

第一步： 打开content.php文件，再按Ctrl+F搜索关键词朗读文章，然后找到以下代码之后；

       if (!$isCustom) {
            $html .= '<a class="plus-font-size" data-toggle="tooltip" data-original-title="' . _mt("点击改变文章字体大小") . '"><i data-feather="type"></i></a>';
        }

        if (@Utils::getExpertValue("post_speech", true) !== false) {
            $html .= '<a class="speech-button m-l-sm superscript" data-toggle="tooltip" data-original-title="' .
                _mt
                ("朗读文章") . '"><i data-feather="mic"></i></a>';
        }

第二步： 注释掉这段代码，保存文件即可；（用/**加在代码前面，和*/加在代码后面，如以下：）

/** if (!$isCustom) {
            $html .= '<a class="plus-font-size" data-toggle="tooltip" data-original-title="' . _mt("点击改变文章字体大小") . '"><i data-feather="type"></i></a>';
        }

        if (@Utils::getExpertValue("post_speech", true) !== false) {
            $html .= '<a class="speech-button m-l-sm superscript" data-toggle="tooltip" data-original-title="' .
                _mt
                ("朗读文章") . '"><i data-feather="mic"></i></a>';
        } */

文章-标题下方的信息和图标 更换或移除

标题下方信息

操作要点：post.php（网站文件-/usr/themes/handsome/post.php）

第一步： 打开post.php文件，再按Ctrl+F搜索关键词作者然后找到以下代码之后；

 <!--作者-->
<!--             <li class="meta-author"><span class="post-icons"><i data-feather="user"></i></span><span
                         class="sr-only"><?php _me("作者") ?>：</span> <a class="meta-value" href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></li> -->
             <!--发布时间-->
             <li class="meta-date" data-toggle="tooltip" data-html="true" data-original-title="<?php $this->date(I18n::dateFormat("detail")); ?>"><span class="post-icons"><i data-feather="clock"></i></span><span class="sr-only"><?php _me("发布时间：") ?></span><time class="meta-value"><?php $this->date(I18n::dateFormat()); ?></time></li>
             <!--浏览数-->
             <li class="meta-views"><span class="post-icons"><i data-feather="eye"></i></span><span class="meta-value"><?php echo get_post_view($this) ?> <?php _me('次浏览'); ?></span></li>
             <?php if($this->options->commentChoice =='0'): ?>
                 <!--评论数-->
                 <li class="meta-comments"><span class="post-icons"><i data-feather="message-circle"></i></span><a
                             class="meta-value" href="#comments"><?php if ($this->allowComment == 1)$this->commentsNum(_mt('暂无评论'), _mt('1 条评论'), _mt('%d 条评论'));else _me("关闭评论") ;?></a></li>
             <?php endif; ?>

             <!--文字数目-->
             <li class="meta-word"><span class="post-icons"><i data-feather="pen-tool"></i></span><span class="meta-value"><?php echo Utils::getWordsOfContentPost($this->text); ?><?php _me('字数'); ?></span></li>
             <!--分类-->
<!--             <li class="meta-categories"><span class="post-icons"><i data-feather="hash"></i></span><span class="sr-only"><?php _me("分类") ?>：</span> <span class="meta-value"><?php $this->category(' '); ?></span></li> -->

第二步： 根据你想在前端页面隐藏的内容图标，选择性注释代码，保存文件即可；（用<!--加在代码前面，和-->加在代码后面，如以下：）

<!--作者-->
             <li class="meta-author"><span class="post-icons"><i data-feather="user"></i></span><span
                         class="sr-only"><?php _me("作者") ?>：</span> <a class="meta-value" href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></li>
             <!--发布时间-->
             <li class="meta-date" data-toggle="tooltip" data-html="true" data-original-title="<?php $this->date(I18n::dateFormat("detail")); ?>"><span class="post-icons"><i data-feather="clock"></i></span><span class="sr-only"><?php _me("发布时间：") ?></span><time class="meta-value"><?php $this->date(I18n::dateFormat()); ?></time></li>
             <!--浏览数-->
             <li class="meta-views"><span class="post-icons"><i data-feather="eye"></i></span><span class="meta-value"><?php echo get_post_view($this) ?> <?php _me('次浏览'); ?></span></li>
             <?php if($this->options->commentChoice =='0'): ?>
                 <!--评论数-->
                 <li class="meta-comments"><span class="post-icons"><i data-feather="message-circle"></i></span><a
                             class="meta-value" href="#comments"><?php if ($this->allowComment == 1)$this->commentsNum(_mt('暂无评论'), _mt('1 条评论'), _mt('%d 条评论'));else _me("关闭评论") ;?></a></li>
             <?php endif; ?>

             <!--文字数目-->
             <li class="meta-word"><span class="post-icons"><i data-feather="pen-tool"></i></span><span class="meta-value"><?php echo Utils::getWordsOfContentPost($this->text); ?><?php _me('字数'); ?></span></li>
             <!--分类-->
             <li class="meta-categories"><span class="post-icons"><i data-feather="hash"></i></span><span class="sr-only"><?php _me("分类") ?>：</span> <span class="meta-value"><?php $this->category(' '); ?></span></li>

文章-面包屑里面的分享图标 移除

文章分享按钮

操作要点：增强功能开关（后台-控制台-外观-设置外观-主题增强功能-增强功能开关）

步骤： 打开后台‘增强功能开关’，然后勾选‘关闭文章页面的分享按钮（分享到QQ空间和微博）’选项，保存即可；

文章-面包屑效果 添加

handsome面包屑效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*中间-面包屑-参数*/
.breadcrumb {
border: solid;
border-width: 1px;
border-color: #dee5e7;
transition:0.4s
}
.breadcrumb:hover {
    transform: translateY(-3px);
    transition: 0.4s;
   box-shadow: 0 4px 6px rgba(70, 90, 48, 0.5);
}

文章-首图悬停放大并隐藏超出效果 添加

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*中间-文章页面-首图悬停放大并隐藏超出*/
.entry-thumbnail {
    overflow: hidden;
}
#post-content img {
    border-radius: 6px;
    transition: 0.4s;
}
#post-content img:hover {
    transform: scale(1.04);
}

文章-收缩框 参数调整效果添加

文章内容收缩框

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*中间-文章内容收缩框*/
.collapse-panel .panel-heading {
    border-bottom: ridge;
   box-shadow: 0 4px 6px rgba(70, 90, 48, 0.5);
    transition: all 0.4s
}
.collapse-panel .panel-heading:hover {
    transform: translateY(-4px);
    transform: scale(1.02);  
    box-shadow: 0 6px 15px rgb(33, 63, 33, 0.5);
    transition: all 0.4s
}

文章-代码高亮效果 开启

handsome代码高亮

操作要点：浅色模式下代码高亮风格选择（后台-控制台-外观-设置外观-外观设置-浅色模式下代码高亮风格选择）

步骤： 后台打开‘浅色模式下代码高亮风格选择’选项，并选择mac_dark，保存即可；

文章-页脚最后修改时间参数 移除

handsome文章最后修改时间移除

操作要点：content.php（网站文件-/usr/themes/handsome/libs/content.php）；

开发者高级设置（后台-控制台-外观-设置外观-开发者设置-开发者高级设置）

步骤： 打开content.php文件，再按Ctrl+F搜索关键词最后修改然后将以下代码段删除或注释掉，保存即可（后测可能方法失效了，可以参考下面方法二，最后更新时间20220903）；

return '
     <div class="show-foot">
         <div class="notebook">
             <i class="fontello fontello-clock-o"></i>
             <span>' . _mt("最后修改") . '：' . date(_mt("Y 年 m 月 d 日 h : i  A"), $time + $obj) . '</span>
         </div>
         <div class="copyright" data-toggle="tooltip" data-html="true" data-original-title="' . $interpretation . '"><span>© ' . $content . '</span>
         </div>
     </div>
';

方法二： 到后台开发者高级设置输入代码 {"show_post_last_date":false}，如果已经用了其他代码，请在大括号里面填入"show_post_last_date":false,（切记加英文逗号隔开）；

文章-页脚默认版权信息 添加

文章默认版权信息

操作要点：post.php（网站文件-/usr/themes/handsome/post.php）

第一步： 打开post.php文件，再按Ctrl+F搜索关键词<?php if ($this->options->adContentPost != ""): ?>然后在代码段下面添加以下代码；

             <!--后加-版权声明开始-->
                 <div class="entry-content l-h-2x">
                   <div style="padding: 20px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
                     <span>文章作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
                     <span>文章地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
          <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
                     <span>文章版权：本文由<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>独立整理撰写，转载请保留文章出处。</span>
                   </div>
                 </div>
            <!--版权声明结束-->

第二步： 修改以上代码段里面的文字内容，保存即可；

文章-页脚广告位图片/内容 添加

handsome页脚广告位

操作要点：文章页脚广告位（后台-控制台-外观-设置外观-开发者设置-文章页脚广告位）

步骤： 在后台设置的‘文章页脚广告位’里填上格式为以下展示的‘图片来源’代码，保存即可；

<img src="https://chelgr.com/usr/uploads/webelement/chelgr-com-timeline-bg.jpg">

文章-打赏按钮跳动效果 添加

handsome打赏跳动效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*中间-文章打赏按钮跳动效果*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

文章-页脚赞赏文字 修改

打赏文字

操作要点：文章页面打赏/赞赏默认提示文字（后台-控制台-外观-设置外观-高级设置-文章页面打赏/赞赏默认提示文字）

步骤： 在后台设置的‘文章页面打赏/赞赏默认提示文字’里填上自定义内容，保存即可；

文章-模块外侧阴影效果 添加

handsome文章页面效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*中间-文章内容模块边缘阴影效果*/
.wrapper-lg {
   box-shadow: 0 3px 5px rgba(70, 90, 48, 0.5);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px
}
.wrapper-lg img {
    transition: all 0.3s;
   box-shadow: 0 3px 5px rgba(70, 90, 48, 0.5);
}

评论-评论框打字烟花特效 添加

handsome评论打字效果

操作要点：自定义输出body 尾部的HTML代码（后台-控制台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码）

方法一： 在后台设置的‘自定义输出body 尾部的HTML代码’里填上以下代码，保存即可；

<script type="text/javascript" src="https://chelgr.com/share/commentTyping.js"></script>

方法二： ① 把特效文件(下载)放到以下文件夹里xxx.com/usr/themes/handsome/assets/css；② 在后台设置的‘自定义输出body 尾部的HTML代码’里填上以下代码，保存即可 （备注：xxx.com为你的网站） ；

<script type="text/javascript" src="https://xxx.com/usr/themes/handsome/assets/css/commentTyping.js"></script>

评论-评论框默认文字信息 更换

评论框文字提醒

操作要点：评论框提示文字（后台-控制台-外观-设置外观-评论设置-评论框提示文字）

步骤： 在后台设置的‘评论框提示文字’里填上自定义内容，保存即可；

评论-评论框效果图片 更换

评论框图片

操作要点：原生评论框的背景图片（后台-控制台-外观-设置外观-评论设置-原生评论框的背景图片）

步骤： 在后台设置的‘原生评论框的背景图片’里填上‘图片来源’地址，保存即可；

第一步：注册Crisp账户

评论-更多表情 添加

handsome评论表情添加

⑥ 全局美化

盒子-外侧阴影效果 添加

handsome盒子效果

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*全局-盒子两侧边缘阴影*/
.app.container {
    box-shadow: 0 3px 20px rgba(70, 90, 48, 0.5);
}

盒子-所有内容参数 调整

handsome盒子调整

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*全局-盒子所有内容参数*/
body{font-size:14px}.h1,h1{font-size:40px}.h5,h5{font-size:14px}.post-head-icon{font-size:15px}.text-xs{font-size:14px}.post-item-foot-icon{font-size:15px}.badge{font-size:14px}

盒子-各个内容模块参数 调整

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*全局-盒子各个内容模块参数调整*/
/*中间加线条*/
#post-panel {
border-right: solid;
border-right-width: 1px;
border-right-color: #dee5e7
}

顶部阅读进度条 添加

handsome顶部进度条

操作要点：header.php（网站文件-/usr/themes/handsome/component/header.php）；

自定义 JavaScript（后台-控制台-外观-设置外观-开发者设置-自定义 JavaScript）

第一步： 打开header.php文件，拉到最底部，在</head>下面填上以下代码，保存即可；

<body id="body" class="fix-padding skt-loading">
<div class="progress-top" style="position: fixed; top: 0px; height: 6px; background: rgba(255,182,0, 0.7); border-radius: 500px; z-index: 5200;"></div>

第二步： 在后台设置的‘自定义 JavaScript’里填上以下代码，保存即可；

// 顶部进度条
let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollAvail = pageHeight - windowHeight;
window.onscroll = function () {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    document.querySelector('.progress-top').style.width = (scrollTop / scrollAvail) * 100 + '%';
}

右侧上下滚动条效果 添加

handsome右侧滚动条

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*右侧上下滚动条效果*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
::-webkit-scrollbar-thumb {
    background-color: #ffb600;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

右侧按钮-设置按钮 移除

handsome设置按钮移除

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*右侧按钮-设置按钮移除*/
.settings>.btn {
    display: none
}

右侧按钮-返顶按钮阴影效果 添加

handsome返回顶部按钮

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*右侧按钮-效果*/
.rightSettingBtn {
    box-shadow: 0 3px 5px rgba(70, 90, 48, 0.5);
    transition: all 0.4s
}
.border-radius-half-left {
    border-top-left-radius: 30%;
    border-bottom-left-radius: 30%;
}
.rightSettingBtn:hover {
    transform: translateY(-4px);
    transform: scale(1.02);  
    box-shadow: 0 5px 10px rgb(70, 90, 48, 0.5);
    transition: all 0.4s
}

手机端页面-右侧按钮参数 调整

手机端右侧按钮

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*手机端页面-右侧目录按钮参数调整*/
.tocify-mobile-panel>.btn {
    top: 40px;
}

鼠标光标-指示样式 更换

handsome鼠标光标样式更改

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

body {
    cursor:url('http://like.gmkh.top/css/光标/S1.cur'), auto;
}
select, input, textarea, a, button {
    cursor:url('http://like.gmkh.top/css/光标/S2.cur'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
    cursor:url('http://like.gmkh.top/css/光标/S1.cur'), auto;
}

鼠标光标-点击特效 添加

handsome鼠标点击效果

操作要点：自定义输出body 尾部的HTML代码（后台-控制台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码）

方法一： 在后台设置的‘自定义输出body 尾部的HTML代码’里填上以下代码，保存即可；

/*全局-鼠标点击特效*/
<script type="text/javascript"> 
/* 文字可改可增可减 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("帅气", "聪明", "叻仔", "麦霸", "无敌", "多金", "榜一" ,"流行", "稳健", "隆金", "大佬", "前卫"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

复制信息-显示提醒效果 添加

handsome复制提醒

操作要点：自定义 JavaScript（后台-控制台-外观-设置外观-开发者设置-自定义 JavaScript）

步骤： 在后台设置的‘自定义 JavaScript’里填上以下代码，保存即可 （备注：文字内容可更改为自己需要的）；

// 复制成功提示代码开始 
    kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！<br> 本文作者：Zinpan<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "6000"
    })
}}

网站即时在线聊天工具-Crisp 添加

Crisp-Chat在线聊天

操作要点：自定义输出head 头部的HTML代码（后台-控制台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码）

第一步： 到Crisp这个网站注册一个账号，并把自己的网站添加上，然后得到一串HTML代码；

第二步： 在后台设置的‘自定义输出head 头部的HTML代码’里填上Crisp提供的HTML代码，保存即可；

网站新评论-微信推送通知 配置

handsome微信提醒功能

操作要点：plugins文件夹（网站文件-/usr/plugins）

第一步： 下载插件Comment2Wechat，放到文件夹（/usr/plugins），并在网站后台开启插件；

第二步： 到Server酱网站申请SCKEY并把要接收通知信息的微信，按提示绑定上；

第三步： 把SCKEY填到后台的插件设置里，保存即可；

全站黑白模式-悼念特殊日子

请输入图片描述

操作要点：自定义CSS（后台-控制台-外观-设置外观-开发者设置-自定义CSS）

步骤： 在后台设置的‘自定义CSS’里填上以下代码，保存即可；

/*全局-全站黑白模式*/
html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);

404 自动返回首页

handsome 404页面

操作要点：404.php（网站文件-/usr/themes/handsome/404.php）

第一步：打开404.php文件，然后按Ctrl+F搜索关键词<h1 class="text-shadow text-white">404</h1>，然后在此代码下面添加以下代码之后；

<br> <small class="text-muted letterspacing"> <b id="sp">5</b>秒后自动返回···<br> 
   <a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>

第二步：拉到404.php文件编辑页面的最底部，在</body>前面添加以下代码，保存即可；

<script type="text/javascript"> onload = function(){setInterval(go, 500);};var x=5; function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}} </script>

第三步： 若要把默认倒计时5秒返回改成其他，则在第一步的数字5和第二步的go,500与x=5等对应的数字修改成需要即可 （备注：go,500中的500为数字秒数的100倍数，若秒数改成4，则go,400）；

持续更新...

闲言碎语-下拉栏信息默认数量-修改

handsome闲言碎语

操作要点：headnav.php（网站文件-/usr/themes/handsome/headnav.php）

步骤： 打开headnav.php文件，再按Ctrl+F搜索关键词$limit = 3然后把数字3改成其他你想要展示的默认信息数量数值，保存即可；

时光机封面图-灰蒙蒙遮罩-去除

操作要点：自定义 JavaScript（后台-控制台-外观-设置外观-开发者设置-自定义 JavaScript）

步骤： 在后台设置的‘自定义 JavaScript’里填上以下代码，保存即可；

//时光机封面图-灰蒙蒙遮罩-去除
try{
document.getElementsByClassName("wrapper-lg bg-white-opacity")[0].classList.remove("bg-white-opacity");
}catch(err){}

博主名称改成图片形式

请输入图片描述

操作要点：headnav.php（网站文件-/usr/themes/handsome/component/headnav.php）

第一步： 打开headnav.php文件，按Ctrl+F搜索"<a href="<?php $this->options->rootUrl(); ?>/" class="navbar-brand text-lt">"，在这串代码下面添加以下代码之后；

<img src="https:///chelgr.com/share/chelgr-com-icon.png" alt="Smiley face" width="80" height="80" align-item="center">

第二步： 找到以下这段代码之后；

        <span id="navbar-brand-day">
            <?php if ($this->options->logo!=""): ?>
                <?php echo $this->options->logo; ?>
            <?php else: ?>
                <?php if ($this->options->indexNameIcon == ""): ?>
                    <i data-feather="home"></i>
                <?php else: ?>
                    <?php echo Content::returnIconHtml($this->options->indexNameIcon); ?>
                <?php endif; ?>
            <span class="hidden-folded m-l-xs"><?php $this->options->IndexName(); ?></span>
            <?php endif; ?>
        </span>
        <?php if ($this->options->dark_logo!=""): ?>
        <span id="navbar-brand-dark" class="hide"> <?php echo $this->options->dark_logo; ?></span>
        <?php endif; ?>

第三步：注释掉这段代码，保存文件即可；*（用<!--加在代码前面，和-->加在代码后面，如以下：）

<!--        <span id="navbar-brand-day">
            <?php if ($this->options->logo!=""): ?>
                <?php echo $this->options->logo; ?>
            <?php else: ?>
                <?php if ($this->options->indexNameIcon == ""): ?>
                    <i data-feather="home"></i>
                <?php else: ?>
                    <?php echo Content::returnIconHtml($this->options->indexNameIcon); ?>
                <?php endif; ?>
            <span class="hidden-folded m-l-xs"><?php $this->options->IndexName(); ?></span>
            <?php endif; ?>
        </span>
        <?php if ($this->options->dark_logo!=""): ?>
        <span id="navbar-brand-dark" class="hide"> <?php echo $this->options->dark_logo; ?></span>
        <?php endif; ?> -->

持续更新

操作要点：

步骤：

友情链接申请格式

*说明：有兴趣互链的朋友们，欢迎在评论区按上面格式留下你的信息...
文章作者：
 文章地址：https://chelgr.com/3.html
 文章标题：handsome 美化教程 2022 最新 最全 最详细 v8.4.1版本之后（持续更新）
 文章版权：本文由乔戈万事屋 | Chelgr Studio独立整理撰写，转载请保留文章出处。
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏