博客魔改教程:在中控台添加帧率显示功能
针对不同博客,改动略有不同,本文仅供参考,我这里把fps开关放到了中控台
效果预览
魔改步骤
- 修改 themes/butterfly/layout/includes/header/nav.pug
#page-name-mask #page-name a#page-name-text(onclick= 'btf.scrollToDest(0,500)')=navTitleName #menus !=partial('includes/header/menu_item', {}, {cache: true}) + #nav-left + #fps-group + #fps + span.fpsText=_p('FPS')
- 修改 themes/butterfly/layout/includes/console.pug
if theme.console.keyboard.enable .console-btn-item#consoleKeyboard(onclick='manxin.keyboardToggle()', title='快捷键开关') a.keyboard-switch i.fas.fa-keyboard .console-btn-item#consoleCommentBarrage(onclick='manxin.switchCommentBarrage()', title='热评开关') a.commentBarrage i.fa-solid.fa-message + .console-btn-item#consoleFPS(onclick='manxin.FPSToggle()', title='帧率显示开关') + a.FPS-switch + i.fas.fa-gauge
- 新建 themes/butterfly/source/manxin/fps.js(引入js略)
let Jay_showFPS = !1; "true" === localStorage.getItem("showFPS") ? ((Jay_showFPS = !0), document.querySelector("#fps-group").classList.add("show"), document.querySelector("#consoleFPS").classList.add("on")) : ((Jay_showFPS = !1), document.querySelector("#fps-group").classList.remove("show"), document.querySelector("#consoleFPS").classList.remove("on")); var showFPS = (function() { let e, t, o, n, a, i = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(e) { window.setTimeout(e, 1e3 / 60); }; (e = 0), (t = Date.now()), (n = function() { (o = Date.now() - t), (e += 1), o >= 1e3 && ((t += o), a(e), (e = 0)), i(n); }), (a = function(e) { $("#fps").html(e); }), n(); })(); var manxin = { FPSToggle: function() { Jay_showFPS ? ((Jay_showFPS = !1), document.querySelector("#fps-group").classList.remove("show"), document.querySelector("#consoleFPS").classList.remove("on"), localStorage.setItem("showFPS", "false")) : ((Jay_showFPS = !0), document.querySelector("#fps-group").classList.add("show"), document.querySelector("#consoleFPS").classList.add("on"), localStorage.setItem("showFPS", "true")); }, };
- 新建 themes/butterfly/source/manxin/fps.css(引入css略)
#fps-group.show { opacity: 1; } .nav-fixed #fps-group, .not-top-img #fps-group { color: var(--Jay-fontcolor); } #fps-group { opacity: 0; display: flex; flex-direction: column; margin-left: 16px; color: var(--Jay-white); } #fps { z-index: 10000; font-size: 12px; font-weight: 700; transition: all 0.3s ease 0s; line-height: 1; } #fps-group .fpsText { font-size: 12px; line-height: 1; opacity: 0.6; }
空空如也!