Agregue páginas a su sitio web angular usando archivos Markdown

Markdown es un formato popular para escribir contenido web. Su compromiso entre HTML y el inglés simple permite a los escritores usar una sintaxis más familiar. Puede ser de gran ayuda para facilitar el funcionamiento diario de blogs de varios autores y sitios similares.

Markdown puede ser particularmente útil si desea crear un blog o tener varias páginas web con contenido. El uso de archivos Markdown le permite concentrarse más en el contenido, en lugar del código que rodea ese contenido.

Puede integrar Markdown con Angular usando el paquete de nodos ngx-markdown y configurándolo para que funcione dentro de un componente.

Configuración de una aplicación angular

Si aún no tienes un aplicación angular, puede descargar esta aplicación Angular de muestra desde GitHub.

1. En la página del proyecto en GitHub, haga clic en el Código botón. Seleccione Descargar ZIP.
instagram viewer
2. Descomprima la carpeta en su computadora local.
3. Abra el proyecto usando un IDE, como Visual Code, Notepad++ o Sublime Text. Si está utilizando un IDE, puede usar un terminal integrado para ejecutar los comandos necesarios.
4. Navegue a la carpeta raíz del proyecto usando una terminal. El nombre de la carpeta raíz es muo-muestra-angular-aplicación-principal, y contiene el e2e y origen carpetas Por ejemplo, si su proyecto está en la carpeta "Descargas", ejecute el siguiente comando para navegar a la carpeta.

   discos compactos C:\Users\Sharl\Downloads\muo-sample-angular-app-main

5. Instale módulos de nodo en el proyecto. Si no puede ejecutar comandos de nodo, es posible que deba instalar Nodo.js en su computadora.

   npm Instalar en pc

6. Ahora puede iniciar la aplicación Angular. Ejecute el siguiente comando en la carpeta raíz del proyecto.

   ng servir

7. Después de ejecutar el ng servir comando, espere a que el proyecto termine de compilarse. Una vez que haya terminado, la línea de comando generará la dirección local en la que se ejecutará su aplicación Angular. Por lo general, esto está encendido http://localhost: 4200/.
8. Abra un navegador web e ingrese la dirección que aloja su sitio, por ejemplo, http://localhost: 4200/. Una vez que la página se haya cargado, debería poder ver la página de inicio de la aplicación angular de muestra.

Cómo instalar Ngx-Markdown en su aplicación Angular

Para poder usar archivos Markdown en su aplicación Angular, deberá instalar el paquete ngx-markdown.

1. En la carpeta raíz de su proyecto, ejecute el siguiente comando en la terminal. Asegúrese de que la versión del paquete ngx-markdown sea compatible con su versión de Angular.

   npm Instalar en pc ngx-rebaja@^10.1.1--ahorrar
   

2. Abre el archivo aplicación.módulo.ts. Este archivo está bajo el proyecto/origen/aplicación carpeta.
3. Configure el nuevo módulo Markdown. Importar los siguientes paquetes:

   importar {Contexto de seguridad} de '@angular/núcleo';
   importar { Módulo Markdown } de 'ngx-rebaja'; 
   importar {HttpClientModule, HttpClient} de '@angular/común/http'; 

4. Agregue el módulo Markdown a la matriz de importaciones.

   importaciones: [
    ...
    HttpClientModule, 
   Módulo Markdown.forRoot({ cargador: HttpClient, desinfectar: ​​SecurityContext. NINGUNA }) 
   ], 

Cómo crear sus archivos Markdown

Cada archivo Markdown representará una página de contenido para su sitio web. Deberá crear una carpeta para almacenar sus archivos de Markdown y llenar sus archivos de Markdown con contenido.

1. Navegar a la activos carpeta, que está debajo de la proyecto/fuente carpeta.
2. Crear una nueva carpeta llamada publicaciones.
3. Cree múltiples archivos Markdown. Los archivos Markdown usan una extensión .md.
4. Rellene los archivos .md con algo de contenido formateado en sintaxis Markdown. Aquí hay algunos ejemplos de contenido que puede usar:

   #### 03 junio 2022
   # Deliciosa receta de chocolate
   ___
   Este es cómo se hace un increíble pastel de queso con chocolate:
   * Triturar las galletas, mezclar con manteca.
   * Dejarlo establecer en la heladera por 10 minutos.
   * Mezclar un poco de crema con jarabe.
   * Póngalo encima de las galletas y luego guárdelo en el refrigerador.

