QeuroIzoのBlog

hello world

0%

43. jekyll添加搜索模块

发表于
  1. 下载jekyll-search，点击这里
  2. 将search目录放至于博客根目录下，其中search目录结构如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    search 
    ├── cb-footer-add.html
    ├── cb-search.json
    ├── css
    │   └── cb-search.css
    ├── img
    │   ├── cb-close.png
    │   └── cb-search.png
    └── js
        ├── bootstrap3-typeahead.min.js
        └── cb-search.js
  3. 在在 _include/footer.html 中的 </footer> 前加入 cb-footer-add.html中的内容即可。（**详见注意5**）

【注意：】

  1. 需要事先引入jquery与bootstrap3(js与css文件)框架，如果没有的话，操作如下:
    1. 在_include/head.html 中引入以下代码:
      1
      <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    2. 在_include/footer.html 中引入以下代码: 
      1
      2
      3
      4
      5
      <!-- jQuery -->
      <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>

      <!-- Bootstrap Core JavaScript -->
      <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    3. 请保证jquery.js的引入早于cb-search.js,即jquery引入的script标签更靠前。
  2. 默认联想8个，如果需要更多的话，请检索 bootstrap3-typeahead.min.js 中的items:8, 将8替换成自己需要的数值。
  3. 如果已经导入了 jquery 或者 bootstrap3,如果有，那么必须保留一个
  4. 注意.1.1的代码放在 <head>标签内部,如：
    1
    2
    3
    4
    5
    6
    <head>
        <!-- search -->
        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <!-- search -->
        
    </head>
  5. 注意.1.2 的代码放在 最外面，最前面，并且放入了 3 中cb-footer-add.html的内容，如：
    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
    30
    <!-- jQuery -->
    <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <section class="footer">
        <footer>
             <!-- search -->
             <div class="cb-search-tool" style="position: fixed; top: 0px ; bottom: 0px; left: 0px; right:  0px;
                     opacity: 0.95; background-color: #111111; z-index: 9999; display: none;">
                 <input class="form-control cb-search-content" id="cb-search-content" style="position: fixed; top: 60px" placeholder="文章标题 日期 标签" >

                 <div style="position: fixed; top: 16px; right: 16px;">
                     <img src="/search/img/cb-close.png"  id="cb-close-btn"/>
                 </div>
             </div>

             <div style="position: fixed; right: 16px; bottom: 20px;">
                 <img src="/search/img/cb-search.png"  id="cb-search-btn"  title="双击ctrl试一下"/>
             </div>

             <link rel="stylesheet" href="{{ "/search/css/cb-search.css" | prepend: site.baseurl }}">

             <script src="{{ "/search/js/bootstrap3-typeahead.min.js" | prepend: site.baseurl }}"></script>
             <script src="{{ "/search/js/cb-search.js" | prepend: site.baseurl }}"></script>
             <!-- search -->
         </footer>
    </section>

  6. 将 _include/footer.html 文件编码用 utf-8 保存，否则会出现乱码

本文借用大佬小胖轩的博客搭建的，详细请看这里