前言

  • 本页介绍的方法大部分不涉及插件，需手动复制黏贴至博客主题设置或博客文件操作 且大部分有对应插件。
  • 建议收藏备忘，本文涉及代码操作的地方皆有注释，以便后期修改。
  • 本文章内容部分来源自网络，由本站整合。
  • 在操作前，请务必备份相关文件和设置。
  • 本教程所用方法仅适于Handsome主题，其他主题未尝试。
  • 文章有问题或者过时，请留言。由于操作不当等问题导致博客无法使用，本博不承担任何责任。
  • 本文持续更新，如果有比较好的美化方案，可以联系我加上去。

开始

Handsom文件目录说明

Handsom文件目录说明 

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       文章输出

1.网站字体修改

网站字体修改

自定义网站使用的文字，其实有很多插件可以实现此功能，包括但不限于 AliceStyle
AliceStyle插件作者@萌卜兔

使用方法：

打开Handsome主题设置界面，找到“开发者设置”选项在以下两项中加入对应内容即可，字体效果见本站。

  1. 自定义CSS
 /*自定义字体*/
 body {font-family: 'ZCOOL XiaoWei';}
  1. 自定义输出head头部的HTML代码
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" />
  1. 其他自定义字体
【站酷快乐体】
自定义CSS：font-family: 'ZCOOL KuaiLe';
Google Fonts API：https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe
当然，如果你动手能力较强，还可以使用其他字体

2.文末赞赏按钮跳动

文末赞赏按钮跳动

使用方法：
复制下列代码至 后台>外观>设置外观>开发者设置>自定义CSS

/* 赞赏按钮跳动 */

@keyframes drop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}

div.support-author>button.btn-pay {
    animation: drop 1s infinite;
}

button.btn-pay {
    color: #fff!important;
    background-color: #b29d6d;
    border-color: #b29d6d;
}

3.代码高亮

代码高亮

此为插件
代码高亮修改，支持多种语言，但主题自带的似乎就够了，此插件是我以前在主题作者没有开发出现在代码框的时候使用的，现在我已经不用这个了

使用方法：

下载本插件，解压放至usr/plugins/目录中
文件夹名改为CodePrettify
登录管理后台，激活插件

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

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

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。

使用方法：
将以下代码添加至 后台主题设置>自定义CSS 

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

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

/*头像呼吸光环：*/
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

    to {
        box-shadow: 0 0 16px #f00;
    }
}

5.全局彩色标签

全局彩色标签

sunpma的版本是通过在模板自带的开发者选项中插入JS代码实现的标签云上色功能，但由于网站主要的跳转逻辑都是pjax刷新的内容，所以需要额外复制代码到pjax回调函数上，否则切换页面后标签云会掉色

使用方法：

将下列代码添加到 设置外观>开发者设置>自定义 JavaScript和 设置外观>PJAX>PJAX回调函数中即可

/*全局彩色标签*/
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;
});

6.为你的博客添加UserAgent

为你的博客添加UserAgent

此插件只适用于Handsome主题，目前未对其它主题测试优化！！！

使用方法：

下载本插件，解压放到usr/plugins/目录中
文件夹名改为UserAgent
修改Handsome主题，component目录下的comments.php代码文件，大概第60~80行左右

7.网站加载完成提示

网站加载完成提示

为网站添加加载完毕的提示

使用方法：

复制下面代码到 handsome主题>设置外观>开发者设置>自定义JavaScript

/* 网站加载完成提示开始 */ 
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})
/* 网站加载完成提示结束 */

8.复制成功提示

复制成功提示

此处内容需要评论回复后（审核通过）方可阅读。

9.复制文章带有文章版权

复制文章带有文章版权

此处内容需要评论回复后（审核通过）方可阅读。

10.添加文章页脚版权信息

添加文章页脚版权信息

此处内容需要评论回复后（审核通过）方可阅读。

11.Handsome底部页脚标签

Handsome底部页脚标签

此处内容需要评论回复后（审核通过）方可阅读。

12.炫彩鼠标指针图标及点击效果

炫彩鼠标指针图标及点击效果

此处内容需要评论回复后（审核通过）方可阅读。

13.自定义滚动条滑块

自定义滚动条滑块

此处内容需要评论回复后（审核通过）方可阅读。

14.鼠标点击特效​

