Construye un blog reactivo rápido con Svelte y Sapper

[dieciséis] (Crédito de la imagen: Svelte)

> npm install

 Express ()
  .usar(
    compresión ({umbral: 0}),
    SIRV ("estático", {dev}),
    sapper.middleware ()
  )
  .Listen (Puerto); 

 Importar * como SAPPER de "@ @ sapper / aplicación";
sapper.start ({
  Objetivo: document.getelementbyid (
   "raíz")
}); 

Con el servidor básico y los archivos de cliente configurados, podemos iniciar el servidor de desarrollo. Esto inicia una compilación de los archivos del trabajador del servidor, cliente y servicio, y se iniciará en el puerto 3000 de forma predeterminada. Siempre que cambie un archivo, reconstruirá la parte de la aplicación que cambió.

Ejecute el servidor en la línea de comandos. Mantenga abierto esta ventana mientras desarrolla el sitio.

 & gt; NPM RUN DEV 

05. Crea una ruta de servidor

Cualquier cosa dentro del directorio "Rutas" se convertirá en una ruta para la aplicación. Archivos con el .js La extensión se convertirá en lo que se llaman rutas de servidor. Estas rutas no tienen UI, sino que la aplicación solicita la solicitud para obtener datos. En nuestro caso, los usaremos para cargar las publicaciones de blogs.

los Rutas / blog / index.json.js El archivo creará el /blog.json Punto final en nuestro servidor. Importe las publicaciones del blog y cree algunos JSON de ellos.

 Importar publicaciones de "./_posts.js";
const contenidos = json.stringify (
  Posts.map (Post = & gt; ({
    Autor: Post.Author,
    Imagen: Post.Image,
    Título: post.title,
    Slug: Post.Slug
  }))))
); 

06. Devuelve las publicaciones del blog.

Los servidores son las funciones de exportación que se corresponden con los métodos HTTP. Por ejemplo, para responder a una solicitud de obtención, exportaríamos una función llamada obtener desde el archivo de ruta del servidor. Crear un obtener Función que responde con los datos que recopilamos en el paso anterior en un formato JSON. Abierto http: // localhost: 3000 / blog.json En el navegador y verifique que las publicaciones vengan.

 Función de exportación GET (REQ, RES) {
  res.writehead (200, {
    "TIPO DE CONTENIDO": "Aplicación / JSON"
  });

  res.end (contenidos);
} 

07. Crear página de índice

Las páginas en Sapper son componentes regulares de Svelte. Cada componente es un solo archivo con un .esbelto Extensión, y contiene toda la lógica y el estilo para manejarse. Cualquier JavaScript Este componente debe ejecutarse vivirá dentro de un & lt; script & gt; TAG - Al igual que cualquier página HTML.

Dentro Rutas / index.svelte , importe un par de otros componentes de Svelte que podemos usar para construir esta página. Exportar un publicación Variable que vamos a rellenar más tarde.

 & lt; script & gt;
  Importar contenedor de
   "../Components/container.svelte";
  Importar postsumary de
   "../Components/postsummary.svelte";
  Exportar avisos;
& lt; / script & gt; 

08. Fetch Blog Post Data

Con la configuración de la página, podemos comenzar a traer publicaciones de blogs (es posible que desee respaldarlas en almacenamiento en la nube ). Tenemos que hacer esto tan pronto como se cargue la página. Para que el servidor sea consciente de esto y luego solicite estos datos cuando realiza la página, debe ir por separado & lt; contexto del script = "módulo" & gt; etiqueta.

En el servidor, Sapper buscará un precarga Función, y espere a que se complete antes de mostrar la página. Aquí estamos poblando el publicación Variable del paso anterior.

 & lt; Context Script = "Module" & GT;
  Exportar función de la función de ASYNC () {
    const res = esperar
     esto.cetch ("blog.json");
    Const Data = Await res.json ();
    retorno {publicaciones: datos};
  }
& lt; / script & gt; 

09. Mostrar resúmenes de publicación

En Svelte, las variables son reactivas por defecto. Esto significa que, a medida que se actualizan, nuestros componentes también se actualizarán también. Como publicación La variable ahora tiene una matriz de postes de blog, podemos hacer un bucle sobre estos y mostrarlos.

Podemos hacer esto usando un #cada cuadra. Estos repetirán lo que está dentro de los soportes para cada elemento en una matriz. En la parte inferior del componente, fuera de las etiquetas, agregue el HTML para mostrar las publicaciones.

 & lt; contenedor & gt;
  & lt; ul & gt;
    {#ach posts como post}
      & lt; li & gt;
        & lt; postsummary {... post} / & gt;
      & lt; / li & gt;
    {/cada}
  & lt; / ul & gt;
& lt; / contenedor & gt; 

10. Estilo el contenedor.

Podemos usar componentes para contener cualquier lógica repetida y usarlos donde sea necesario: estilos incluidos. los & lt; contenedor & gt; El componente actualmente no hace nada, pero podemos usarlo para dar un ancho máximo al contenido en su interior.

Abrir Componentes / contenedor.svelte y agrega algunos estilos dentro de un & lt; estilo & gt; etiqueta. Cualquier estilos que aplicamos dentro de un componente se encuentran al alcance de ese componente, lo que significa que podemos usar un selector genérico.

 & lt; Style & GT;
  div {
    Margen: 0 Auto;
    Acolchado: 0 1REM;
    Max-Ancho: 50REM;
  }
& lt; / estilo & gt; 

11. Defina A & LT; Slot & GT;

Si un componente está diseñado para ser el padre a otros componentes, necesitamos una forma de pasar a través de esos componentes. los & lt; slot & gt; El elemento hace precisamente eso, y se puede colocar en cualquier lugar que tenga sentido dentro de la marca de un componente.

Con & lt; contenedor & gt; Estamos envolviendo los contenidos en un estilo. & lt; div & gt; . Usar & lt; slot & gt; dentro de & lt; div & gt; para dejarlo todo lo demás a través.

 & lt; DIV & GT;
  & lt; slot / & gt;
& lt; / DIV & GT; 

12. Exponer los accesorios postsummarios.

No todos los componentes van a buscar algunos datos. A medida que estamos cargando las publicaciones del componente de la página principal, se puede pasar a los componentes que realiza a través de sus atributos.

Abierto Componentes / postsummary.svelte y definir algunos atributos en la parte superior del archivo. Estos se están llenando por el operador de difusión que agregamos en el paso 09.

 & lt; script & gt;
  exportación de la exportación autor;
  Exportar deja la imagen;
  exportar deja que la babosa;
  exportación de que el título;
& lt; / script & gt; 

13. Mostrar el resumen de la publicación del blog

Cuando los atributos están poblados, luego se les accede como cualquier otra variable. Al tener atributos separados para cada parte del Resumen de POST, hacemos que la marca sea más fácil de leer.

En la parte inferior del componente, agregue un poco de HTML para crear el resumen. Las clases se relacionan con los estilos predefinidos.

 & lt; article & gt;
& lt; div clase = "post-image" style = "
 Imagen - Imagen: URL ({image}) "/ & gt;
& lt; div clase = "cuerpo" y gt;
  & lt; div clase = "Autor-image" & gt;
    & lt; img src = {autor.image}
     alt = {autor.name} / & gt;
  & lt; / DIV & GT;
  & lt; div clase = "sobre" & gt;
    & lt; h1 & gt; {title} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; por
     {Author.Name} & lt; / span & gt;
  & lt; / DIV & GT;
& lt; / DIV & GT;
& lt; / Artículo & gt; 

14. Enlace a la publicación del blog.

A diferencia de los marcos similares, como Siguiente.js, Sapper funciona con enlaces de anclaje regulares. En el tiempo de construcción, es capaz de detectar enlaces internos, y también para hacer sus propias optimizaciones.

Actualice la marca desde el paso anterior enviándolo en un enlace. No es necesario que usted cree cadenas de plantillas para componer la URL Slugged.

 & lt; a rel = "prefetch" href = "/ blog / {slug}" & gt;
  & lt; article & gt; ... & lt; / article & gt;
& lt; / a & gt; 

15. Fetch un post por slug

Sapper es capaz de crear páginas basadas en los parámetros de URL. En nuestro caso, vinculamos a / Blog / Slug, lo que significa que representa el componente en /rutes/blog/[lug◆.svelte .

Dentro de ese componente, busca los datos del blog como lo hicimos para la página de índice. los paramentales El objeto contiene los parámetros de la URL, que en este caso está la babosa.

 & lt; Context Script = "Module" & GT;
  Exportar la función Async
   precarga ({params}) {
    const res = esperar a esto.cetch (
     `Blog / $ {params.Slug} .json`);
    Const Data = Await res.json ();
  }
& lt; / script & gt; 

16. Error si no se encuentra POST

A diferencia de la página de índice, existe la posibilidad de que no haya una publicación del blog en la URL. En ese caso, deberíamos mostrar un error. Junto con ha podido recuperar , la precarga El método también incluye error que cambia la respuesta a una página de error en su lugar.

Al final del método de precarga, muestre un error si no hay publicación encontrada. De lo contrario, configure el correo Variable para la página.

 Si (res.status === 200) {
  Devolver {POST: DATOS};
} demás {
  este.Error (Res.Status,
    Data.Message);
} 

17. Mostrar la publicación del blog

Con los datos recuperados, ahora podemos mostrar la publicación en la página. Al igual que el componente postsummary, visualizamos cada parte del contenido del post dentro de los soportes rizados. En la parte inferior del componente, agregue algún margen para mostrar en la página.

 & lt; article & gt;
  & lt; contenedor & gt;
    & lt; div class = "title" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div clase = "byline" & gt; por
       {post.author.name} & lt; / DIV & GT;
    & lt; / DIV & GT;
    & lt; img class = "post-image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / contenedor & gt;
& lt; / Artículo & gt; 

18. Mostrar HTML en su lugar

Mirando la página ahora, todo se muestra correctamente aparte del contenido real de la publicación. La conversión de Markdown genera HTML, pero vemos que se imprime como texto en el propio Post. Sapper tiene un analizador HTML incorporado para este caso. Colocación @html Delante de él usará este analizador.

 {@ html post.html} 

19. Configurar página & lt; Título & GT; valor

Nuestro blog funciona correctamente, pero hay un par de cambios necesarios para finalizarlo. Uno de esos es actualizar el & lt; title & gt; en la página para relabilar la pestaña se muestra en.

Svelte apoya a un & lt; svelte: cabeza y gt; elemento, que inyecta cualquier cosa dentro de la misma en el & lt; cabeza y gt; de la página. Usa esto para establecer el título de la publicación como & lt; title & gt; .

 & lt; Svelte: Head & GT;
  & lt; title & gt; {post.title} |
   Sapper blog & lt; / title & gt;
& lt; / svelte: cabeza y gt; 

20. Actualizando el & lt; title & gt;

Cada página pasa por una plantilla para sellar el HTML para el resto de la página. Aquí es donde se ingresaría cualquier configuración, como las importaciones de fuentes y las etiquetas meta. Abra la plantilla.html, y agregue un gancho para los contenidos de la & lt; svelte: cabeza y gt; Elemento del paso anterior. Añadir esto en justo antes del cierre & lt; / cabeza y gt; etiqueta.

 & lt; cabeza y gt;
  [...]
  % sapper.head%
& LT; / Head & GT; Lo último que debemos agregar es un diseño para el blog. En lugar de envolver cada página en un componente, SAPPER buscará un archivo "_Layout.Svelte" para hacer este trabajo para nosotros.
Dentro de _layout.svelte, importan el cabezal & lt; encabezado & gt; Componente y muestra que en la parte superior de cada página. Proporciona un enlace conveniente de nuevo a la página de inicio. 

21. Añadir el encabezado permanente

Lo último que debemos agregar es un diseño para el blog. En lugar de envolver cada página en un componente, Sapper buscará una _layout.svelte Archivo para hacer este trabajo para nosotros. Dentro _layout.svelte , importan el encabezado y gt; Componente y muestra que en la parte superior de cada página. Proporciona un enlace conveniente de nuevo a la página de inicio.

 & lt; script & gt;
  Cabezal de importación de
   "../Components/Header.svelte";
& lt; / script & gt;
& lt; Main & GT;
  & lt; encabezado / & gt;
  & lt; slot / & gt;
& lt; / Main & GT; 

Este contenido apareció originalmente en el diseñador web.

• Componentes web: la guía definitiva.
• 30 extensiones de cromo para diseñadores web y devs
• 52 herramientas de diseño web para ayudarlo a trabajar más inteligentemente en 2019