Adicione páginas ao seu site Angular usando arquivos Markdown

Markdown é um formato popular para escrever conteúdo da web. Seu compromisso entre HTML e inglês simples permite que os escritores usem uma sintaxe mais familiar. Ele pode ajudar muito a facilitar o funcionamento diário de blogs de vários autores e sites semelhantes.

O Markdown pode ser particularmente útil se você quiser criar um blog ou ter várias páginas da web com conteúdo. O uso de arquivos Markdown permite que você se concentre mais no conteúdo, em vez do código em torno desse conteúdo.

Você pode integrar o Markdown ao Angular usando o pacote de nó ngx-markdown e configurando-o para funcionar em um componente.

Configurando um aplicativo angular

Se você ainda não tem um Aplicação angular, você pode baixar este aplicativo Angular de amostra em GitHubGenericName.

1. Na página do projeto no GitHub, clique no botão Código botão. Selecionar Baixar ZIP.
instagram viewer
2. Descompacte a pasta em seu computador local.
3. Abra o projeto usando um IDE, como Visual Code, Notepad++ ou Sublime Text. Se você estiver usando um IDE, poderá usar um terminal integrado para executar os comandos necessários.
4. Navegue até a pasta raiz do projeto usando um terminal. O nome da pasta raiz é muo-sample-angular-app-main, e contém o e2e e src pastas. Por exemplo, se seu projeto estiver na pasta "Downloads", execute o seguinte comando para navegar até a pasta.

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

5. Instale os módulos do nó no projeto. Se você não puder executar comandos de nó, talvez seja necessário instalar Node.js em seu computador.

   npm instalar

6. Agora você pode iniciar o aplicativo Angular. Execute o seguinte comando na pasta raiz do projeto.

   ng servir

7. Depois de executar o ng servir comando, espere o projeto terminar de compilar. Quando terminar, a linha de comando exibirá o endereço local em que seu aplicativo Angular será executado. Normalmente, isso está ligado http://localhost: 4200/.
8. Abra um navegador da web e digite o endereço que hospeda seu site, por exemplo, http://localhost: 4200/. Depois que a página for carregada, você poderá ver a página inicial do aplicativo angular de amostra.

Como instalar o Ngx-Markdown em seu aplicativo Angular

Para poder usar arquivos Markdown em seu aplicativo Angular, você precisará instalar o pacote ngx-markdown.

1. Na pasta raiz do seu projeto, execute o seguinte comando no terminal. Certifique-se de que a versão do pacote ngx-markdown seja compatível com sua versão do Angular.

   npm instalar ngx-markdown@^10.1.1--Salve 
   

2. Abra o arquivo app.module.ts. Este arquivo está sob a projeto/src/aplicativo pasta.
3. Configure o novo módulo Markdown. Importe os seguintes pacotes:

   importar { SecurityContext } a partir de '@angular/core';
   importar { MarkdownModule } a partir de 'ngx-markdown'; 
   importar { HttpClientModule, HttpClient } a partir de '@angular/comum/http'; 

4. Adicione o módulo Markdown à matriz de importações.

   importações: [
    ...
    HttpClientModule, 
   Módulo Markdown.forRoot({ carregador: HttpClient, limpe: SecurityContext. NENHUM }) 
   ], 

Como criar seus arquivos Markdown

Cada arquivo Markdown representará uma página de conteúdo para seu site. Você precisará criar uma pasta para armazenar seus arquivos Markdown e preencher seus arquivos Markdown com conteúdo.

1. Navegue até o ativos pasta, que está sob o projeto/src pasta.
2. Crie uma nova pasta chamada Postagens.
3. Crie vários arquivos Markdown. Os arquivos Markdown usam uma extensão .md.
4. Preencha os arquivos .md com algum conteúdo formatado na sintaxe Markdown. Aqui estão alguns exemplos de conteúdo que você pode usar:

   #### 03 de junho de 2022
   # Deliciosa receita de chocolate
   ___
   este é como você faz um incrível Cheesecake de Chocolate:
   * Triture os biscoitos, misture com manteiga.
   * Deixe-o definir na geladeira por 10 minutos.
   * Misture um pouco de creme com xarope.
   *Coloque em cima dos biscoitos e coloque de volta na geladeira.

