Hexo 集成 Algolia 搜索插件

1,392 阅读3分钟
原文链接: blog.naaln.com

Swiftype搜索最近停了,开始收费,不想收费又想有这个站内搜索功能怎么办?
可以用Algolia免费版!不仅免费,感觉上要比Swiftype要快,下面简单说下集成步骤。

第一步:到官网注册帐号(可以用github登录)

官网地址注册帐号

新建一个INDEX如图

来到API-KEYS页面,上面有后面需要的信息(记得还有上面的INDEX名)。

第二步:上传数据到Algolia

在Hexo工程目录的根目录下执行

npm install hexo-algolia --sav

在根目录的_config.yml中加入如下配置,注意改成前面第一步注册成果数据

algolia:
  applicationID: 'your applicationID'
  apiKey: 'your apiKey'
  adminApiKey: 'your adminApiKey'
  indexName: 'your indexName'
  chunkSize: 5000

接着执行,确保得到提交成功提示

hexo algolia

第三步:修改Hexo主题集成Algolia

确保在head.swig文件中加入如下配置,注意改成自己的

在要搜索的页面加入如下div

在要触发搜索的HTML节点加入一个CLASS名为popup-trigger,如图


  • Search
  • 确保要搜索页包含如下JS代码(可以单独建立一个.swig文件,然后在整体layout的swig文件中加入)

    
    
    

    确保要搜索页包含如下CSS代码(可以单独建立一个.styl文件,然后在整体css的styl文件中加入,注意确保生成正确,必要时可以执行hexo clean

    ul.search-result-list {
      padding-left: 0px;
      margin: 0px 5px 0px 8px;
    }
    p.search-result {
      border-bottom: 1px dashed #ccc;
      padding: 5px 0;
    }
    a.search-result-title {
      font-weight: bold;
    }
    a.search-result {
      border-bottom: transparent;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .search-keyword {
      border-bottom: 1px dashed #4088b8;
      font-weight: bold;
    }
    #local-search-result {
      height: 90%;
      overflow: auto;
    }
    .popup {
      display: none;
      position: fixed;
      top: 10%;
      left: 50%;
      width: 700px;
      height: 80%;
      margin-left: -350px;
      padding: 3px 0 0 10px;
      background: #fff;
      color: #333;
      z-index: 9999;
      border-radius: 5px;
    }
    @media (max-width: 767px) {
      .popup {
        padding: 3px;
        top: 0;
        left: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        border-radius: 0px;
      }
    }
    .popoverlay {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      z-index: 2080;
      background-color: rgba(0,0,0,0.3);
    }
    #local-search-input {
      margin-bottom: 10px;
      width: 50%;
    }
    .popup-btn-close {
      position: absolute;
      top: 6px;
      right: 14px;
      color: #4ebd79;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      cursor: pointer;
    }
    #no-result {
      position: absolute;
      left: 44%;
      top: 42%;
      color: #ccc;
    }
    .busuanzi-count:before {
      content: " ";
      float: left;
      width: 260px;
      min-height: 25px;
    }
    @media (min-width: 768px) and (max-width: 991px) {
      .busuanzi-count {
        width: auto;
      }
      .busuanzi-count:before {
        display: none;
      }
    }
    @media (max-width: 767px) {
      .busuanzi-count {
        width: auto;
      }
      .busuanzi-count:before {
        display: none;
      }
    }
    .site-uv,
    .site-pv,
    .page-pv {
      display: inline-block;
    }
    .site-uv .busuanzi-value,
    .site-pv .busuanzi-value,
    .page-pv .busuanzi-value {
      margin: 0 5px;
    }
    .site-uv {
      margin-right: 10px;
    }
    .site-uv::after {
      content: "|";
      padding-left: 10px;
    }
    .algolia-popup {
      overflow: hidden;
      padding: 0;
    }
    .algolia-popup .popup-btn-close {
      padding-left: 15px;
      border-left: 1px solid #eee;
      top: 10px;
    }
    .algolia-popup .popup-btn-close .fa {
      color: #999;
      font-size: 18px;
    }
    .algolia-popup .popup-btn-close:hover .fa {
      color: #222;
    }
    .algolia-search {
      padding: 10px 15px 5px;
      max-height: 50px;
      border-bottom: 1px solid #ccc;
      background: #f5f5f5;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .algolia-search-input-icon {
      display: inline-block;
      width: 20px;
    }
    .algolia-search-input-icon .fa {
      font-size: 18px;
    }
    .algolia-search-input {
      display: inline-block;
      width: calc(90% - 20px);
    }
    .algolia-search-input input {
      padding: 5px 0;
      width: 100%;
      outline: none;
      border: none;
      background: transparent;
    }
    .algolia-powered {
      float: right;
    }
    .algolia-powered img {
      display: inline-block;
      height: 18px;
      vertical-align: middle;
    }
    .algolia-results {
      position: relative;
      overflow: auto;
      padding: 10px 30px;
      height: calc(100% - 50px);
    }
    .algolia-results hr {
      margin: 10px 0;
    }
    .algolia-results .highlight {
      font-style: normal;
      margin: 0;
      padding: 0 2px;
      font-size: inherit;
      color: #f00;
    }
    .algolia-hits {
      margin-top: 20px;
    }
    .algolia-hit-item {
      margin: 15px 0;
    }
    .algolia-hit-item-link {
      display: block;
      border-bottom: 1px dashed #ccc;
      transition-duration: 0.2s;
      transition-timing-function: ease-in-out;
      transition-delay: 0s;
    }
    .algolia-pagination .pagination {
      margin-top: 40px;
      border-top: none;
      padding: 0;
    }
    .algolia-pagination .pagination-item {
      display: inline-block;
    }
    .algolia-pagination .page-number {
      border-top: none;
    }
    .algolia-pagination .page-number:hover {
      border-bottom: 1px solid #222;
    }
    .algolia-pagination .disabled-item {
      visibility: hidden;
    }
    

    将下面这张图片拷贝到你的source目录的images目录下

    OK,终于完成了,样子可以参照本站的搜索功能!