4.2 KiB
4.2 KiB
📁 Estructura de Views - Amayo Bot
🗂️ Organización de Archivos
src/server/views/
├── layouts/
│ └── layout.ejs # Layout principal (HTML wrapper)
├── pages/
│ └── index.ejs # ✅ Contenido de la página (usado por servidor)
└── partials/
├── navbar.ejs # Barra de navegación
├── toc.ejs # Tabla de contenidos
└── sections/ # Secciones de contenido
├── primeros-pasos.ejs
├── comandos-basicos.ejs
└── ...
✅ Archivo Correcto
/src/server/views/pages/index.ejs
Este es el archivo que se está usando. El servidor lo busca aquí:
// En server.ts
const pageFile = path.join(viewsDir, "pages", `${template}.ejs`);
Contenido:
- Solo el contenido del
<body> - Sin etiquetas
<html>,<head>, etc. - Sin llamadas a
layout() - Directamente renderizado dentro de
layout.ejs
❌ Archivo Eliminado
/src/server/views/index.ejs
/src/server/views/index.ejsEste archivo estaba duplicado y NO se estaba usando. Causaba confusión porque:
- Tenía el sistema antiguo de layout con
<% layout('layouts/layout') %> - No era consultado por el servidor
- Los cambios no se reflejaban en la web
🔄 Flujo de Renderizado
1. Usuario solicita /
http://localhost:3000/
2. Servidor renderiza
await renderTemplate(req, res, "index", {
appName: "Amayo Bot",
version: "2.0.0",
djsVersion: "15.0.0-dev",
currentDateHuman: "octubre 2025"
});
3. Proceso de renderizado
1. Lee: views/pages/index.ejs
↓ (renderiza con variables)
2. Resultado → pageBody
↓
3. Lee: views/layouts/layout.ejs
↓ (inserta pageBody en <%= body %>)
4. HTML completo → navegador
📝 Cómo Editar
Para cambiar el contenido de la página:
✅ Edita: /src/server/views/pages/index.ejs
Para cambiar el layout (HTML, head, scripts):
✅ Edita: /src/server/views/layouts/layout.ejs
Para cambiar navbar o footer:
✅ Edita:
/src/server/views/partials/navbar.ejs- Footer está en
layout.ejs(líneas 45-75)
Para agregar/editar secciones:
✅ Edita: /src/server/views/partials/sections/*.ejs
🎨 CSS y Assets
Archivos CSS cargados (en layout.ejs):
<link rel="stylesheet" href="/assets/css/modern-pixel.css?v=2.0.0">
<link rel="stylesheet" href="/assets/css/modern-sections.css?v=2.0.0">
<link rel="stylesheet" href="/assets/css/styles.css?v=2.0.0">
Ubicación física:
src/server/public/assets/css/
├── modern-pixel.css # ✅ Componentes modernos
├── modern-sections.css # ✅ Estilos de secciones
├── styles.css # Original
├── pixel-art.css # ❌ Ya no se usa
└── pixel-sections.css # ❌ Ya no se usa
🚀 Flujo de Trabajo
Para hacer cambios visuales:
-
Editar contenido:
vim src/server/views/pages/index.ejs -
Editar estilos:
vim src/server/public/assets/css/modern-pixel.css -
Reiniciar servidor:
npm run server -
Limpiar caché del navegador:
Ctrl + Shift + R(hard reload)- O modo incógnito:
Ctrl + Shift + N
⚠️ Notas Importantes
Parámetros de Versión
Los archivos CSS tienen ?v=2.0.0 para forzar recargas:
href="/assets/css/modern-pixel.css?v=2.0.0"
Sistema de Caché
El servidor usa ETags para caché. Si haces cambios y no se ven:
- Reinicia el servidor (nuevo ETag)
- Hard reload en navegador (
Ctrl + Shift + R)
Await en Includes
Los partials usan await include():
<%- await include('../partials/navbar') %>
Esto es necesario para el renderizado asíncrono de EJS.
📋 Checklist de Edición
Antes de editar, verifica:
- ¿Estás editando
/pages/index.ejs? (no el antiguo/views/index.ejs) - ¿Los cambios CSS están en
modern-pixel.css? (no enpixel-art.css) - ¿El layout carga los CSS correctos?
- ¿Reiniciaste el servidor después de cambios?
Fecha: Octubre 2025
Autor: Amayo Dev Team
Estado: ✅ Estructura actualizada y optimizada