使用方法:
在网站的 CSS 代码中添加以下代码
Handsome 主题在后台 设置外观 - 开发者设置 - 自定义 CSS 中添加
[hide]

/* 页面特效 by Leo */
@keyframes pop{
0%{opacity:0;transform:scale(0.2);-ms-transform:scale(0.2);}
60%{opacity:0.75;transform:scale(1.1);-ms-transform:scale(1.1);}
100%{opacity:1;transform:scale(1);-ms-transform:scale(1);}
}
@-moz-keyframes pop{
0%{opacity:0;-moz-transform:scale(0.2);}
60%{opacity:0.75;-moz-transform:scale(1.1);}
100%{opacity:1;-moz-transform:scale(1);}
}
@-webkit-keyframes pop{
0%{opacity:0;-webkit-transform:scale(0.2);}
60%{opacity:0.75;-webkit-transform:scale(1.1);}
100%{opacity:1;-webkit-transform:scale(1);}
}
@keyframes fastr{
0%{opacity:0;transform:translate(0,60px);}
100%{opacity:1;transform:translate(0,0);}
}
@-webkit-keyframes fastr{
0%{opacity:0;-webkit-transform:translate(0,60px);}
100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-moz-keyframes fastr{
0%{opacity:0;-moz-transform:translate(0,60px);}
100%{opacity:1;-moz-transform:translate(0,0);}
}
@keyframes afastr{
0%{opacity:0;transform:translate(0,-60px);}
67%{opacity:1;transform:translate(0,0);}
86%{opacity:1;transform:translate(0,-2px);}
100%{opacity:1;transform:translate(0,0);}
}
@-webkit-keyframes afastr{
0%{opacity:0;-webkit-transform:translate(0,-60px);}
67%{opacity:1;-webkit-transform:translate(0,0);}
86%{opacity:1;-webkit-transform:translate(0,-2px);}
100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-moz-keyframes afastr{
0%{opacity:0;-moz-transform:translate(0,-60px);}
67%{opacity:1;-moz-transform:translate(0,0);}
86%{opacity:1;-moz-transform:translate(0,-2px);}
100%{opacity:1;-moz-transform:translate(0,0);}
}
@keyframes fastscale{
0%{opacity:0;transform:scale(0.2,1) translate(-226px,0);}
100%{opacity:1;transform:scale(1,1) translate(0,0);}
}
@-webkit-keyframes fastscale{
0%{opacity:0;-webkit-transform:scale(0.2,1) translate(-226px,0);}
100%{opacity:1;-webkit-transform:scale(1,1) translate(0,0);}
}
@-moz-keyframes fastscale{
0%{opacity:0;-moz-transform:scale(0.2,1) translate(-226px,0);}
100%{opacity:1;-moz-transform:scale(1,1) translate(0,0);}
}
.fwinmask{animation:pop 0.4s;-moz-animation:pop 0.4s;-webkit-animation:pop 0.4s;}
.p_pop{animation:afastr 0.2s;-moz-animation:afastr 0.2s;-webkit-animation:afastr 0.2s;}
.fastpreview{animation:afastr 0.5s;-webkit-animation:afastr 0.5s;-moz-animation:afastr 0.5s;}
.pct{animation:fastr 0.5s;-webkit-animation:fastr 0.5s;-moz-animation:fastr 0.5s;}
.tip{animation:pop 0.3s;-webkit-animation:pop 0.3s;-moz-animation:pop 0.3s;}
#hd h2{animation:afastr 0.4s;-webkit-animation:afastr 0.4s;-moz-animation:afastr 0.4s;}
#um,#toptb,.pns{animation:afastr 1s;-webkit-animation:afastr 1s;-moz-animation:afastr 1s;}
#hd h2{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;}
#hd h2:hover{transform:scale(1.07) rotate(-1deg);-webkit-transform:scale(1.07) rotate(-1deg);-moz-transform:scale(1.07) rotate(-1deg);}
.avt{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;}
.avt:hover{transform:scale(1.07);-webkit-transform:scale(1.07);-moz-transform:scale(1.07);}
#scbar_txt{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;}
#scbar_txt:focus,#scbar:hover #scbar_txt{width:450px}
#ls_username,#ls_password{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;}
#ls_username:focus,#ls_password:focus{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);}
a{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
a:hover,a:visited:hover{text-shadow:#585858 0px 0px 3px;text-decoration:none;}
.fl_g:hover img{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);}

.appl img,.fl_icn_g img{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
.appl li:hover img{transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);}
.bui{animation:fastscale 0.2s;-webkit-animation:fastscale 0.2s;-moz-animation:fastscale 0.2s;}

[/hide]

将以下代码,复制粘贴到自定义css

彩色标签云

[collapse status="false" title=">>>>>>"]

<!--彩色标签云-->

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

[/collapse]

右侧列表导航栏图标颜色

[collapse status="false" title=">>>>>>"]

/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #52DE97;}
.sidebar-icon svg.feather.feather-message-square{color:#495DC3;}
.sidebar-icon svg.feather.feather-gift{color:#F67280;}

[/collapse]

首页文章版式圆角化

[collapse status="false" title=">>>>>>"]

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

[/collapse]

panel阴影

[collapse status="false" title=">>>>>>"]

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgb(136,136,136);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgb(112,112,112);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgb(112,112,112);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    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 rgb(112,112,112);
}

[/collapse]

首页文章列表悬停上浮

[collapse status="false" title=">>>>>>"]

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgb(88,0,0);
}

[/collapse]

头像呼吸光环和鼠标悬停旋转放大

[collapse status="false" title=">>>>>>"]

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    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]

底部页脚

[collapse status="false" title=">>>>>>"]

/*底部页脚*/
.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
}

[/collapse]

编辑器代码高亮回调pjax函数

[collapse status="false" title=">>>>>>"]

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

[/collapse]

去除顶部博客名称,心情文字居中

[collapse status="false" title=">>>>>>"]

修改Typecho根目录/usr/themes/handsome/index.php文件,。
删除以下代码去除顶部博客名称
<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>
修改以下代码使心情文字居中

<header class="bg-light lter wrapper-md">
修改为
<header class="bg-light lter wrapper-md" style="text-align:center">

[/collapse]

博客信息颜色

[collapse status="false" title=">>>>>>"]

/* 博客信息颜色 */

#blog_info>ul>li:nth-child(1)>span.badge{
    background-color: #0043ff;
}
#blog_info>ul>li:nth-child(2)>span.badge{
    background-color: #cc00ff;
}
#blog_info>ul>li:nth-child(3)>span.badge{
    background-color: #ffb100;
}
#blog_info>ul>li:nth-child(4)>span.badge{
    background-color: #ff0076;
}