Cómo renderizar el archivo Markdown en un componente

Deberá enumerar cada uno de estos archivos en la página de inicio de la aplicación, para que pueda navegar hasta ellos.

1. Abierto inicio.componente.html expediente. Este archivo está bajo el proyecto/src/aplicación/inicio carpeta.
2. Agregue enlaces a sus nuevas páginas de Markdown. Debe construir sus enlaces de acuerdo con el nombre de sus archivos Markdown. Por ejemplo, si tenía un archivo Markdown llamado "Recipe.md", la URL de la página será "/posts/post/Recipe".

   <clase div="Enlaces">
   <un enlace de enrutador ="/posts/post/ChocolateCheesecakeRecipe" estilo="margen inferior: 24px">Receta de pastel de queso con chocolate >></a>
   <hermano>
   <un enlace de enrutador ="/posts/post/StrawberryCheesecakeRecipe" estilo="margen inferior: 24px">Receta de tarta de queso con fresas
   >></a>
   <hermano>
   <un enlace de enrutador ="/posts/post/CaramelCheesecakeRecipe" estilo="margen inferior: 24px">Receta de pastel de queso con caramelo >></a>
   </div>

3. Agregue algo de estilo a los enlaces:

   .Enlaces {
    relleno: 72px;
    alineación de texto: centro;
   }

4. Cree otro componente que pueda usar como una página separada. Esta página debería poder representar cualquier archivo Markdown dado. En la terminal, ejecuta lo siguiente ng generar comando para crear un nuevo componente:

   ng g c inicio/publicaciones

5. Ahora debería haber cuatro nuevos archivos generados dentro de la nueva carpeta "publicaciones". Esto incluye "posts.component.html", "posts.component.css", "posts.component.ts" y "posts.component.spec.ts".
6. Abre el publicaciones.componente.html y agregue el código HTML para representar los archivos Markdown.

   <estilo div="relleno: 100px" descuento [src]="correo"></div>

7. Abre el publicaciones.component.ts expediente. Agregue la importación de enrutamiento.

   importar { Ruta Activada } de '@angular/enrutador';

8. Reemplace las funciones constructor y ngOnInit() con el código TypeScript para representar los archivos Markdown. Esto tomará el nombre del artículo en el enlace URL y lo dirigirá al archivo Markdown correspondiente almacenado en la carpeta de activos.

   publicación: cadena; 
   href: cadena; 
   constructor(ruta privada: ActivatedRoute) { } 
   ngOnInit(): vacío {
   dejar nombre del artículo = este.route.snapshot.paramMap.get('artículo'); 
   este.href = ventana.ubicación.href; 
    esta.publicación = './activos/publicaciones/' + nombre del artículo + '.Maryland'; 
   }

9. Abre el app-routing.module.ts expediente. Este archivo está bajo el proyecto/origen/aplicación carpeta.
10. Importe el nuevo componente de publicación y agréguelo a la matriz de rutas.

    importar { Componente de publicaciones } de './home/posts/posts.component';
    constante rutas: Rutas = [
    // ...
     { sendero: 'publicaciones/publicación/:artículo', componente: Componente de publicaciones }, 
    ];

11. Ahora puede iniciar la aplicación Angular nuevamente.

    ng servir 

12. Visitar http://localhost: 4200 o la dirección que aloje su sitio.
13. Haga clic en uno de los enlaces de la página. Ahora debería ver el procesamiento de contenido de Markdown en una página separada.
14. Puede descargar un ejemplo de trabajo de la GitHub pagina del proyecto Puede seguir las instrucciones en el archivo README para descargar y ejecutar el proyecto.

Usando Markdown en su aplicación angular

El uso de archivos Markdown en su sitio web le permite concentrarse más en su contenido. Esto puede ser muy útil para los sitios web de blogs. Si tiene una aplicación Angular, puede usar archivos Markdown para sus páginas web usando el paquete de nodos ngx-markdown.

Puede obtener más información sobre otras pilas de tecnología que pueden ser útiles para configurar un sitio web de blogs. Uno de ellos es Hugo, un generador de sitios estáticos que también convierte los archivos de Markdown en páginas web.