美文网首页关于hexoHtmlVue
hexo+next添加algolia搜索

hexo+next添加algolia搜索

作者: 大都小酒馆 | 来源:发表于2016-12-07 13:20 被阅读4022次

    1、为什么添加algolia搜索
    第一当然是可以方便的查找所需文章,第二点就是之前常用的swiftype插件不再免费。我的个人博客是这个月初搭建完成的,这时候swiftype已经不再免费,而且只开放企业邮箱注册。
    2、添加效果


    3、开始添加
    下载最新的next主题(5.1.0),因为最新版的已经集成了algolia搜索,可以省去很多配置和修改。
    我的版本:
    (themes\next_config.yml文件最下方查看)
    algolia官网注册账号(我直接使用的github的账号)

    参照下图新建index

    打开API Keys页面,里面的信息等会需要写到hexo的配置文件中

    在根目录的站点配置文件_config.yml
    中加入如下配置,参照上图的各种key值
    <pre>
    algolia:
    appId: 'appid'
    apiKey: 'apiKey'
    adminApiKey: 'adminApiKey'
    indexName: '上面填写的index名'
    chunkSize: 5000
    fields:
    - title
    - slug
    - path
    - content:strip
    </pre>

    在git bash中执行hexo algolia。如下图



    说明已经提交到了algolia。如下图



    如果无法提交成功,先执行hexo clean即可。
    在\themes\next下找到_config.yml,找到如下内容,将enable修改为true,labels修改为自己需要的

    在themes\next\layout_partials中找到header.swig,找到以下代码并修改
    <pre>
    <nav class="site-nav">

    {% set hasSearch = theme.swiftype_key || theme.algolia_search.enable || theme.tinysou_Key || config.search %}

    {% if theme.menu %}
    <ul id="menu" class="menu">
    {% for name, path in theme.menu %}
    {% set itemName = name.toLowerCase() %}
    <li class="menu-item menu-item-{{ itemName }}">
    <a href="{{ url_for(path) }}" rel="section">
    {% if theme.menu_icons.enable %}
    <i class="menu-item-icon fa fa-fw fa-{{theme.menu_icons[itemName] | default('question-circle') | lower }}"></i> <br />
    {% endif %}
    {{ __('menu.' + itemName) }}
    </a>
    </li>
    {% endfor %}

      {% if hasSearch %}
        <li class="menu-item menu-item-search">
          {% if theme.swiftype_key %}
            <a href="javascript:;" class="st-search-show-outputs">
          {% elseif config.search %}
            <a href="javascript:;" class="popup-trigger">
    


    {% elseif theme.algolia %}
    <a href="javascript:;" class="popup-trigger">

    {% endif %}
    {% if theme.menu_icons.enable %}
    <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
    {% endif %}
    {{ __('menu.search') }}
    </a>
    </li>
    {% endif %}
    </ul>
    {% endif %}

    {% if hasSearch %}
    <div class="site-search">
    {% include 'search.swig' %}
    </div>
    {% endif %}
    </nav>
    </pre>
    这样就完成了添加。


    有问题可以在下面留言,欢迎大家讨论。

    相关文章

      网友评论

        本文标题:hexo+next添加algolia搜索

        本文链接:https://www.haomeiwen.com/subject/pnvdmttx.html