플러그인 추가 또는 업데이트
이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 지시어를 복사하세요.
이 안내서에서는 새로운 Capacitor 플러그인을 Capgo 웹사이트에 추가하거나 기존 플러그인 문서를 업데이트하는 방법을 설명합니다. 이 기능은 기여자, 유지관리자 및 문서 유지 관리를 도와주는 AI agent에게 유용합니다.
When adding a new plugin to the Capgo ecosystem, you need to update several files and locations across the website to ensure the plugin appears correctly in all relevant places:
- - 마스터 목록에 플러그인 메타데이터를 추가하십시오 플러그인 인덱스 페이지
- - 분류된 플러그인 목록 페이지에 플러그인을 추가하십시오 사이드바 네비게이션
- - 문서 사이드바에 플러그인을 추가하십시오 플러그인 문서
- - 개요 및 시작 가이드 페이지를 생성하십시오 Plugin Documentation
- 플러그인 튜토리얼 - 포괄적인 튜토리얼을 만들기
파일 위치
파일 위치업데이트해야 할 주요 파일
업데이트해야 할 주요 파일| 파일 | 목적 |
|---|---|
/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/ | __CAPGO_KEEP_0__ |
단계별 가이드
단계별 가이드 섹션-
__CAPGO_KEEP_0__ 플러그인을 마스터 목록에 추가
__CAPGO_KEEP_0__ 플러그인을 마스터 목록에 추가하는 단계열기
/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,}: 사용 가능한 아이콘을 확인하세요.Open
/node_modules/astro-heroicons/mini/and add your plugin to the -
플러그인을 인덱스 페이지에 추가하기
플러그인 추가하기열기
/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 및 고급 미디어 플러그인
- 📍 위치 및 배경 서비스 플러그인
- 📞 통신 및 분석
- 🔐 보안 및 시스템
- 📊 안드로이드 전용 기능
- 📥 다운로드 및 탐색
-
사이드바 탐색에 추가
제목 ‘사이드바 탐색에 추가’열기
/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자 이하로 설명을 작성하세요
- 정확하게 쓰기: 플러그인이 무엇인지 설명하지 말고 플러그인이 무엇을 하는지 설명하세요
- 동사로 시작하기: 동사로 시작하여 “제어”, “통합”, “활성화”와 같은 단어를 사용하세요
좋은 예시:
- “단순한 켜고 끄기 토글로 장치 불빛과 토치 제어하기”
- “앱에 Crisp 라이브 채팅 및 고객 지원을 통합하세요”
- “Face ID 및 Touch ID를 사용한 안전한 인증을 활성화하세요”
Bad Examples:
- “플래시용 플러그인”
- “이것은 Crisp 플러그인입니다”
- “생체 인식 플러그인”
문서 작성을 위한 섹션
설치 시작- : 명확한 설치 단계부터 시작하세요: 플랫폼별 설정 요구 사항을 포함하세요
- : 항상 명확한 설치 단계부터 시작하세요: 플랫폼별 설정 요구 사항을 포함하세요
- 사용 예제 보기: 실제 code 예제를 제공합니다.
- API 참고 자료 포함: 모든 메서드와 매개 변수를 문서화합니다.
- 완전한 예제 추가: 실제 세계 사용 패턴을 보여줍니다.
- 최적의 사용 방법에 대한 팁 공유: iOS와 Android의 차이점을 설명합니다.
- : iOS와 Android의 동작 차이점을 설명합니다.: 일반적인 문제를 해결합니다.
- : 일반적인 문제를 해결합니다.: 일반적인 문제를 해결합니다.
Code 예시
제목 "Code 예시"- code 예시에서 TypeScript를 사용하세요
- 모든 예시에서 import문을 상단에 포함하세요
- 중요한 단계를 설명하는 주석을 추가하세요
- 에러 처리를 보여주세요
- 기본적인 사용법과 고급 사용법을 모두 보여주세요
체크리스트
제목 "체크리스트"새 플러그인을 추가할 때 사용하는 체크리스트입니다:
- 플러그인을 추가했습니다
/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 | 소셜 미디어, 웨이쳇 |
기존 플러그인 업데이트
기존 플러그인 업데이트기존 플러그인을 업데이트할 때:
- 버전 번호 업데이트 문서에
- 이동 가이드 추가 파괴적인 변경 사항이 존재할 때
- API 참조 업데이트 새로운 메서드와 함께
- 새로운 기능에 대한 새로운 예제 추가 새로운 기능
- 플랫폼 요구 사항 업데이트 변경된 경우
- 최적화된 방법을 위한 권장 사항을 수정하세요 새로운 기능에 따라
- 튜토리얼을 최신 상태로 유지하세요 API의 최신 버전과 함께
언어 경로
‘언어 경로’라는 제목을 가진 섹션영어로 플러그인 문서를 작성하고 검토하세요. 지역화된 경로는 사이트 메타데이터에 의해 생성되고 Cloudflare의 번역 워커에 의해 에지에서 번역됩니다.
변경을 테스트하세요
‘변경을 테스트하세요’라는 제목을 가진 섹션플러그인 문서를 추가하거나 업데이트 한 후:
-
사이트를 로컬에서 빌드하세요:
터미널 창 bun run build -
오류 확인:
- 모든 링크가 작동하는지 확인
- 이미지가 올바르게 로드되는지 확인
- code 예제가 유효한지 확인
- 네비게이션이 작동하는지 테스트
-
사이트 미리보기:
터미널 창 bun run dev -
플러그인이 나타나는지 확인:
- 플러그인 목록 페이지 확인
- 사이드바 네비게이션 확인
- 모든 문서 페이지를 테스트하세요
- 튜토리얼 페이지가 정상 작동하는지 확인하세요
일반적인 오류
일반적인 오류란?__CAPGO_KEEP_0__
- Discord__CAPGO_KEEP_1__ Discord
- GitHub__CAPGO_KEEP_2__ __CAPGO_KEEP_0__
- __CAPGO_KEEP_3____CAPGO_KEEP_0__ support@capgo.app
__CAPGO_KEEP_0__
__CAPGO_KEEP_5__참고로, 다음 잘 문서화된 플러그인을 확인하세요:
- 업데이터:
/src/content/docs/docs/plugins/updater/(복잡한 플러그인, 여러 페이지가 있습니다.) - 플래시:
/src/content/docs/docs/plugins/flash/(단순한 플러그인, 좋은 시작 예시입니다.) - 소셜 로그인:
/src/content/docs/docs/plugins/social-login/(플러그인에 서브 페이지가 있습니다.)
Capgo 문서에 플러그인을 추가하는 것은 다음을 포함합니다.
- 마스터 구성 파일에 메타데이터를 추가합니다.
- 분류된 인덱스 페이지에 플러그인을 추가합니다.
- 사이드바 네비게이션을 구성하는 방법
- 전반적인 문서 페이지를 만드는 방법
- 상세한 튜토리얼을 작성하는 방법
- 모든 변경 사항을 로컬에서 테스트하는 방법
이 안내서를 따라하면 플러그인은 항상 문서화되고 사용자가 쉽게 찾을 수 있습니다.
__CAPGO_KEEP_0__ 플러그인 디렉토리에서 계속하기
__CAPGO_KEEP_0__ 플러그인 디렉토리에서 플러그인 작업을 계획하는 데 사용하는 경우__CAPGO_KEEP_0__ 플러그인 디렉토리와 연결 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인 디렉토리에서 제품 워크플로우 Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항에 대해 Ionic Enterprise 플러그인 대체품 Ionic Enterprise 플러그인 대체품의 제품 워크플로에 대해 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로에 대해, Capacitor 플러그인: 필요한 것을 알아야 할 것들 Capacitor 플러그인: 필요한 것을 알아야 할 것들에 대한 실제 상황에 대해