コピー ページ オプション
このプラグインのインストール手順とフルマークダウンガイドを含む設定プロンプトをコピーする
このガイドでは、Capacitor プラグインをCapgo ウェブサイトに追加する方法や既存のプラグインドキュメントを更新する方法について説明します。これは、ドキュメントを維持するために協力するコントリビューター、メンテナー、AIエージェントにとって便利です。
新しいCapgo プラグインを追加する場合、ウェブサイトの複数のファイルと場所を更新する必要があります。これにより、プラグインがすべての関連する場所で正しく表示されるようにします:
- プラグインリストの構成 - プラグインメタデータをマスター リストに追加する
- プラグイン インデックス ページ - カテゴリごとのプラグイン リストにプラグインを追加する
- サイド バー ナビゲーション - ドキュメント サイド バーにプラグインを追加する
- プラグイン ドキュメント - オーバービューとスタートガイドのページを作成する
- プラグイン チュートリアル - 広範なチュートリアルを作成する
ファイルの場所
ファイルの場所重要なファイルを更新する
重要なファイルを更新する| ファイル | 目的 |
|---|---|
/src/config/plugins.ts | マスタープラグインリストとメタデータ |
/src/content/docs/docs/plugins/index.mdx | プラグインインデックスページ |
/astro.config.mjs | サイドバーのナビゲーション設定 |
/src/content/docs/docs/plugins/[plugin-name]/ | プラグインドキュメントディレクトリ |
/src/content/plugins-tutorials/en/ | 英語チュートリアルファイル |
ステップバイステップガイド
ステップバイステップガイド-
マスターリストにプラグインを追加
マスターリストにプラグインを追加開く
/src/config/plugins.tsと追加します。actions配列:// First, import an appropriate Heroiconimport YourIconName from 'astro-heroicons/mini/IconName.astro'// Then add to the actions array{name: '@capgo/your-plugin-name',author: 'github.com/Cap-go',description: 'Brief description of what the plugin does',href: 'https://github.com/Cap-go/your-plugin-name/',title: 'Display Name',icon: YourIconName,}利用可能なアイコン: 利用可能なアイコンを確認
/node_modules/astro-heroicons/mini/インデックスページにプラグインを追加 -
セクション「インデックスページにプラグインを追加」
開くと適切なカテゴリの下にプラグインを追加します。
/src/content/docs/docs/plugins/index.mdxクリップボードにコピー<LinkCardtitle="Your Plugin Name"description="Brief description of what the plugin does"href="/docs/plugins/your-plugin-name/"/>利用可能なアイコン:
- ⭐ 代表的なプラグイン
- 📱 デバイス & システム プラグイン
- 🎥 メディア & カメラ プラグイン
- 🛠️ ユーティリティ プラグイン
- 🤖 AI & アドバンスト メディア
- 📍 ロケーション & バックグラウンド サービス
- 📞 通信 & アナリティクス
- 🔐 セキュリティ & システム
- 📊 Android固有の機能
- 📥 ダウンロード & ナビゲーション
-
サイドバー ナビゲーションに追加
セクション "サイドバー ナビゲーションに追加"開く
/astro.config.mjsそしてサイドバーの設定 (約 540 行目) にプラグインを追加してください。{label: 'Your Plugin Name',items: [{ label: 'Overview', link: '/docs/plugins/your-plugin-name/' },{ label: 'Getting started', link: '/docs/plugins/your-plugin-name/getting-started' },],collapsed: true,}サイドバーで表示されるプラグインはアルファベット順に表示されます。
-
プラグインドキュメントディレクトリを作成
セクション「プラグインドキュメントディレクトリを作成」プラグインドキュメント用のディレクトリを作成してください。
ターミナル画面 mkdir -p /src/content/docs/docs/plugins/your-plugin-name/ -
プラグイン概要ページを作成
セクション「プラグイン概要ページを作成」作成
/src/content/docs/docs/plugins/your-plugin-name/index.mdx:---title: "@capgo/your-plugin-name"description: Brief description of the plugin's purposetableOfContents: falsenext: falseprev: falsesidebar:order: 1label: "Introduction"hero:tagline: Detailed tagline explaining what the plugin doesimage:file: ~public/your-plugin-icon.svgactions:- text: Get startedlink: /docs/plugins/your-plugin-name/getting-started/icon: right-arrowvariant: primary- text: Githublink: https://github.com/Cap-go/your-plugin-name/icon: externalvariant: minimal---import { Card, CardGrid } from '@astrojs/starlight/components';<CardGrid stagger><Card title="Feature 1" icon="puzzle">Description of first key feature</Card><Card title="Feature 2" icon="rocket">Description of second key feature</Card><Card title="Cross-platform" icon="puzzle">Works on both iOS and Android 📱</Card><Card title="Comprehensive Documentation" icon="open-book">Check the [Documentation](/docs/plugins/your-plugin-name/getting-started/) to master the plugin.</Card></CardGrid> -
スタートガイドの作成
「スタートガイドの作成」のセクション作成
/src/content/docs/docs/plugins/your-plugin-name/getting-started.mdx:---title: Getting Starteddescription: Learn how to install and use the plugin in your Capacitor app.sidebar:order: 2---import { Steps } from '@astrojs/starlight/components';import { PackageManagers } from 'starlight-package-managers'<Steps>1. **Install the package**<PackageManagers pkg="@capgo/your-plugin-name" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} />2. **Sync with native projects**<PackageManagers type="exec" pkg="cap" args="sync" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} /></Steps>## Configuration### iOS Configuration[iOS-specific setup instructions]### Android Configuration[Android-specific setup instructions]## Usage[Basic usage examples]## API Reference[Detailed API documentation]## Complete Example[Full working example]## Best Practices[Recommended practices and tips]## Platform Notes[Platform-specific notes and limitations] -
チュートリアルファイルの作成
「チュートリアルファイルの作成」のセクション作成
/src/content/plugins-tutorials/en/your-plugin-name.md:---locale: en---# Using @capgo/your-plugin-name PackageThe `@capgo/your-plugin-name` package [brief description]. In this tutorial, we will guide you through the installation, configuration, and usage of this package in your Ionic Capacitor app.## Installation[Installation steps]## Configuration[Configuration steps for iOS and Android]## API Usage[Detailed API usage examples]## Complete Example[Full working example]## Best Practices[Tips and best practices]## Troubleshooting[Common issues and solutions]## Conclusion[Summary and links to additional resources]
プラグインドキュメント構造
「プラグインドキュメント構造」のセクション必要なファイル
必要なファイルsrc/content/docs/docs/plugins/your-plugin-name/├── index.mdx # Overview page with hero and feature cards└── getting-started.mdx # Installation and usage guide
src/content/plugins-tutorials/en/└── your-plugin-name.md # Comprehensive tutorialオプションファイル
オプションファイル複雑なプラグインの場合、追加のドキュメントページを追加できます:
src/content/docs/docs/plugins/your-plugin-name/├── index.mdx├── getting-started.mdx├── api-reference.mdx # Detailed API documentation├── examples.mdx # Additional examples├── troubleshooting.mdx # Troubleshooting guide└── migrations.mdx # Migration guidesコンテンツガイドライン
プラグインの説明書きを書く説明書きを書く
簡潔に- : 説明書きは100文字以内でなければなりません必要なファイルのセクション
- 具体にする: これはプラグインの説明ではなく、プラグインが何をするかを説明することです
- 動詞を使う: 「制御する」、「統合する」、「有効にする」などの動詞から始める
良い例:
- 「簡単なオン/オフのスイッチでデバイスのフラッシュライトとターチを制御する」
- 「アプリにクライスライブチャットと顧客サポートを統合する」
- 「Face IDとTouch IDを使用した安全な認証を有効にする」
悪い例:
- 「フラッシュ用のプラグイン」
- 「これはクライスプラグインです」
- 「バイオメトリックプラグイン」
ドキュメントの作成
「ドキュメントの作成」のセクション- インストールから始める: 明確なインストール手順から始める
- 設定を提供する: プラットフォーム固有のセットアップ要件を含める
- 使用例を示す: 動作する code の例を提供する
- API のリファレンスを含める: 全てのメソッドとパラメータをドキュメントする
- 完全な例を追加する: 実世界の使用パターンを示す
- List 最適化のベストプラクティス: 最適化の使用を最適化するためのヒントを共有する
- プラットフォームの差異をドキュメントする: iOS と Android の動作を明確にする
- トラブルシューティングを追加する: 共通の問題を解決する
Code の例
セクション「Code の例」- code の例では TypeScript を使用する
- __CAPGO_KEEP_0__ の例では、トップに import を追加する
- __CAPGO_KEEP_0__ の例では、重要なステップを説明するコメントを追加する
- __CAPGO_KEEP_0__ の例では、エラー処理を表示する
- 基本と高度な使用法の両方を示す
チェックリスト
「チェックリスト」というセクション新しいプラグインを追加する際に使用するチェックリストです。
- プラグインを追加しました
/src/config/plugins.ts - Heroiconsから適切なアイコンを選択しました
- プラグインを追加しました
/src/content/docs/docs/plugins/index.mdx正しいカテゴリの下 - サイドバーにエントリを追加しました
/astro.config.mjs - プラグインドキュメントディレクトリを作成しました
- 作成
index.mdx概要ページ - 作成
getting-started.mdxガイド - 作成されたチュートリアル
/src/content/plugins-tutorials/en/ - インストールの手順を含む
- iOSの設定を文書化
- Androidの設定を文書化
- 使用例を提供
- APIの参照を追加
- 完全な実行可能な例を含む
- ベストプラクティスをリスト
- プラットフォーム固有の注釈を追加
- すべてのリンクが正しく機能することをテスト
アイコン リファレンス
アイコン リファレンスプラグインで使用される一般的なアイコン ( astro-heroicons/mini/):
| アイコン | 用途 |
|---|---|
BoltIcon | フラッシュ、電力、エネルギー |
CameraIcon | カメラ、写真、ビデオ |
ChatBubbleLeftIcon | チャット、メッセージング、コミュニケーション |
FingerPrintIcon | バイオメトリクス、セキュリティ、認証 |
MapPinIcon | 位置、地理情報、地図 |
SpeakerWaveIcon | オーディオ、サウンド、音楽 |
VideoCameraIcon | ビデオ、レコーディング、ストリーミング |
CreditCardIcon | 決済、購入 |
PlayCircleIcon | メディアプレーヤー、動画プレーヤー |
SignalIcon | 接続性、ネットワーク、ビーコン |
RadioIcon | ビーコン、ブロードキャスト、無線 |
ChatBubbleOvalLeftIcon | ソーシャルメディア、WeChat |
既存のプラグインの更新
セクション「既存のプラグインの更新」既存のプラグインを更新する場合:
- バージョン番号を更新する ドキュメントに記載する
- マイグレーションガイドを追加する 破壊的変更が存在する場合
- API の更新 新しいメソッドで更新
- 新機能のための新しい例を追加 新機能に基づいてベストプラクティスを修正
- 変更があった場合のプラットフォーム要件を更新 変更があった場合
- 新機能に基づいてベストプラクティスを修正 チュートリアルを最新の __CAPGO_KEEP_0__ と合わせて
- 言語パス with latest API
__CAPGO_KEEP_0__ の更新
__CAPGO_KEEP_0__ の最新版とチュートリアルを合わせて英語でプラグインドキュメントを書き、レビューする。
テスト
「テスト」プラグインドキュメントを追加または更新した後:
-
サイトをローカルでビルドする:
ターミナル画面 bun run build -
エラーを確認する:
- すべてのリンクが正常に動作することを確認する
- 画像が正しく表示されることを確認する
- 「code」の例が有効であることを確認する
- ナビゲーションが正常に動作することを確認する
-
サイトのプレビューを見る:
ターミナルウィンドウ bun run dev -
プラグインが表示されることを確認する:
- プラグインのリストページを確認する
- サイドバーのナビゲーションを確認する
- すべてのドキュメントページをテストする
- チュートリアルページが正常に動作することを確認する
よくある間違い
よくある間違いというセクションヘルプを求める
: 「ヘルプを求める」のセクションプラグインの追加または更新のドキュメントの作成に必要な助けを求めます:
- Discord: ご参加ください Discordコミュニティ
- GitHub: GitHubのissueに新しいissueを開く サイトリポジトリ
- メール: Capgo マーケティング ウェブサイトのページ/エリア。ロール: UI ラベル。ページ register.astro で見られる。メッセージキー `email_label` (メール ラベル)。 support@capgo.app
: チームに連絡する
support@__CAPGO_KEEP_0__.app例
- 「例」タイトルのセクション:
/src/content/docs/docs/plugins/updater/参考として、以下のよくドキュメント化されたプラグインを確認してください。 - アップデーター:
/src/content/docs/docs/plugins/flash/(複雑なプラグイン、複数のページあり) - フラッシュ (Flash) (シンプルなプラグイン、良いスターター例):
/src/content/docs/docs/plugins/social-login/プラグインと子ページ
Capgo ドキュメントにプラグインを追加するには、以下の手順を実行します。
- マスターコンフィギュレーションにメタデータを追加する
- カテゴリ化されたインデックスページにプラグインを追加する
- サイドバーのナビゲーションを設定する
- 詳細なドキュメントページを作成する
- 詳細なチュートリアルを書く
- すべての変更をローカルでテストする
このガイドを実行することで、プラグインはユーザーが容易に発見できるように、統一されたドキュメントで提供されます。
「プラグインの追加または更新」を続けてください
「プラグインの追加または更新を続ける」セクションのタイトル「プラグインの追加または更新を続ける」セクションの場合 プラグインの追加または更新 Capgoを使用してネイティブプラグインの作業を計画する場合、Capgoを Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ プラグインの実装詳細 __CAPGO_KEEP_1__ Capgo Native Builds for the product workflow in Capgo Native Builds, and Capacitor プラグイン: 重要な事項 実用的な Capacitor プラグイン: 重要な事項の文脈のため