1. コンポーネントを作成

docs/.vuepress/theme/components/ ディレクトリに DemoCard.vue を作成します：

<script setup>
defineProps({
  title: { type: String, default: '' },
  color: { type: String, default: '#2a9dff' },
})
</script>

<template>
  <div class="demo-card" :style="{ '--demo-card-color': color }">
    <p v-if="title" class="demo-card-title">{{ title }}</p>
    <div class="demo-card-body">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.demo-card {
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px solid var(--demo-card-color);
  border-left-width: 4px;
  border-radius: 8px;
}
</style>

コンポーネントは title と color の 2 つの props を受け取り、<slot /> を通じて Markdown に書かれた内容を受け取ります。

2. コンポーネントを登録

docs/.vuepress/client.ts でグローバル登録します：

import { defineClientConfig } from 'vuepress/client'
import DemoCard from './theme/components/DemoCard.vue'

export default defineClientConfig({
  enhance({ app }) {
    app.component('DemoCard', DemoCard)
  },
})

3. 記事で使用

登録後は、どの Markdown ファイルでもコンポーネントタグを直接書けます：

<DemoCard title="これはカスタムコンポーネントです" color="#8b5cf6">
Markdown 内で直接使え、`props` とスロットに対応しています。
</DemoCard>

実際のレンダリング結果：

注意点

• コンポーネント名はパスカルケース（例：DemoCard）を推奨します。HTML のネイティブタグとの衝突を避けられます
• scoped 付きのスタイルはコンポーネント内に閉じ込められ、ページの他の部分に影響しません
• コンポーネント内でルート情報などのグローバル状態を使いたい場合は、enhance フックでプラグインをインストールするか、vuepress/client が提供するコンポジション API を直接インポートします

私は自分のノートにローカル検索を使用していましたが、どうしても検索できない内容がありました。インターネットで検索した結果、Algolia DocSearchというサードパーティの検索サービスを見つけ、個人ウェブサイトの全文検索を実現することができました。

2. Algolia

VuePressの公式ドキュメントではAlgolia検索が使われています。Algoliaを使用する最大の利点は、その便利さです。Algoliaはウェブサイトのコンテンツを自動でクロールしてインデックスを作成します。ユーザーはAlgoliaサービスに申し込み、ウェブサイトにいくつかのコードを追加するだけで、まるで解析コードを追加するように、全文検索機能を実現できます。

3. 全文検索の実装

1. Algolia DocSearchサービスの申し込み

Algolia DocSearch Applyのウェブサイトにアクセスし、ウェブサイトのURL、メールアドレス、リポジトリのURLなどの情報を入力し、申し込みを送信します。

注: 入力するウェブサイトのURLは公開されていて、完全で安定している必要があります。サイトがテスト段階にある場合、承認される確率は低くなります。

2. 確認メールに返信

申し込みが承認されると、Algolia DocSearchから確認メールが前のステップで入力したメールアドレスに送信されます。受信した後、このウェブサイトが私たちによって開発・保守されており、ウェブサイトのコードを変更できることを確認する返信を送る必要があります。

返信内容: Thanks! I am the maintainer of the website, I can modify the code.

その後、翌日にappId、apiKey、indexNameを含むメールが届きます。これらはウェブサイトのフレームワークに設定するために必要です：

3. 検索サービスの開始

Algolia DocSearchからのメールには、ウェブサイトのフレームワークに設定するためのappId、apiKey、indexNameが含まれています。私のノートテンプレートにはすでにこの設定が含まれています。その他のフレームワークでも同様です：

メールには招待を受けるリンクも含まれています。リンクからパスワードを再設定した後（アカウントは申し込んだときのメールアドレスです）、Algoliaにログインできます。

ログイン後、対応するプロジェクトを選択します。これはindexNameと同じ名前です：

「Go To Crawler」ボタン（上図の青いボタン）をクリックして、クロールバックエンドに進みます。そこで新しいサイトへアクセスするように促されます：：

クロールに進むにはクリックします：

上の画像の赤枠内の数字が0の場合は、次のステップを実行します：

左側のメニューで「Editor」をクリックして、クロールコードを確認・編集します。コード内のpathsToMatchパスに注意してください（画像内の白枠）。明らかに間違っています。後ろに余分なdocsがあります。それを正しいウェブサイトのパス https://biji.6996688.xyz/** に変更します：

理由は、私たちのウェブサイトのホームページがhttps://biji.6996688.xyz/で、検索したいコンテンツもここにあるからです。

変更が完了したらテストを実行します（画像内の赤枠部分）。データが正常に抽出されると（画像内の黄色枠のような内容）、右上の「Save」ボタンをクリックしてコードを保存します。その後、「Overview」に戻り、右上の「Restart crawling」をクリックして再度クロールを実行します。

もしデータが抽出できない場合は、以下を参照してください：https://github.com/mqyqingfeng/Blog/issues/267#issuecomment-1078620438

完了です。

一、BBRアルゴリズムとは？

