gridea对于搜索的改动

简介

写博客这么长时间了, 突然发现生成后的文件越来越大, 本博客使用的是 Gridea | 一个静态博客写作客户端生成静态文件, 使用的香港虚拟云空间, 省却备案, 我们就开始找问题,发现是由于 Gridea搜索会把所有的文章放入到页面中, 从而导致页面非常的庞大

不想折腾的可以直接在下面的下载修改后的模板文件, 解压就能使用(文章要看下, 有需要手动处理的search.html)

查找问题

对于一个后端, 对前端不怎么熟悉的人来说, 这可就有点难了。

查看源码

由于用的是next模板, 这边直接看next的模板文件了

点击搜索, 我们发现是id为fa_search的元素, 我们查看其触发方法为foot.ejs文件中的

  let faSearch = document.querySelector('#fa_search');
  faSearch.addEventListener('click', function () {
    document.querySelector('#search_mask').style = ''
  })

就是让id为search_mask 的style设置为空

我们再去查看search_mask 是什么东西?

我们在search.ejs中查看, search_mask原来就点击后出现的搜索框,然后作者应该是通过js来实现搜索的功能。

考虑解决方案

考虑了好多方法, 由于我们的是静态博客, 不可能使用后端服务提供搜索, 并且由于不太懂前端, 最好能使用原来的代码去实现

我们就像能否让这么一大堆的内容不生成在文件中,而是一个独立的文件, 每次搜索的时候, 再去加载此文件。

解决

搜索内容

生成独立的内容, 这一点有点尴尬, 没有找到特别好的方案, 我们只能先打开站内搜索, 生成页面, 手动把生成的内容拿下来, 再关掉站内搜索, 将手动处理的内容保存为search.html

按钮开关位置: 主题-自定义-特征

处理方法: 直接复制带有站内搜索的index.html文件,修改为search.html(放在另外一个目录中, 否者Gridea重新生成文件的时候会删掉), 保留 id为search_mask, 以及处理搜索的一大端js, 其他的全部删掉。

从外部加载

修改foot.ejs, 我们需要在点击搜索框的时候去加载上面处理过的search.html文件

let faSearch = document.querySelector('#fa_search');
  faSearch.addEventListener('click', function () {
  
	var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
	httpRequest.open('GET', '/search.html', true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
	httpRequest.send();//第三步：发送请求  将请求参数写在URL中
	/**
	 * 获取数据后的处理程序
	 */
	httpRequest.onreadystatechange = function () {
		if (httpRequest.readyState == 4 && httpRequest.status == 200) {
			var json = httpRequest.responseText;//获取到json字符串，还需解析
			document.getElementById("search_incloud").innerHTML = json;
			
		   // https://www.iteye.com/blog/blogzhoubo-1716769  innerHtml加载进来的js不会执行
		   var myDivScript = document.getElementById("search_script");
		   var newScript = document.createElement("SCRIPT");
		   newScript.innerHTML = myDivScript.innerHTML;
		   document.getElementsByTagName("HEAD").item(0).appendChild(newScript);  
			
			 document.querySelector('#search_mask').style = ''
		}
	};
  })

保留搜索入口

保留搜索入口, 关闭一大段搜索文件的生成。

header.ejs中在判断中加个!, 标识当在设置中关闭搜索的时候反而会生成此元素

<% if (!site.customConfig.enableSearch) { %>
    <li id="fa_search" class="nav-item">
        <a href="javascript:void(0);">
       		<i class="fa fa-search"></i> <span class="language" data-lan="search">搜索</span>
        </a>
    </li>
<% } %>

after-body.ejs中, 修改如下代码,加入了div#search_incloud

<div id="search_incloud">
<% if (site.customConfig.enableSearch) { %>
<%- include('./search') %>
<% } %>
</div>

总结

优点: 这样改动之后, 文件大大减小之前一篇文章在600KB大小, 当前67篇文章,大概使用了60多M的空间, 优化后单个文件40Kb,只用了6M的空间。

弊端:

空间是节省了,不过由于search.html大小依然是600kb(这个没法省), 导致如果网络不佳的情况下, 加载比较慢,搜索元素点击后, 要过好久才能出搜索弹框。
每次修改,都要手动生成search.html文件

saerch.html处理方法, 防止不看文章的:

**处理方法: 直接复制带有站内搜索的index.html文件,修改为search.html(放在另外一个目录中, 否者Gridea重新生成文件的时候会删掉), 保留 id为search_mask, 以及处理搜索的一大端js, 其他的全部删掉。

文件大概内容查看 search.html, 浏览器右键源代码

更新-2021年10月8日

由于之前的修改有bug, 得到的搜索结果中分页有问题, , 我们进行再次修改, 问题好像是源码的???

更新1:

foot.ejs 我们需要判断search.html是否已经加载过了, 如果已经加载, 我们就不再加载。

更新2:

添加和 , 便于定位删除地方

更新3:

修复分页加载错误的问题

详细debug了源码, 发现search.ejs中appendResults方法有点问题, index就是分页的页码, 当index=2 时, 会拿出2~12的内容。

    function appendResults(index) {
      let htmlResult = '';
      let start = index || 0;
      let end = Math.min(start + pageSize, finds.length);
      ...

修改之后的模板压缩包下载 next-修改包