手动给docusaurus添加一个搜索

新版博客用docusaurus重构已经有些日子了,根据docusaurus的文档上也申请了Algolia,想一劳永逸的解决博客的搜索问题。但是流水有意,落花无情。

algolia总是不给我回复,我只能对着algolia的申请页面仰天长叹。

正常情况的申请

按照docusaurus官方文档上说的,当我们需要搜索的时候,打开docsearch.algolia.com/apply/填一下申请...

但是可惜的是,我填好资料,点这个join the program很多次了,就是没有反应。

怎么办呢?我仔细检查了它的官方文档,看他的描述说是需要等待2个星期。但是2个星期实在太久了,在我们只争朝夕的今天,怎么行。

还好,我看到它还有一种手动上传的办法,笨是笨了点,总比没有的好。那就开始吧。

手动上传

首先我们得去Algolia上注册一个账号,然后在这里需要创建一个应用:

应用的旁边,需要创建一个index用来存储搜索数据:

这样,前期的准备工作就做好了。

再在api设置中找到APPLICATION_ID和API_KEY。把他们保存到.env文件中:

APPLICATION_ID=YOUR_APP_ID API_KEY=YOUR_API_KEY

注意,这里的API_KEY最好是Admin API Key,因为会有一些权限需要。

如果是Admin API Key的话,记得不要分享给别人,这个key的权限比较大,可以删除和更新你的index数据。

设置配置文件

接下来,我们还需要一个配置文件。用来配置爬虫信息。下面是一个最基本的配置信息。

json 复制代码
{
  "index_name": "example",
  "start_urls": ["https://www.example.com/docs"],
  "selectors": {
    "lvl0": "#content header h1",
    "lvl1": "#content article h1",
    "lvl2": "#content section h3",
    "lvl3": "#content section h4",
    "lvl4": "#content section h5",
    "lvl5": "#content section h6",
    "text": "#content header p,#content section p,#content section ol"
  }
}

其中index_name就是我们刚刚在网站上创建的index_name。当DocSearch scraper程序跑起来的时候,你会发现有一个临时的index_name + _tmp 索引被创建。

别担心,在程序执行完毕之后,会把这个tmp index会替换最终的index。

start_urls包含的是要开始爬取的链接地址。爬虫会循环爬取链接里面的a标签,除非是遇到了stop_urls。另外爬虫不会爬取其他域名的链接。

selectors是用于创建记录层次结构的所有 CSS 选择器。其中text是强制,必须要有的。

如果你对不同的url有不同的selector方案,那么可以给不同的url配置不同的selectors_key,如下所示:

json 复制代码
{
  "start_urls": [
    {
      "url": "http://www.example.com/docs/faq/",
      "selectors_key": "faq"
    },
    {
      "url": "http://www.example.com/docs/"
    }
  ],
  [...],
  "selectors": {
    "default": {
      "lvl0": ".docs h1",
      "lvl1": ".docs h2",
      "lvl2": ".docs h3",
      "lvl3": ".docs h4",
      "lvl4": ".docs h5",
      "text": ".docs p, .docs li"
    },
    "faq": {
      "lvl0": ".faq h1",
      "lvl1": ".faq h2",
      "lvl2": ".faq h3",
      "lvl3": ".faq h4",
      "lvl4": ".faq h5",
      "text": ".faq p, .faq li"
    }
  }
}

好了,基本的配置就这些了。

运行爬虫脚本

现在可以运行爬虫脚本了,这里有两个选择,一是跑docker,方便快捷。二是从源代码运行,这个就比较麻烦了。

这里我只是希望博客可以有搜索功能,所以源码什么的就算了吧,我们直接跑docker命令:

run -it --env-file=.env -e "CONFIG=$(cat flydean.conf | jq -r tostring)" algolia/docsearch-scraper

过一会就运行起来了。但是我们看看日志:

DocSearch: www.flydean.com/07-python-m... 0 records) DocSearch: www.flydean.com/08-python-i... 0 records) DocSearch: www.flydean.com/09-python-e... 0 records) DocSearch: www.flydean.com/06-python-d... 0 records)

Crawling issue: nbHits 0 for myblog

nb_hits表示的是DocSearch 提取和索引的记录数。

怎么是0 records?难道什么都没有爬到?

直觉是我的start_urls不太对,我们把它换成sitemap.xml再试一次:

json 复制代码
{
  "sitemap_urls": ["http://www.example.com/docs/sitemap.xml"]
}

还是同样的错误。

没办法,再去仔细读一下配置文件的说明。

终于发现了问题,原来这里的selectors写的有问题,#content header h1表示的是在ID为content的元素内部,寻找所有属于header类的元素,并在这些元素内部寻找所有的<h1>元素。但是在docusaurus V3版本中已经发生了变化。

我们把它改写成这样:

json 复制代码
  "selectors": {
    "lvl0": {
      "selector": ".menu__link--sublist.menu__link--active",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": "header h1",
    "lvl2": "article h2",
    "lvl3": "article h3",
    "lvl4": "article h4",
    "lvl5": "article h5",
    "lvl6": "article h6",
    "text": "article p, article li"
  },

再运行一次,这次终于有数据了。

回到网站上看看,已经有数据上传上来了:

好了,我们在docusaurus.config.ts中配置一下,看看效果:

json 复制代码
algolia: {
        // The application ID provided by Algolia
        appId: 'YOUR_APP_ID',
        // Public API key: it is safe to commit it
        apiKey: 'YOUR_SEARCH_API_KEY',
        indexName: 'YOUR_INDEX_NAME',
        // Optional: see doc section below
        contextualSearch: true,
        // Optional: Algolia search parameters
        searchParameters: {},
        // Optional: path for search page that enabled by default (`false` to disable it)
        searchPagePath: 'search',
        //... other Algolia params
      },

我们在网站上试试效果:

完美,遇到问题的小伙伴可以私信我哟!

点我查看更多精彩内容:www.flydean.com

相关推荐
字节跳动视频云技术团队10 分钟前
ICME 2025 | 火山引擎在国际音频编码能力挑战赛中夺得冠军
llm·aigc·音视频开发
快起来别睡了11 分钟前
LangChain 介绍及使用指南:从“会聊天”到“能干活”的 AI 应用开发工具
人工智能
AI数据皮皮侠21 分钟前
中国区域10m空间分辨率楼高数据集(全国/分省/分市/免费数据)
大数据·人工智能·机器学习·分类·业界资讯
静心问道29 分钟前
大语言模型能够理解并可以通过情绪刺激进行增强
人工智能·语言模型·大模型
运器12336 分钟前
【一起来学AI大模型】算法核心:数组/哈希表/树/排序/动态规划(LeetCode精练)
开发语言·人工智能·python·算法·ai·散列表·ai编程
量子位37 分钟前
谁是余家辉?“年薪 1 亿美元”AI 研究员,中科大少年班天才,吴永辉的嫡系弟子
aigc·ai编程
aneasystone本尊39 分钟前
管理 Claude Code 的工具权限
人工智能
聚客AI1 小时前
大模型学习进阶路线图:从Prompt到预训练的四阶段全景解析
人工智能·llm·掘金·日新计划
晓13131 小时前
第七章 OpenCV篇——角点检测与特征检测
人工智能·深度学习·计算机视觉
DeepSeek大模型官方教程1 小时前
NLP之文本纠错开源大模型:兼看语音大模型总结
大数据·人工智能·ai·自然语言处理·大模型·产品经理·大模型学习