[/collapse]

后台路径修改

[collapse status="false" title=">>>>>>"]

将admin文件夹改名,改成你需要的例如abc,然后找到Typecho根目录下的config.inc.php文件,将define('__TYPECHO_ADMIN_DIR__', '/admin/');中的的/admin/改成/abc/即可,以后要登录后台访问xxx.com/abc/即可
若使用handsome主题,还需要在外观设置-外观设置开关,勾选不显示左侧边栏底部菜单

[/collapse]

右侧图像旋转

[collapse status="false" title=">>>>>>"]

.img-square {
    transition: all 0.3s;
    border-radius: 50%;
}

.img-square:hover {
    transform: rotate(360deg);
}

[/collapse]

访客数量和网站响应耗时

[collapse status="false" title="首先将以下代码加到themes/handsome/libs/Content.php中,放在class Content{}之前"]

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

    /**
     * 响应时间
     */
    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;
    }

在/handsome/component/sidebar.php中添加代码

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

复制弹框

[collapse status="false" title=">>>>>>"]首先将下方代码复制添加至后台主题设置自定义输出body 尾部的HTML代码

<!--复制弹框-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

最后复制下方代码打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};

[/collapse]

标题文字颜色

[collapse status="false" title=">>>>>>"]

/*标题文字颜色*/
#post-content h1,
#post-content h2,
#post-content h3,
#post-content h4,
#post-content h5,
#post-content h6 {
    color: #333!important;
    line-height: 1.4;
    font-weight: 700;
    margin: 30px 0 10px 0;
}

[/collapse]

打赏背景图

[collapse status="false" title=">>>>>>"]

/*打赏背景图*/
.support-author{
    background-repeat:round;
    background-image:url(https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/men.webp);
}

