Hexo加一个本地同步搜索

还是要先说下hexo的工程结构：

hexo工程结构

其中themes存放的是hexo的模板，我的网站用的是Daily模板，比较好看，比较小众，极简风格，所有当我想做一个搜索时，这个模板都不像其他模板一样已经写好了搜索模块。

public文件夹，是通过模板生成的文件，github上的文件就是public的文件。

源码直接找的这篇文章：
让 Hexo 博客支持本地站内搜索

用WebStorm调试时候，直接打开html可能会不能找到对应的js文件和css文件。记得要去掉“/js/search.js"中的第一个“/”。

如果直接用那篇文章中的代码，可能呈现的结果是：1.搜索结果铺满整个页面，2.滑动页面时，不能滑动搜索结果。

解决：1.搜索结果铺满整个页面

可以归结为一个div覆盖另一个div，将一个div覆盖在另一个div上有两种手段：一是设置margin为负值，二是设置绝对定位。详情可以参见这篇文章
CSS中div覆盖另一个div
在我这里，是为其div增加了一个名为base的属性

#base {
  position: absolute;
  margin-left: 30px;
  width: 250px;
  height: 300px; }

这样就可以把搜索结果限定在这个宽度范围，且在另一个div上面。

解决：2.滑动页面时，不能滑动搜索结果

这个问题可以描述为
移动页面滚动穿透如何解决
千言万语汇成一句话就是，在它上层的div的css文件增加

overflow：auto

我的是在even这个class的css属性中增添的。

更改Daily模板

在上面的更改，只能更改public中的文件，如果用hexo s命令运行，发现我们之前的更改是无效的，因为hexo会重新生成public文件夹中的内容。所以要想要保持修改有效，需要到模板中去修改。

模板

比如我的search.js文件直接添加到模板中，css文件中增加的部分重新写入图中的css文件夹中的文件。

搜索框的div部分，我就直接加在了index.ejs文件中。