手动给docusaurus添加一个搜索

简介: 如果algolia不能自动配置的话,我教你手动给docusaurus添加一个搜索

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

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

正常情况的申请

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

image-20240412142349147

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

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

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

手动上传

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

image-20240412143404546

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

image-20240412143441586

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

再在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数据。

设置配置文件

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

{
   
   
  "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: http://www.flydean.com/07-python-module/ 0 records)
                                                                                                                                                                    > DocSearch: http://www.flydean.com/08-python-io/ 0 records)
                                                                                                                                                                    > DocSearch: http://www.flydean.com/09-python-error-exception/ 0 records)
                                                                                                                                                                    > DocSearch: http://www.flydean.com/06-python-data-structure/ 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"
                                                                                                                                                                                                                                },
                                                                                                                                                                                                                                ```

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

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

                                                                                                                                                                                                                                ![image-20240412153529110](https://flydean-1301049335.cos.ap-guangzhou.myqcloud.com/img/202404121535687.png)

                                                                                                                                                                                                                                好了,我们在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
                                                                                                                                                                                                                                                                                                                                      },
                                                                                                                                                                                                                                                                                                                                      ```

                                                                                                                                                                                                                                                                                                                                      我们在网站上试试效果:

                                                                                                                                                                                                                                                                                                                                      ![image-20240412165018633](https://flydean-1301049335.cos.ap-guangzhou.myqcloud.com/img/202404121650828.png)

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

                                                                                                                                                                                                                                                                                                                                      [点我查看更多精彩内容:www.flydean.com](www.flydean.com)
相关文章
|
关系型数据库 MySQL 数据库
实时计算 Flink版操作报错合集之sqlserver mysql都用的胖包,sqlserver的成功了,mysql报这个错如何解决
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
492 6
|
缓存 关系型数据库 MySQL
【网站搭建】开源社区Flarum搭建记录
如果遇到缺少文件的情况,改为使用root身份执行(默认是www身份执行的,我使用www身份执行,缺少了个vendor文件夹)
237 0
|
SQL 数据处理 Apache
Flink报错问题之Flink报错Only a single 'INSERT INTO' is supported如何解决
Flink报错通常是指在使用Apache Flink进行实时数据处理时遇到的错误和异常情况;本合集致力于收集Flink运行中的报错信息和解决策略,以便开发者及时排查和修复问题,优化Flink作业的稳定性。
|
监控 负载均衡 网络协议
|
域名解析 网络协议 算法
2023年阿里云免费SSL证书申请教程
2023年阿里云免费SSL证书申请教程,阿里云SSL免费证书在哪申请?一个阿里云账号一年可以申请20张免费SSL证书,很多同学找不到免费SSL的入口,阿小云来详细说下阿里云SSL证书免费申请入口链接以及免费SSL证书申请流程
10240 1
|
XML JSON API
【AIGC】LangChain Agent 最新教程详解及示例学习
【5月更文挑战第5天】LangChain Agent全网最全最新教程学习及示例学习
1158 0
|
JavaScript 关系型数据库 MySQL
开源论坛 flarum 的快速创建 - docker版
开源论坛 flarum 的快速创建 - docker版
2008 2
开源论坛 flarum 的快速创建 - docker版
|
存储 缓存 Kubernetes
数据缓存系列分享(一):打开大模型应用的另一种方式
容器镜像的加速技术如今已经非常成熟,比如阿里云容器镜像缓存,还有p2p分发技术以及开源的dadi、nydus等按需加载技术,然而这些加速技术对于大模型文件的加载都很难有显著的效果。 MaaS的概念最近开始被提出,模型已经逐渐开始具备相对独立的存储、版本管理能力,也有类OCI的概念被提出,模型与应用的解耦会是必然的一个趋势。 为了解决模型加载与容器镜像加载解耦的问题,我们提供了模型缓存的技术,让模型无需从远端的仓库加载,也不用打包进应用的镜像里,就可以直接像加载本地的文件一样使用模型,而且在模型缓存的制作、使用流程上做了极大的简化。
1984 1
数据缓存系列分享(一):打开大模型应用的另一种方式
|
SQL NoSQL Java
Java 进阶:使用 Lambda 表达式实现超强的排序功能
我们在系统开发过程中,对数据排序是很常见的场景。一般来说,我们可以采用两种方式: 借助存储系统(SQL、NoSQL、NewSQL 都支持)的排序功能,查询的结果即是排好序的结果 查询结果为无序数据,在内存中排序。
1586 0
Java 进阶:使用 Lambda 表达式实现超强的排序功能
|
Ubuntu 关系型数据库 MySQL
从零开始搭建高颜值社区:Cpolar+HYBBS论坛在Ubuntu上的部署方法
从零开始搭建高颜值社区:Cpolar+HYBBS论坛在Ubuntu上的部署方法
291 0