Hinzufügen oder Aktualisieren von Plugins

Kopieren Sie einen Einrichtungsbefehl mit den Installationsanweisungen und der vollständigen Markdown-Guide für diesen Plugin.

Diese Anleitung erklärt, wie man neue Capacitor-Plugins zur Capgo-Website hinzufügt oder bestehende Plugin-Dokumentation aktualisiert. Dies ist nützlich für Beitragssteller, 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 korrekt angezeigt wird:

Plugin-Listeneinstellungen - Hinzufügen von Plugin-Metadaten zur Masterliste
Plugin-Index-Seite - Hinzufügen von Plugin zur kategoriisierten Plugin-Listenseite
Seitenleiste - Hinzufügen von Plugin zur Dokumentations-Seitenleiste
Plugin-Dokumentation - Erstellen von Übersichts- und Anfängsseite
Plugin-Tutorial - Erstellen eines umfassenden Tutorials

Dateien finden

Dateien zum Aktualisieren

Datei	Zweck
`/src/config/plugins.ts`	Master-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

Plugin zur Masterliste hinzufügen

Öffnen /src/config/plugins.ts und fügen Sie Ihr Plugin zur 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/ Sie nach verfügbaren Icons.

Plugin zur Indexseite hinzufügen
Abschnitt mit dem Titel „Plugin zur Indexseite hinzufügen“

Ö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- und fortgeschrittene Medien
- 📍 Standort- und Hintergrunddienste
- 📞 Kommunikation und Analytics
- 🔐 Sicherheit und System
- 📊 Android-Spezifische Funktionen
- 📥 Herunterladen & Navigation
Hinzufügen zur Seitenleiste
Sektion mit dem Titel „Hinzufügen zur Seitenleiste“

