Help us understand the problem. What is going on with this article?

VuePressで作ったページにalgoliaによる検索機能を追加する

More than 1 year has passed since last update.

概要

VuePressで作ったページの上部に、デフォルトのテーマでは検索用のテキストフィールドがあります。
スクリーンショット 2018-09-09 16.16.29.png

特に設定しなければ、タイトルとh2/h3のみが検索対象となるようです。
本格的な検索を取り入れたい場合には、algoliaを利用できるようです。
本記事ではalgoliaを導入する手順を説明します。

algolia登録

以下のURLから、GitHubアカウント等で登録します。

https://www.algolia.com/users/sign_in

ログイン後のダッシュボードで、API Keysから書き込み可能なAPIキーの発行を、Indices > NEW INDEXから新規インデックス作成をしておきます。

検索対象ページのインデックス

デプロイ済みのページを主導でインデックスする必要があります。
algoliaが自動で24hおきにやってくれているようですが、よく分からないのでとりあえず手動でやってみました。

GitHubにalgolia公式のツールがありますのでそちらを利用します。

$ git clone https://github.com/algolia/docsearch-scraper
$ cd docsearch-scraper
$ ./docsearch docker:build

Dockerに加えて、Python3系がおそらく必要です。
途中モジュールが足りない場合は適宜requirements.txt確認しつついれました。

続いて.envファイルにalgoliaのAPP_ID/API_KEYを設定します。
(algoliaログイン後のダッシュボードからAPI Keysで発行できます)

.env
-APPLICATION_ID=
+APPLICATION_ID=XXXXXXXXXX
-API_KEY=
+API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXX

スクレイピング設定を記載した、config.jsonを作成します。
INDEX_NAME, START_URL, selectorsは適宜変更してください。
selectorsはどのDOM要素をインデックス対象とするかのselectorです。

config.json
{
    "index_name": "INDEX_NAME",
    "start_urls": [
        "START_URL"
    ],
    "stop_urls": [],
    "selectors": {
        "lvl0": {
            "selector": "p.sidebar-heading.open",
            "global": true,
            "default_value": "Documentation"
        },
        "lvl1": ".content h1",
        "lvl2": ".content h2",
        "lvl3": ".content h3",
        "lvl4": ".content h4",
        "lvl5": ".content h5",
        "text": ".content p, .content li",
        "lang": {
            "selector": "/html/@lang",
            "type": "xpath",
            "global": true
        }
    },
    "custom_settings": {
        "attributesForFaceting": [
            "lang"
        ]
    }
}

こうしてようやくインデックスできます。

$ ./docsearch docker:run "$(pwd)/config.json"

VuePress側の設定

以下のようにアプリケーションID(APP_ID)、キー(APP_KEY)、インデックス名(INDEX_NAME)の設定を行ってください。
この設定は静的コンテンツの中に含まれるため、キーには検索専用のものを用いるようにしてください。

.vuepress/config.js
module.exports = {
    ...
        algolia: {
             appId: "APP_ID",
             apiKey: "APP_KEY",
             indexName: "INDEX_NAME"
        }
    }
    ...
}

こんな感じに表示されます。

スクリーンショット 2018-09-09 16.43.43.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away