吐槽改进日志

hueman主题增加站内搜索的显示条数

字数统计: 931字   |   阅读时长: 4分

摘要: hueman 主题的站内搜索默认的返回条数是 5，怎样增加

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

在文章 Hexo 的工作流程以及文件结构 中，我们梳理了 Hexo 和主题的知识点，重点了解了主题下面的各个功能要找哪个文件，本文我们就来解决一个实际需求。

现在的站内搜索是主题自带的，但是只能展示 top5，如下：

当文章多了以后，某些常见词就会漏掉一些文章了，能不能增加返回的条数。了解了 Hexo 和主题的原理和文件结构，这个需求就很好解决了。

只需要找到对应的入口文件，在 hueman 主题下，就是 hueman/layout/search 下的文件。

然后在代码中找到控制搜索返回条数对应的位置，做修改即可。在代码中找位置的过程需要点耐心，但是不是大问题。

./layout/layout.ejs 是主题入口，根据下面这行代码

1
<%- partial('common/header', null, {cache: !config.relative_link}) %>

找到 ./layout/common/header.ejs 文件，其中下面这行代码就是站内搜索的入口

1
<%- partial('search/index') %>

找到对应的文件 layout/search/index.ejs，代码如下: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="search-form-wrap">
<% if (theme.search.insight) { %>
    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="<%= __('index.search') %>" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <%- partial('search/insight') %>
<% } else if (theme.search.swiftype) { %>
    <div class="search-form">
        <input type="text" class="st-default-search-input search-form-input" placeholder="<%= __('index.search') %>" />
    </div>
    <%- partial('search/swiftype') %>
<% } else if (theme.search.baidu) { %>
    <%- partial('search/baidu') %>
<% } else { %>
    <%- search_form({text: __('index.search')}) %>
<% } %>
</div>

可以看到首先找的是 theme.search.insight，对应于文件 layout/search/insight.ejs，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="<%= __('insight.hint') %>" />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '<%= __("insight.posts") %>',
            PAGES: '<%= __("insight.pages") %>',
            CATEGORIES: '<%= __("insight.categories") %>',
            TAGS: '<%= __("insight.tags") %>',
            UNTITLED: '<%= __("insight.untitled") %>',
        },
        ROOT_URL: '<%= config.root %>',
        CONTENT_URL: '<%- url_for("/content.json")%>',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<%- js('js/insight') %>

可以看到最后一行引用的是 js/insight，找到对应的文件 source/js/insight.js，浏览之后找到下面这段代码，这就是控制站内搜索返回条数的地方。把下面的 post 那行的 5 改成 30，即可把返回条数增加到 30。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function search (json, keywords) {
    var WEIGHTS = weightFactory(keywords);
    var FILTERS = filterFactory(keywords);
    var posts = json.posts;
    var pages = json.pages;
    var tags = extractToSet(json, 'tags');
    var categories = extractToSet(json, 'categories');
    return {
        posts: posts.filter(FILTERS.POST).sort(function (a, b) { return WEIGHTS.POST(b) - WEIGHTS.POST(a); }).slice(0, 5),
        pages: pages.filter(FILTERS.PAGE).sort(function (a, b) { return WEIGHTS.PAGE(b) - WEIGHTS.PAGE(a); }).slice(0, 5),
        categories: categories.filter(FILTERS.CATEGORY).sort(function (a, b) { return WEIGHTS.CATEGORY(b) - WEIGHTS.CATEGORY(a); }).slice(0, 5),
        tags: tags.filter(FILTERS.TAG).sort(function (a, b) { return WEIGHTS.TAG(b) - WEIGHTS.TAG(a); }).slice(0, 5)
    };
}

修改后，效果如下：

可以看到返回的结果大大增加，拖动滚动条可以浏览，方便查找。

Share