From 46cff99377eb929fde63d3548f85304fef2205a4 Mon Sep 17 00:00:00 2001 From: sli1989 Date: Wed, 7 Feb 2018 00:24:03 +0800 Subject: [PATCH 1/3] Update algolia search docs with vendors --- _config.yml | 1 + docs/ALGOLIA-SEARCH.md | 20 +++++++++++++++++--- docs/zh-CN/ALGOLIA-SEARCH.md | 25 +++++++++++++++++++++++-- 3 files changed, 41 insertions(+), 5 deletions(-) diff --git a/_config.yml b/_config.yml index 3da2378992..0dc9c63d69 100644 --- a/_config.yml +++ b/_config.yml @@ -649,6 +649,7 @@ calendar: maxResults: 250 # Algolia Search +# See: https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md # Dependencies: https://github.com/theme-next/theme-next-algolia-instant-search algolia_search: enable: false diff --git a/docs/ALGOLIA-SEARCH.md b/docs/ALGOLIA-SEARCH.md index 0ab2264706..bfaf54aff7 100644 --- a/docs/ALGOLIA-SEARCH.md +++ b/docs/ALGOLIA-SEARCH.md @@ -1,7 +1,7 @@

Algolia Search

-NexT provides search plugin for index your hexo website content. To use this feature, make sure that the version of NexT you are using is after the v5.1.0 release. What you should note here is that only turn on `enable` of `algolia_search` in `next/_config.yml` cannot let you use the algolia search correctly, you need to install corresponding [Hexo Algolia](https://github.com/oncletom/hexo-algolia) plugin to seach your website with Algolia. Follow the steps described below to complete the installation of Algolia search. +NexT provides Algolia search plugin for index your hexo website content. To use this feature, make sure that the version of NexT you are using is after the v5.1.0 release. What you should note here is that only turn on `enable` of `algolia_search` in `next/_config.yml` cannot let you use the algolia search correctly, you need to install corresponding [Hexo Algolia](https://github.com/oncletom/hexo-algolia) plugin to seach your website with Algolia. Follow the steps described below to complete the installation of Algolia search. 1. Register at [Algolia](https://www.algolia.com/), you can log in directly using GitHub or Google Account. Upon Customer’s initial sign-up for an Account, Customer will have a free, fourteen (14) day evaluation period (the “Evaluation Period”) for the Algolia Services commencing on the Effective Date, subject to the limitations on Algolia’s website. After that, Algolia offers a free, branded version for up to 10k records and 100k operations per month. @@ -12,8 +12,8 @@ NexT provides search plugin for index your hexo website content. To use this fea 1. Algolia requires users to upload their search index data either manually or via provided APIs. Install and configure [Hexo Algolia](https://github.com/oncletom/hexo-algolia) in your Hexo directory. This plugin will index your site and upload selected data to Algolia. ``` - cd hexo - npm install --save hexo-algolia + $ cd Your-blog-dir + $ npm install --save hexo-algolia ``` 1. Go to the `API Keys` page and find your credentials. You will need the `Application ID` and the `Search-only API key` in the following sections. The `Admin API key` need to keep confidential. Never store your Admin API Key as apiKey in the` _config.yml` file: it would give full control of your Algolia index to others and you don't want to face the consequences. @@ -46,6 +46,20 @@ NexT provides search plugin for index your hexo website content. To use this fea ![](http://theme-next.iissnan.com/uploads/algolia/algolia-step-4.png) +1. Change dir to NexT directory, and install module to `source/lib` directory. + + ``` + $ cd themes/next + $ git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search + ``` + + If you want to use the CDN instead of clone this repo, then need to set vendors in NexT `_config.yml` file. + + ``` + algolia_instant_js: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.js + algolia_instant_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.min.css + ``` + 1. In `next/_config.yml`, turn on `enable` of `algolia_search`. You can adjust the text in `labels` according to your needs. ```yml diff --git a/docs/zh-CN/ALGOLIA-SEARCH.md b/docs/zh-CN/ALGOLIA-SEARCH.md index 022a491f33..83a835b044 100644 --- a/docs/zh-CN/ALGOLIA-SEARCH.md +++ b/docs/zh-CN/ALGOLIA-SEARCH.md @@ -9,14 +9,15 @@ NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用 1. Index 创建完成后,此时这个 Index 里未包含任何数据。接下来需要安装 [Hexo Algolia](https://github.com/oncletom/hexo-algolia) 扩展,这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录,执行命令安装: ``` - npm install --save hexo-algolia + $ cd Your-blog-dir + $ npm install --save hexo-algolia ``` 1. 在 `API Keys` 页面找到需要使用的一些配置的值,包括 `ApplicationID` 和 `Search-Only API Key`。注意,`Admin API Key` 需要保密保存,不要外泄。 ![](https://user-images.githubusercontent.com/8521181/35479066-64e35aec-0428-11e8-91f9-1ec3afa45c5c.png) -1. 在 `API Keys` 页面,点击 `ALL API KEYS` 找到新建 INDEX 对应的 key,**编辑权限**,在弹出框中找到 ACL ,**勾选 Add records、 Delete records、List indices、Delete index 权限**,点击 update 更新。 +1. 在 `API Keys` 页面,点击 `ALL API KEYS` 找到新建 INDEX 对应的 key,**编辑权限**,在弹出框中找到 ACL ,**勾选 Add records、 Delete records、List indices、Delete index 权限**,点击 `update` 更新。 ![](https://user-images.githubusercontent.com/8521181/35479064-611aa0b4-0428-11e8-85a1-cfb449b486ec.png) ![](https://user-images.githubusercontent.com/8521181/35479084-d4f7ac02-0428-11e8-95a6-c4e3b1bef47b.png) @@ -42,6 +43,26 @@ NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用 ![](http://theme-next.iissnan.com/uploads/algolia/algolia-step-4.png) +1. 切换到 NexT 目录,并安装 algolia-instant-search 到 `source/lib` 目录。 + + ``` + $ cd themes/next + $ git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search + ``` + + 如果你想直接使用 CDN 设置 Algolia Search,在`主题配置文件`中添加 vendors 字段: + + ```yml + vendors: + ... + # Internal version: 1 + # https://www.algolia.com + algolia_instant_js: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.js + algolia_instant_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.min.css + ... + ``` + + 1. 更改`主题配置文件`,找到 Algolia Search 配置部分,将 `enable` 改为 `true` 即可,根据需要你可以调整 `labels` 中的文本: ```yml From 457072f8af5ddab2e90309c3ca0ba8a738c5632b Mon Sep 17 00:00:00 2001 From: sli1989 Date: Wed, 7 Feb 2018 22:32:18 +0800 Subject: [PATCH 2/3] Fix CND bug in algolia-instant-search --- docs/ALGOLIA-SEARCH.md | 22 +++++++++++++++++----- docs/zh-CN/ALGOLIA-SEARCH.md | 10 ++++++++-- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/docs/ALGOLIA-SEARCH.md b/docs/ALGOLIA-SEARCH.md index bfaf54aff7..eb12a900a7 100644 --- a/docs/ALGOLIA-SEARCH.md +++ b/docs/ALGOLIA-SEARCH.md @@ -12,7 +12,7 @@ NexT provides Algolia search plugin for index your hexo website content. To use 1. Algolia requires users to upload their search index data either manually or via provided APIs. Install and configure [Hexo Algolia](https://github.com/oncletom/hexo-algolia) in your Hexo directory. This plugin will index your site and upload selected data to Algolia. ``` - $ cd Your-blog-dir + $ cd hexo $ npm install --save hexo-algolia ``` @@ -46,18 +46,30 @@ NexT provides Algolia search plugin for index your hexo website content. To use ![](http://theme-next.iissnan.com/uploads/algolia/algolia-step-4.png) -1. Change dir to NexT directory, and install module to `source/lib` directory. +1. Change dir to NexT directory, and install module to `source/lib` directory. ``` $ cd themes/next $ git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search ``` - If you want to use the CDN instead of clone this repo, then need to set vendors in NexT `_config.yml` file. + If you want to use the CDN instead of clone this repo, then need to **set vendors** in NexT `_config.yml` file and **add** custom code in `~/themes/next/source/css/_custom/custom.styl` or `~/source/_data/styles.styl` + + ```yml + vendors: + ... + # Internal version: 1 + # https://www.algolia.com + algolia_instant_js: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.js + algolia_instant_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.min.css + ... + ``` ``` - algolia_instant_js: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.js - algolia_instant_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.min.css + // Custom styles. + svg path { + display: none; + } ``` 1. In `next/_config.yml`, turn on `enable` of `algolia_search`. You can adjust the text in `labels` according to your needs. diff --git a/docs/zh-CN/ALGOLIA-SEARCH.md b/docs/zh-CN/ALGOLIA-SEARCH.md index 83a835b044..26b35e738a 100644 --- a/docs/zh-CN/ALGOLIA-SEARCH.md +++ b/docs/zh-CN/ALGOLIA-SEARCH.md @@ -9,7 +9,7 @@ NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用 1. Index 创建完成后,此时这个 Index 里未包含任何数据。接下来需要安装 [Hexo Algolia](https://github.com/oncletom/hexo-algolia) 扩展,这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录,执行命令安装: ``` - $ cd Your-blog-dir + $ cd hexo $ npm install --save hexo-algolia ``` @@ -50,7 +50,7 @@ NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用 $ git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search ``` - 如果你想直接使用 CDN 设置 Algolia Search,在`主题配置文件`中添加 vendors 字段: + 如果你想直接使用 CDN 设置 Algolia Search,在`主题配置文件`中添加 vendors 字段,并且添加如下个性化代码到 `~/themes/next/source/css/_custom/custom.styl` 或者 `~/source/_data/styles.styl`中。 ```yml vendors: @@ -62,6 +62,12 @@ NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用 ... ``` + ```~/source/_data/styles.styl + // Custom styles. + svg path { + display: none; + } + ``` 1. 更改`主题配置文件`,找到 Algolia Search 配置部分,将 `enable` 改为 `true` 即可,根据需要你可以调整 `labels` 中的文本: From 3eab1f7eea167f07beca3b043b1b444c133fa407 Mon Sep 17 00:00:00 2001 From: sli1989 Date: Thu, 8 Feb 2018 11:46:33 +0800 Subject: [PATCH 3/3] Fix bug using algolia search's CDN --- docs/ALGOLIA-SEARCH.md | 10 +--------- docs/zh-CN/ALGOLIA-SEARCH.md | 9 +-------- .../_common/components/third-party/algolia-search.styl | 5 +++++ 3 files changed, 7 insertions(+), 17 deletions(-) diff --git a/docs/ALGOLIA-SEARCH.md b/docs/ALGOLIA-SEARCH.md index eb12a900a7..98e2fc5d06 100644 --- a/docs/ALGOLIA-SEARCH.md +++ b/docs/ALGOLIA-SEARCH.md @@ -53,8 +53,7 @@ NexT provides Algolia search plugin for index your hexo website content. To use $ git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search ``` - If you want to use the CDN instead of clone this repo, then need to **set vendors** in NexT `_config.yml` file and **add** custom code in `~/themes/next/source/css/_custom/custom.styl` or `~/source/_data/styles.styl` - + If you want to use the CDN instead of clone this repo, then need to **set vendors** in NexT `_config.yml` file: ```yml vendors: ... @@ -65,13 +64,6 @@ NexT provides Algolia search plugin for index your hexo website content. To use ... ``` - ``` - // Custom styles. - svg path { - display: none; - } - ``` - 1. In `next/_config.yml`, turn on `enable` of `algolia_search`. You can adjust the text in `labels` according to your needs. ```yml diff --git a/docs/zh-CN/ALGOLIA-SEARCH.md b/docs/zh-CN/ALGOLIA-SEARCH.md index 26b35e738a..e8495f9a6c 100644 --- a/docs/zh-CN/ALGOLIA-SEARCH.md +++ b/docs/zh-CN/ALGOLIA-SEARCH.md @@ -50,7 +50,7 @@ NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用 $ git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search ``` - 如果你想直接使用 CDN 设置 Algolia Search,在`主题配置文件`中添加 vendors 字段,并且添加如下个性化代码到 `~/themes/next/source/css/_custom/custom.styl` 或者 `~/source/_data/styles.styl`中。 + 如果你想直接使用 CDN 设置 Algolia Search,则需要在`主题配置文件`中添加 vendors 字段: ```yml vendors: @@ -62,13 +62,6 @@ NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用 ... ``` - ```~/source/_data/styles.styl - // Custom styles. - svg path { - display: none; - } - ``` - 1. 更改`主题配置文件`,找到 Algolia Search 配置部分,将 `enable` 改为 `true` 即可,根据需要你可以调整 `labels` 中的文本: ```yml diff --git a/source/css/_common/components/third-party/algolia-search.styl b/source/css/_common/components/third-party/algolia-search.styl index 2df3663c7c..6998cf6b03 100644 --- a/source/css/_common/components/third-party/algolia-search.styl +++ b/source/css/_common/components/third-party/algolia-search.styl @@ -1,3 +1,8 @@ +// fix bug using algolia search's CDN +svg path { + display: none; +} + .algolia-pop-overlay position: fixed width: 100%