handsome主题美化及优化：10.1.0最新版 - 2

前言

优化 typecho 博客不仅能提升访问速度，还能改善用户体验和网站安全性。本文将介绍一系列实用的优化配置，帮助你打造一个更完善的博客系统。

基础设置优化

开启全站 HTTPS

HTTPS 不仅能确保网站安全，还能提升搜索引擎排名。配置步骤如下：

1. 首先在宝塔面板或通过配置文件给网站配置好 SSL 证书，并开启强制 HTTPS
2. 进入网站后台，找到设置 -> 基本设置 -> 站点地址，将其改为 https 开头的网址

添加 GZIP 压缩

GZIP 压缩可以显著减小带宽压力，加快网站加载速度。在 config.inc.php 文件中添加以下配置：

/** 开启gzip压缩 */
ob_start('ob_gzhandler');

美化永久链接

可以去掉 URL 中的 index.php，使链接更加简洁：

更改前：https://example.com/index.php/archives/5.html
更改后：https://example.com/archives/5.html

配置步骤：

1. 进入后台 设置 -> 永久链接，启用地址重写功能
2. 配置伪静态规则：
   • 如果使用宝塔面板：网站 -> 设置 -> 伪静态 -> 选择 Typecho -> 保存

自定义后台路径

为了提高网站安全性，建议修改默认的后台路径：

1. 将 Typecho 根目录中的 admin 文件夹改名，例如改为 dashboard
2. 修改 config.inc.php 文件中的后台路径配置：

/* 后台路径(相对路径) */
define('TYPECHO_ADMIN_DIR', '/dashboard/');

启用 Emoji 支持

要让 Typecho 完美支持 emoji 表情，需要修改数据库编码。执行以下 SQL 语句：

alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;

然后修改 config.inc.php 中的数据库配置：

$db->addServer(array ('host'      =>  'localhost', 'user'      =>  'root','password'  =>  'root','charset'   =>  'utf8mb4',  // 修改这一行'port'      =>  3306,'database'  =>  ''
), Typecho_Db::READ | Typecho_Db::WRITE);

功能增强

每日新闻自动更新

创建一个独立页面，添加以下代码即可显示每日新闻图片：

<img src="https://api.4rz.cn/zbPhoto.jpg" />

或者使用备用接口：

<img src="http://api.03c3.cn/zb" />

文章嵌入外部网页

在文章中使用以下代码可以嵌入外部网页：

<iframe align="center" width="100%" height="740px" src="目标网页地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0">
</iframe>

时光机栏目配置

在主题后台的时光机配置 -> RSS动态内容配置中添加以下内容：

{"id": "iciba","name": "每日一句","url": "https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster"
},
{"id": "bing","name": "Bing 壁纸","url": "https://proxy.attainment.cn/https://rss.attainment.cn/bing"
},
{"id": "DailyArt","name": "每日艺术","url": "https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh"
}

自定义音乐播放器音量

在主题后台的设置外观 -> 开发者设置 -> 自定义JS中添加：

setTimeout(function() {document.querySelector(".skPlayer-source").volume = 0.3;
}, 3000);

音量范围为 0.0-1.0，默认为 0.3，可根据需要调整。

自定义CSS配置

本节主要介绍 Handsome 主题的美化配置，所有 CSS 代码都需要添加到主题后台的外观 -> 设置外观 -> 开发者设置 -> 自定义CSS中。部分涉及 PJAX 回调的代码需要添加到外观 -> 外观设置 -> PJAX -> PJAX回调函数中。

文章标题居中显示

/* 文章标题居中 */
header.bg-light.lter.wrapper-md {text-align: center;
}/* 首页标题文字居中 */
.m-t-none.text-ellipsis.index-post-title.text-title {text-align: center !important;
}

标题背景美化

/* 文章页h标签背景颜色修改 */
#post-content h1, #post-content h2 {background: linear-gradient(to bottom, transparent 60%, rgba(0,191,255,.3) 0) no-repeat;
}

文章版式优化

