🎨 Handsome 主题高级美化配置指南
💡 说明书
本文作为 Handsome 10.1.0 Pro 的独家美化调优记录，旨在提升站点的视觉高级感与交互微动效。内容涵盖布局居中、色彩重构、阴影动效、彩色标签、全局字体及右键菜单深度美化。
✨ 提示：新增美化项将持续实时更新。部分灵感来源于网络，如有侵权请留言删除。
🗓 更新时间：2026年07月19日
🏷 适用版本：Handsome 10.1.0 Pro 及以上
🛠 一、 自定义 CSS 篇
进入 Handsome主题后台 -> 外观 -> 设置外观 -> 开发者设置 -> 自定义CSS 粘贴以下代码。
1. 布局与文字居中调整
优化前台视觉重心，让阅读体验更具对称美。
/* 📑 文章页顶部内容居中 */
header.bg-light.lter.wrapper-md {
text-align: center;
}
/* 🏠 首页文章标题居中 */
.post_title_wrapper {
justify-content: center;
}
/* 📅 首页文章日期与页脚信息居中 */
.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
text-align: center;
background-color: #fff;
}2. 配色与悬停动效
注入灵动的交互反馈，告别单调沉闷。
/* 🏷 标签字体颜色白化 */
.badge, .padder-v-ssm {
color: #fff;
}
/* 💸 赞赏按钮呼吸跳动特效 */
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
/* 🔗 首页文章标题悬停渐变色 */
.index-post-title a:hover {
color: #2ebaae;
transition: color 0.3s ease;
}3. 全站极致纯白净化
打造极致的极简白视觉底色。
⚠️ 配置前置条件：需在 后台设置 -> 外观设置 -> 主题色调自定义搭配 中修改为 white-white-white
/* 🥛 白色整体背景 */
div#alllayout { background-color: #fff; }
.night div#alllayout { background-color: #1d1f20; }
/* 🧭 左侧栏 - 顶部栏 - 底部栏净化 */
.bg-white { background-color: #fff; }
.bg-light { background-color: #fff; }
.bg-light .lter, .bg-light.lter { background-color: #fff; }
/* 📂 右侧边栏背景变白 */
.bg-white-only { background-color: #fff; }
/* 📄 文章主体内容变白 */
#post-panel { background: white; }
/* 👤 登录后前台用户头像区域变白 */
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs { background-color: #fff; }4. 质感局部阴影与浮雕圆角
用细腻的阴影为层级结构赋予空间立体感。
/* 🔍 博客信息/搜索框/幻灯片细腻微阴影 */
.box-shadow-wrap-normal {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 📦 站点整体框架四周大阴影 */
.app.container {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.12) !important;
}
/* 📖 文章卡片圆角化与浮雕阴影 */
.panel {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border-radius: 8px !important;
transition: all 0.3s ease;
}
/* 📝 文章内页标题区域立体阴影 */
.bg-white-pure {
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}5. 图片焦点放大与卡片悬浮动效
赋予页面顺畅的物理动态响应。
/* 🖼 首页文章特色图聚焦平滑放大 */
.item-thumb {
cursor: pointer;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.item-thumb:hover {
transform: scale(1.04);
}
/* 🚀 文章卡片鼠标悬停整体上浮特效 */
.blog-post .panel:not(article) {
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}
.blog-post .panel:not(article):hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}6. 糖果色个性化滚动条
定制独一无二的视窗边缘滚动滑块。
/* 🎚 定义滚动条整体宽高尺寸 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 🛣 定义滚动条轨道背景 */
::-webkit-scrollbar-track {
background-color: #ffffff;
}
/* 🎨 定制斜纹糖果色滑块（含圆角与渐变） */
::-webkit-scrollbar-thumb {
background-color: #ff676c;
background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.4) 75%, transparent 75%, transparent);
border-radius: 4px;
cursor: pointer;
}⚡ 二、 自定义 JavaScript 篇
进入 Handsome主题后台 -> 外观 -> 设置外观 -> 开发者设置 -> 自定义Javascript
💡 重要提示：为确保页面异步加载时生效，请将以下核心逻辑注入到 PJAX -> PJAX回调函数 中。
// 🌈 核心彩化与动态逻辑
(function() {
// 1. 左侧导航栏图标随机多彩
let leftHeader = document.querySelectorAll("span.nav-icon>svg, span.nav-icon>i");
let leftHeaderColorArr = ["#ff3300", "#ff3399", "#54d100", "#9900cc", "#0033ff", "#FF6699", "#FF33FF", "#ff8100", "#33CC00", "#FF1493", "#8A2BE2", "#8B3E2F", "#00CC33"];
leftHeader.forEach(tag => {
let tagsColor = leftHeaderColorArr[Math.floor(Math.random() * leftHeaderColorArr.length)];
tag.style.color = tagsColor;
});
// 2. 右侧云标签与徽章随机多色调配
let tags = document.querySelectorAll("#tag_cloud a, #tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939", "#ff1200", "#ff3399", "#ffde00", "#6000ff"];
tags.forEach(tag => {
let tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
let infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
})();
// 💬 评论框追加辅助函数
function addNumber(a) {
var commentBox = document.getElementById("comment");
var length = commentBox.value.length;
commentBox.focus();
if (length > 0) {
commentBox.value += '\n' + a + new Date();
} else {
commentBox.value += a + new Date();
}
}
// ⏳ 页面加载平滑淡出
$(function() {
$("#PageLoading").fadeOut(400);
$("#body").css('overflow', '');
});🎛 三、 核心架构深度修改
⚠️ 轻量劝告：修改源文件代码前请务必本地备份，防止升级丢失。
1. 博主文字打字机动态交互效果
为博客介绍栏增加炫彩跳动打字动效。
📌 修改位置：主题后台 -> 外观 -> 设置外观 -> 初级设置 -> 博主的介绍
(注意：请先完全清空该栏目现有的所有内容再进行粘贴)
<span class="text-muted text-xs block">
<div id="chakhsu"></div>
<script>
var chakhsu = function(r) {
function t() { return b[Math.floor(Math.random() * b.length)] }
function e() { return String.fromCharCode(94 * Math.random() + 33) }
function n(r) { for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n }
function i() { var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) }
/* === 🌈 可自定义配置项 === */
var l = "❤"; // 前缀符号
var o = ["这是我的介绍"].map(function(r) { return r + "" }); // 轮播展示文字
var a = 2, g = 1, s = 5, d = 75;
var b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)" ];
var c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g };
i();
};
chakhsu(document.getElementById('chakhsu'));
</script>
</span>2. 页脚 GitHub Badge 数字化美化
将传统单调的文字页脚重构为极客范的 Badge 徽章聚合排版。
① PHP 主体框架重构
📂 核心文件：/themes/handsome/component/footer.php
用以下优雅的规范排版替换或精简原有版权声明区块：
<div class="wrapper 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>② 徽章基础样式铺垫
📂 样式注入：外观设置 -> 开发者设置 -> 自定义CSS
/* 🏷️ GitHub Badge 样式基础库 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #4d4d4d;
text-shadow: 0px 0.86px 0.2px rgba(51, 51, 51, 0.42);
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: #00a1fd; }
.github-badge .bg-orange { background-color: #ffa500; }
.github-badge .bg-green { background-color: #3bca6e; }
.github-badge .bg-purple { background-color: #ab34e9; }
.github-badge .bg-red { background-color: #ff1010; }③ 底部左侧信息配置
📂 内容注入：外观设置 -> 开发者设置 -> 博客底部左侧信息
<!-- 📊 左侧版权与备案声明 -->
<div class="github-badge">
<span class="badge-subject">Copyright</span>
<a href="https://starsei.com/" target="_blank">
<span class="badge-value bg-orange">©2024 猫不吃鱼</span>
</a>
</div> |
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-beian"></i>京ICP备</span>
<a href="https://beian.miit.gov.cn/" target="_blank">
<span class="badge-value bg-green">2022013581号-1</span>
</a>
</div>④ 底部右侧信息配置
📂 内容注入：外观设置 -> 开发者设置 -> 博客底部右侧信息
<!-- 🚀 右侧服务商与主题声明 -->
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-tengxunyun"></i>本站由</span>
<a href="https://cloud.tencent.com" target="_blank">
<span class="badge-value bg-blue">腾讯云提供服务</span>
</a>
</div> |
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-typecho"></i>Theme by</span>
<a href="https://www.ihewro.com/archives/489/" target="_blank">
<span class="badge-value bg-purple">Handsome</span>
</a>
</div>🔤 四、 全局鸿蒙字体定制
统一全站字体骨架，极大提升大文本的可读性和高级现代感。
- 字体格式预转换：首先挑选您钟爱的字体（推荐 HarmonyOS Sans ），通过格式转换工具将
.otf或.ttf转换成轻量高内聚的.woff或.woff2格式。 - 文件上传：将生成的字体文件上传至服务器 Handsome 默认字体目录中：
/usr/themes/handsome/assets/fonts/ - 样式库引用：前往
外观设置 -> 开发者设置 -> 自定义CSS追加入口代码：
/* 🔤 自定义全局现代鸿蒙字体架构 */
@font-face {
font-family: 'HarmonyOS_Sans_SC_Medium';
font-style: normal;
font-display: swap;
src: url('/usr/themes/handsome/assets/fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'); /* 🛑 请根据实际文件名与路径校准 */
}
* {
font-family: 'HarmonyOS_Sans_SC_Medium', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
font-family: 'HarmonyOS_Sans_SC_Medium' !important;
}🖱 五、 极简气泡右键美化菜单
全面重写右键上下文菜单，屏蔽原生菜单，注入极简高斯模糊气泡框。
📂 内容注入：开发者设置 -> 自定义输出body尾部的HTML代码
(内置已完成 layer.js 的引用依赖配置)
<!-- 🖱 极简气泡自定义右键菜单 HTML & CSS -->
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
<style type="text/css">
a { text-decoration: none; }
div.usercm {
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
font-size: 13px !important;
width: 140px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
position: absolute;
display: none;
z-index: 10000;
opacity: 0.98;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 4px 0;
}
div.usercm ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
div.usercm ul li {
margin: 0;
padding: 0;
line-height: 36px;
}
div.usercm ul li a {
color: #444;
padding: 0 16px;
display: block;
transition: all 0.2s ease;
}
div.usercm ul li a:hover {
color: #fff;
background: rgba(255, 102, 153, 0.9);
}
div.usercm ul li a i {
margin-right: 10px;
}
a.disabled {
color: #c8c8c8 !important;
cursor: not-allowed;
}
a.disabled:hover {
background-color: transparent !important;
}
</style>💡 小结：配置完毕后建议强制刷新浏览器缓存（Ctrl + F5），体验全站焕然一新的高级排版质感吧！
2 条评论
定叫你好评如潮
必须好评如潮！！