Es un proyecto que documenta los templates de página básicos y los spinners de carga así como ejemplos de páginas maquetadas con Desy. Es útil para copiar a partir de este proyecto los templates de página e insertarlos en desy-html-starter, el proyecto “boilerplate” o “starter” para usar como punto de partida para comenzar un proyecto de maquetación con desy-html.

Pasos a seguir para usar un templates de página

En estos pasos se detalla cómo crear un proyecto nuevo a partir de desy-html-starter, configurarlo a medida y usar una plantilla de desy-html-templates en una página nueva dentro de ese proyecto.

• Descarga en instala el repositorio desy-html-starter que encontrarás aqui: sdaragon/desy-html-starter para ello sigue las instrucciones del README.md o bien de esta página: desy-html-starter

• Cambia en nombre del proyecto basado en tu desy-html-starter, cambiando el todas las menciones a “desy-html-starter” por “tu-nombre-de-proyecto-nuevo”. Utiliza un Find and Replace masivo para ello.

• Descarga el repositorio de desy-html-templates en tu local, lo usarás para copiar los templates de página o includes que quieras usar en tu nuevo proyecto.

• Copiar los templates de página desde desy-html-templates a tu nuevo proyecto de maquetación basado en desy-html-starter. Los templates son los que encontrarás en la ruta de desy-html-templates: src/templates/pages/ comienzan con: _template.*.njk también por _page.*.njk .

• Copia todos esos archivos en tu carpeta src/templates/pages de tu nuevo proyecto de maquetación basado en desy-html-starter

• En el proceso de copia, hay archivos repetidos, nos quedaremos con los archivos del destino (los del proyecto nuevo creado a partir de desy-html-starter y descartar los que vienen de desy-html-templates). Esto es porque nuestros archivos tienen las rutas correctas a index.js y a styles.css. Los archivos que NO sustituimos son estos:

  • src/templates/pages/_page.foot.njk

  • src/templates/pages/_page.footer.njk

  • src/templates/pages/_page.head.njk

• Crea tu primera página usando uno de los templates copiados.

  • Duplica la página src/templates/pages/test-template.html y renómbrala como mi-pagina.html

  • Cambia la línea {% extends "pages/_template.test.njk" %} por el template copiado que desees, por ejemplo {% extends "pages/_template.logged-selector.njk" %}

• Enlaza tu nueva página en la documentación del proyecto.

  • Edita la página: docs/paginas.html

  • Añade un item en el componente componentMenuVertical:

    {
        href: "templates/pages/mi-pagina.html",
        text: "Mi pagina"
      }

• Ya puedes publicar tu nueva página: npm run dev

• Mira tu nueva página creada aquí: http://localhost:3000/templates/pages/mi-pagina.html