APIDoc 4.0 permite personalizar completamente la apariencia de tu documentación con iconos Font Awesome, logos personalizados y configuración de temas.
Asigna iconos Font Awesome a tus grupos de API en apidoc.json:
{
"name": "Mi API",
"version": "1.0.0",
"settings": {
"Users": {
"icon": "fa-user",
"title": "Usuarios"
},
"Authentication": {
"icon": "fa-shield-alt",
"title": "Autenticación"
},
"Company": {
"icon": "fa-building",
"title": "Empresa"
},
"Payment": {
"icon": "fa-credit-card",
"title": "Pagos"
}
}
}
| Categoría | Iconos Recomendados | Clases CSS |
|---|---|---|
| Usuarios | 👤👥🛡️ | fa-user, fa-users, fa-shield-alt |
| Administración | ⚙️🔧👑 | fa-cog, fa-tools, fa-crown |
| Pagos | 💳💰🏦 | fa-credit-card, fa-dollar-sign, fa-bank |
| Archivos | 📁📤📥 | fa-folder, fa-upload, fa-download |
| Analíticas | 📊📈📉 | fa-chart-line, fa-chart-bar, fa-analytics |
| Ubicación | 📍🌍🗺️ | fa-map-marker-alt, fa-globe, fa-map |
| Comunicación | 📧💬📞 | fa-envelope, fa-comments, fa-phone |
| Empresa | 🏢💼📋 | fa-building, fa-briefcase, fa-clipboard |
{
"logo": {
"url": "https://example.com/logo.png",
"alt": "Logo de la Empresa",
"width": "40px",
"height": "40px"
}
}
| Parámetro | Tipo | Descripción | Default |
|---|---|---|---|
url |
String | URL de la imagen (absoluta, relativa o data URL) | - |
icon |
String | Clase de icono Font Awesome | - |
alt |
String | Texto alternativo para accesibilidad | "Logo" |
width |
String | Ancho en unidades CSS | "32px" |
height |
String | Alto en unidades CSS | "32px" |
Logo con imagen:
{
"logo": {
"url": "/assets/company-logo.svg",
"alt": "Acme Corp Logo",
"width": "45px",
"height": "35px"
}
}
Logo con icono Font Awesome:
{
"logo": {
"icon": "fa-rocket",
"alt": "API Documentation"
}
}
Logo con Data URL (imagen embebida):
{
"logo": {
"url": "data:image/svg+xml;base64,PHN2Zz...",
"alt": "Logo Embebido",
"width": "30px"
}
}
url) - máxima prioridadicon) - si no hay URL{
"highlightTheme": "tokyo-night-dark"
}
Temas oscuros:
{"highlightTheme": "tokyo-night-dark"} // Tema moderno oscuro (default)
{"highlightTheme": "github-dark"} // GitHub oscuro
{"highlightTheme": "monokai"} // Clásico Monokai
{"highlightTheme": "dracula"} // Popular Dracula
{"highlightTheme": "androidstudio"} // Android Studio
Temas claros:
{"highlightTheme": "github"} // GitHub claro
{"highlightTheme": "vs"} // Visual Studio
{"highlightTheme": "atom-one-light"} // Atom One Light
{"highlightTheme": "xcode"} // Xcode
// Cambiar tema en tiempo de ejecución
window.loadHighlightTheme('dracula');
window.loadHighlightTheme('github-dark');
window.loadHighlightTheme('monokai');
github, github-dark, github-dark-dimmedmonokai, dracula, tomorrow-night, solarized-darktokyo-night-dark, tokyo-night-light, nord, gruvbox-darkvs, vs2015, androidstudio, xcoderainbow, magula, sunburst, hybriddefault, lightfair, far, foundation{
"header": {
"title": "Primeros Pasos",
"filename": "header.md",
"icon": "fa-home"
},
"footer": {
"title": "Mejores Prácticas",
"filename": "footer.md",
"icon": "fa-lightbulb"
}
}
| Sección | Propósito | Iconos Sugeridos |
|---|---|---|
| Header | Introducción, bienvenida | fa-home, fa-info-circle, fa-book |
| Footer | Contacto, soporte | fa-envelope, fa-phone, fa-support |
| Guías | Documentación, tutoriales | fa-lightbulb, fa-graduation-cap, fa-guide |
| Legal | Términos, privacidad | fa-gavel, fa-shield-alt, fa-lock |
{
"settings": {
"Users": {
"icon": "fa-user",
"title": "Usuarios"
},
"Authentication": {
"icon": "fa-shield-alt",
"title": "Autenticación"
},
"Company": {
"icon": "fa-building",
"title": "Empresa"
}
}
}
APIDoc usa el siguiente orden de prioridad para iconos:
settings (máxima prioridad)fa-file-alt) como fallback| Nombre del Grupo | Icono Automático | Clase CSS |
|---|---|---|
| User, Users | 👤 | fa-user |
| Admin, Administration | ⚙️ | fa-cog |
| Auth, Authentication | 🛡️ | fa-shield-alt |
| Company, Business | 🏢 | fa-building |
| Payment, Billing | 💳 | fa-credit-card |
| File, Files | 📁 | fa-folder |
| System | 🖥️ | fa-desktop |
| API, General | 📋 | fa-file-alt |