Búsqueda de sitios web

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


Comience a crear el contenido de su sitio en Markdown y aproveche su sintaxis más limpia y fácil de mantener.

Markdown es un formato popular para escribir contenido web. Su compromiso entre HTML y inglés simple permite a los escritores utilizar 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 resultar especialmente útil si desea crear un blog o tener varias páginas web con contenido. El uso de archivos Markdown le permite centrarse más en el contenido que en el código que rodea ese contenido.

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

Configurar una aplicación angular

Si aún no tiene una 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 botón Código. Selecciona Descargar ZIP.

  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 utilizar una terminal integrada 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-sample-angular-app-main y contiene las carpetas e2e y src. Por ejemplo, si su proyecto está en la carpeta "Descargas", ejecute el siguiente comando para navegar a la carpeta.

    cd C:\Users\Sharl\Downloads\muo-sample-angular-app-main
  5. Instale módulos de nodo en el proyecto. Si no puede ejecutar los comandos de nodo, es posible que deba instalar Node.js en su computadora.

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

    ng serve
  7. Después de ejecutar el comando ng server, 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. Normalmente, esto está en 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 utilizar 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 install ngx-markdown@^10.1.1 --save
    
  2. Abra el archivo app.module.ts. Este archivo se encuentra en la carpeta project/src/app.
  3. Configure el nuevo módulo Markdown. Importe los siguientes paquetes:

    import { SecurityContext } from '@angular/core';
    import { MarkdownModule } from 'ngx-markdown'; 
    import { HttpClientModule, HttpClient } from '@angular/common/http'; 
  4. Agregue el módulo Markdown a la matriz de importaciones.

    imports: [
        ...
        HttpClientModule, 
        MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE }) 
    ], 

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 Markdown y completarlos con contenido.

  1. Navegue hasta la carpeta assets, que se encuentra en la carpeta project/src .
  2. Crea una nueva carpeta llamada publicaciones.
  3. Cree múltiples archivos Markdown. Los archivos Markdown utilizan una extensión .md.

  4. Complete los archivos .md con contenido formateado en la sintaxis de Markdown. Aquí hay algunos contenidos de muestra que puedes usar:

    #### 03 June 2022
    # Delicious Chocolate Recipe
    ___
    This is how you make an awesome Chocolate Cheesecake:
    * Crush the biscuits, mix with butter.
    * Let it set in the fridge for 10 minutes.
    * Mix some cream with syrup.
    * Put it on top of the biscuits then put it back in the fridge.

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 poder navegar hasta ellos.

  1. Abra el archivo home.component.html. Este archivo se encuentra en la carpeta project/src/app/home.
  2. Agregue enlaces a sus nuevas páginas de Markdown. Debes construir tus enlaces de acuerdo con el nombre de tus archivos Markdown. Por ejemplo, si tenía un archivo Markdown llamado "Recipe.md", la URL de la página será "/posts/post/Recipe".

    <div class="links">
        <a routerLink="/posts/post/ChocolateCheesecakeRecipe" style="margin-bottom:24px">Chocolate Cheesecake Recipe >></a>
        
        <a routerLink="/posts/post/StrawberryCheesecakeRecipe" style="margin-bottom:24px">Strawberry Cheesecake Recipe
            >></a>
        
        <a routerLink="/posts/post/CaramelCheesecakeRecipe" style="margin-bottom:24px">Caramel Cheesecake Recipe >></a>
    </div>
  3. Agregue algo de estilo a los enlaces:

    .links {
      padding: 72px;
      text-align: center;
    }
  4. Cree otro componente que pueda usar como una página separada. Esta página debería poder representar cualquier archivo Markdown determinado. En la terminal, ejecute el siguiente comando ng generate para crear un nuevo componente:

    ng g c home/posts
  5. Ahora deberían generarse cuatro archivos nuevos dentro de la nueva carpeta "publicaciones". Esto incluye "posts.component.html", "posts.component.css", "posts.component.ts" y "posts.component.spec.ts".
  6. Abra el archivo posts.component.html y agregue el código HTML para representar los archivos Markdown.

    <div style="padding:100px" markdown [src]="post"></div>
  7. Abra el archivo posts.component.ts . Agregue la importación de enrutamiento.

    import { ActivatedRoute } from '@angular/router';
  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.

    post: string; 
    href: string; 
    constructor(private route: ActivatedRoute) { } 
    ngOnInit(): void {
        let articleName = this.route.snapshot.paramMap.get('article'); 
        this.href = window.location.href; 
        this.post = './assets/posts/' + articleName + '.md'; 
    }
  9. Abra el archivo app-routing.module.ts. Este archivo se encuentra en la carpeta project/src/app .
  10. Importe el nuevo componente de publicación y agréguelo a la matriz de rutas.

    import { PostsComponent } from './home/posts/posts.component';
    const routes: Routes = [
      // ...
      { path: 'posts/post/:article', component: PostsComponent }, 
    ];
  11. Ahora puede volver a iniciar la aplicación Angular.

    ng serve 
  12. Visite http://localhost:4200 o cualquier dirección que aloje su sitio.
  13. Haga clic en uno de los enlaces de la página. Ahora debería ver el contenido de Markdown representado en una página separada.

  14. Puede descargar un ejemplo funcional desde la página del proyecto de GitHub. Puede seguir las instrucciones del 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 centrarse más en su contenido. Esto puede resultar muy útil para 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 resultar útiles para configurar un sitio web de blogs. Uno de ellos es Hugo, un generador de sitios estáticos que también representa archivos Markdown como páginas web.

Artículos relacionados: