將相關的搜尋列整合至您的文件
本教學將引導您逐步為您的文件建立一個相關且強大的搜尋列 🚀
執行 Meilisearch 實例
首先，您需要抓取您的文件內容並將其推送到 Meilisearch 實例中。
您可以使用 curl 在您的機器上安裝並執行 Meilisearch。
curl -L https://install.meilisearch.com | sh
./meilisearch --master-key=MASTER_KEY
我們提供了其他安裝方法。
Meilisearch 是開源的，可以在您的伺服器或任何雲端供應商上執行。
注意
您在後續步驟中提供的主機 URL 和 API 金鑰對應於此 Meilisearch 實例的憑證。在上面的範例中，主機 URL 為 https://#:7700，API 金鑰為 MASTER_KEY。
抓取您的內容
Meili 團隊提供並維護一個抓取工具，可自動讀取您網站的內容並將其儲存到 Meilisearch 中的索引中。
組態檔
抓取工具需要一個組態檔來知道您要抓取的內容。這可以透過提供選擇器（例如，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 欄位是您的 Meilisearch 實例中儲存您網站內容的索引識別碼。如果不存在，抓取工具會建立新的索引。
在此範例中，docs-content 類別是文字內容的主要容器。大多數時候，此標籤是 <main> 或 <article> HTML 元素。
lvlX 選擇器應使用標準的標題標籤，如 h1、h2、h3 等。您也可以使用靜態類別。為這些元素設定唯一的 id 或 name 屬性。
主要文件容器之外的所有可搜尋 lvl 元素（例如，在側邊欄中）必須是 global 選擇器。它們會被全域選取並注入到從您的頁面建立的每個文件中。
如果您使用 VuePress 來建立您的文件，您可以查看我們在生產環境中使用的組態檔。在我們的案例中，主要容器為 theme-default-content，而標題和副標題選擇器為 h1、h2...
提示
還有更多可選欄位可供使用以滿足您的需求。
執行抓取工具
您可以使用 Docker 執行抓取工具。在第一步中設定本機 Meilisearch 實例後，我們執行
docker run -t --rm \
--network=host \
-e MEILISEARCH_HOST_URL='https://#:7700' \
-e MEILISEARCH_API_KEY='MASTER_KEY' \
-v <absolute-path-to-your-config-file>:/docs-scraper/config.json \
getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json
注意
如果您不想使用 Docker，這裡有其他執行爬蟲程式的方法。
<組態檔的絕對路徑> 應該是您在上一步定義的組態檔的絕對路徑。
API 金鑰應具有將文件新增到您的 Meilisearch 實例的權限。在生產環境中，我們建議提供 預設管理員 API 金鑰，因為它具有執行此類請求的足夠權限。更多關於Meilisearch 安全性。
提示
我們建議在每次部署新的文件時執行爬蟲程式，如同我們為 Meilisearch 所做的一樣。
整合搜尋列
如果您的文件不是 VuePress 應用程式，您可以直接前往此章節。
適用於 VuePress 文件網站
如果您使用 VuePress 來撰寫文件，我們提供一個Vuepress 外掛程式。這個外掛程式在 Meilisearch 文件中已於正式環境使用。
在您的 VuePress 專案中
yarn add vuepress-plugin-meilisearch
在您的 config.js 檔案中
module.exports = {
plugins: [
[
"vuepress-plugin-meilisearch",
{
"hostUrl": "<your-meilisearch-host-url>",
"apiKey": "<your-meilisearch-api-key>",
"indexUid": "docs"
}
],
],
}
hostUrl 和 apiKey 欄位是 Meilisearch 實例的憑證。根據本教學，它們分別是 https://#:7700 和 MASTER_KEY。indexUid 是您的 Meilisearch 實例中，儲存您網站內容的索引識別碼。它已在組態檔中定義。
這三個欄位是必填的，但還有更多可用的選填欄位 可自訂您的搜尋列。
警告
由於組態檔是公開的，我們強烈建議您在生產環境中提供只能存取搜尋端點的金鑰，例如 預設搜尋 API 金鑰。閱讀更多關於Meilisearch 安全性的資訊。
適用於所有種類的文件
如果您沒有使用 VuePress 來撰寫文件，我們提供一個前端 SDK，可將強大且相關的搜尋列整合到任何文件網站。
Docxtemplater 搜尋列示範
<!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>
hostUrl 和 apiKey 欄位是 Meilisearch 實例的憑證。根據本教學，它們分別是 https://#:7700 和 MASTER_KEY。indexUid 是您的 Meilisearch 實例中，儲存您網站內容的索引識別碼。它已在組態檔中定義。inputSelector 是 HTML 搜尋輸入標籤的 id 屬性。
此程式庫的預設行為非常適合文件搜尋列，但您可能需要一些自訂設定。
注意
如需更多具體範例，您可以查看這個基本 HTML 檔案 或這個更進階的 Vue 檔案。
下一步是什麼？
此時，您的網站上應該有一個可用的搜尋引擎了，恭喜！🎉 如果您現在想要在生產環境中執行 Meilisearch，可以查看本教學！