Commencez à créer le contenu de votre site dans Markdown et profitez de sa syntaxe plus propre et plus maintenable.
Markdown est un format populaire pour écrire du contenu Web. Son compromis entre HTML et l'anglais simple permet aux rédacteurs d'utiliser une syntaxe plus familière. Cela peut grandement aider à faciliter le fonctionnement quotidien des blogs multi-auteurs et des sites similaires.
Markdown peut être particulièrement utile si vous souhaitez créer un blog ou avoir plusieurs pages Web avec du contenu. L'utilisation de fichiers Markdown vous permet de vous concentrer davantage sur le contenu, plutôt que sur le code autour de ce contenu.
Vous pouvez intégrer Markdown à Angular à l'aide du package de nœud ngx-markdown et en le configurant pour qu'il fonctionne dans un composant.
Configurer une application angulaire
Si vous n'avez pas déjà un Application angulaire, vous pouvez télécharger cet exemple d'application angulaire à partir de GitHub.
- Sur la page du projet sur GitHub, cliquez sur le Code bouton. Sélectionner Télécharger ZIP.
- Décompressez le dossier sur votre ordinateur local.
- Ouvrez le projet à l'aide d'un IDE, tel que Visual Code, Notepad++ ou Sublime Text. Si vous utilisez un IDE, vous pouvez utiliser un terminal intégré pour exécuter toutes les commandes nécessaires.
- Accédez au dossier racine du projet à l'aide d'un terminal. Le nom du dossier racine est muo-sample-angular-app-main, et il contient le e2e et src Dossiers. Par exemple, si votre projet se trouve dans le dossier "Téléchargements", exécutez la commande suivante pour accéder au dossier.
CD C:\Users\Sharl\Downloads\muo-sample-angular-app-main - Installez les modules de nœud dans le projet. Si vous ne pouvez pas exécuter les commandes de nœud, vous devrez peut-être installer Node.js sur votre ordinateur.
npm installer - Vous pouvez maintenant lancer l'application Angular. Exécutez la commande suivante dans le dossier racine du projet.
ng servir - Après avoir exécuté le ng servir commande, attendez que le projet finisse de compiler. Une fois terminé, la ligne de commande affichera l'adresse locale sur laquelle votre application Angular s'exécutera. Habituellement, c'est sur http://localhost: 4200/.
- Ouvrez un navigateur Web et entrez l'adresse qui héberge votre site, par exemple, http://localhost: 4200/. Une fois la page chargée, vous devriez pouvoir voir la page d'accueil de l'exemple d'application angulaire.
Comment installer Ngx-Markdown dans votre application angulaire
Pour pouvoir utiliser les fichiers Markdown dans votre application Angular, vous devrez installer le package ngx-markdown.
- Dans le dossier racine de votre projet, exécutez la commande suivante dans le terminal. Assurez-vous que la version du package ngx-markdown est compatible avec votre version angulaire.
npm installer ngx-markdown@^10.1.1--enregistrer - Ouvrir le fichier app.module.ts. Ce dossier est sous la projet/src/application dossier.
- Configurez le nouveau module Markdown. Importez les packages suivants :
importer { SecurityContext } de '@angular/core' ;
importer { MarkdownModule } de 'ngx-markdown';
importer {ModuleClientHttp, ClientHttp} de '@angulaire/commun/http'; - Ajoutez le module Markdown au tableau des importations.
importations: [
...
HttpClientModule,
MarkdownModule.forRoot({ chargeur: HttpClient, assainir: SecurityContext. RIEN })
],
Comment créer vos fichiers Markdown
Chaque fichier Markdown représentera une page de contenu pour votre site Web. Vous devrez créer un dossier pour stocker vos fichiers Markdown et remplir vos fichiers Markdown avec du contenu.
- Naviguez vers le des atouts dossier, qui se trouve sous le projet/src dossier.
- Créez un nouveau dossier appelé des postes.
- Créez plusieurs fichiers Markdown. Les fichiers Markdown utilisent une extension .md.
- Remplir les fichiers .md avec du contenu formaté dans la syntaxe Markdown. Voici quelques exemples de contenu que vous pouvez utiliser :
#### 03 juin 2022
# Délicieuse recette de chocolat
___
Cette est comment faire un super cheesecake au chocolat :
* Concassez les biscuits, mélangez avec Beurre.
* Laisse-le Positionner au réfrigérateur pendant 10 minutes.
* Mélangez de la crème avec sirop.
* Déposez-le sur les biscuits puis remettez-le au réfrigérateur.
Comment rendre le fichier Markdown dans un composant
Vous devrez répertorier chacun de ces fichiers sur la page d'accueil de l'application, afin de pouvoir y accéder.
- Ouvert home.component.html dossier. Ce dossier est sous la projet/src/app/accueil dossier.
- Ajoutez des liens vers vos nouvelles pages Markdown. Vous devez construire vos liens en fonction du nom de vos fichiers Markdown. Par exemple, si vous avez un fichier Markdown appelé "Recipe.md", l'URL de la page sera "/posts/post/Recipe".
<classe div="liens">
<un routerLink="/posts/post/ChocolateCheesecakeRecipe" style="marge inférieure: 24px">Recette de gâteau au fromage au chocolat >></un>
<Br>
<un routerLink="/posts/post/StrawberryCheesecakeRecipe" style="marge inférieure: 24px">Recette de gâteau au fromage aux fraises
>></un>
<Br>
<un routerLink="/posts/post/CaramelCheesecakeRecipe" style="marge inférieure: 24px">Recette de gâteau au fromage au caramel >></un>
</div> - Ajoutez du style aux liens :
.liens {
rembourrage: 72px ;
aligner le texte: centrer ;
} - Créez un autre composant que vous pouvez utiliser comme page distincte. Cette page devrait être capable de rendre n'importe quel fichier Markdown donné. Dans le terminal, exécutez ce qui suit ng générer commande pour créer un nouveau composant :
ng g c accueil/messages - Il devrait maintenant y avoir quatre nouveaux fichiers générés dans le nouveau dossier "posts". Cela inclut "posts.component.html", "posts.component.css", "posts.component.ts" et "posts.component.spec.ts".
- Ouvrez le messages.composant.html fichier et ajoutez le code HTML pour rendre les fichiers Markdown.
<style div ="rembourrage: 100px" démarquage [src]="Publier"></div> - Ouvrez le postes.composant.ts dossier. Ajoutez l'importation de routage.
importer {ItinéraireActivé} de '@angular/routeur' ; - Remplacez le constructeur et les fonctions ngOnInit() par le code TypeScript pour restituer les fichiers Markdown. Cela prendra le nom de l'article dans le lien URL et sera acheminé vers le fichier Markdown correspondant stocké dans le dossier des ressources.
poste: chaîne;
href: chaîne;
constructeur(route privée: ActivatedRoute) { }
ngOnInit(): annuler {
laisser nom_article = cette.route.snapshot.paramMap.get('article');
cette.href = la fenêtre.location.href;
this.post = './actifs/messages/' + Nom de l'article + '.Maryland';
} - Ouvrez le app-routing.module.ts dossier. Ce dossier est sous la projet/src/application dossier.
- Importez le nouveau composant post et ajoutez-le au tableau routes.
importer {Composant de messages} de './home/messages/messages.composant' ;
constante itinéraires: Itinéraires = [
// ...
{ chemin: 'articles/article/:article', composant: PostsComponent },
]; - Vous pouvez maintenant relancer l'application Angular.
ng servir - Visite http://localhost: 4200 ou n'importe quelle adresse hébergeant votre site.
- Cliquez sur l'un des liens de la page. Vous devriez maintenant voir le rendu du contenu Markdown sur une page distincte.
- Vous pouvez télécharger un exemple de travail à partir du GitHub page du projet. Vous pouvez suivre les instructions du fichier README pour télécharger et exécuter le projet.
Utilisation de Markdown dans votre application angulaire
L'utilisation de fichiers Markdown sur votre site Web vous permet de vous concentrer davantage sur votre contenu. Cela peut être très utile pour les sites de blogs. Si vous avez une application Angular, vous pouvez utiliser des fichiers Markdown pour vos pages Web en utilisant le package de nœud ngx-markdown.
Vous pouvez en savoir plus sur d'autres piles technologiques qui peuvent être utiles pour créer un site Web de blogs. L'un d'entre eux est Hugo, un générateur de site statique qui rend également les fichiers Markdown sous forme de pages Web.