鼠标点击特效

此处内容需要评论回复后（审核通过）方可阅读。

15.顶部导航天气

顶部导航天气

此处内容需要评论回复后（审核通过）方可阅读。

16.魔性动态标题

魔性动态标题

此处内容需要评论回复后（审核通过）方可阅读。

17.网站加载耗时

网站加载耗时

此处内容需要评论回复后（审核通过）方可阅读。

18.访客总数统计

访客总数统计

此处内容需要评论回复后（审核通过）方可阅读。

19.首页文章添加圆角效果

首页文章添加圆角效果

此处内容需要评论回复后（审核通过）方可阅读。

20.博主介绍彩色打字特效

博主介绍彩色打字特效

此处内容需要评论回复后（审核通过）方可阅读。

21.评论框打字烟花及震动特效

评论框打字烟花及震动特效

此处内容需要评论回复后（审核通过）方可阅读。

22.自定义文章头图

自定义文章头图

此处内容需要评论回复后（审核通过）方可阅读。

23.自定义右侧热门文章图标

自定义右侧热门文章图标

此处内容需要评论回复后（审核通过）方可阅读。

24.自定义添加左侧导航

自定义添加左侧导航

此处内容需要评论回复后（审核通过）方可阅读。

25.开启网站gzip压缩

开启网站gzip压缩

此处内容需要评论回复后（审核通过）方可阅读。

26.禁用F12键

禁用F12键

此处内容需要评论回复后（审核通过）方可阅读。

27.自定义右键菜单美化

自定义右键菜单美化

此处内容需要评论回复后（审核通过）方可阅读。

28.文章内挂载视频

文章内挂载视频

此处内容需要评论回复后（审核通过）方可阅读。

29.自定义后台路径

自定义后台路径

此处内容需要评论回复后（审核通过）方可阅读。

30.在线客服Crisp

在线客服Crisp

此处内容需要评论回复后（审核通过）方可阅读。

31.右边侧栏加入每日pixiv热榜图片

右边侧栏加入每日pixiv热榜图片

此处内容需要评论回复后（审核通过）方可阅读。

32.一键评论打卡

一键评论打卡

此处内容需要评论回复后（审核通过）方可阅读。

33.网页文字禁止复制

网页文字禁止复制

此处内容需要评论回复后（审核通过）方可阅读。

34.正文结束及版权

正文结束及版权

此处内容需要评论回复后（审核通过）方可阅读。

35.左侧导航多彩图标

左侧导航多彩图标

此处内容需要评论回复后（审核通过）方可阅读。

36.等距标签云

等距标签云

此处内容需要评论回复后（审核通过）方可阅读。

37.新年喝彩横图

新年喝彩横图

此处内容需要评论回复后（审核通过）方可阅读。

38.每日新闻

每日新闻

此处内容需要评论回复后（审核通过）方可阅读。

39.添加右侧全站字数、在线人数、响应耗时和访客总数

添加右侧全站字数、在线人数、响应耗时和访客总数

此处内容需要评论回复后（审核通过）方可阅读。

40.自定义添加的表情包显示过大

自定义添加的表情包显示过大

此处内容需要评论回复后（审核通过）方可阅读。

41.鼠标点击特效​第二种

第二种

此处内容需要评论回复后（审核通过）方可阅读。

42.魔性动态标题第二种

魔性动态标题第二种

此处内容需要评论回复后（审核通过）方可阅读。

43.在文章顶部添加百度是否收录

在文章顶部添加百度是否收录

此处内容需要评论回复后（审核通过）方可阅读。

44.生成当前文章标签

生成当前文章标签

此处内容需要评论回复后（审核通过）方可阅读。

45.顶部导航栏添加网页动态滚动进度条|滚动指示器

顶部导航栏添加网页动态滚动进度条|滚动指示器

此处内容需要评论回复后（审核通过）方可阅读。

46.评论邮件提醒插件

评论邮件提醒插件

此处内容需要评论回复后（审核通过）方可阅读。

47.时光机栏目增添额外内容

时光机栏目增添额外内容

此处内容需要评论回复后（审核通过）方可阅读。

48.打字出现烟花的动画效果（非插件方法）

打字烟花的动画效果（非插件方法））

此处内容需要评论回复后（审核通过）方可阅读。

最后修改：2022 年 08 月 04 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