Ctrlk
Editar

Estructura del Proyecto

Directorios de Nivel Superior

chamilo/
├── assets/          # Código fuente frontend
│   ├── vue/         # Aplicación Vue 3 (componentes, vistas, enrutador, almacenes)
│   ├── css/         # Hojas de estilo SCSS
│   └── js/          # JavaScript legado
├── config/          # Configuración de Symfony (rutas, servicios, paquetes)
├── public/          # Raíz web (index.php, páginas PHP legado, complementos)
│   ├── main/        # Módulos PHP legado (un subdirectorio por herramienta)
│   └── plugin/      # Complementos incluidos y personalizados
├── src/             # Código fuente PHP (bundles de Symfony)
│   ├── CoreBundle/  # Lógica central de la plataforma
│   ├── CourseBundle/# Funcionalidades específicas de cursos
│   └── LtiBundle/   # Integración LTI 1.3
├── templates/       # Plantillas Twig
├── var/             # Caché, registros, subidas (generado)
├── vendor/          # Dependencias de Composer (generado)
├── node_modules/    # Dependencias de npm (generado)
└── translations/    # Archivos de traducción

Código Fuente (src/)

CoreBundle

El bundle más grande. Subdirectorios destacados:

Directorio
Contenido

Entity/

Entidades Doctrine (User, Course, Session, ResourceNode, etc.)

Controller/

Controladores de administración, acciones API y páginas (la subcarpeta Api/ contiene acciones personalizadas de API Platform)

Settings/

Archivos de esquema de configuraciones (configuración de la plataforma)

Repository/

Repositorios Doctrine

AiProvider/

Implementaciones de proveedores de IA (OpenAI, Gemini, Mistral, DeepSeek, Grok)

Tool/

Definiciones de herramientas de curso

Security/

Votantes, autenticadores, autorización

EventListener/

Oyentes de eventos

EventSubscriber/

Suscriptores de eventos

Command/

Comandos de consola Symfony

Migrations/

Migraciones de base de datos

Twig/

Extensiones Twig

Storage/

Adaptadores de almacenamiento Flysystem

CourseBundle

Entidades y lógica específicas de cursos:

Directorio
Contenido

Entity/

Entidades de contenido de curso (CDocument, CQuiz, CLp, CForum, CStudentPublication, etc.)

Controller/

Controladores de curso

Settings/

Esquemas de configuraciones a nivel de curso

Component/CourseCopy/

Importación/exportación de cursos (Common Cartridge, Moodle)

LtiBundle

Integración LTI 1.3:

Directorio
Contenido

Entity/

Entidades de plataforma, herramienta y despliegue LTI

Controller/

Puntos finales de lanzamiento y configuración LTI

Frontend (assets/vue/)

Configuración (config/)

Symfony fusiona automáticamente los archivos base packages/*.yaml con los del subdirectorio de entorno correspondiente (dev/, prod/ o test/), por lo que los archivos específicos de cada entorno solo necesitan sobrescribir los valores que difieren.

Configuración de Compilación

Archivo
Propósito

webpack.config.js

Configuración de Webpack Encore (entradas, cargadores, complementos)

tailwind.config.js

Configuración de Tailwind CSS (rutas de contenido, extensiones de tema, complementos)

tsconfig.json

Configuración de TypeScript

eslint.config.mjs

Reglas de ESLint (configuración plana)

.prettierrc.json

Reglas de formato de Prettier

Todos los archivos se encuentran en la raíz del proyecto. Los complementos de PostCSS (Tailwind + Autoprefixer) se configuran en línea dentro de webpack.config.js a través de enablePostCssLoader() — no hay un archivo independiente postcss.config.js. webpack.config.js lee tailwind.config.js indirectamente a través de PostCSS, por lo que los cambios en las secciones content o theme de Tailwind surten efecto en la próxima ejecución de yarn encore dev / yarn encore production.

Puntos de Entrada de Webpack

La compilación produce estos paquetes:

JavaScript:

  • vue — Aplicación principal de Vue 3 (assets/vue/main.js)

  • vue_installer — Asistente de instalación (assets/vue/main_installer.js)

  • legacy_app, legacy_exercise, legacy_lp, legacy_document — JS heredado para páginas aún no migradas a Vue

CSS:

  • app — Hoja de estilo principal (assets/css/app.scss)

  • Además de hojas especializadas: chat, document, editor, editor_content, markdown, print, responsive, scorm

Estructura de CSS (assets/css/)

Tailwind CSS

Tailwind está integrado a través de PostCSS. assets/css/_tailwind.scss genera las capas base, de componentes y de utilidades; assets/css/app.scss lo importa primero para que las utilidades de Tailwind estén disponibles en todos los demás parciales. La configuración de Tailwind —rutas de contenido para la purga, extensiones de tema y complementos— se encuentra en tailwind.config.js en la raíz del proyecto (/var/www/chamilo/tailwind.config.js).

Las clases de utilidad personalizadas y las clases de componentes definidas con @layer (visibles en app.scss) siguen la convención de capas de Tailwind, de modo que las clases definidas por el usuario respetan las mismas reglas de especificidad que las utilidades generadas.

Temas de Color

Chamilo soporta un sistema de temas de color que puede configurarse directamente desde la interfaz de administración (Administración > Temas de Color). Cada tema guardado escribe sus archivos en un directorio dedicado bajo var/themes/:

colors.css define propiedades personalizadas de CSS como tripletas de canales RGB separadas por espacios en lugar de valores rgb(), lo que permite a Tailwind componer variantes de opacidad (por ejemplo, bg-primary/50) sin configuración adicional:

La capa de tema se sitúa sobre el paquete compilado de Tailwind/SCSS: el navegador carga colors.css después de la hoja de estilo principal, por lo que los cambios de tema tienen efecto inmediato sin necesidad de un paso de compilación.

AnteriorConfiguración de DesarrolloSiguienteBackend

Última actualización

¿Te fue útil?