![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/a26c594128435ec52eae983b79839dae.png\")
VuePress のページは本質的に Vue アプリケーションなので、Markdown 内で Vue コンポーネントを直接使用できます。この記事では、plume テーマでカスタムコンポーネントを作成・登録・使用する方法を紹介します。このページに表示されている色付きカードが最終結果です。
\ndocs/.vuepress/theme/components/ ディレクトリに DemoCard.vue を作成します：
<script setup>\ndefineProps({\n title: { type: String, default: '' },\n color: { type: String, default: '#2a9dff' },\n})\n</script>\n\n<template>\n <div class=\"demo-card\" :style=\"{ '--demo-card-color': color }\">\n <p v-if=\"title\" class=\"demo-card-title\">{{ title }}</p>\n <div class=\"demo-card-body\">\n <slot />\n </div>\n </div>\n</template>\n\n<style scoped>\n.demo-card {\n margin: 16px 0;\n padding: 14px 18px;\n border: 1px solid var(--demo-card-color);\n border-left-width: 4px;\n border-radius: 8px;\n}\n</style>コンポーネントは title と color の 2 つの props を受け取り、<slot /> を通じて Markdown に書かれた内容を受け取ります。
docs/.vuepress/client.ts でグローバル登録します：
import { defineClientConfig } from 'vuepress/client'\nimport DemoCard from './theme/components/DemoCard.vue'\n\nexport default defineClientConfig({\n enhance({ app }) {\n app.component('DemoCard', DemoCard)\n },\n})登録後は、どの Markdown ファイルでもコンポーネントタグを直接書けます：
\n<DemoCard title=\"これはカスタムコンポーネントです\" color=\"#8b5cf6\">\nMarkdown 内で直接使え、`props` とスロットに対応しています。\n</DemoCard>実際のレンダリング結果：
\n\n\nDemoCard）を推奨します。HTML のネイティブタグとの衝突を避けられますscoped 付きのスタイルはコンポーネント内に閉じ込められ、ページの他の部分に影響しませんenhance フックでプラグインをインストールするか、vuepress/client が提供するコンポジション API を直接インポートします私は自分のノートにローカル検索を使用していましたが、どうしても検索できない内容がありました。インターネットで検索した結果、Algolia DocSearchというサードパーティの検索サービスを見つけ、個人ウェブサイトの全文検索を実現することができました。
\nVuePressの公式ドキュメントではAlgolia検索が使われています。Algoliaを使用する最大の利点は、その便利さです。Algoliaはウェブサイトのコンテンツを自動でクロールしてインデックスを作成します。ユーザーはAlgoliaサービスに申し込み、ウェブサイトにいくつかのコードを追加するだけで、まるで解析コードを追加するように、全文検索機能を実現できます。
\nAlgolia DocSearch Applyのウェブサイトにアクセスし、ウェブサイトのURL、メールアドレス、リポジトリのURLなどの情報を入力し、申し込みを送信します。
\n\n\n注: 入力するウェブサイトのURLは公開されていて、完全で安定している必要があります。サイトがテスト段階にある場合、承認される確率は低くなります。
\n
申し込みが承認されると、Algolia DocSearchから確認メールが前のステップで入力したメールアドレスに送信されます。受信した後、このウェブサイトが私たちによって開発・保守されており、ウェブサイトのコードを変更できることを確認する返信を送る必要があります。
\n![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/cefffd2de66a1cb3dc6a990ce63f7363.png\")
\n\n\n返信内容: Thanks! I am the maintainer of the website, I can modify the code.
![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/474f4a3778615e8304666192f38ee064.png\")
その後、翌日にappId、apiKey、indexNameを含むメールが届きます。これらはウェブサイトのフレームワークに設定するために必要です：
\n![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/313fb240493680309001c1d3c4401e4a.png\")
Algolia DocSearchからのメールには、ウェブサイトのフレームワークに設定するためのappId、apiKey、indexNameが含まれています。私のノートテンプレートにはすでにこの設定が含まれています。その他のフレームワークでも同様です：
\n![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/1a87a85eb74faec8360b8db8c05a44ce.png\")
メールには招待を受けるリンクも含まれています。リンクからパスワードを再設定した後（アカウントは申し込んだときのメールアドレスです）、Algoliaにログインできます。
\n![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/0da780d320570674c5c411892e0cc3a1.png\")
ログイン後、対応するプロジェクトを選択します。これはindexNameと同じ名前です：
\n![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/8e179cfddc11e25020f10f3d782804ea.png\")
「Go To Crawler」ボタン（上図の青いボタン）をクリックして、クロールバックエンドに進みます。そこで新しいサイトへアクセスするように促されます：：
\n![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/83167707a55d37906a841f92dc803266.png\")
クロールに進むにはクリックします：
\n![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/7af053eb1a0cddc412fc4c7e8e13b5d3.png\")
上の画像の赤枠内の数字が0の場合は、次のステップを実行します：
\n左側のメニューで「Editor」をクリックして、クロールコードを確認・編集します。コード内のpathsToMatchパスに注意してください（画像内の白枠）。明らかに間違っています。後ろに余分なdocsがあります。それを正しいウェブサイトのパス https://biji.6996688.xyz/** に変更します：
\n\n理由は、私たちのウェブサイトのホームページがhttps://biji.6996688.xyz/で、検索したいコンテンツもここにあるからです。
\n
![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/35296146de56c200adf676522b023c14.png\")
変更が完了したらテストを実行します（画像内の赤枠部分）。データが正常に抽出されると（画像内の黄色枠のような内容）、右上の「Save」ボタンをクリックしてコードを保存します。その後、「Overview」に戻り、右上の「Restart crawling」をクリックして再度クロールを実行します。
\n\n\nもしデータが抽出できない場合は、以下を参照してください：https://github.com/mqyqingfeng/Blog/issues/267#issuecomment-1078620438
\n
完了です。
\n", "image": "https://my-img.6996688.xyz/fantasy-biji/2024/09/a26c594128435ec52eae983b79839dae.png", "date_published": "2024-12-13T06:49:21.000Z", "date_modified": "2026-10-03T14:15:19.000Z", "authors": [], "tags": [] }, { "title": "「Windowsシリーズ」Windows 11でBBR輻輳制御アルゴリズムを導入してインストールする方法", "url": "https://biji.6996688.xyz/ja/blog/j36meg10/", "id": "https://biji.6996688.xyz/ja/blog/j36meg10/", "summary": " Windows 11 22H2はTCP BBR v2輻輳制御をサポートしています。本記事では、簡単な設定で、WindowsのデフォルトのCubic輻輳制御からBBR v2輻輳制御に切り替え、再起動なしでネットワーク速度を飛躍的に向上させる方法を説明します。 一、BBRアルゴリズムとは？ BBR (Bottleneck Bandwidth and...", "content_html": "\tWindows 11 22H2はTCP BBR v2輻輳制御をサポートしています。本記事では、簡単な設定で、WindowsのデフォルトのCubic輻輳制御からBBR v2輻輳制御に切り替え、再起動なしでネットワーク速度を飛躍的に向上させる方法を説明します。
\n\tBBR (Bottleneck Bandwidth and Round-trip propagation time) は、TCPプロトコルの輻輳制御アルゴリズムで、高帯域幅および高パケットロスのネットワーク環境でのパフォーマンス最適化を目的としています。BBRは、ネットワークの輻輳状況と遅延に基づいて送信速度を動的に調整し、最大のネットワークスループットと最小の遅延を実現します。BBRアルゴリズムは、ネットワークの帯域幅と遅延を動的に測定・推定し、適切な輻輳ウィンドウサイズを決定して、より良い伝送効果を達成します。BBRアルゴリズムは、Googleのネットワークサービス（YouTubeやGoogle Cloudプラットフォームなど）で広く使用されています。
\n\tCUBIC (Cubic TCP) アルゴリズムは、BB-Renoアルゴリズムに似た輻輳制御アルゴリズムで、BB-Renoアルゴリズムと異なり、非線形の輻輳ウィンドウ増加方式を採用しており、高帯域幅、高遅延のネットワーク環境により適応しやすい特徴があります。
\n\tCUBICアルゴリズムの輻輳ウィンドウは、立方体のような増加曲線に従い、輻輳ウィンドウの適応を、輻輳ウィンドウのフィッティングカーブを計算する仕組みで調整します。CUBICアルゴリズムは、パケットロスの監視を通じてウィンドウサイズを調整し、輻輳の回避と制御を行います。CUBICアルゴリズムは、ネットワークの輻輳時に自動的に輻輳回避および復旧措置を講じ、ネットワークのパフォーマンスを安定させ、スムーズに保つことができます。
\n\tCUBICアルゴリズムは、LinuxのTCPモジュールで広く使用されており、さまざまな広域ネットワークやインターネット環境でも利用されている非常に実用的な輻輳制御アルゴリズムです。
\nBBRアルゴリズムとCUBICアルゴリズムには、以下のような本質的な違いがあります：
\n\t簡単に言うと、最適な輻輳制御アルゴリズムの選択は、ネットワーク環境によって決まります。一般的に、ネットワークの帯域幅が大きく、パケットロスが少ない場合、BBRアルゴリズムが有利です。なぜなら、BBRはネットワークの帯域幅を迅速に検出し、それを最大限に活用できるからです。反対に、ネットワークの帯域幅が小さく、パケットロスが多い場合は、CUBICアルゴリズムがネットワーク状況に適応しやすく、パケットロスや輻輳の問題を減らすことができます。したがって、アルゴリズムの選択は、実際のネットワーク状況や要件に基づいて行う必要があります。
\n5.1 現在のアルゴリズムを確認
\n管理者としてPowerShellを開きます。
\n以下のコマンドを入力して、現在のアルゴリズムを確認します。
\n NetTCPSetting | Select SettingName, CongestionProvider![](\"https://my-img.6996688.xyz/fantasy-biji/2024/09/a7a4266ed457809cbb55f3fb2f74e166.png\")
5.2 BBRアルゴリズムに切り替える
\n以下のコマンドを順番に入力します。
\n netsh int tcp set supplemental template=Internet congestionprovider=BBR2\n netsh int tcp set supplemental template=InternetCustom congestionprovider=BBR2\n netsh int tcp set supplemental template=Datacenter congestionprovider=BBR2\n netsh int tcp set supplemental template=DatacenterCustom congestionprovider=BBR2\n netsh int tcp set supplemental template=Compat congestionprovider=BBR2すべてのコマンドを実行した後、再度「現在のアルゴリズムを確認」のコマンドを入力して、正しく切り替わっているか確認します。
\n SettingName CongestionProvider太字: 太字テキスト
\n斜体: 斜体テキスト
\n取り消し線テキスト
内容 ハイライト
\n数式: −(2n−1) ~ 2n−1−1
\n∂ωr∂r(ωyω)=(ωyω){(logy)r+∑i=1rωi(−1)Ir⋯(r−i+1)(logy)ri}
\n19番目
\nH2O
\n::: 中央揃え\n中央揃えの内容\n:::
\n::: 右揃え\n右揃えの内容\n:::
\n| テーブル | 中央揃え | 右揃え |\n|
\n", "date_published": "2024-12-12T05:07:31.000Z", "date_modified": "2026-10-03T14:15:19.000Z", "authors": [], "tags": [] }, { "title": "bar", "url": "https://biji.6996688.xyz/ja/demo/q7w72mvx/", "id": "https://biji.6996688.xyz/ja/demo/q7w72mvx/", "content_html": "\n", "date_published": "2024-12-12T05:07:31.000Z", "date_modified": "2026-10-03T14:15:19.000Z", "authors": [], "tags": [] }, { "title": "foo", "url": "https://biji.6996688.xyz/ja/demo/921i08bb/", "id": "https://biji.6996688.xyz/ja/demo/921i08bb/", "content_html": "\n", "date_published": "2024-12-12T05:07:31.000Z", "date_modified": "2026-10-03T14:15:19.000Z", "authors": [], "tags": [] }, { "title": "Demo", "url": "https://biji.6996688.xyz/ja/demo/", "id": "https://biji.6996688.xyz/ja/demo/", "content_html": "