修改当前主题，页脚增加页面加载耗时显示

之前见过一些页面有在页脚显示当前页面加载耗时以及当前页面查询数据库多少次之类的功能，想着本来这个主题就有一个页面耗时的方法，何不把那个地方修改到页面底部呢？

修改之前请提前备份原文件，避免修改之后无法访问，如果出现问题及时还原备份，并沟通出现原因，这里只是按照我当前使用的版本修改的，M酷大神有些地方已经做了一部分优化

预期效果

先上效果图：

对，你没看错，正式本站的底部显示内容。

实现方式

首先在footer.ftl中需要添加上对应的html标签，用以在js中插值使用
代码如下：

<#if settings.enable_birthday!false>
<div class="site_life">
  <i class="joe-font joe-icon-jiasu"></i>已运行&nbsp;<strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分 <strong class="joe_run__second">00</strong> 秒
</div>
</#if>
<!-- 在该位置添加如下代码 -->
<#if settings.enable_process!false>
<div class="site_life">
<i class="joe-font joe-icon-shijian"></i>页面耗时 <strong class="joe_run_process">10ms</strong>
</div>
</#if>

添加完对应的标签元素，增加一项配置即:enable_process

第二，修改settings.yaml，增加对应的配置参数

    custom_birthday:
      name: custom_birthday
      label: "自定义博客起始时间"
      type: text
      default: ""
      placeholder: "示例：2021/11/11 06:30"
      description: "自定义博客的起始时间/安装时间，作为计算博客运行时间的参照值，请严格按照示例格式填写，否则将导致报错（示例：2021/11/11 06:30）"
    enable_process:
      name: enable_birthday
      label: "展示页面加载时间"
      type: switch
      data-type: bool
      default: false
      description: "在页面底部添加页面加载时间,默认关闭以节省性能"
      options:
        - value: true
          label: 是
        - value: false
          label: 否

按照上述位置添加对应标签即可。

第三，就是修改对应的js方法了，把原本通过console.log出来的内容插入页面底部就wans了
我是直接修改的.mini.js，当然正常不应该这么修改的，我是为了图省事了(忘记写全js文件名了 路径:templates\themes\joe2.0\source\js\min\joe.common.min.js，现已上传七牛云，需要的可以自取 路径:http://image.sammery.com/halo/joe.common.min.js)

修改代码如下：

showLoadTime: function() {
	var e = performance.now();
	if (ThemeConfig.show_loaded_time) {
		
		e && console.log("%c页面加载耗时：" + Math.round(e) + " ms", "padding: 6px 8px;color:#fff;background:linear-gradient(270deg, #4edb21, #f15206);border-radius: 3px;")
	}
	if(ThemeConfig.enable_process){
		var p = $(".joe_run_process")
		p.html(Math.round(e) + " ms")
	}
}

找到上面的方法，按照上述代码修改即可。

然后去后台把对应的开关打开就可以看到相应的效果了，默认是不打开的。

最新版本主题做了修改,前面两个步骤按照步骤走就可以,下面直接上传一下最新版本的js文件,需要的请下载:

http://image.sammery.com/halo/common.min.js