Hinzufügen oder Aktualisieren von Plugins

Ein Einrichtungsprompt mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen Plugin kopieren.

Dieses Leitfaden erklärt, wie man neue Capacitor-Plugins zur Capgo-Website hinzufügt oder bestehende Plugin-Dokumentation aktualisiert. Dies ist nützlich für Beiträger, Maintainer und KI-Agenten, die dabei helfen, die Dokumentation zu pflegen.

Übersicht

Wenn Sie ein neues Plugin in das Capgo-Ökosystem hinzufügen, müssen Sie mehrere Dateien und Orte auf der Website aktualisieren, um sicherzustellen, dass das Plugin in allen relevanten Bereichen richtig angezeigt wird:

Plugin-Listeneinstellungen - Hinzufügen von Plugin-Metadaten zur Masterliste
Plugin-Index-Seite - Hinzufügen des Plugins zur kategorierte Plugin-Auflistung
Seitenleiste-Navigation - Plugin zur Dokumentationsleiste hinzufügen
Plugin-Dokumentation - Überblicks- und Anfängeseiten erstellen
Plugin-Tutorial - Eine umfassende Anleitung erstellen

Dateilagen

Schlüsseldateien zum Aktualisieren

Datei	Zweck
`/src/config/plugins.ts`	Haupt-Plugin-Liste mit Metadaten
`/src/content/docs/docs/plugins/index.mdx`	Plugin-Index-Seite mit Kategorien
`/astro.config.mjs`	Konfiguration der Seitenleiste
`/src/content/docs/docs/plugins/[plugin-name]/`	Verzeichnis für Plugin-Dokumentation
`/src/content/plugins-tutorials/en/`	Englische Tutorial-Dateien

Schritt-für-Schritt-Anleitung

Hinzufügen von Plugin zur Masterliste

Öffnen /src/config/plugins.ts und fügen Sie Ihr Plugin der actions array:

// First, import an appropriate Heroicon
import 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,
}

Verfügbare Icons: Überprüfen /node_modules/astro-heroicons/mini/ Für verfügbare Icons.

Hinzufügen zum Index-Seitenelement
Abschnitt mit dem Titel “Hinzufügen zum Index-Seitenelement”

Öffnen /src/content/docs/docs/plugins/index.mdx und fügen Sie Ihr Plugin unter der entsprechenden Kategorie ein:
```
<LinkCard
  title="Your Plugin Name"
  description="Brief description of what the plugin does"
  href="/docs/plugins/your-plugin-name/"
/>
```
Kategorien:
- ⭐ Hervorragende Plugins
- 📱 Geräte- und System-Plugins
- 🎥 Medien- und Kamera-Plugins
- 🛠️ Werkzeug-Plugins
- 🤖 KI & Advanced Media
- 📍 Standort & Hintergrunddienste
- 📞 Kommunikation & Analytics
- 🔐 Sicherheit & System
- 📊 Android-Spezifische Funktionen
- 📥 Herunterladen & Navigation
Zum Seitenleisten-Navigation hinzufügen
Abschnitt mit dem Titel „Zum Seitenleisten-Navigation hinzufügen”

Öffnen /astro.config.mjs und fügen Sie Ihren Plugin zur Seitenleisten-Konfiguration (um die Zeile 540 herum) hinzu:
```
{
  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,
}
```
Plugins werden alphabetisch in der Seitenleiste aufgelistet.
Erstellen Sie den Plugin-Dokumentationsordner
Abschnitt mit dem Titel „Erstellen Sie den Plugin-Dokumentationsordner“

Erstellen Sie einen neuen Ordner für Ihre Plugin-Dokumentation:
Terminalfenster
```
mkdir -p /src/content/docs/docs/plugins/your-plugin-name/
```

Erstellen Sie die Übersichtsseite für Ihr Plugin

Erstellen /src/content/docs/docs/plugins/your-plugin-name/index.mdx:

---
title: "@capgo/your-plugin-name"
description: Brief description of the plugin's purpose
tableOfContents: false
next: false
prev: false
sidebar:
  order: 1
  label: "Introduction"
hero:
  tagline: Detailed tagline explaining what the plugin does
  image:
    file: ~public/your-plugin-icon.svg
  actions:
    - text: Get started
      link: /docs/plugins/your-plugin-name/getting-started/
      icon: right-arrow
      variant: primary
    - text: Github
      link: https://github.com/Cap-go/your-plugin-name/
      icon: external
      variant: 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>

Erstellen Sie eine Anleitung für den Einstieg

Erstellen /src/content/docs/docs/plugins/your-plugin-name/getting-started.mdx:

---
title: Getting Started
description: 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]

Erstellung des Tutorial-Dateis

Erstellen /src/content/plugins-tutorials/en/your-plugin-name.md:

---
locale: en
---
# Using @capgo/your-plugin-name Package

