如何给你的网站添加FPS监测

添加FPS监测

在source/js文件下创建custom.js，在_config.butterfly.yml中引入js

inject:

    bottom:
    - <script data-pjax async type="text/javascript" src="/js/custom.js"></script>

添加js代码

在js中写入

//检查是否开启FPS
if (localStorage.getItem('FPSToggle') == 'true') {
    bieyinan_FPS = true;
    document.querySelector("#fps-group").classList.add("show");
    document.querySelector("#consoleFPS").classList.add("on");
} else {
    bieyinan_FPS = false;
    document.querySelector("#fps-group").classList.remove("show");
    document.querySelector("#consoleFPS").classList.remove("on");
}
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) {
        document.querySelector("#fps").innerHTML=fps
    };
    step();
})();

找到themes/butterfly/layout/includes/header/nav.pug文件

    div.mask-name-container
      center(id="name-container")
        a(id="page-name" href="javascript:bieyinan.scrollToDest(0, 500)") PAGE_NAME

    #menus
      !=partial('includes/header/menu_item', {}, {cache: true})
    
+    #nav-left 
+      #fps-group
+        #fps
+        span.fpsText= 'FPS'

加号表示添加代码，复制之后记得删除+号

添加css代码

在source/css中创建custom.css，引入css文件，在_config.butterfly.yml中引入css

inject:

   head:
   - <link rel="stylesheet" type="text/css" href="/css/custom.css">

这是我自己用的css，也可以修改成自己喜欢的样式

/* FPS */
#page-header #nav #nav-left {
  z-index: 102;
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  margin-right: 1.5rem;
  overflow: hidden;
}

.nav-fixed #fps-group, .not-top-img #fps-group {
  color: var(--bieyinan-fontcolor);
}

#fps-group {
  opacity: 0;
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  color: var(--bieyinan-white);
}

#fps-group.show {
  opacity: 1;
  filter: none;
}

#fps {
  z-index: 10000;
  font-size: 12px;
  transition: 0.3s;
  font-weight: bold;
  line-height: 1;
}

.fpsText {
  font-size: 12px;
  line-height: 1;
  opacity: 0.6;
}

/* 下面两个可以不复制 */
@media screen and (max-width: 1400px) {
  #fps-group.show {
    opacity: 0;
    filter: none;
  }
}

@media screen and (max-width: 760px) {
  #fps-group.show {
    opacity: 1;
    filter: none;
  }
}

添加完就可以看到效果了，效果如下：

当然如果你还不满足于此还可以添加中控台FPS开关，不想添加问题也不大

添加中控台开关

首先要先找到中控台代码页面，我的路径是themes/butterfly/layout/includes/bieyinan/console.pug
在你觉得合适的地方添加，当然我是添加在最下面，在

+.console-btn-item#consoleFPS(onclick='bieyinan.FPSToggle()', title='FPS开关')
+    a.FPS-switch
+        i.bi.bi-fan
.console-mask(onclick='bieyinan.hideConsole()', href='javascript:void(0);')

这行代码的上面，如果不知道放哪里可以跟我一样，图标需要自己改一下，我用的是bootstrap的图标库。

在themes/butterfly/source/js/main.js文件中添加变量

1	var bieyinan_FPS = localStorage.getItem("FPSToggle") ? localStorage.getIte("FPSToggle") : false;

名字可以自己修改，后面对的上就行，在themes/butterfly/source/js/utils.js文件中添加函数

FPSToggle: function () {
    const isKeyboardOn = bieyinan_FPS;
    const FPSgroup = document.querySelector("#fps-group");
    const consoleFPS = document.querySelector("#consoleFPS");
    if (isKeyboardOn) {
      FPSgroup.classList.remove("show");
      consoleFPS.classList.remove("on");
      bieyinan_FPS = false;
    } else {
      FPSgroup.classList.add("show");
      consoleFPS.classList.add("on");
      bieyinan_FPS = true;
    }

    localStorage.setItem("FPSToggle", isKeyboardOn ? "false" : "true");
  },