博客优化细节记录 - 仅针对Handsome主题

准备把针对Handsome主题的优化细节做个记录，在持续使用本主题的情况下，会持续更新。
但不限于以Typecho框架搭建的博客

⭐ 左侧博主的介绍彩色闪动文字

<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 = "❤", o = ["生命不息，折腾不止。"].map(function(r) { return r + "" }), a = 2, g = 1, s = 5, d = 75, 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)" ], c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span>

⭐ Gravatar镜像源地址（头像加载速度很快）

https://gravatar.loli.top/avatar

⭐ 主题色调自定义搭配（主题首页左中右配色）

white-white-white

⭐ 头像图片地址（修改QQ号自动提取当前QQ号头像）

https://q1.qlogo.cn/g?b=qq&nk=71108363&s=640

⭐ 原生评论框的背景图片（建议做本地化）

https://w1.kukuda.cn/web/kkd/style/image/bilibili1.gif

⭐ 给404页添加随机背景图

<style>
    body {
        /*背景图片URL 可使用随机图片API */
        background-image: url("http://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302");
    }
</style>

添加到Handsome主题文件404.php内124行</body>上面即可。有自己喜欢的调用api也可以自己改网站

⭐ ### 全站页面纯白

全站页面使用白色时，需要在后台设置-外观设置-主题色调自定义搭配修改为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;
}

⭐ 代添加

请输入代码