「记录：搜索功能」

记录：搜索功能

2021/10/04 字数统计： 1.6k 阅读时间： 3 mins 访问次数： ... 评论统计： ...

　　今日成果：提交谷歌站点地图 & 站内搜索功能。
　　因为感冒 + 低烧请了两天假没打神兵，结果学者突然跑路了……一股迷之愧疚感油然而生……总觉得我要是不请假还能多打两天没准就过三连桶了……

向谷歌提交站点地图

生成站点地图

　　使用的插件： hexo-generator-seo-friendly-sitemap
　　安装：在命令行中输入 npm install hexo-generator-seo-friendly-sitemap --save
　　配置：在博客根目录下的 _comfig.yml 文件中添加：

1 2	sitemap: path: sitemap.xml

　　生成：hexo g 之后检查一下博客根目录下的 public 文件夹，应该会出现 sitemap.xml 以及分页的诸多 sitemap 文件，随后 hexo d 更新博客即可。

故障：上传后 sitemap.xml 404

　　部署完毕后遇到一个问题：/sitemap.xml 在本地和 github 仓库中都可以正确预览，但是 https://4o.cx/sitemap.xml 却始终返回 404。
　　仔细检查之后发现站点地图中的链接并不是已经设置好的自定义域名，而是 github page 的默认域名，推测：hexo 域名没有正确配置，自定义域名下的所有内容均是从 hekatech.github.io 转发来的，而 sitemap.xml 发生了转发错误，因此无法读取。
　　修正：打开博客根目录下的 _comfig.yml，将网址设置部分变更如下：

1
2
3

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://4o.cx

　　这个注释确实很有迷惑性，看起来好像你用了 github page 就一定要填它给的默认连接，实际上这个数据是用来生成所有页面的网址的，所以应该填入的是 当前使用的域名 才对……
　　变更设定后网站地图中收录的链接变成了 https://4o.cx/...，上传后也可以正常显示了。

站内搜索

　　我以为这玩意做起来很简单只要全抄就行了结果折腾到半夜……

生成搜索内容

　　使用的插件：hexo-generator-search
　　配置：在 hexo/_config.yml 中添加如下内容：

search:
  path: search.xml
  field: post
  content: true

　　本来我试图用 json 的（因为我对 xml 的可读性实在评价不高），然而插件作者给的示例搜索 JS 是处理 xml 的，把搜索文件换成 json 以后它就不跑了……然后它生成的这个 xml 文件似乎也不是很标准，反正控制台一直会报错：XML パースエラー: 整形式になっていません。
　　但总之虽然报错也还是能跑，这个问题就先鸽置了【

创建搜索页面

　　插件作者很贴心地把自己主题的 layout 放出来共大家参考（抄作业），而且刚好也是 ejs 诶！那么我当然是快乐地直接拿来了，为了 css 样式和动画最后修改成如下：

<% if (config.search) { %>
  <div class="search-block">
    <div id="site_search">
      <div class="form-group">
        <input type="text" id="local-search-input" name="q" results="0" placeholder="<%= __('search') %>" class="st-search-input st-default-search-input form-control"/>
      </div>
    </div>
    <div id="local-search-result"></div>
  </div>
<% } %>

创建搜索代码

　　直接引用原作者给出的示例 JS 后，在下方追加：

<script type="text/javascript">
  var path = "/search.xml";
  // 把引号里替换成 `_config.yml` 中设置的搜索文件地址
  searchFunc(path, 'local-search-input', 'local-search-result');
</script>

　　完成后在搜索框内输入内容就会弹出结果了。

侧边栏搜索按钮 & 弹窗动画

　　目前本站的搜索功能调出方式是：点击侧边栏的搜索按钮 → 从右侧滑出搜索页面 → 在搜索框中输入关键词 → 显示搜索结果
　　具体的实现方法如下：

在主题设置文件中创建侧边栏按钮，将连接指向 javascript:;
将搜索框最外侧元素（如果照抄了我的 ejs 那么这里就是 .search-block）的样式设置为如下：
1
2
3
4
5
6
7
8
.search-block {
position: fixed;
width: auto;
min-width: 0;
left: 0;
right: 0;
height: 100vh;
}
此时搜索框应该是悬浮在整个页面上方的，如果不是，请调整 z-index 样式

在 JS 文件中添加如下内容：

$("a[title='搜索']").click(function(e){
// 单击 title 为「搜索」的链接时执行以下事件
// 如果你的主题为侧边栏按钮生成了单独的类名 / id，也可以使用常规选择器
  $('.search-block').toggleClass('in');
  // 为搜索框添加 / 删除 classname="in"
  $(this).toggleClass('active');
  // 在显示搜索框的同时激活搜索按钮，如无需求可以删去这一行
});

最后将 .search-block 的 left 值设置成 100% 使它默认隐藏，再为 .search-block.in 添加 left: 20%

最终完成的 css 样式如下：

.search-block {
  position: fixed;
  width: auto;
  min-width: 0;
  left: 100%;
  right: 0;
  height: 100vh;
  background: rgba(0,0,0,0.9);
}
.search-block.in {
  left: 20%;
}

已知问题

　　是说这个搜索插件还是有一些瑕疵……除了 xml 格式报错之外还有一个非常无语的问题就是，代码框的行号也会被当成正文内容统计进去，搜索 1234 几乎会返回所有添加了代码框的文章。我不知道这个问题是不是和 xml 生成格式有关……总之今天已经很累了，睡大觉睡大觉 :4o-3:
　　以及新发现的一个灵异问题：在某个特定宽度下代码框的横向滚动条会无限向右延伸……虽然调整了页面宽度之后这个问题暂时没有再复现了但是 WTF？？？

無色人間。