Hexo主题更换与魔改·贰·站内搜索页面

Hexo主题系列之二：关于如何在主题里修建搜索页面。

首先和前文的「T&C」一样，建立一个在source下的search的文件夹，并指向一个新建的search.ejs文件。

search的搜索大致分为几个主要的步骤：生成xml搜索文件，生成搜索框，配置搜索的js代码，以及弹出搜索结果。若是最后发现结果出不来就需要回头依次排查。

本文的大部分内容都是根据《Hexo: 从零开始编写自己的主题》进行尝试的。

---

生成xml文件

可以通过在blog文件夹唤起Git的方式，输入：

$ npm install hexo-generator-search --save

或者：

$ npm install hexo-generator-searchdb --save

这两个插件的效果都是一样的，就是在public文件夹中生成一个叫做search.xml的文件。

安装后各需要在站点配置文件中添加相应的代码，这一块不同的插件要求也不一样，甚至前者还需要在主题里配置一个模板，所以这些很容易查到的东西就不再赘述了。

总之，这一阶段成功的标志就是hexo g后在pubilc中见到search.xml，而打开它则是这样的格式：

<?xml version="1.0" encoding="utf-8"?>
<search> 
  
    <entry>
      <title>凌云寨游记</title>
      <link href="/2023/01/23/%E5%87%8C%E4%BA%91%E5%AF%A8%E6%B8%B8%E8%AE%B0/"/>
      <url>/2023/01/23/%E5%87%8C%E4%BA%91%E5%AF%A8%E6%B8%B8%E8%AE%B0/</url>
      
        <content type="html"><![CDATA[<h3 id="序"><a href="#序" class="headerlink" title="序"></a>序</h3><p>近日有感，或许随着岁月白驹过隙，许多本习以为常，以为下次还能见到的事物都会消散。如果这些我经历的事物都没能留下痕迹，如果数十年后我已然丢失这段记忆，那么我希望自己至少能有那么一个小小角落，能捡起曾经的故事，就像在和曾经的自己对话一般。</p><span id="more"></span><hr><p>凌云寨坐落在我老家几公里外···

---

生成搜索框

这一块算是「表面工夫」，也就是我们需要选定一块风水宝地来画一个框框，以便让用户可以输入想要搜索的关键词。

以我对自己的博客的规划来说，我需要把它放在那个search.ejs文件中，这样用户一旦点到目录上的search，就会直接跳转到搜索框中。

搜索框没什么好说的，也就是一堆html代码，大致如下，除了代表css渲染的class可以根据自己的css配置修改外，其他的诸如id之类的玩意最好不要动，毕竟这和后面的js文件，以及结果输出是连在一起的。

<%- js('js/search.js') %>
<input id="local-search-input" class="search-input" type="search"
        placeholder="<%- theme.search.placeholder%> " aria-label="Search">

其中，placeholder的意思是在框内显示啥，比如「键入搜索」，或者「站内搜索」啥的，不写也行。

---

配置JS代码

正如上面的代码中的引入显示的那样，我们选取了js文件夹下的search.js作为搜索框的运行逻辑，但不幸的是，search.js并非天生存在，因此我们需要手动建立一个。

在主题文件夹下的source的js下新建search.js空白文件，并复制粘贴Github代码（感谢这位好心人）

最后，在运行搜索功能会用到的ejs中（比如我的那个search.ejs），添加相关代码：

<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    var search_path = "<%= config.search.path %>";
    if (search_path.length == 0) {
        search_path = "search.xml";
    }
    var path = "<%= config.root %>" + search_path;
    searchFunc(path, 'local-search-input', 'local-search-result');
</script>

---

弹出搜索结果

结果的显示代码非常简单：

<div id="local-search-result"></div>

把它放在你想要显示结果的地方即可，弹出式或者直接显示啥的。

---

CSS渲染等美化

可以根据自己需要配置搜索框，这点还是比较容易的，但搜索结果如何美化，却需要一定技巧。

祭出我们的大杀器：网页「检查」！

在前文所述的「检查」中，随便在搜索界面输入一个关键词，比如「我」，我们可以看到很多隐藏信息：

<input id="local-search-input" class="search-input" type="search" placeholder=" " aria-label="Search">
<div id="local-search-result"><ul class="search-result-list"><hr><a 
                                                                    href="https://dvjiang.github.io/2023/01/23/%E5%87%8C%E4%BA%91%E5%AF%A8%E6%B8%B8%E8%AE%B0/" class="search-result-title">凌云寨游记</a><p class="search-result">以为下次还能见到的事物都会消散。如果这些<code class="search-keyword">我</code>经历的事物都没能留下痕迹，如果数十年后<code class="search-keyword">我</code>已然丢失这段记忆，那么<code class="search-keyword">我</code>希望自己至少能有那么一个小小角落，能捡起曾经的故事，就像在和曾经的自己对话一般。凌云寨坐落在<code class="search-keyword">我</code>...</p><hr><a 
                                                                    href="https://dvjiang.github.io/2023/01/21/2022%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A/" class="search-result-title">2022年度报告</a><p class="search-result">山顶冲锋，这是每个人都必将做出的选择。而<code class="search-keyword">我</code>的选择是什么呢？让<code class="search-keyword">我</code>看看——哦，原来是躺平。此躺平非彼躺平也。这是一种一以贯之的心态。所谓「夫唯不争,故天下莫能与之争」。去掉贪欲，去掉舍离，直面最初也···

可以看到，整个搜索结果有class名为search-result-list，文章名为search-result-title，段落为search-result，关键字「我」名为search-keyword等等···都是可以通过css进行美化的。

有时候我们不喜欢的内容无法被css修改怎么办，比如关键字用斜体还是高亮，列表前面要不要有「点」（无序列表）等等···这些问题都可以通过修改之前那个js文件实现，把<i>改为<code>，删去<ul>等等···

自此，搜索篇就搞定咯。

若还有啥问题，欢迎骚扰我的邮箱