AI摘要
本文详细介绍了如何优化和美化Typecho博客，包括开启全站HTTPS、添加GZIP压缩、美化永久链接、自定义后台路径、启用Emoji支持等基础设置优化，以及每日新闻自动更新、文章嵌入外部网页、时光机栏目配置、自定义音乐播放器音量等功能增强。此外，还提供了Handsome主题的自定义CSS配置和JavaScript配置，以及安全防护和滚动条优化等高级设置，旨在帮助用户打造一个更完善、更美观、更安全的博客系统。
本文
前言
优化 typecho 博客不仅能提升访问速度，还能改善用户体验和网站安全性。本文将介绍一系列实用的优化配置，帮助你打造一个更完善的博客系统。
基础设置优化
开启全站 HTTPS
HTTPS 不仅能确保网站安全，还能提升搜索引擎排名。配置步骤如下：
- 首先在宝塔面板或通过配置文件给网站配置好 SSL 证书，并开启强制 HTTPS
- 进入网站后台，找到
设置->基本设置->站点地址，将其改为 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
配置步骤：
- 进入后台
设置->永久链接，启用地址重写功能 配置伪静态规则：
- 如果使用宝塔面板：网站 -> 设置 -> 伪静态 -> 选择 Typecho -> 保存
自定义后台路径
为了提高网站安全性，建议修改默认的后台路径：
- 将 Typecho 根目录中的
admin文件夹改名，例如改为dashboard - 修改
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 () {
//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);滚动条优化
顶部滚动进度条
/* 动态滚动进度条 */
$(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 博客的多个方面，从基础设置到功能增强。建议根据实际需求选择性地进行配置，在优化的同时也要注意保持网站的稳定性。
如果你在配置过程中遇到问题，欢迎在评论区讨论。同时也欢迎分享你的优化经验，让我们共同提升博客体验！