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

BXCQ_xuan2025-05-17 15:44

文章目录

前言

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

基础设置优化

开启全站 HTTPS

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

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

添加 GZIP 压缩

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

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 文件中的后台路径配置：
php 复制代码 
/* 后台路径(相对路径) */
define('TYPECHO_ADMIN_DIR', '/dashboard/');

启用 Emoji 支持

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

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 中的数据库配置：

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

功能增强

每日新闻自动更新

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

html 复制代码 
<img src="https://api.4rz.cn/zbPhoto.jpg" />

或者使用备用接口：

html 复制代码 
<img src="http://api.03c3.cn/zb" />

文章嵌入外部网页

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

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

时光机栏目配置

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

json 复制代码 
{
  "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中添加：

javascript 复制代码 
setTimeout(function() {
  document.querySelector(".skPlayer-source").volume = 0.3;
}, 3000);

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

自定义CSS配置

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

文章标题居中显示

css 复制代码 
/* 文章标题居中 */
header.bg-light.lter.wrapper-md {
  text-align: center;
}

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

标题背景美化

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

文章版式优化

css 复制代码 
/* 首页文章版式阴影颜色 */
.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);
}
css 复制代码 
/* 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; }
}

头像动画效果

css 复制代码 
/* 鼠标经过头像旋转放大 */
.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;
}

图片悬停效果

css 复制代码 
/* 首页文章图片获取焦点放大 */
.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);
}

滚动条美化

css 复制代码 
/* 美化网站右侧滚动条样式 */
::-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;
}

评论区美化

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

标签云优化

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

赞赏按钮动画

css 复制代码 
/* 赞赏按钮跳动 */
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

文本样式优化

css 复制代码 
/* 粗斜体上色 */
strong {
  color: #f26522;
}

em {
  font-style: normal;
  color: #fcaf17;
}

海浪背景

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

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代码中添加：

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>

全站黑白模式

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

css 复制代码 
/* 方式一 */
html {
  -webkit-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
  filter: grayscale(100%);
  -webkit-filter: grayscale(1);
}

/* 方式二（简化版） */
html {
  -webkit-filter: grayscale(100%);
}

移动端优化

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

自定义JavaScript配置

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

复制功能优化

禁止复制

javascript 复制代码 
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");

复制成功提示

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> 本文作者：xuan<br>原文链接：" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "5000"
        })
    }
}

复制文章自动添加版权

javascript 复制代码 
/* 复制文章自动带版权 */
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);
    }
}

界面特效

鼠标点击爱心特效

javascript 复制代码 
// 鼠标点击出现爱心特效
(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);

网站加载完成提示

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

FPS 显示

javascript 复制代码 
/* 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();
})();

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

javascript 复制代码 
/* 左侧图标颜色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;
});

动态网站标题

javascript 复制代码 
/* 动态网站标题 */
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);
    }
});

打字动画效果

javascript 复制代码 
/* 打字动效 */
(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);

安全防护

防止调试

javascript 复制代码 
/* 防调试 */
$(document).ready(function () {
    document.oncontextmenu = function () {
        return false;
    }
    document.onkeydown = function () {
        //f12
        if (window.event && window.event.keyCode == 123) {
            event.keyCode = 0;
            event.returnValue = false;
            layer.msg("球球了，别再扒孩子了=.=")
            return false;
        }
        //ctrl+u
        if (event.ctrlKey && window.event.keyCode == 85) {
            return false;
        }
        //ctrl+shift+i
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
            return false;
        }
        // Ctrl+S
        else 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);

滚动条优化

顶部滚动进度条

javascript 复制代码 
/* 动态滚动进度条 */
$(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

欢迎访问我的博客，获取更多技术文章和教程。

相关推荐
千里马学框架2 天前
一起学 Android 14：ShellTransition 屏幕旋转过程深度剖析
android·智能手机·性能优化·framework·性能·屏幕旋转·rotation
美狐美颜SDK开放平台2 天前
开发直播APP时如何接入视频美颜SDK？开发流程与注意事项
android·人工智能·计算机视觉·音视频·直播美颜sdk
AFinalStone2 天前
Android7 SystemUI源码解析（七）Keyguard锁屏模块深度解析
android·systemui
致远ccc2 天前
Google Play 上架前如何测试 App？多国家 Android 环境测试
android·app测试·googleplay·多国家应用测试
ttyyttemo2 天前
Kotlin 协程中的 Job 结构化并发与取消
android
sun0077002 天前
tbox 4g/5g切换，导致wan ip 改变，导致车机旧网络不可用。需要重启车机才行
android
其实防守也摸鱼2 天前
内网穿透与反向代理：原理、工具与实战指南
android·大数据·运维·安全·网络安全·自动化·渗透
AFinalStone3 天前
Android7 SystemUI 源码解析（四）NavigationBar 导航栏与 SystemBars
android·systemui
JMchen3 天前
属性动画原理与高级动画实现
android·kotlin·canvas
AFinalStone3 天前
Android7 SystemUI 源码解析（二）启动流程深度解析
android·systemui
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法042026年CSP-J初赛分数线-----预测05Telegram APK 下载安装完整指南 — 2026年最新06历年考研数学一、数学二、数学三真题试卷及答案PDF072026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10人工智能（AI）发展史：详细里程碑