/* 首页文章版式阴影颜色 */
.panel {box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}.panel:hover {box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);-moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}/* 首页文章版式圆角化 */
.panel {border: none;border-radius: 15px;
}.panel-small {border: none;border-radius: 15px;
}.item-thumb {border-radius: 15px;  
}/* 首页文章列表悬停上浮 */
.blog-post .panel:not(article) {transition: all 0.3s;
}.blog-post .panel:not(article):hover {transform: translateY(-10px);box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

LOGO 扫光特效

/* logo扫光 */
.navbar-brand {position: relative;overflow: hidden;margin: 0px 0 0 0px;
}.navbar-brand:before {content: "";position: absolute;left: -665px;top: -460px;width: 200px;height: 15px;background-color: rgba(255,255,255,.5);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: searchLights 6s ease-in 0s infinite;animation: searchLights 6s ease-in 0s infinite;
}@keyframes searchLights {40% { left: -100px; top: 0; }60% { left: 120px; top: 100px; }80% { left: -100px; top: 0px; }
}

头像动画效果

/* 鼠标经过头像旋转放大 */
.img-circle {border-radius: 50%;animation: light 4s ease-in-out infinite;transition: all 0.5s;
}.img-circle: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; }
}/* 时光机圆形头像 */
.img-square {border-radius: 50%;transition: all 0.3s;
}.img-square:hover {transform: rotate(360deg);
}.list-group-item .thumb-sm .img-square {border-radius: 5px;
}

图片悬停效果

/* 首页文章图片获取焦点放大 */
.item-thumb {cursor: pointer;  transition: all 0.6s;  
}.item-thumb:hover {transform: scale(1.05);  
}.item-thumb-small {cursor: pointer;  transition: all 0.6s;
}.item-thumb-small:hover {transform: scale(1.05);
}

滚动条美化

/* 美化网站右侧滚动条样式 */
::-webkit-scrollbar {width: 8px;height: 6px;
}::-webkit-scrollbar-track {background-color: transparent;-webkit-border-radius: 2em;border-radius: 2em;
}::-webkit-scrollbar-thumb {background-color: #949494;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;border-radius: 2em;
}

评论区美化

/* 评论边框 */
.comment-parent {margin: 20px;padding: 20px;border-radius: 25px;border: 1px solid rgba(255,255,255,.3);
}

标签云优化

/* 词云等距美化 */
#tag_cloud-2 a {border-radius: 5px;width: 32%;
}

赞赏按钮动画

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

文本样式优化

/* 粗斜体上色 */
strong {color: #f26522;
}em {font-style: normal;color: #fcaf17;
}

海浪背景

在主题后台的开发者设置 -> 自定义CSS中添加：

/* 海浪背景CSS部分 */
#wavesDIV {position: fixed;bottom: 0;width: 100%;display: block;height: 20vh;background-color: rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;
}.waves {position: relative;width: 100%;height: 15vh;margin-top: -15vh;min-height: 100px;max-height: 150px;
}.parallax > use {animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;
}.parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;
}.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;
}.parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;
}@keyframes move-forever {0% { transform: translate3d(-90px, 0, 0); }100% { transform: translate3d(85px, 0, 0); }
}@keyframes move-out {0% { transform: translateY(400%); }100% { transform: translateY(0%); }
}

在主题后台的开发者设置 -> 自定义输出head头部的HTML代码中添加：

<!-- 海浪背景 -->
<div id="wavesDIV" style="display: block;"><svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use><use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use><use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use><use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use></g></svg>
</div>

全站黑白模式

可以选择以下任一方式开启全站黑白模式：

/* 方式一 */
html {-webkit-filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);filter: grayscale(100%);-webkit-filter: grayscale(1);
}/* 方式二（简化版） */
html {-webkit-filter: grayscale(100%);
}

移动端优化

/* 手机端不显示热门文章和标签云 */
@media (max-width:767px) {#tabs-4, #tag_cloud-2 {display: none;}
}

自定义JavaScript配置

本节介绍 Handsome 主题的 JavaScript 自定义配置，所有代码都需要添加到主题后台的外观 -> 设置外观 -> 开发者设置 -> 自定义 JavaScript中。部分涉及 PJAX 回调的代码需要添加到外观 -> 外观设置 -> PJAX -> PJAX回调函数中。

复制功能优化

禁止复制

document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");

复制成功提示

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

复制文章自动添加版权

