chore(i18n): added title tags to reference docs

pull/4969/head
Kenzo-Wada 2 months ago
parent 24e1ed7410
commit f9d0dfffbc

@ -1,10 +1,10 @@
# コマンドラインインターフェイス
# コマンドラインインターフェイス {#command-line-interface}
## `vitepress dev`
指定したディレクトリをルートとして VitePress の開発サーバーを起動します。既定はカレントディレクトリです。カレントディレクトリで実行する場合、`dev` コマンドは省略できます。
### 使い方
### 使い方 {#usage}
```sh
# カレントディレクトリで起動(`dev` を省略)
@ -14,7 +14,7 @@
vitepress dev [root]
```
### オプション
### オプション {#options}
| オプション | 説明 |
| ------------------ | -------------------------------------------------------------------- |
@ -29,13 +29,13 @@
本番用に VitePress サイトをビルドします。
### 使い方
### 使い方 {#usage-1}
```sh
vitepress build [root]
```
### オプション
### オプション {#options-1}
| オプション | 説明 |
| ----------------------------- | -------------------------------------------------------------------------------------------------- |
@ -49,13 +49,13 @@
本番ビルドをローカルでプレビューします。
### 使い方
### 使い方 {#usage-2}
```sh
vitepress preview [root]
```
### オプション
### オプション {#options-2}
| オプション | 説明 |
| ------------------ | ----------------------------------------- |
@ -66,7 +66,7 @@
カレントディレクトリで [セットアップウィザード](../guide/getting-started#setup-wizard) を起動します。
### 使い方
### 使い方 {#usage-3}
```sh
vitepress init

@ -1,8 +1,8 @@
# バッジ
# バッジ {#badge}
バッジを使うと、見出しにステータスを追加できます。たとえば、そのセクションの種類や対応バージョンを示すのに便利です。
## 使い方
## 使い方 {#usage}
グローバルに利用可能な `Badge` コンポーネントを使用します。
@ -20,7 +20,7 @@
### Title <Badge type="warning" text="beta" />
### Title <Badge type="danger" text="caution" />
## 子要素のカスタマイズ
## 子要素のカスタマイズ {#custom-children}
`<Badge>` は子要素(`children`)を受け取り、バッジ内に表示できます。
@ -30,7 +30,7 @@
### Title <Badge type="info">custom element</Badge>
## 種類ごとの色をカスタマイズ
## 種類ごとの色をカスタマイズ {#customize-type-color}
CSS 変数を上書きすることで、バッジのスタイルをカスタマイズできます。以下はデフォルト値です:

@ -1,4 +1,4 @@
# Carbon 広告
# Carbon 広告 {#carbon-ads}
VitePress は [Carbon Ads](https://www.carbonads.net/) をネイティブにサポートしています。設定で Carbon Ads の認証情報を定義すると、ページ上に広告が表示されます。

@ -1,4 +1,4 @@
# デフォルトテーマの設定
# デフォルトテーマの設定 {#default-theme-config}
テーマ設定では、テーマのカスタマイズができます。設定ファイルの `themeConfig` オプションで定義します。

@ -1,6 +1,6 @@
# 編集リンク
# 編集リンク {#edit-link}
## サイトレベルの設定
## サイトレベルの設定 {#site-level-config}
編集リンクは、GitHub や GitLab などの Git 管理サービスでそのページを編集できるリンクを表示します。有効化するには、設定に `themeConfig.editLink` オプションを追加します。
@ -49,7 +49,7 @@
}
```
## フロントマターでの設定
## フロントマターでの設定 {#frontmatter-config}
ページごとに無効化するには、フロントマターで `editLink` オプションを使用します。

@ -1,4 +1,4 @@
# フッター
# フッター {#footer}
`themeConfig.footer` を設定すると、ページ下部にグローバルフッターが表示されます。
@ -44,7 +44,7 @@ export default {
なお、[SideBar](./default-theme-sidebar) が表示されている場合はフッターは表示されません。
## フロントマターでの設定
## フロントマターでの設定 {#frontmatter-config}
ページ単位で無効化するには、フロントマターの `footer` オプションを使用します。

@ -1,4 +1,4 @@
# ホームページ
# ホームページ {#home-page}
VitePress のデフォルトテーマにはホームページ用レイアウトが用意されています([このサイトのトップページ](../) でも使われています)。[フロントマター](./frontmatter-config) に `layout: home` を指定すれば、任意のページで利用できます。
@ -10,7 +10,7 @@ layout: home
ただし、この指定だけでは多くのことは起きません。`hero` や `features` などの追加オプションを設定して、ホームページにあらかじめ用意された複数の「セクション」を配置できます。
## ヒーローセクション
## ヒーローセクション {#hero-section}
ヒーローセクションはホームページの最上部に表示されます。設定例は次のとおりです。
@ -77,7 +77,7 @@ interface HeroAction {
}
```
### name の色をカスタマイズする
### name の色をカスタマイズする {#customizing-the-name-color}
`name` にはブランドカラー(`--vp-c-brand-1`)が使われますが、`--vp-home-hero-name-color` 変数を上書きして色を変更できます。
@ -96,7 +96,7 @@ interface HeroAction {
}
```
## フィーチャーセクション
## フィーチャーセクション {#features-section}
フィーチャーセクションでは、ヒーロー直下に任意の数の機能説明を並べられます。フロントマターに `features` オプションを指定して設定します。
@ -165,7 +165,7 @@ type FeatureIcon =
}
```
## Markdown コンテンツ
## Markdown コンテンツ {#markdown-content}
`---` で区切るフロントマターの下に Markdown を書くだけで、ホームページに追加コンテンツを表示できます。

@ -1,4 +1,4 @@
# 最終更新日時
# 最終更新日時 {#last-updated}
ページ右下に、コンテンツの最終更新時刻を表示できます。有効化するには、設定に `lastUpdated` オプションを追加します。
@ -25,7 +25,7 @@ VitePress は各ファイルの **直近の Git コミットのタイムスタ
```
:::
## サイトレベルの設定
## サイトレベルの設定 {#site-level-config}
```js
export default {
@ -33,7 +33,7 @@ export default {
}
```
## フロントマターでの設定
## フロントマターでの設定 {#frontmatter-config}
ページ単位で無効化するには、フロントマターで `lastUpdated` を指定します。

@ -1,4 +1,4 @@
# レイアウト
# レイアウト {#layout}
ページの [フロントマター](./frontmatter-config) の `layout` オプションでページのレイアウトを選択できます。利用可能なレイアウトは `doc`、`page`、`home` の 3 種類です。何も指定しない場合は `doc` として扱われます。
@ -8,7 +8,7 @@ layout: doc
---
```
## Doc レイアウト
## Doc レイアウト {#doc-layout}
`doc` は既定のレイアウトで、Markdown 全体を「ドキュメント」風にスタイリングします。コンテンツ全体を `vp-doc` という CSS クラスでラップし、その配下の要素にスタイルを適用します。
@ -21,7 +21,7 @@ layout: doc
- アウトラインOutline
- [Carbon 広告](./default-theme-carbon-ads)
## Page レイアウト
## Page レイアウト {#page-layout}
`page` は「ブランクページ」として扱われます。Markdown はパースされ、[Markdown 拡張](../guide/markdown) も `doc` と同様に機能しますが、既定のスタイルは適用されません。
@ -29,15 +29,15 @@ layout: doc
なお、このレイアウトでも、ページがサイドバー設定に一致する場合はサイドバーが表示されます。
## Home レイアウト
## Home レイアウト {#home-layout}
`home` はテンプレート化された「ホームページ」を生成します。このレイアウトでは、`hero` や `features` などの追加オプションでコンテンツをさらにカスタマイズできます。詳しくは [デフォルトテーマ: ホームページ](./default-theme-home-page) を参照してください。
## レイアウトなし
## レイアウトなし {#no-layout}
レイアウトを一切適用したくない場合は、フロントマターで `layout: false` を指定します。これは(既定でサイドバー/ナビバー/フッターなしの)完全にカスタマイズ可能なランディングページを作りたい場合に役立ちます。
## カスタムレイアウト
## カスタムレイアウト {#custom-layout}
カスタムレイアウトを使用することもできます。

@ -1,8 +1,8 @@
# ナビゲーション
# ナビゲーション {#nav}
ナビはページ上部に表示されるナビゲーションバーです。サイトタイトル、グローバルメニューリンクなどを含みます。
## サイトタイトルとロゴ
## サイトタイトルとロゴ {#site-title-and-logo}
既定では、ナビには [`config.title`](./site-config#title) の値が表示されます。ナビに表示する文字列を変更したい場合は、`themeConfig.siteTitle` にカスタム文字列を指定します。
@ -37,7 +37,7 @@ export default {
ダーク/ライトモードでロゴを切り替えたり、`alt` 属性を付けたい場合は、ロゴにオブジェクトを渡すこともできます。詳細は [`themeConfig.logo`](./default-theme-config#logo) を参照してください。
## ナビゲーションリンク
## ナビゲーションリンク {#navigation-links}
`themeConfig.nav` オプションでナビにリンクを追加できます。
@ -116,7 +116,7 @@ export default {
}
```
### リンクの「アクティブ」状態をカスタマイズ
### リンクの「アクティブ」状態をカスタマイズ {#customize-link-s-active-state}
現在のページが特定のパス配下にあるとき、該当するナビ項目がハイライトされます。一致させるパスをカスタマイズしたい場合は、`activeMatch` に **正規表現文字列** を指定します。
@ -139,7 +139,7 @@ export default {
`activeMatch` は正規表現 **オブジェクト** ではなく、**文字列** で指定してください。ビルド時のシリアライズの都合で `RegExp` は使用できません。
:::
### リンクの `target``rel` をカスタマイズ
### リンクの `target``rel` をカスタマイズ {#customize-link-s-target-and-rel-attributes}
既定では、リンクが外部かどうかに応じて VitePress が `target``rel` を自動設定します。必要であれば明示的に指定することもできます。
@ -158,11 +158,11 @@ export default {
}
```
## ソーシャルリン
## ソーシャルリン<EFBFBD> {#social-links}
[`socialLinks`](./default-theme-config#sociallinks) を参照してください。
## カスタムコンポーネント
## カスタムコンポーネント {#custom-components}
`component` オプションを使って、ナビゲーションバーにカスタムコンポーネントを配置できます。`component` には Vue コンポーネント名を指定し、[Theme.enhanceApp](../guide/custom-theme#theme-interface) で **グローバル登録** しておく必要があります。

@ -1,4 +1,4 @@
# 前/次リンク
# 前/次リンク {#prev-next-links}
ドキュメントのフッターに表示される「前のページ」「次のページ」のテキストとリンクをカスタマイズできます。サイドバーに表示しているタイトルとは別の文言を使いたい場合や、フッターを無効化したり、サイドバーに含まれていないページへリンクしたい場合に便利です。

@ -2,9 +2,9 @@
outline: deep
---
# 検索
# 検索 {#search}
## ローカル検索
## ローカル検索 {#local-search}
VitePress は、[minisearch](https://github.com/lucaong/minisearch/) によるブラウザ内インデックスを使った曖昧一致の全文検索をサポートします。有効化するには、`.vitepress/config.ts` で `themeConfig.search.provider``'local'` に設定します。
@ -73,7 +73,7 @@ export default defineConfig({
})
```
### miniSearch のオプション
### miniSearch のオプション {#mini-search-options}
MiniSearch の設定例です。
@ -109,7 +109,7 @@ export default defineConfig({
詳しくは [MiniSearch のドキュメント](https://lucaong.github.io/minisearch/classes/MiniSearch.MiniSearch.html) を参照してください。
### コンテンツレンダラーのカスタマイズ
### コンテンツレンダラーのカスタマイズ {#custom-content-renderer}
インデックス前に Markdown コンテンツをレンダリングする関数をカスタマイズできます。
@ -137,7 +137,7 @@ export default defineConfig({
この関数はクライアント側のサイトデータからは除外されるため、Node.js の API を使用できます。
#### 例: 検索対象からページを除外する
#### 例: 検索対象からページを除外する {#example-excluding-pages-from-search}
フロントマターに `search: false` を追加すると、そのページを検索対象から除外できます。あるいは次のようにもできます。
@ -165,7 +165,7 @@ export default defineConfig({
カスタムの `_render` 関数を提供する場合、`search: false` の処理は自分で行う必要があります。また、`env` は `md.renderAsync` の呼び出し前には完全ではないため、`frontmatter` などの任意プロパティのチェックはその後に行ってください。
:::
#### 例: コンテンツの変換 — 見出しアンカーを追加
#### 例: コンテンツの変換 — 見出しアンカーを追加 {#example-transforming-content-adding-anchors}
```ts
import { defineConfig } from 'vitepress'
@ -187,7 +187,7 @@ export default defineConfig({
})
```
## Algolia 検索
## Algolia 検索 {#algolia-search}
VitePress は [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch) によるサイト検索をサポートします。導入は公式のガイドを参照してください。`.vitepress/config.ts` では最低限次の設定が必要です。
@ -342,7 +342,7 @@ export default defineConfig({
Ask AI UI の翻訳は `options.translations.modal.askAiScreen``options.translations.resultsScreen` にあります。すべてのキーは[型定義](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts)を参照してください。
### クローラー設定
### クローラー設定 {#crawler-config}
このサイトで使用している設定を元にした例です。

@ -1,4 +1,4 @@
# サイドバー
# サイドバー {#sidebar}
サイドバーはドキュメントの主要なナビゲーションブロックです。[`themeConfig.sidebar`](./default-theme-config#sidebar) でメニューを設定できます。
@ -19,7 +19,7 @@ export default {
}
```
## 基本
## 基本 {#the-basics}
最もシンプルな構成は、リンクの配列を 1 つ渡す方法です。第 1 階層のアイテムがサイドバーの「セクション」を表します。各セクションは `text`(セクションのタイトル)と、実際のナビゲーションリンクである `items` を持ちます。
@ -93,7 +93,7 @@ export default {
}
```
## 複数のサイドバー
## 複数のサイドバー {#multiple-sidebars}
ページのパスに応じて異なるサイドバーを表示できます。たとえば、このサイトのように「Guide」セクションと「Config」セクションでナビゲーションを分けたい場合に便利です。
@ -145,7 +145,7 @@ export default {
}
```
## 折りたたみ可能なサイドバーグループ
## 折りたたみ可能なサイドバーグループ {#collapsible-sidebar-groups}
サイドバーグループに `collapsed` オプションを追加すると、各セクションの開閉トグルが表示されます。

@ -23,11 +23,11 @@ const members = [
]
</script>
# チームページ
# チームページ {#team-page}
チームを紹介したい場合は、Team コンポーネント群を使ってチームページを構成できます。使い方は 2 通りあり、ドキュメントページに埋め込む方法と、専用のチームページを作成する方法があります。
## ページ内にメンバー一覧を表示する
## ページ内にメンバー一覧を表示する {#show-team-members-in-a-page}
任意のページでチームメンバーの一覧を表示するには、`vitepress/theme` からエクスポートされている `<VPTeamMembers>` コンポーネントを使用します。
@ -66,7 +66,7 @@ const members = [
メンバーが多い場合や、より広いスペースで紹介したい場合は、[専用のチームページを作成する](#専用のチームページを作成する) ことを検討してください。
## 専用のチームページを作成する
## 専用のチームページを作成する {#create-a-full-team-page}
ドキュメントページにメンバーを追加する代わりに、カスタムの [ホームページ](./default-theme-home-page) と同様、専用のチームページを作成することもできます。
@ -117,7 +117,7 @@ const members = [
`<VPMembers>` はドキュメントページで使う場合と同様に、メンバー一覧を表示します。
### セクションを追加してメンバーを分ける
### セクションを追加してメンバーを分ける {#add-sections-to-divide-team-members}
チームページに「セクション」を追加できます。たとえば、コアメンバーとコミュニティパートナーなど、役割ごとにメンバーを分けて説明しやすくできます。

@ -2,7 +2,7 @@
outline: deep
---
# フロントマター設定
# フロントマター設定 {#frontmatter-config}
フロントマターはページ単位の設定を可能にします。各 Markdown ファイルで、サイト全体やテーマレベルの設定を上書きできます。フロントマターでしか定義できない項目もあります。
@ -82,7 +82,7 @@ type HeadConfig =
| [string, Record<string, string>, string]
```
## デフォルトテーマ専用
## デフォルトテーマ専用 {#default-theme-only}
以下のフロントマター項目は、デフォルトテーマ使用時にのみ適用されます。

@ -1,4 +1,4 @@
# ランタイム API
# ランタイム API {#runtime-api}
VitePress には、アプリのデータへアクセスするための組み込み API がいくつか用意されています。さらに、グローバルに使用できる組み込みコンポーネントも提供されています。

@ -2,13 +2,13 @@
outline: deep
---
# サイト設定
# サイト設定 {#site-config}
サイト設定では、サイト全体のグローバル設定を定義します。アプリ設定オプションは、使用するテーマに関係なく、すべての VitePress サイトに適用されます。たとえば、ベースディレクトリやサイトのタイトルなどです。
## 概要
## 概要 {#overview}
### 設定ファイルの解決
### 設定ファイルの解決 {#config-resolution}
設定ファイルは常に `<root>/.vitepress/config.[ext]` から解決されます。`<root>` は VitePress の[プロジェクトルート](../guide/routing#root-and-source-directory)で、`[ext]` にはサポートされる拡張子が入ります。TypeScript はそのまま使えます。サポートされる拡張子は `.js`、`.ts`、`.mjs`、`.mts` です。
@ -80,7 +80,7 @@ export default defineConfig({
:::
### 設定のインテリセンス
### 設定のインテリセンス {#config-intellisense}
`defineConfig` ヘルパーを使うと、TypeScript による補完が効きます。対応 IDE であれば、JavaScript と TypeScript のどちらでも動作します。
@ -92,7 +92,7 @@ export default defineConfig({
})
```
### 型付きのテーマ設定
### 型付きのテーマ設定 {#typed-theme-config}
デフォルトでは、`defineConfig` はデフォルトテーマのテーマ設定型を想定します。
@ -119,7 +119,7 @@ export default defineConfigWithTheme<ThemeConfig>({
})
```
### Vite・Vue・Markdown の設定
### Vite・Vue・Markdown の設定 {#vite-vue-markdown-config}
- **Vite**
@ -133,7 +133,7 @@ export default defineConfigWithTheme<ThemeConfig>({
既定の [Markdown-It](https://github.com/markdown-it/markdown-it) インスタンスは、VitePress 設定の [markdown](#markdown) オプションでカスタマイズできます。
## サイトメタデータ
## サイトメタデータ {#site-metadata}
### title
@ -217,7 +217,7 @@ type HeadConfig =
| [string, Record<string, string>, string]
```
#### 例: favicon を追加
#### 例: favicon を追加 {#example-adding-a-favicon}
```ts
export default {
@ -229,7 +229,7 @@ export default {
*/
```
#### 例: Google Fonts を追加
#### 例: Google Fonts を追加 {#example-adding-google-fonts}
```ts
export default {
@ -256,7 +256,7 @@ export default {
*/
```
#### 例: Service Worker を登録
#### 例: Service Worker を登録 {#example-registering-a-service-worker}
```ts
export default {
@ -284,7 +284,7 @@ export default {
*/
```
#### 例: Google Analytics を使用
#### 例: Google Analytics を使用 {#example-using-google-analytics}
```ts
export default {
@ -343,7 +343,7 @@ export default {
}
```
## ルーティング
## ルーティング {#routing}
### cleanUrls
@ -370,7 +370,7 @@ export default {
}
```
## ビルド
## ビルド {#build}
### srcDir
@ -485,7 +485,7 @@ export default {
`true` にすると、本番アプリは [MPA モード](../guide/mpa-mode) でビルドされます。MPA モードは既定でクライアント JavaScript を 0kb で配信する代わりに、クライアントサイドのナビゲーションを無効にし、相互作用には明示的な opt-in が必要です。
## テーマ関連
## テーマ関連 {#theming}
### appearance
@ -513,7 +513,7 @@ Git を使って各ページの最終更新時刻を取得します。タイム
デフォルトテーマ使用時にこのオプションを有効にすると、各ページの最終更新時刻が表示されます。テキストは [`themeConfig.lastUpdatedText`](./default-theme-config#lastupdatedtext) でカスタマイズ可能です。
## カスタマイズ
## カスタマイズ {#customization}
### markdown
@ -557,7 +557,7 @@ export default {
}
```
## ビルドフック
## ビルドフック {#build-hooks}
VitePress のビルドフックを使うと、サイトに機能や振る舞いを追加できます。
@ -654,7 +654,7 @@ export default {
}
```
#### 例: 正規 URL の `<link>` を追加
#### 例: 正規 URL の `<link>` を追加 {#example-adding-a-canonical-url-link}
```ts
export default {

@ -0,0 +1,42 @@
# EXAMPLE USAGE:
#
# Refer for explanation to following link:
# https://lefthook.dev/configuration/
#
# pre-push:
# jobs:
# - name: packages audit
# tags:
# - frontend
# - security
# run: yarn audit
#
# - name: gems audit
# tags:
# - backend
# - security
# run: bundle audit
#
# pre-commit:
# parallel: true
# jobs:
# - run: yarn eslint {staged_files}
# glob: "*.{js,ts,jsx,tsx}"
#
# - name: rubocop
# glob: "*.rb"
# exclude:
# - config/application.rb
# - config/routes.rb
# run: bundle exec rubocop --force-exclusion {all_files}
#
# - name: govet
# files: git ls-files -m
# glob: "*.go"
# run: go vet {files}
#
# - script: "hello.js"
# runner: node
#
# - script: "hello.go"
# runner: go run
Loading…
Cancel
Save