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 template 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 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 el 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.

• Podrás utilizar los templates que encontrarás en la ruta de desy-html-starter: src/templates/pages/ comienzan con: _template.*.njk también por _page.*.njk .

• Crea tu primera página usando uno de los templates de desy-html-starter.

  • Duplica la página src/pagina-prueba.html y renómbrala como mi-pagina.html

  • Cambia la línea {% extends "pages/_template.test.njk" %} por el template 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: src/index.html

  • Añade un item la lista que enlace a tu nueva página:

    <li class="mb-base">
      <a class="c-link" href="mi-pagina.html">Mi página</a>
    </li>

     

• 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