/* 复制文章自动带版权 */
document.body.addEventListener('copy', function (e) {if (window.getSelection().toString() && window.getSelection().toString().length > 42) {setClipboardText(e);notie({type: 'info',text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。', autoHide: true})}
});function setClipboardText(event) {var clipboardData = event.clipboardData || window.clipboardData;if (clipboardData) {event.preventDefault();var htmlData = ''+ '著作权归作者所有。<br>'+ '商业转载请联系作者获得授权，非商业转载请注明出处！<br>'+ '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！<br>'+ '作者：岁月无声<br>'+ '链接：' + window.location.href + '<br>'+ '来源：http://blog.ybyq.wang/<br><br>'+ window.getSelection().toString();var textData = ''+ '著作权归作者所有。\n'+ '商业转载请联系作者获得授权，非商业转载请注明出处！\n'+ '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'+ '作者：hellolin.cn\n'+ '链接：' + window.location.href + '\n'+ '来源：http://blog.ybyq.wang/\n\n'+ window.getSelection().toString();clipboardData.setData('text/html', htmlData);clipboardData.setData('text/plain', textData);}
}

界面特效

鼠标点击爱心特效

// 鼠标点击出现爱心特效
(function(window,document,undefined){var hearts = [];window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback){setTimeout(callback,1000/60);}})();init();function init(){css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");attachEvent();gameloop();}function gameloop(){for(var i=0;i<hearts.length;i++){if(hearts[i].alpha <=0){document.body.removeChild(hearts[i].el);hearts.splice(i,1);continue;}hearts[i].y--;hearts[i].scale += 0.004;hearts[i].alpha -= 0.013;hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;}requestAnimationFrame(gameloop);}function attachEvent(){var old = typeof window.onclick==="function" && window.onclick;window.onclick = function(event){old && old();createHeart(event);}}function createHeart(event){var d = document.createElement("div");d.className = "heart";hearts.push({el : d,x : event.clientX - 5,y : event.clientY - 5,scale : 1,alpha : 1,color : randomColor()});document.body.appendChild(d);}function css(css){var style = document.createElement("style");style.type="text/css";try{style.appendChild(document.createTextNode(css));}catch(ex){style.styleSheet.cssText = css;}document.getElementsByTagName('head')[0].appendChild(style);}function randomColor(){return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";}
})(window,document);

网站加载完成提示

/* 网站加载完成提示 */
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"
})

FPS 显示

/* FPS显示 */
var console={};
console.log=function(){};$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ var requestAnimationFrame =  window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/60); }; var e,pe,pid,fps,last,offset,step,appendFps; fps = 0; last = Date.now(); step = function(){ offset = Date.now() - last; fps += 1; if( offset >= 1000 ){ last += offset; appendFps(fps); fps = 0; } requestAnimationFrame( step ); }; appendFps = function(fps){ console.log(fps+'FPS');$('#fps').html(fps+'FPS');};step();
})();

左侧图标颜色和彩色标签云

/* 左侧图标颜色and彩色标签云 */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];info.style.backgroundColor = infosColor;
});let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];tag.style.color = tagsColor;
});

动态网站标题

/* 动态网站标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {if (document.hidden) {$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");document.title = '网页崩溃了！！！';clearTimeout(titleTime);}else {$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp");document.title = '咦，又好啦(✿◡‿◡)' ;titleTime = setTimeout(function () {document.title = OriginTitle;}, 2000);}
});

打字动画效果

/* 打字动效 */
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;
POWERMODE.shake=false;
document.body.addEventListener("input",POWERMODE);

安全防护

防止调试

/* 防调试 */
$(document).ready(function () {document.oncontextmenu = function () {return false;}document.onkeydown = function () {//f12if (window.event && window.event.keyCode == 123) {event.keyCode = 0;event.returnValue = false;layer.msg("球球了，别再扒孩子了=.=")return false;}//ctrl+uif (event.ctrlKey && window.event.keyCode == 85) {return false;}//ctrl+shift+iif ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {return false;}// Ctrl+Selse if ((event.ctrlKey) && (event.keyCode == 83)) {return false;}};
});//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="https://blog.ybyq.wang"}});
console.log(element);

滚动条优化

顶部滚动进度条

/* 动态滚动进度条 */
$(window).scroll(function() {var winTop = $(window).scrollTop(), //滚动条的位置docHeight = $(document).height(),   //文档高度winHeight = $(window).height(); //窗口高度var scrolled = (winTop / (docHeight - winHeight))*100;$('.scroll-line').css('width', (scrolled + '%'));
});

注意：需要关闭后台的固定头部和固定导航，效果最佳。

总结

以上优化方案涵盖了 Typecho 博客的多个方面，从基础设置到功能增强。建议根据实际需求选择性地进行配置，在优化的同时也要注意保持网站的稳定性。
如果你在配置过程中遇到问题，欢迎在评论区讨论。同时也欢迎分享你的优化经验，让我们共同提升博客体验！

---

作者：xuan
个人博客：https://blog.ybyq.wang
欢迎访问我的博客，获取更多技术文章和教程。