The `@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]

Struktur der Plugin-Dokumentation

Erforderliche Dateien

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

Optional Dateien

Für komplexe Plugins können Sie zusätzliche Dokumentationsseiten hinzufügen:

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

Richtlinien für Inhalte

Erstellung von Plugin-Beschreibungen

Seien Sie knapp: Beschreibungen sollten unter 100 Zeichen bleiben
Seien Sie spezifisch: Erklären Sie, was das Plugin tut, nicht was es ist
Verwenden Sie Handlungsverben: Beginnen Sie mit Verben wie „Steuerung“, „Integrations“ und „Aktivieren“

Vorbildliche Beispiele:

„Steuerung des Geräte-Flash und der Taschenlampe mit einfacher An- und Ausschaltung“
„Integrieren Sie Crisp-Lebend-Chat und Kundenunterstützung in Ihre App“
„Aktivieren Sie sichere Authentifizierung mit Face ID und Touch ID“

Schlechte Beispiele:

„Ein Plugin für Flash“
„Dies ist ein Crisp-Plugin“
„Biometrisches Plugin“

Erstellung von Dokumentationen

Beginnen Sie mit der Installation: Beginnen Sie immer mit klaren Installationsanweisungen
Konfiguration bereitstellen: Fügen Sie Plattform-spezifische Einrichtungsanforderungen hinzu
Zeigen Sie Beispiele für die Verwendung an: Bieten Sie funktionierende code-Beispiele an
Fügen Sie API-Referenz hinzu: Dokumentieren Sie alle Methoden und Parameter
Fügen Sie vollständige Beispiele hinzu: Zeigen Sie realistische Verwendungsmuster an
Listen Sie die besten Praktiken auf: Teilen Sie Tipps für den optimalen Einsatz
Dokumentieren Sie Plattformunterschiede: iOS- und Android-Verhalten klären
Hinzufügen von Fehlersuche: Häufige Probleme angehen

Code Beispiele

Verwenden von TypeScript für alle code Beispiele
Importe am Anfang einfügen
Hinzufügen von Kommentaren, die wichtige Schritte erklären
Fehlerbehandlung zeigen
Beide grundlegende und fortgeschrittene Verwendung demonstrieren

Überprüfungsliste

Verwenden Sie diese Liste, wenn Sie ein neues Plugin hinzufügen:

Icon-Referenz

Für Plugins verwendete allgemeine Icons (von astro-heroicons/mini/):

Symbol	Anwendungsbereich
`BoltIcon`	Blitz, Leistung, Energie
`CameraIcon`	Kamera, Foto, Video
`ChatBubbleLeftIcon`	Chat, Nachrichten, Kommunikation
`FingerPrintIcon`	Biometrische, Sicherheit, Authentifizierung
`MapPinIcon`	Ort, Geolocation, Karten
`SpeakerWaveIcon`	Audio, Ton, Musik
`VideoCameraIcon`	Video, Aufzeichnung, Streaming
`CreditCardIcon`	Zahlungen, Kauf
`PlayCircleIcon`	Mediaplayer, Videoplayer
`SignalIcon`	Verbindung, Netzwerk, Beacon
`RadioIcon`	Beacon, broadcast, wireless
`ChatBubbleOvalLeftIcon`	Soziale Medien, WeChat

Bestehende Plugins aktualisieren

Wenn ein bestehender Plugin aktualisiert wird:

Versionen aktualisieren in der Dokumentation
Migrationshinweise hinzufügen wenn sich Änderungen ergeben
Aktualisieren Sie die API-Referenz mit neuen Methoden
Hinzufügen von neuen Beispielen Fügen Sie neue Funktionen hinzu
Plattformanforderungen aktualisieren Wenn geändert
Best Practices überarbeiten Basierend auf neuen Funktionen
Halten Sie die Anleitung auf dem neuesten Stand __CAPGO_KEEP_0__ with latest API

Abschnitt mit dem Titel „Sprachpfade“

Ihr Änderungen testen

Abschnitt mit dem Titel „Ihr Änderungen testen“

Nachdem Sie die Plugin-Dokumentation hinzugefügt oder aktualisiert haben:

Die Seite lokal bauen:
Terminal-Fenster
```
bun run build
```
Nach Fehlern suchen:
- Überprüfen, ob alle Links funktionieren
- Stellen Sie sicher, dass Bilder korrekt geladen werden
- Bestätigen Sie, dass code-Beispiele gültig sind
- Navigationsfunktion überprüfen
Vorschau der Seite:
Terminal-Fenster
```
bun run dev
```
Überprüfen Sie, ob Ihr Plugin erscheint:
- Überprüfen Sie die Plugin-Listenseite
- Überprüfen Sie die Seitenleiste
- Testen Sie alle Dokumentationsseiten
- Bestätigen Sie, dass die Tutorialseite funktioniert

Gemeinsame Fallstricke

Unterstützung erhalten

Wenn Sie Hilfe bei der Hinzufügung oder Aktualisierung von Plugin-Dokumentation benötigen:

Discord: Beitritt zu unserem Discord-Community
GitHub: Öffnen Sie ein Issue im Repository des Websites
E-Mail: Kontaktieren Sie das Team bei Unterstützung@capgo.app

Beispiele

Zur Referenz prüfen Sie diese gut dokumentierten Plugins:

Updater: /src/content/docs/docs/plugins/updater/ (komplexer Plugin mit mehreren Seiten)
Flash: /src/content/docs/docs/plugins/flash/ (Einfaches Plugin, gute Anfangsbeispiel)
Social Login: /src/content/docs/docs/plugins/social-login/ (Plugin mit Unterseiten)

Zusammenfassung

Hinzufügen eines Plugins zur Capgo Dokumentation beinhaltet:

Hinzufügen von Metadaten zur Master-Konfiguration
Hinzufügen des Plugins zur kategoriellen Indexseite
Konfigurieren der Seitenleiste
Erstellen umfassender Dokumentationsseiten
Schreiben eines detaillierten Tutorials
Testen aller Änderungen lokal

Indem Sie diese Anleitung befolgen, stellen Sie sicher, dass Plugins konsistent dokumentiert und leicht von Benutzern auffindbar sind.

Fortsetzen von Hinzufügen oder Aktualisieren von Plugins

Wenn Sie Hinzufügen oder Aktualisieren von Plugins verwenden um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, und Capacitor Plugins: Was Sie wissen müssen für den praktischen Kontext in Capacitor Plugins: Was Sie wissen müssen.