还是要先说下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文件中。
网友评论