[/collapse]
[collapse status="false" title=">>>>>>"]###[/collapse]
[collapse status="false" title=">>>>>>"]###[/collapse]
[collapse status="false" title=">>>>>>"]###[/collapse]
[collapse status="false" title=">>>>>>"]###[/collapse]
[collapse status="false" title=">>>>>>"]###[/collapse]

将下面的css代码,添加到自定义css代码

/* 右侧列表导航栏图标颜色 */
<div>.sidebar-icon svg.feather.feather-thumbs-up{color: #52DE97;}</div>
<div>.sidebar-icon svg.feather.feather-message-square{color:#495DC3;}</div>
<div>.sidebar-icon svg.feather.feather-gift{color:#F67280;}</div>






 welcome.php  博客首次安装成功的欢迎界面
 common.php  检测是否为第一次登陆,检测程序是否可有升级
 common-js.php  消息处理及后台菜单展开的 js
 upgrade.php  程序升级引导
 login.php  登陆界面
 register.php  用户注册页面
 header.php  头部加载 css 和 js 等
 copyright.php  版权声明
 form-js.php  form 对应的 js
 table-js.php  table 对应的 js
 footer.php  页脚
 menu.php  菜单导航条
 extending.php  插件拓展后台菜单的接口
 page-title.php  页面标题
 index.php  进入后台的首页,对应菜单为网站概要
 profile.php  个人设置
 plugins.php  插件管理
 options-plugin.php  插件设置页面
 themes.php  网站外观
 theme-editor.php  编辑模板的页面
 options-theme.php  设置模板的页面即模板后台
 write-post.php  文章撰写页面
 write-js.php  撰写文章/页面时的发布时间,标签,分类,保存草稿等
 file-upload.php  文章 / 页面附件上传,及管理界面
 file-upload-js.php  文章 / 页面附件上传,及管理功能
 custom-fields.php  自定义字段界面
 custom-fields-js.php  自定义字段功能实现
 editor-js.php  编辑器
 write-page.php  创建页面
 manage-posts.php  管理文章界面
 manage-pages.php  管理页面界面
 manage-comments.php  管理评论界面
 manage-categories.php  管理分类界面
 category.php  某个分类的编辑页面
 manage-tags.php  管理标签界面
 manage-medias.php  所有文章的附件管理页面
 media.php  某个附件的管理
 manage-users.php  所有用户管理页面
 user.php  编辑某个用户
 options-general.php  网站基本设置页面
 options-discussion.php  评论设置页面
 options-reading.php  阅读设置页面
 options-permalink.php  永久链接设置页面
 Validate.php  评论信息验证




component/aside.php 左边导航栏
component/comments.php 评论区
component/footer.php 底部版权、音乐播放器之类
component/header.php 页面头,没啥要改的
component/headnav.php 顶部导航
component/say.php 时光机动态
component/sidebar.php 右侧栏目
component/third_party_comments.php 3.3.0新增,第三方评论
css/ 博客CSS,一般不要改
fonts/ 博客字体,一般不要改
img/ 图像,一般不要改
js/ js文件,一般不要改
lang/ 语言文件
libs/Content.php 文章内容
libs/... 一般不要改
usr/ 另一个语言文件?
404.php 404界面
archive.php 整合
booklist.php 书单
cross.php 时光机
files.php 归档
functions.php 配置界面的东西
guestbook.php 留言板
index.php 首页
links.php 友链
page.php 文章页面整合
post.php 文章输出

color: 选填,不填默认为success(绿色),可选值:
light:白色
info:蓝色
dark:深色
success:绿色
black:黑色
warning:黄色
primary:紫色
danger:红色

 文件名 作用  必须
style.css   主题样式文件  否
 screenshot.png 主题缩略图   否
 index.php  首页以及说明文件  是
 404.php  404页面文件  否
 archive.php  通用(分类、搜索、标签、作者)页面文件  否
 category.php  分类页面文件  否
 search.php  搜索页面文件  否
 tag.php  标签页面文件  否
 author.php  作者页面文件  否
 comments.php  评论页面文件  否
 footer.php  底部页面文件  否
 functions.php  主题函数文件  否
 header.php  头部页面文件  否
 page.php  独立页面文件  否
 post.php  日志页面文件  否
 sidebar.php  侧边栏页面文件  否

PS:如果archive.php不存在,index.php也会作为通用页面,实现archive.php的工作。