ドキュメントに関連する検索バーを統合する
16042 ワード
あなたは中で検索バーに気づいたかもしれませんour documentation .
そして、あなたはおそらくあなた自身のドキュメンテーションのために同じことを望むでしょう!
このチュートリアルでは、ドキュメントの関連する強力な検索バーを構築する手順をご案内します🚀 Run a MeiliSearch instance Scrape your content Integrate the search Bar meilisearchのインスタンスを実行する
そして、あなたはおそらくあなた自身のドキュメンテーションのために同じことを望むでしょう!
このチュートリアルでは、ドキュメントの関連する強力な検索バーを構築する手順をご案内します🚀
meilisearchのインスタンスを実行する
まず最初に、あなたのドキュメンテーション内容がこすって、meilisearchインスタンスに押し込まれる必要があります.
あなたのマシンでmeilisearchをインストールして実行することができますcurl .
$ curl -L https://install.meilisearch.com | sh
$ ./meilisearch --master-key=myMasterKey
があるother ways to install MeiliSearch .
Meilisearchは、オープンソースであり、サーバー上または任意のクラウドプロバイダのいずれかで実行することができます.
The host URL and the API key you will provide in the next steps correspond to the credentials of this MeiliSearch instance.
In the example above, the host URL is http://localhost:7700 and the API key is myMasterKey.
内容を傷つける
MEIRIチームは、Aを提供して、維持しますscraper tool 自動的にあなたのウェブサイトのコンテンツを読んで、meilisearchのインデックスにそれを格納してください.
設定ファイル
スクレーパーツールは、どのようなコンテンツをscrapeしたい知って設定ファイルが必要です.これはセレクタ(例えばHTMLタグ)を提供することによって行われます.
基本的な設定ファイルの例を示します.
{
"index_uid": "docs",
"start_urls": ["https://www.example.com/doc/"],
"sitemap_urls": ["https://www.example.com/sitemap.xml"],
"stop_urls": [],
"selectors": {
"lvl0": {
"selector": ".docs-lvl0",
"global": true,
"default_value": "Documentation"
},
"lvl1": {
"selector": ".docs-lvl1",
"global": true,
"default_value": "Chapter"
},
"lvl2": ".docs-content .docs-lvl2",
"lvl3": ".docs-content .docs-lvl3",
"lvl4": ".docs-content .docs-lvl4",
"lvl5": ".docs-content .docs-lvl5",
"lvl6": ".docs-content .docs-lvl6",
"text": ".docs-content p, .docs-content li"
}
}
The index_uid field あなたのウェブサイト内容が格納されるあなたのmeilisearchインスタンスのインデックス識別子です.それが存在しない場合、削り具は新しいインデックスを作成します.
The docs-content この例では、クラスはテキストコンテンツの主なコンテナです.ほとんどの場合、このタグは<main> または<article> HTML要素.lvlX セレクタは標準的なタイトルタグを使うべきですh1 , h2 , h3 , 静的クラスも使用できます.ユニークにするid or name これらの要素への属性.
あらゆる検索可能lvl このメインドキュメントコンテナの外側の要素(例えばサイドバー)はglobal セレクタ.彼らはグローバルにピックアップされ、あなたのページから構築されたすべてのドキュメントに注入されます.
TIP: More optional fields are available to fit your need.
あなたのドキュメントのためのvuepressを使用する場合は、チェックアウトすることができますconfiguration file 我々は生産で使用します.
我々のケースでは、主な容器はtheme-default-content そして、セレクターは、タイトルと副タイトルですh1 , h2 ...
スクレーパーをかける
あなたは、Dockerでスクレーパーを走らせることができます.私たちのローカルmeilisearchのインスタンスを設定するthe first step , 次のコマンドを実行します.
$ docker run -t --rm \
--network=host \
-e MEILISEARCH_HOST_URL='http://localhost:7700' \
-e MEILISEARCH_API_KEY='myMasterKey' \
-v <absolute-path-to-your-config-file>:/docs-scraper/config.json \
getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json
If you don't want to use Docker, here are other ways to run the scraper.
<absolute-path-to-your-config-file> で定義された設定ファイルの絶対パスでなければなりませんthe previous step .
あなたが提供しなければならないAPIキーは、あなたのmeilisearchインスタンスに文書を加える許可を持っていなければなりません.生産環境では、マスターキーの代わりに秘密鍵を提供することを推奨します.
もっとMeiliSearch authentication .
TIP: We recommend running the scraper at each new deployment of your documentation, as we do for the MeiliSearch's one.
統合検索バー
もしあなたのドキュメントがVuePressアプリケーションでなければ、直接this section .
ブイプレス文書のために
あなたがあなたのドキュメンテーションのためにvuepressを使うならば、我々はAを提供しますVuePress plugin . このプラグインはmeilisearchのドキュメントで使用されます.
あなたのvuepressプロジェクトで
$ yarn add vuepress-plugin-meilisearch
# or
$ npm install vuepress-plugin-meilisearch
あなたのconfig.js ファイル
module.exports = {
plugins: [
[
"vuepress-plugin-meilisearch",
{
"hostUrl": "<your-meilisearch-host-url>",
"apiKey": "<your-meilisearch-api-key>",
"indexUid": "docs"
}
],
],
}
The hostUrl とapiKey フィールドはmeilisearchインスタンスの資格情報です.このチュートリアルではhttp://localhost:7700 and myMasterKey .indexUid あなたのウェブサイト内容が格納されるあなたのmeilisearchインスタンスのインデックス識別子です.これはconfig file .
これらの3つのフィールドは必須ですがoptional fields are available あなたの検索バーをカスタマイズするには.
WARNING: Since the configuration file is public, we strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about MeiliSearch authentication.
すべての種類のドキュメント
あなたがあなたのドキュメンテーションのためにvuepressを使わないならば、我々はAを提供しますfront-end SDK すべてのドキュメントのウェブサイトに強力で適切な検索バーを統合する.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.css" />
</head>
<body>
<input type="search" id="search-bar-input">
<script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
<script>
docsSearchBar({
hostUrl: '<your-meilisearch-host-url>',
apiKey: '<your-meilisearch-api-key>',
indexUid: 'docs',
inputSelector: '#search-bar-input',
debug: true // Set debug to true if you want to inspect the dropdown
});
</script>
</body>
</html>
The hostUrl とapiKey フィールドはmeilisearchインスタンスの資格情報です.このチュートリアルではhttp://localhost:7700 and myMasterKey .indexUid あなたのウェブサイト内容が格納されるあなたのmeilisearchインスタンスのインデックス識別子です.これはconfig file .inputSelector はid HTML検索入力タグの属性.
WARNING: We strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about MeiliSearch authentication.
このライブラリのデフォルト動作はドキュメント検索バーに完全に適合しますが、必要な場合がありますsome customizations .
より具体的な例についてはbasic HTML file or this more advanced Vue file .
次は何ですか。
この時点では、あなたのウェブサイト、congrats上の作業検索エンジンを持っている必要があります!🎉
チェックできますthis tutorial メイルサーチを実行したいならば!
Reference
この問題について(ドキュメントに関連する検索バーを統合する), 我々は、より多くの情報をここで見つけました
https://dev.to/meilisearch/integrate-a-relevant-search-bar-to-your-documentation-3nl9
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
$ curl -L https://install.meilisearch.com | sh
$ ./meilisearch --master-key=myMasterKey
The host URL and the API key you will provide in the next steps correspond to the credentials of this MeiliSearch instance.
In the example above, the host URL is http://localhost:7700 and the API key is myMasterKey.
MEIRIチームは、Aを提供して、維持しますscraper tool 自動的にあなたのウェブサイトのコンテンツを読んで、meilisearchのインデックスにそれを格納してください.
設定ファイル
スクレーパーツールは、どのようなコンテンツをscrapeしたい知って設定ファイルが必要です.これはセレクタ(例えばHTMLタグ)を提供することによって行われます.
基本的な設定ファイルの例を示します.
{
"index_uid": "docs",
"start_urls": ["https://www.example.com/doc/"],
"sitemap_urls": ["https://www.example.com/sitemap.xml"],
"stop_urls": [],
"selectors": {
"lvl0": {
"selector": ".docs-lvl0",
"global": true,
"default_value": "Documentation"
},
"lvl1": {
"selector": ".docs-lvl1",
"global": true,
"default_value": "Chapter"
},
"lvl2": ".docs-content .docs-lvl2",
"lvl3": ".docs-content .docs-lvl3",
"lvl4": ".docs-content .docs-lvl4",
"lvl5": ".docs-content .docs-lvl5",
"lvl6": ".docs-content .docs-lvl6",
"text": ".docs-content p, .docs-content li"
}
}
index_uid field あなたのウェブサイト内容が格納されるあなたのmeilisearchインスタンスのインデックス識別子です.それが存在しない場合、削り具は新しいインデックスを作成します.The
docs-content この例では、クラスはテキストコンテンツの主なコンテナです.ほとんどの場合、このタグは<main> または<article> HTML要素.lvlX セレクタは標準的なタイトルタグを使うべきですh1 , h2 , h3 , 静的クラスも使用できます.ユニークにするid or name これらの要素への属性.あらゆる検索可能
lvl このメインドキュメントコンテナの外側の要素(例えばサイドバー)はglobal セレクタ.彼らはグローバルにピックアップされ、あなたのページから構築されたすべてのドキュメントに注入されます.TIP: More optional fields are available to fit your need.
あなたのドキュメントのためのvuepressを使用する場合は、チェックアウトすることができますconfiguration file 我々は生産で使用します.
我々のケースでは、主な容器は
theme-default-content そして、セレクターは、タイトルと副タイトルですh1 , h2 ...スクレーパーをかける
あなたは、Dockerでスクレーパーを走らせることができます.私たちのローカルmeilisearchのインスタンスを設定するthe first step , 次のコマンドを実行します.
$ docker run -t --rm \
--network=host \
-e MEILISEARCH_HOST_URL='http://localhost:7700' \
-e MEILISEARCH_API_KEY='myMasterKey' \
-v <absolute-path-to-your-config-file>:/docs-scraper/config.json \
getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json
If you don't want to use Docker, here are other ways to run the scraper.
<absolute-path-to-your-config-file> で定義された設定ファイルの絶対パスでなければなりませんthe previous step .あなたが提供しなければならないAPIキーは、あなたのmeilisearchインスタンスに文書を加える許可を持っていなければなりません.生産環境では、マスターキーの代わりに秘密鍵を提供することを推奨します.
もっとMeiliSearch authentication .
TIP: We recommend running the scraper at each new deployment of your documentation, as we do for the MeiliSearch's one.
統合検索バー
もしあなたのドキュメントがVuePressアプリケーションでなければ、直接this section .
ブイプレス文書のために
あなたがあなたのドキュメンテーションのためにvuepressを使うならば、我々はAを提供しますVuePress plugin . このプラグインはmeilisearchのドキュメントで使用されます.
あなたのvuepressプロジェクトで
$ yarn add vuepress-plugin-meilisearch
# or
$ npm install vuepress-plugin-meilisearch
あなたのconfig.js ファイル
module.exports = {
plugins: [
[
"vuepress-plugin-meilisearch",
{
"hostUrl": "<your-meilisearch-host-url>",
"apiKey": "<your-meilisearch-api-key>",
"indexUid": "docs"
}
],
],
}
The hostUrl とapiKey フィールドはmeilisearchインスタンスの資格情報です.このチュートリアルではhttp://localhost:7700 and myMasterKey .indexUid あなたのウェブサイト内容が格納されるあなたのmeilisearchインスタンスのインデックス識別子です.これはconfig file .
これらの3つのフィールドは必須ですがoptional fields are available あなたの検索バーをカスタマイズするには.
WARNING: Since the configuration file is public, we strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about MeiliSearch authentication.
すべての種類のドキュメント
あなたがあなたのドキュメンテーションのためにvuepressを使わないならば、我々はAを提供しますfront-end SDK すべてのドキュメントのウェブサイトに強力で適切な検索バーを統合する.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.css" />
</head>
<body>
<input type="search" id="search-bar-input">
<script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
<script>
docsSearchBar({
hostUrl: '<your-meilisearch-host-url>',
apiKey: '<your-meilisearch-api-key>',
indexUid: 'docs',
inputSelector: '#search-bar-input',
debug: true // Set debug to true if you want to inspect the dropdown
});
</script>
</body>
</html>
The hostUrl とapiKey フィールドはmeilisearchインスタンスの資格情報です.このチュートリアルではhttp://localhost:7700 and myMasterKey .indexUid あなたのウェブサイト内容が格納されるあなたのmeilisearchインスタンスのインデックス識別子です.これはconfig file .inputSelector はid HTML検索入力タグの属性.
WARNING: We strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about MeiliSearch authentication.
このライブラリのデフォルト動作はドキュメント検索バーに完全に適合しますが、必要な場合がありますsome customizations .
より具体的な例についてはbasic HTML file or this more advanced Vue file .
次は何ですか。
この時点では、あなたのウェブサイト、congrats上の作業検索エンジンを持っている必要があります!🎉
チェックできますthis tutorial メイルサーチを実行したいならば!
Reference
この問題について(ドキュメントに関連する検索バーを統合する), 我々は、より多くの情報をここで見つけました
https://dev.to/meilisearch/integrate-a-relevant-search-bar-to-your-documentation-3nl9
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
$ yarn add vuepress-plugin-meilisearch
# or
$ npm install vuepress-plugin-meilisearch
module.exports = {
plugins: [
[
"vuepress-plugin-meilisearch",
{
"hostUrl": "<your-meilisearch-host-url>",
"apiKey": "<your-meilisearch-api-key>",
"indexUid": "docs"
}
],
],
}
WARNING: Since the configuration file is public, we strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about MeiliSearch authentication.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.css" />
</head>
<body>
<input type="search" id="search-bar-input">
<script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
<script>
docsSearchBar({
hostUrl: '<your-meilisearch-host-url>',
apiKey: '<your-meilisearch-api-key>',
indexUid: 'docs',
inputSelector: '#search-bar-input',
debug: true // Set debug to true if you want to inspect the dropdown
});
</script>
</body>
</html>
WARNING: We strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.
Read more about MeiliSearch authentication.
この時点では、あなたのウェブサイト、congrats上の作業検索エンジンを持っている必要があります!🎉
チェックできますthis tutorial メイルサーチを実行したいならば!
Reference
この問題について(ドキュメントに関連する検索バーを統合する), 我々は、より多くの情報をここで見つけました https://dev.to/meilisearch/integrate-a-relevant-search-bar-to-your-documentation-3nl9テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol