Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Curso de Sapper

Curso de Sapper

Oscar Barajas Tavares

Oscar Barajas Tavares

Crear Template html

5/17
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Esto me recuerda a templates de django

<!DOCTYPE html>
    <html lang="es">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Pugstagram</title>
      %sapper.base%
      %sapper.styles%
      %sapper.head%
    </head>

    <body>
      <app>
        %sapper.html%
      </app>
      %sapper.scripts%
    </body>
    <script src="https://kit.fontawesome.com/TU_PROPIO_HASH.js" crossorigin="anonymous"></script>
    </html>

F por el directorio public donde estaba nuestro archivo index.html.
Ya no lo necesitamos porque estamos generando nuestro propio servidor con polka. Polka utilizará el template.html que creamos en esta clase para añadir la app. Ya no usaremos la opción que nos daba svelte para trabajar con archivos públicos, por lo tanto, no es necesario.
.
Lo que hicimos en esta clase fue añadir variables nativas de sapper a nuestro template. Esto se hace para añadir elementos externos (scripts, estilos, metadatos) a nuestro archivo principal.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- añade la base del proyecto a este archivo -->
  %sapper.base%
  <!-- añade los estilos necesarios de nuestra app a este archivo -->
  %sapper.styles%
  <!-- añade los metadatos a este template -->
  %sapper.head%
</head>

<body>
  <!-- empuja (muestra) la app a este archivo template para que sea renderizada-->
  <app>%sapper.html%</app>
  %sapper.scripts%
  <script src="https://kit.fontawesome.com/473d269aa9.js" crossorigin="anonymous"></script>
</body>
</html>