琯琯博客 纸上得来终觉浅,绝知此事要躬行。

Jekyll 静态博客实现搜索功能

琯琯
2017-12-14


  • npm 安装(需要 Node.js 环境)
    npm install simple-jekyll-search
    
  • 或者 bower 安装
    bower install --save simple-jekyll-search
    

二、在 Jekyll 博客根目录中新建 search.json


---
layout: null
---
[
    % for post in site.posts %
        {
        "title"    : "",
        "category" : "",
        "tags"     : "",
        "url"      : "",
        "date"     : ""
        } % unless forloop.last %,% endunless %
    % endfor %
]

三、将以下代码放置在要显示搜索的页面中,例如首页/index.html


3.1 样式代码

#search-input {
    width: 90%;
    height: 35px;
    color: #333;
    background-color: rgba(227,231,236,.2);
    line-height: 35px;
    padding:0px 16px;
    border: 1px solid #c0c0c0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 17px;
    outline: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
#search-input:focus {
    outline: none;
    border-color: rgb(102, 175, 233);
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #007fff;
}

3.2 html代码

<div id="search-container">
  <input type="text" id="search-input" placeholder="search...">
  <ul id="results-container"></ul>
</div>

3.3 配置代码

<script src="/simple-jekyll-search.min.js"></script>

SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '/search.json',
    searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>', // 文章列表模板
    noResultsText: '没有搜索到文章', // 无搜索数据提示语
    limit: 20, // 返回最大文章数
    fuzzy: false // 是否模糊匹配
})

四、参考链接


(完)


上一篇 Java 相关题解

评论

内容导航