Vuepress は Algolia 検索方法とピット回避ガイドを構成します

今日は 2023 年大学入学試験の初日です。高校 1 年生の私も体験登録しました。今年の山東省の中国語と数学の問題はそれほど難しくないように感じます (少なくとも 1 回目よりは簡単です)モデルとセカンドモデル) (もちろん私の成績は間違いなく悪いです)

候補者の皆さんの幸運をお祈りします!

これは何ですか

Algolia DocSearch 公式 Web サイトのスローガンは次のとおりです: Free Algolia Search For Developer Docs。つまり、Algolia は開発者に無料の検索サービスを提供します。

実際、これは特定のサイトの検索エンジンです。検索エンジンと同じように Web サイトをクロールし、API インターフェイスを提供します。ユーザーが Web サイトで検索するときは、API を呼び出すだけで済みます。

過小評価しないでください。次のプロジェクトがそのサービスを採用しています。

1686139297189

さらに、本文を始める前に言っておきたいのですが、私たちの多くにとって Algolia について理解しているのは DocSearch だけですが、彼らのビジネスはそれ以上のものです。

使い方

この記事では公式サイトからクローリング申請するアクセス方法を紹介します。ドキュメントによると、自分でクローラーを実行し、データを Algolia にアップロードしてサービスを取得することもできます。必要に応じて自分で調査を読んでください: Run your own | DocSearch by Algolia

クロールを申請する

まず、DocSearch by Algoliaにアクセスし、このページで [適用] をクリックし、Web サイトのアドレス、電子メール アドレス、オープン ソース アドレスを入力します (DocSearch では、Web サイトがオープン ソースである必要があります)。

申請後は担当者からメールが届くまで待つだけです。Algolia からは、申請の承認とクローリングの完了を通知するメールが 2 通送信されますが、私の経験によると、2 通のメールの配信時間は 15 分以内です。最初のメールを受け取るまで 3 日間待ちました。

API情報の取得

公式メールからappId apiKeyindexName3 つの情報を抽出し、使用する Vuepress フレームワークのドキュメントに従って設定します。

1686140121886

構成が完了したら、キーワードを検索してみてください (Web サイトにこのキーワードを含むドキュメントがあることを確認してください)。検索結果が正常に返されれば、おめでとうございます。構成は完了しました。もしあなたが私と同じなら、すべてを検索しても結果がありません。引き続き下を見てください。

クロール設定を変更する

クロールしても何も見つからないのはなぜですか? これは、Algolia がクロールするときに、各ページの指定された要素セレクターに一致する要素の下のテキストのみにインデックスが作成されるため、ほとんどの場合、セレクターを手動で指定する必要があります。

設定アドレス:クローラー | クローラー管理コンソール

ホーム ページでアプリケーションをクリックし、新しいページで左側の [エディタ] をクリックします。

1686140459241

1686140469015

構成インターフェイスは非常に長い JS ファイルですが、最初の部分にのみ注意する必要があります。

new Crawler({
    
    
  rateLimit: 8,
  maxDepth: 10,
  maxUrls: 5000,
  startUrls: ["https://www.yixiangzhilv.com/"],
  renderJavaScript: false,
  sitemaps: ["https://www.yixiangzhilv.com/sitemap.xml"],
  ignoreCanonicalTo: true,
  discoveryPatterns: ["https://www.yixiangzhilv.com/**"],
  schedule: "at 12:20 on Monday",
  actions: [
    {
    
    
      indexName: "yixiangzhilv",
      pathsToMatch: ["https://www.yixiangzhilv.com/**"],
      recordExtractor: ({
     
      helpers }) => {
    
    
        return helpers.docsearch({
    
    
          recordProps: {
    
    
            lvl1: ".page-container h1",
            content: ".theme-reco-default-content p, .content__default li",
            lvl0: {
    
    
              selectors: "p.sidebar-heading.open",
              defaultValue: "Documentation",
            },
            lvl2: ".theme-reco-default-content h2",
            lvl3: ".theme-reco-default-content h3",
            lvl4: ".theme-reco-default-content h4",
            lvl5: ".theme-reco-default-content h5",
            lang: "",
            tags: {
    
    
              defaultValue: ["v1"],
            },
          },
          aggregateContent: true,
        });
      },
    },
  ],
  ...
}

中間startUrls pathsToMatchパラメータは必要に応じて設定できますが、初めて生成されるドキュメントに記載されている URL は Web サイトのルート ディレクトリではない場合があることに注意してください。への上映/docs/**また、フロントエンド レンダリング プロジェクトの場合は、renderJavaScriptオプションを有効にする必要があります (2023.7.12 補足: 最初は有効にせずに成功しました。その後、エラーを報告し始めて、この問題が見つかりました。なぜ以前に有効にしなかったのかわかりません)

私たちが注目すべきは ですrecordProps以下に、私が取得したデフォルト構成と変更した構成を公開します。比較してください。

デフォルトの割り当て

recordProps: {
    
    
  lvl1: ".content__default h1",
  content: ".content__default p, .content__default li",
  lvl0: {
    
    
    selectors: "p.sidebar-heading.open",
    defaultValue: "Documentation",
  },
  lvl2: ".content__default h2",
  lvl3: ".content__default h3",
  lvl4: ".content__default h4",
  lvl5: ".content__default h5",
  lang: "",
  tags: {
    
    
    defaultValue: ["v1"],
  },
},

変更された構成

recordProps: {
    
    
  lvl1: ".page-container h1",
  content: ".theme-reco-default-content p, .content__default li",
  lvl0: {
    
    
    selectors: "p.sidebar-heading.open",
    defaultValue: "Documentation",
  },
  lvl2: ".theme-reco-default-content h2",
  lvl3: ".theme-reco-default-content h3",
  lvl4: ".theme-reco-default-content h4",
  lvl5: ".theme-reco-default-content h5",
  lang: "",
  tags: {
    
    
    defaultValue: ["v1"],
  },
},

:::
::::

違いを見ます?実際、HTML ドキュメント内の Web サイト本文の要素の位置に従って、どの要素からテキストを抽出するかを Algolia に指示する必要があります。たとえば、私が使用している vuepress-theme-reco テーマの場合は、以下.theme-reco-default-contentから。

1686140985552

変更後、独自の Web サイトのインターフェイスの URL を入力して、Web サイトの右側にある URL テスターでテストできます (ホームページではなくテキスト インターフェイスを選択していることに注意してください。結局のところ、ホームページには何もありません)インデックス作成用)、レコードにコンテンツがあることが確認できれば成功です。

1686141171926

その後、上の図で 4 のマークが付いた小さな目をクリックして概要インターフェイスに戻り、右上隅にある [クロールの再開] ボタンをクリックしてクローラーを再起動し、クロールが完了するまで辛抱強く待ちます。

1686141296294

参考文献

おすすめ

転載: blog.csdn.net/weixin_44495599/article/details/132022146
おすすめ