技能 wiki-vitepress
📦

wiki-vitepress

低风险 ⚡ 包含脚本

إنشاء مواقع VitePress من ويكي ماركداون

تحويل ملفات ويكي ماركداون المُنشأة إلى موقع VitePress ثابت أنيق وقابل للتصفح. يتضمن الوضع الداكن، ومخططات Mermaid مع وضع داكن支持和点击放大، ومخرجات بناء جاهزة للإنتاج.

支持: Claude Codex Code(CC)
🥉 72 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“wiki-vitepress”。 إنشاء موقع VitePress من صفحات ويكي

预期结果:

تم إنشاء دليل wiki-site/ مع .vitepress/config.mts (الوضع الداكن، Mermaid مُكوَّن)، custom.css (أنماط Mermaid الداكنة)، theme/index.ts (إعداد النقر للتكبير)، و 12 صفحة ويكي. الموقع يبني بنجاح إلى .vitepress/dist/.

正在使用“wiki-vitepress”。 تكوين مخططات Mermaid للوضع الداكن

预期结果:

تم تطبيق إصلاح الوضع الداكن ثلاثي الطبقات: 1) themeVariables في config.mts بألوان مخصصة، 2) تجاوزات CSS تستهدف عناصر .mermaid SVG، 3) استطلاع JavaScript في theme/index.ts لاستبدال الأنماط المضمنة. جميع المخططات تُعرض بشكل صحيح في الوضع الداكن.

安全审计

低风险
v1 • 2/25/2026

Static analyzer detected 69 patterns but 68 are false positives from Markdown documentation (code fences mistaken for shell execution, crypto references in comments). One legitimate concern: innerHTML assignment at line 112 uses self-generated content (low risk). Safe to publish with documentation warning.

1
已扫描文件
154
分析行数
2
发现项
1
审计总数
低风险问题 (1)
innerHTML Usage
innerHTML assignment at line 112 sets modal content from el.outerHTML. While content is self-generated (not user input), innerHTML is generally discouraged due to potential XSS risks if content source changes.

风险因素

⚡ 包含脚本 (1)
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
50
社区
88
安全
91
规范符合性

你能构建什么

موقع التوثيق التقني

بناء موقع توثيق احترافي من ملفات ويكي ماركداون مع الوضع الداكن ومخططات تفاعلية.

تصدير قاعدة المعرفة

تحويل محتوى ويكي الداخلي إلى موقع ثابت قابل للتصفح لمشاركة المعرفة بين الفريق.

توثيق مشاريع المصدر المفتوح

إنشاء مواقع توثيق أنيقة مع مخططات Mermaid لمستودعات GitHub.

试试这些提示

إعداد VitePress الأساسي
إنشاء هيكل موقع VitePress في wiki-site/ مع تكوين الوضع الداكن ونسخ جميع ملفات .md wiki المُنشأة إلى المشروع.
تكوين الوضع الداكن لـ Mermaid
إعداد تكوين VitePress مع إضافة Mermaid وتكوين متغيرات السمة الداكنة لم mermaid.themeVariables بما في ذلك primaryColor و nodeBorder وألوان الخلفية.
إضافة النقر للتكبير للمخططات
تنفيذ وظيفة النقر للتكبير لمخططات Mermaid عن طريق تغليف حاويات .mermaid مع مستمعي الأحداث الذين يفتحون نوافذ كاملة الشاشة عند النقر.
بناء موقع الإنتاج
تشغيل ما بعد المعالجة لإصلاح مشاكل صياغة ماركداون، ثم بناء موقع VitePress باستخدام npm run docs:build وإخراج مجلد dist.

最佳实践

  • استخدم setup() مع onMounted للتلاعب DOM، وليس enhanceApp() الذي يعمل أثناء SSR
  • طبق الاستطلاع لعناصر Mermaid SVG لأنها تُعرض بشكل غير متزامن
  • تأكد من أن جميع صفحات ويكي تحتوي على بيانات YAML الأمامية مع العنوان والوصف

避免

  • لا تستخدم خيار المترجم isCustomElement للمعلمات العامة العارية - يسبب崩溃
  • لا تعتمد فقط على CSS للوضع الداكن Mermaid - الأنماط المضمنة تتطلب استبدال JavaScript
  • لا تحاول الوصول إلى DOM أثناء مرحلة SSR - document غير محدد

常见问题

لماذا لا تُعرض مخططات Mermaid في الوضع الداكن؟
Mermaid تطبق أنماطًا مضمنة بدقة عالية. تحتاج إلى الإصلاح ثلاثي الطبقات: themeVariables في التكوين، تجاوزات CSS مع !important، و JavaScript لاستبدال الأنماط المضمنة على SVGs المُعرضة.
لماذا نستخدم setup() بدلاً من enhanceApp() للتلاعب DOM؟
enhanceApp() يعمل أثناء العرض من جانب الخادم حيث لا يوجد document. setup() مع onMounted ينفذ فقط في المتصفح حيث يتوفر DOM.
كيف أتفعّل النقر للتكبير للمخططات؟
أضف مستمعي أحداث إلى عناصر .mermaid التي تُنشئ div نافذة كاملة الشاشة يحتوي على SVG عند النقر. يجب إغلاق النافذة عند النقر واستخدام تحويل المقياس لتأثير التكبير.
ما هي مشاكل صياغة ماركداون التي تحتاج إصلاحاً قبل البناء؟
استبدل br/ بـ br للتوافق مع Vue،.Wrap معاملات T العامة العارية بعلامات backtick خارج كتل الكود، وتأكد من أن كل صفحة تحتوي على بيانات YAML الأمامية مع العنوان والوصف.
أين يذهب موقع البناء؟
مخرجات البناء الإنتاجي إلى دليل wiki-site/.vitepress/dist/ بعد تشغيل npm run docs:build.
هل يمكنني استخدام هذا مع الوضع الفاتح بدلاً من الوضع الداكن؟
نعم، غيّر المظهر إلى 'dark-mode' في config.mts وضبط متغيرات سمة Mermaid وألوان CSS للخلفية الفاتحة والنص الداكن.

开发者详情

文件结构

📄 SKILL.md