|
1 | 1 | --- |
2 | 2 | title: サイト内検索 |
3 | 3 | description: Starlight組み込みのサイト内検索機能と、そのカスタマイズ方法について学びます。 |
| 4 | +tableOfContents: |
| 5 | + maxHeadingLevel: 4 |
4 | 6 | --- |
5 | 7 |
|
6 | 8 | import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; |
@@ -108,24 +110,83 @@ title: 部分的にインデックスされるページ |
108 | 110 |
|
109 | 111 | このように設定を更新すると、サイトの検索バーはデフォルトの検索モーダルではなく、Algoliaのモーダルを開きます。 |
110 | 112 |
|
| 113 | +#### DocSearchの設定 |
| 114 | + |
| 115 | +Starlight DocSearchプラグインでは、以下のインラインオプションによりDocSearchコンポーネントをカスタマイズできます。 |
| 116 | + |
| 117 | +- `maxResultsPerGroup`: 各検索グループに表示される結果の最大数を制限します。デフォルトは`5`です。 |
| 118 | +- `disableUserPersonalization`: DocSearchがユーザーの最近の検索やお気に入りをローカルストレージに保存しないようにします。デフォルトは`false`です。 |
| 119 | +- `insights`: Algolia Insightsプラグインを有効にし、DocSearchインデックスに検索イベントを送信します。デフォルトは`false`です。 |
| 120 | +- `searchParameters`: [Algoliaの検索パラメータ](https://www.algolia.com/doc/api-reference/search-api-parameters/)をカスタマイズするオブジェクトです。 |
| 121 | + |
| 122 | +##### その他のDocSearchオプション |
| 123 | + |
| 124 | +`transformItems()`や`resultsFooterComponent()`などの関数オプションをDocSearchコンポーネントに渡すには、別の設定ファイルが必要です。 |
| 125 | + |
| 126 | +<Steps> |
| 127 | + |
| 128 | +1. DocSearchの設定をエクスポートするTypeScriptファイルを作成します。 |
| 129 | + |
| 130 | + ```ts |
| 131 | + // src/config/docsearch.ts |
| 132 | + import type { DocSearchClientOptions } from '@astrojs/starlight-docsearch'; |
| 133 | + |
| 134 | + export default { |
| 135 | + appId: 'YOUR_APP_ID', |
| 136 | + apiKey: 'YOUR_SEARCH_API_KEY', |
| 137 | + indexName: 'YOUR_INDEX_NAME', |
| 138 | + getMissingResultsUrl({ query }) { |
| 139 | + return `https://github.com/algolia/docsearch/issues/new?title=${query}`; |
| 140 | + }, |
| 141 | + // ... |
| 142 | + } satisfies DocSearchClientOptions; |
| 143 | + ``` |
| 144 | + |
| 145 | +2. `astro.config.mjs`で、Starlight DocSearchプラグインに設定ファイルのパスを渡します。 |
| 146 | + |
| 147 | + ```js {11-13} |
| 148 | + // astro.config.mjs |
| 149 | + import { defineConfig } from 'astro/config'; |
| 150 | + import starlight from '@astrojs/starlight'; |
| 151 | + import starlightDocSearch from '@astrojs/starlight-docsearch'; |
| 152 | + |
| 153 | + export default defineConfig({ |
| 154 | + integrations: [ |
| 155 | + starlight({ |
| 156 | + title: 'DocSearchを使ったサイト', |
| 157 | + plugins: [ |
| 158 | + starlightDocSearch({ |
| 159 | + clientOptionsModule: './src/config/docsearch.ts', |
| 160 | + }), |
| 161 | + ], |
| 162 | + }), |
| 163 | + ], |
| 164 | + }); |
| 165 | + ``` |
| 166 | + |
| 167 | +</Steps> |
| 168 | + |
| 169 | +サポートされているすべてのオプションについては、[DocSearchのJavaScriptクライアントAPIリファレンス](https://docsearch.algolia.com/docs/api/)を参照してください。 |
| 170 | + |
111 | 171 | #### DocSearch UIを翻訳する |
112 | 172 |
|
113 | 173 | DocSearchはデフォルトで英語のUI文字列のみを提供しています。Starlightの組み込みの[国際化の仕組み](/ja/guides/i18n/#starlightのuiを翻訳する)を使って、モーダルのUIを翻訳できます。 |
114 | 174 |
|
115 | 175 | <Steps> |
116 | 176 |
|
117 | | -1. `src/content/config.ts`で、Starlightの`i18n`コンテンツコレクション定義をDocSearchスキーマにより拡張します。 |
| 177 | +1. `src/content.config.ts`で、Starlightの`i18n`コンテンツコレクション定義をDocSearchスキーマにより拡張します。 |
118 | 178 |
|
119 | | - ```js ins={4} ins=/{ extend: .+ }/ |
120 | | - // src/content/config.ts |
| 179 | + ```js ins={5} ins=/{ extend: .+ }/ |
| 180 | + // src/content.config.ts |
121 | 181 | import { defineCollection } from 'astro:content'; |
| 182 | + import { docsLoader, i18nLoader } from '@astrojs/starlight/loaders'; |
122 | 183 | import { docsSchema, i18nSchema } from '@astrojs/starlight/schema'; |
123 | 184 | import { docSearchI18nSchema } from '@astrojs/starlight-docsearch/schema'; |
124 | 185 |
|
125 | 186 | export const collections = { |
126 | | - docs: defineCollection({ schema: docsSchema() }), |
| 187 | + docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), |
127 | 188 | i18n: defineCollection({ |
128 | | - type: 'data', |
| 189 | + loader: i18nLoader(), |
129 | 190 | schema: i18nSchema({ extend: docSearchI18nSchema() }), |
130 | 191 | }), |
131 | 192 | }; |
@@ -170,3 +231,13 @@ DocSearchはデフォルトで英語のUI文字列のみを提供しています |
170 | 231 | ``` |
171 | 232 |
|
172 | 233 | </Steps> |
| 234 | + |
| 235 | +### コミュニティ製の検索プロバイダ |
| 236 | + |
| 237 | +[コミュニティ製プラグイン](/ja/resources/plugins/#コミュニティ製プラグイン)により、Starlight組み込みのPagefind検索プロバイダの代替を利用することもできます。 |
| 238 | + |
| 239 | +#### Typesense DocSearch |
| 240 | + |
| 241 | +[Starlight DocSearch Typesense](https://starlight-docsearch.typesense.org/)コミュニティプラグインは、[DocSearch](https://github.com/typesense/typesense-docsearch.js)インターフェースと[Typesense](https://typesense.org/)バックエンドを統合した、オープンソースでセルフホスト可能な代替手段を提供します。 |
| 242 | + |
| 243 | +プロジェクトでの使用方法については、Starlight DocSearch Typesenseドキュメントの[「Getting Started」](https://starlight-docsearch.typesense.org/getting-started/)ガイドを参照してください。 |
0 commit comments