跳转到内容

WordPress 网站使用 Meilisearch + docs-scraper 全流程部署搜索

Published: at 23:50

WordPress 网站使用 Meilisearch + docs-scraper 全流程部署搜索**

📍 第一步:在宝塔面板上安装 Meilisearch

1.1 安装 Docker

1.2 拉取 Meilisearch 镜像

或使用终端命令:

docker pull getmeili/meilisearch

1.3 创建并运行 Meilisearch 容器

在【Docker管理器】→【容器管理】→【创建容器】,填写:

Xnip2025-04-29_21-12-45

✅ 保存并启动。


📍 第二步:用宝塔面板绑定域名访问 Meilisearch

2.1 域名解析

在域名管理后台添加 A 记录:

等待解析生效。

2.2 宝塔添加站点 + 反向代理

Xnip2025-04-29_21-14-19

2.3 配置 SSL(HTTPS)

✅ 访问 https:// meili.XXX.cn,可以正常打开 Meilisearch 后台。


📍 第三步:上传官方示例索引 movies.json 到 Meilisearch

3.1 下载 movies.json 示例文件

在服务器终端执行:

wget https://meilisearch.org.cn/movies.json -O /www/movies.json

3.2 上传 movies.json 到 Meilisearch

curl -X POST 'https:// meili.XXX.cn/indexes/movies/documents' \
-H 'Authorization: Bearer masterKey' \
-H 'Content-Type: application/json' \
--data-binary @/www/movies.json

masterKey换成自己设置的MEILI_MASTER_KEY

✅ 成功后,访问 https:// meili.XXX.cn 可以看到 movies 索引和相关数据。


📍 第四步:配置并运行 docs-scraper 抓取 WordPress 网站内容

4.2 下载 docs-scraper 工具

终端中逐步输入以下命令

cd /www
mkdir docs-scraper
cd docs-scraper
git clone https://github.com/meilisearch/docs-scraper.git .

此处的git clone https://github.com/meilisearch/docs-scraper.git .命令格式不要错误了,后面会有一个点,这与不带点的有点区别,一个是直接下载目录中的文件到docs-scraper目录,另一个将整个目录都下载到docs-scraper目录,目录就会变成/www/docs-scraper/docs-scraper/,后面的命令就对不上了。

4.4 创建配置文件 config.json

新建一个config.json文件放到 /www/docs-scraper/ 目录下

Xnip2025-04-29_21-20-29

粘贴以下内容(根据你的网站结构定制):

{
  "index_uid": "xxx_docs",
  "start_urls": [
    "https://www.xxx.cn/"
  ],
  "sitemap_urls": [
    "https://www.xxx.cn/post-sitemap.xml"
  ],
  "stop_urls": [],
  "selectors": {
    "lvl0": {
      "selector": ".entry-header h1",
      "global": true,
      "default_value": "软件"
    },
    "lvl1": ".liu-app-version",
    "lvl2": ".liu-app-des",
    "lvl3": ".liu-app-img img",
    "text": ".entry-content p"
  },
  "meilisearch_url": "https://meili.xxx.cn",
  "meilisearch_api_key": "yourmasterkey"
}

4.5 执行抓取任务

在终端使用 Docker来启动

docker run -t --rm \
  -e MEILISEARCH_HOST_URL=https://meili.xxx.cn \
  -e MEILISEARCH_API_KEY=YourMasterKey \
  -v /www/docs-scraper/config.json:/docs-scraper/config.json \
  getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json

Xnip2025-04-28_22-21-23


✅ 到这里,你的网站数据已经全部进入了 Meilisearch,接下来只需要集成前端搜索栏,就可以实现实时、模糊、秒级响应的超强搜索体验!


📍 前端集成步骤(使用 meilisearch-docsearch CDN 版)

✅ 1. 添加容器

在你希望显示搜索栏的位置,插入:

<div id="docsearch"></div>

✅ 2. 引入 meilisearch-docsearch 脚本

将脚本放在网站的footer处

<script src="https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js"></script>
<script>
  const { docsearch } = window.__docsearch_meilisearch__;
  docsearch({
    container: "#docsearch",
    host: "https://meili.xxx.cn",
    apiKey: "你的masterKey",
    indexUid: "xxx_docs"
  });
</script>

✅ 3. 引入官方样式

确保页面中有引入 CSS 样式,否则样式会错乱:

<link
  rel="stylesheet"
  href="https://unpkg.com/meilisearch-docsearch@latest/dist/index.css"
/>

📢 注意事项


✅ 这样你的 WordPress 网站就可以通过 现代化前端组件 meilisearch-docsearch 实现极速搜索了!