​ BBR (Bottleneck Bandwidth and Round-trip propagation time) は、TCPプロトコルの輻輳制御アルゴリズムで、高帯域幅および高パケットロスのネットワーク環境でのパフォーマンス最適化を目的としています。BBRは、ネットワークの輻輳状況と遅延に基づいて送信速度を動的に調整し、最大のネットワークスループットと最小の遅延を実現します。BBRアルゴリズムは、ネットワークの帯域幅と遅延を動的に測定・推定し、適切な輻輳ウィンドウサイズを決定して、より良い伝送効果を達成します。BBRアルゴリズムは、Googleのネットワークサービス（YouTubeやGoogle Cloudプラットフォームなど）で広く使用されています。

二、現在Windowsのデフォルトアルゴリズムは？

​ CUBIC (Cubic TCP) アルゴリズムは、BB-Renoアルゴリズムに似た輻輳制御アルゴリズムで、BB-Renoアルゴリズムと異なり、非線形の輻輳ウィンドウ増加方式を採用しており、高帯域幅、高遅延のネットワーク環境により適応しやすい特徴があります。

​ CUBICアルゴリズムの輻輳ウィンドウは、立方体のような増加曲線に従い、輻輳ウィンドウの適応を、輻輳ウィンドウのフィッティングカーブを計算する仕組みで調整します。CUBICアルゴリズムは、パケットロスの監視を通じてウィンドウサイズを調整し、輻輳の回避と制御を行います。CUBICアルゴリズムは、ネットワークの輻輳時に自動的に輻輳回避および復旧措置を講じ、ネットワークのパフォーマンスを安定させ、スムーズに保つことができます。

​ CUBICアルゴリズムは、LinuxのTCPモジュールで広く使用されており、さまざまな広域ネットワークやインターネット環境でも利用されている非常に実用的な輻輳制御アルゴリズムです。

三、BBRとCUBICの違い

BBRアルゴリズムとCUBICアルゴリズムには、以下のような本質的な違いがあります：

1. アルゴリズムの考え方：BBRアルゴリズムは、ネットワーク内で最後のボトルネックとなるリンクの帯域幅と遅延を維持することを核心としており、ネットワークの最小帯域幅と最大遅延を基準に輻輳制御を行います。一方、CUBICアルゴリズムは、輻輳ウィンドウの変化に基づいて自適応制御を行います。
2. アルゴリズムのパラメータ：BBRアルゴリズムは、帯域幅や遅延などのネットワークパラメータを動的に測定・推定する必要があります。CUBICアルゴリズムは、輻輳ウィンドウサイズの変化に応じて調整します。
3. アルゴリズムの適用環境：BBRアルゴリズムは、高帯域幅、高遅延、小さなパケットのネットワーク環境に適しています。Googleのネットワークサービスなどで使用されています。一方、CUBICアルゴリズムは、高帯域幅、長距離の広域ネットワーク環境に適しています。

四、どの環境で異なるアルゴリズムを使用すべきか？

​ 簡単に言うと、最適な輻輳制御アルゴリズムの選択は、ネットワーク環境によって決まります。一般的に、ネットワークの帯域幅が大きく、パケットロスが少ない場合、BBRアルゴリズムが有利です。なぜなら、BBRはネットワークの帯域幅を迅速に検出し、それを最大限に活用できるからです。反対に、ネットワークの帯域幅が小さく、パケットロスが多い場合は、CUBICアルゴリズムがネットワーク状況に適応しやすく、パケットロスや輻輳の問題を減らすことができます。したがって、アルゴリズムの選択は、実際のネットワーク状況や要件に基づいて行う必要があります。

五、Windows 11でBBRアルゴリズムに切り替える方法

5.1 現在のアルゴリズムを確認

• 管理者としてPowerShellを開きます。

• 以下のコマンドを入力して、現在のアルゴリズムを確認します。

   NetTCPSetting | Select SettingName, CongestionProvider

5.2 BBRアルゴリズムに切り替える

• 以下のコマンドを順番に入力します。

   netsh int tcp set supplemental template=Internet congestionprovider=BBR2
   netsh int tcp set supplemental template=InternetCustom congestionprovider=BBR2
   netsh int tcp set supplemental template=Datacenter congestionprovider=BBR2
   netsh int tcp set supplemental template=DatacenterCustom congestionprovider=BBR2
   netsh int tcp set supplemental template=Compat congestionprovider=BBR2

• すべてのコマンドを実行した後、再度「現在のアルゴリズムを確認」のコマンドを入力して、正しく切り替わっているか確認します。

   SettingName      CongestionProvider

見出し3

見出し4

見出し5

見出し6

太字: 太字テキスト

斜体: 斜体テキスト

取り消し線テキスト

内容 ハイライト

数式: $-(2^{n-1})$ ~ $2^{n-1} -1$

$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$

19^番目

H₂O

::: 中央揃え 中央揃えの内容 :::

::: 右揃え 右揃えの内容 :::

• 箇条書き1
• 箇条書き2
• 箇条書き3

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3

• タスクリスト1
• タスクリスト2
• タスクリスト3
• タスクリスト4

| テーブル | 中央揃え | 右揃え | |