Como renderizar o arquivo Markdown em um componente

Você precisará listar cada um desses arquivos na página inicial do aplicativo, para poder navegar até eles.

1. Abrir home.component.html Arquivo. Este arquivo está sob a projeto/src/app/home pasta.
2. Adicione links às suas novas páginas Markdown. Você deve construir seus links de acordo com o nome dos seus arquivos Markdown. Por exemplo, se você tiver um arquivo Markdown chamado "Recipe.md", o URL da página será "/posts/post/Recipe".

   <classe div="links">
   <um roteadorLink="/posts/post/ChocolateCheesecakeRecipe" estilo="margem inferior: 24px">Receita de cheesecake de chocolate >></uma>
   <br>
   <um roteadorLink="/posts/post/StrawberryCheesecakeRecipe" estilo="margem inferior: 24px">Receita de cheesecake de morango
   >></uma>
   <br>
   <um roteadorLink="/posts/post/CaramelCheesecakeRecipe" estilo="margem inferior: 24px">Receita de cheesecake de caramelo >></uma>
   </div>

3. Adicione algum estilo aos links:

   .links {
    preenchimento: 72px;
    alinhamento de texto: centro;
   }

4. Crie outro componente que você possa usar como uma página separada. Esta página deve ser capaz de renderizar qualquer arquivo Markdown. No terminal, execute o seguinte ng gerar comando para criar um novo componente:

   ng g c home/posts

5. Agora deve haver quatro novos arquivos gerados dentro da nova pasta "posts". Isso inclui "posts.component.html", "posts.component.css", "posts.component.ts" e "posts.component.spec.ts".
6. Abra o posts.component.html e adicione o código HTML para renderizar os arquivos Markdown.

   <estilo div="preenchimento: 100px" remarcação [src]="publicar"></div>

7. Abra o posts.component.ts Arquivo. Adicione a importação de roteamento.

   importar { Rota Ativada } a partir de '@angular/roteador';

8. Substitua as funções construtor e ngOnInit() pelo código TypeScript para renderizar os arquivos Markdown. Isso levará o nome do artigo no link do URL e direcionará para o arquivo Markdown correspondente armazenado na pasta de ativos.

   postagem: string; 
   href: cadeia; 
   construtor(rota privada: ActivatedRoute) { } 
   ngOnInit(): vazio {
   deixar nome do artigo = isto.route.snapshot.paramMap.get('artigo'); 
   isto.href = janela.local.href; 
    this.post = './assets/posts/' + artigoNome + '.md'; 
   }

9. Abra o app-routing.module.ts Arquivo. Este arquivo está sob a projeto/src/aplicativo pasta.
10. Importe o novo componente de postagem e adicione-o à matriz de rotas.

    importar { PostsComponent } a partir de './home/posts/posts.component';
    const rotas: Rotas = [
    // ...
     { caminho: 'posts/post/:artigo', componente: PostsComponent }, 
    ];

11. Agora você pode iniciar o aplicativo Angular novamente.

    ng servir 

12. Visita http://localhost: 4200 ou qualquer endereço que esteja hospedando seu site.
13. Clique em um dos links da página. Agora você deve ver o conteúdo do Markdown renderizado em uma página separada.
14. Você pode baixar um exemplo de trabalho do GitHubGenericName página do projeto. Você pode seguir as instruções no arquivo README para baixar e executar o projeto.

Usando Markdown em seu aplicativo Angular

O uso de arquivos Markdown em seu site permite que você se concentre mais em seu conteúdo. Isso pode ser muito útil para sites de blogs. Se você tiver um aplicativo Angular, poderá usar arquivos Markdown para suas páginas da Web usando o pacote de nó ngx-markdown.

Você pode aprender mais sobre outras pilhas de tecnologia que podem ser úteis para configurar um site de blog. Um deles é o Hugo, um gerador de site estático que também renderiza arquivos Markdown como páginas da web.