Öffnen /astro.config.mjs und fügen Sie Ihre Erweiterung 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,
}
```
Die Erweiterungen werden alphabetisch in der Seitenleiste aufgelistet.
Erstellung von Plugin-Dokumentationsverzeichnis
Sektion mit dem Titel „Erstellung von Plugin-Dokumentationsverzeichnis“

Erstellen Sie ein neues Verzeichnis für die Plugin-Dokumentation:
Terminal-Fenster
```
mkdir -p /src/content/docs/docs/plugins/your-plugin-name/
```

Erstellen Sie eine Plugin-Übersichtsseite

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 zum 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]

Erstellen Sie eine Tutorial-Datei

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]

Plugin-Dokumentationsstruktur

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

Inhaltshinweise

Pluginbeschreibungen schreiben

Sei knapp: Halten Sie Beschreibungen unter 100 Zeichen
Sei spezifisch: Erklären Sie, was das Plugin tut, nicht was es ist
Verwende Handlungsverben: Beginnen Sie mit Verben wie "Steuerung", "Integrieren", "Aktivieren"

Gute Beispiele:

"Steuerung des Geräte-Flashlights und der Taschenlampe mit einfacher Ein/Aus-Schaltfläche"
"Integrieren Sie Crisp-Lebendchat und Kundenunterstützung in Ihre App"
"Aktivieren Sie sichere Authentifizierung mit Face ID und Touch ID"

Schlechte Beispiele:

Ein Plugin für Flash
Ein Crisp-Plugin
Biometrisches Plugin

Dokumentation schreiben

Mit der Installation beginnenInstallation immer klar anfangen
Konfiguration bereitstellenPlattform-spezifische Einrichtungsanforderungen enthalten
Verwendung beispiel zeigenArbeitsfähige code Beispiele bereitstellen
Einbeziehen API Referenz: Dokumentiere alle Methoden und Parameter
Fügen Sie vollständige Beispiele hinzu: Zeigen Sie realistische Verwendungsmuster
Liste der besten Praktiken: Teilen Sie Tipps für den optimalen Einsatz
Dokumentiere Plattformunterschiede: Klären Sie iOS- vs. Android-Verhalten
Fügen Sie Fehlerbehebungen hinzu: Beheben Sie häufige Probleme

Code Beispiele

Verwenden Sie TypeScript für alle code Beispiele
Importe auf der obersten Ebene einfügen
Kommentare hinzufügen, die wichtige Schritte erklären
Fehlerbehandlung zeigen
Beide grundlegende und fortgeschrittene Verwendung demonstrieren

Checkliste

Verwenden Sie diese Checkliste, wenn Sie einen neuen Plugin hinzufügen:

Icon-Referenz

Gemeinsame Icons, die für Plugins verwendet werden (aus astro-heroicons/mini/):

Icon	Verwendungsfall
`BoltIcon`	Blitz, Strom, Energie
`CameraIcon`	Kamera, Foto, Video
`ChatBubbleLeftIcon`	Chat, Nachrichten, Kommunikation
`FingerPrintIcon`	Biometrische Sicherheit, Authentifizierung
`MapPinIcon`	Standort, Geolokalisierung, Karten
`SpeakerWaveIcon`	Audio, Ton, Musik
`VideoCameraIcon`	Video, Aufzeichnung, Streaming
`CreditCardIcon`	Zahlungen, Kauf
`PlayCircleIcon`	Medienplayer, Videoplayer
`SignalIcon`	Verbindung, Netzwerk, Beacon
`RadioIcon`	Beacon, Übertragung, drahtlos
`ChatBubbleOvalLeftIcon`	Soziale Medien, WeChat

Aktualisierung bestehender Plugins

Wenn Sie ein bestehendes Plugin aktualisieren:

Aktualisieren Sie Versionsnummern in der Dokumentation
Hinzufügen von Migrationen wenn sich Änderungen ergeben
Aktualisieren Sie die API-Referenz mit neuen Methoden
Hinzufügen neuer Beispiele für neue Funktionen
Aktualisieren Sie die Plattformanforderungen wenn sich Änderungen ergeben
Überarbeiten Sie die besten Praktiken basierend auf neuen Funktionen
Halten Sie die Tutorial aktuell mit den neuesten API

Sprachpfade

Schreiben und überprüfen Sie Plugin-Dokumentation auf Englisch. Lokalisierte Pfade werden durch die Site-Metadaten generiert und an der Edge durch den Übersetzungswerker übersetzt.

Ihrer Änderungen testen

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

Das Site lokal bauen:
Terminal-Fenster
```
bun run build
```
Nach Fehlern suchen:
- Überprüfen Sie, dass alle Links funktionieren
- Stellen Sie sicher, dass Bilder korrekt geladen werden
- Bestätigen Sie, dass code-Beispiele gültig sind
- Testen Sie, ob die Navigation funktioniert
Vorschau der Website:
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 Tutorial-Seite funktioniert

Häufige Falle

Hilfe finden

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

Discord: Beitritt unserem Discord-Gemeinschaft
GitHub: Öffne ein Problem im Website-Repository
E-Mail: Kontaktiere das Team bei support@capgo.app

Beispiele

Zur Referenz prüfe diese gut dokumentierten Plugins:

Updater: /src/content/docs/docs/plugins/updater/ Ein komplexes Plugin mit mehreren Seiten
Flash: /src/content/docs/docs/plugins/flash/ Einfaches Plugin, guter Einstieg
Social Login: /src/content/docs/docs/plugins/social-login/ Zusammenfassung

Abschnitt mit dem Titel „Zusammenfassung“

Adding a plugin to the Capgo documentation involves:

Plugin zur kategoriellen Index-Seite hinzufügen
Seitenleiste konfigurieren
Komplett umfassende Dokumentationsseiten erstellen
Adding a plugin to the __CAPGO_KEEP_0__ documentation involves:
Ein detailliertes Tutorial erstellen
Alle Änderungen lokal testen

Durch das Befolgen dieser Anleitung stellen Sie sicher, dass Plugins konsistent dokumentiert und leicht von Benutzern gefunden werden können.

Bleiben Sie bei "Hinzufügen oder Aktualisieren von Plugins"

Wenn Sie " Hinzufügen oder Aktualisieren von Plugins" zum Planen von native Plugin-Arbeiten verwenden, verbinden Sie es mit " __CAPGO_KEEP_0__ Plugin-Verzeichnis" Capgo Plugin Directory Capgo Plugin-Verzeichnis" Capacitor Plugins by Capgo Capacitor Plugins by 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.