הוסף דפים לאתר הזוויתי שלך באמצעות קבצי Markdown

Markdown הוא פורמט פופולרי לכתיבת תוכן אינטרנט. הפשרה שלו בין HTML לאנגלית פשוטה מאפשרת לכותבים להשתמש בתחביר מוכר יותר. זה יכול לעזור מאוד להקל על ההפעלה היומיומית של בלוגים מרובי מחברים ואתרים דומים.

Markdown יכול להיות שימושי במיוחד אם תרצה ליצור בלוג או להחזיק מספר דפי אינטרנט עם תוכן. שימוש בקובצי Markdown מאפשר לך להתמקד יותר בתוכן, במקום בקוד סביב התוכן הזה.

אתה יכול לשלב את Markdown עם Angular באמצעות חבילת הצומת ngx-markdown, ועל ידי הגדרתה כך שתעבוד בתוך רכיב.

הגדרת יישום Angular

אם עדיין אין לך יישום זוויתי, אתה יכול להוריד את היישום הזה לדוגמה Angular מ GitHub.

1. בדף הפרויקט ב-GitHub, לחץ על קוד לַחְצָן. בחר הורד את ZIP.
2. פתח את התיקיה למחשב המקומי שלך.
3. פתח את הפרויקט באמצעות IDE, כגון Visual Code, Notepad++ או Sublime Text. אם אתה משתמש ב-IDE, אתה יכול להשתמש במסוף מובנה כדי לבצע את כל הפקודות הדרושות.
4. נווט אל תיקיית השורש של הפרויקט באמצעות מסוף. שם תיקיית השורש הוא
   instagram viewer
   muo-sample-angular-app-main, והוא מכיל את e2e ו src תיקיות. לדוגמה, אם הפרויקט שלך נמצא בתיקייה "הורדות", הפעל את הפקודה הבאה כדי לנווט לתיקיה.

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

5. התקן מודולי צומת בפרויקט. אם אינך יכול להפעיל פקודות צומת, ייתכן שתצטרך להתקין Node.js למחשב שלך.

   npm להתקין

6. כעת תוכל להפעיל את אפליקציית Angular. הפעל את הפקודה הבאה בתיקיית השורש של הפרויקט.

   לשרת

7. לאחר הפעלת ה לשרת הפקודה, המתן עד שהפרויקט יסתיים הקומפילציה. לאחר סיום, שורת הפקודה תוציא את הכתובת המקומית שעליה תפעל אפליקציית Angular שלך. בדרך כלל, זה פועל http://localhost: 4200/.
8. פתח דפדפן אינטרנט והזן את הכתובת שמארחת את האתר שלך, למשל, http://localhost: 4200/. לאחר שהדף נטען, אתה אמור להיות מסוגל לראות את דף הבית של היישום הזוויתי לדוגמה.

כיצד להתקין Ngx-Markdown ביישום הזוויתי שלך

כדי שתוכל להשתמש בקבצי Markdown ביישום Angular שלך, תצטרך להתקין את חבילת ngx-markdown.

1. בתיקיית השורש של הפרויקט שלך, הפעל את הפקודה הבאה בטרמינל. ודא שגרסת החבילה ngx-markdown תואמת לגרסת ה-Angular שלך.

   npm להתקין ngx-markdown@^10.1.1--לשמור
   

2. פתח את הקובץ app.module.ts. קובץ זה נמצא תחת project/src/app תיקייה.
3. הגדר את מודול Markdown החדש. ייבא את החבילות הבאות:

   יְבוּא { SecurityContext } מ '@angular/core';
   יְבוּא { MarkdownModule } מ 'ngx-markdown'; 
   יְבוּא { HttpClientModule, HttpClient } מ '@angular/common/http'; 

4. הוסף את מודול ה-Markdown למערך הייבוא.

   יבוא: [
    ...
    HttpClientModule, 
   MarkdownModule.forRoot({ מעמיס: HttpClient, חיטוי: SecurityContext. אף אחד }) 
   ], 

כיצד ליצור קבצי Markdown שלך

כל קובץ Markdown ייצג דף תוכן עבור האתר שלך. תצטרך ליצור תיקיה כדי לאחסן את קובצי ה-Markdown שלך ולאכלס את קבצי ה-Markdown שלך בתוכן.

1. נווט אל נכסים תיקייה, שנמצאת מתחת ל- פרויקט / src תיקייה.
2. צור תיקיה חדשה בשם פוסטים.
3. צור קובצי Markdown מרובים. קובצי Markdown משתמשים בסיומת .md.
4. אכלס את קבצי ה-.md בתוכן מסוים מעוצב בתחביר Markdown. הנה כמה תוכן לדוגמה שתוכל להשתמש בו:

   #### 3 ביוני 2022
   # מתכון שוקולד טעים
   ___
   זֶה הוא איך מכינים עוגת גבינה שוקולד מדהימה:
   * מרסקים את הביסקוויטים, מערבבים עם חמאה.
   * תן לזה מַעֲרֶכֶת במקרר למשך 10 דקות.
   * מערבבים קצת שמנת עם סירופ.
   * שים אותו על גבי הביסקוויטים ואז החזיר אותו למקרר.

כיצד לעבד את קובץ ה-Markdown ברכיב

תצטרך לרשום כל אחד מהקבצים האלה בדף הבית של האפליקציה, כדי שתוכל לנווט אליהם.

1. לִפְתוֹחַ home.component.html קוֹבֶץ. קובץ זה נמצא תחת project/src/app/home תיקייה.
2. הוסף קישורים לדפי ה-Markdown החדשים שלך. עליך לבנות את הקישורים שלך לפי השם של קבצי ה-Markdown שלך. לדוגמה, אם היה לך קובץ Markdown בשם "Recipe.md", כתובת האתר של הדף תהיה "/posts/post/Recipe".

   <div class="קישורים">
   <a routerLink="/posts/post/ChocolateCheesecakeRecipe" סגנון="שוליים-תחתית: 24 פיקסלים">מתכון לעוגת גבינה שוקולד >></א>
   <br>
   <a routerLink="/posts/post/StrawberryCheesecakeRecipe" סגנון="שוליים-תחתית: 24 פיקסלים">מתכון לעוגת גבינה תותים
   >></א>
   <br>
   <a routerLink="/posts/post/CaramelCheesecakeRecipe" סגנון="שוליים-תחתית: 24 פיקסלים">מתכון לעוגת גבינה קרמל >></א>
   </div>

3. הוסף קצת סטיילינג לקישורים:

   .קישורים {
    ריפוד: 72px;
    יישור טקסט: מרכז;
   }

4. צור רכיב נוסף שתוכל להשתמש בו כעמוד נפרד. דף זה אמור להיות מסוגל להציג כל קובץ Markdown נתון. בטרמינל, הפעל את הפעולות הבאות ליצור פקודה ליצירת רכיב חדש:

   ng g c בית/פוסטים

5. כעת אמורים להיות ארבעה קבצים חדשים שנוצרו בתוך תיקיית ה"פוסטים" החדשה. זה כולל "posts.component.html", "posts.component.css", "posts.component.ts" ו-"posts.component.spec.ts".
6. פתח את ה posts.component.html קובץ, והוסיפו את קוד ה-HTML כדי לעבד את קובצי ה-Markdown.

   <סגנון div="ריפוד: 100 פיקסלים" markdown [src]="הודעה"></div>

7. פתח את ה posts.component.ts קוֹבֶץ. הוסף את ייבוא ​​הניתוב.

   יְבוּא { ActivatedRoute } מ '@angular/נתב';

8. החלף את הפונקציות בנאי ו-ngOnInit() בקוד TypeScript כדי לעבד את קבצי ה-Markdown. זה ייקח את שם המאמר בקישור url, וינתב לקובץ Markdown המתאים המאוחסן בתיקיית הנכסים.

   פוסט: מחרוזת; 
   href: מחרוזת; 
   בַּנַאִי(מסלול פרטי: ActivatedRoute) { } 
   ngOnInit(): בָּטֵל {
   תן מאמר שם = זֶה.route.snapshot.paramMap.get('article'); 
   זֶה.href = חַלוֹן.location.href; 
    this.post = './assets/posts/' + שם המאמר + '.md'; 
   }

9. פתח את ה app-routing.module.ts קוֹבֶץ. קובץ זה נמצא תחת project/src/app תיקייה.
10. ייבא את רכיב הפוסט החדש והוסף אותו למערך המסלולים.

    יְבוּא { PostsComponent } מ './home/posts/posts.component';
    const מסלולים: מסלולים = [
    // ...
     { נתיב: 'פוסטים/פוסט/:מאמר', רכיב: PostsComponent }, 
    ];

11. כעת תוכל להפעיל שוב את אפליקציית Angular.

    לשרת 

12. לְבַקֵר http://localhost: 4200 או כל כתובת שמארחת את האתר שלך.
13. לחץ על אחד מקישורי הדפים. כעת אתה אמור לראות את עיבוד תוכן Markdown בדף נפרד.
14. אתה יכול להוריד דוגמה עובדת מה- GitHub עמוד הפרויקט. אתה יכול לעקוב אחר ההוראות בקובץ README כדי להוריד ולהפעיל את הפרויקט.

שימוש ב-Markdown ביישום הזוויתי שלך

שימוש בקובצי Markdown באתר האינטרנט שלך מאפשר לך להתמקד יותר בתוכן שלך. זה יכול להיות מאוד שימושי עבור אתרי בלוגים. אם יש לך יישום Angular, אתה יכול להשתמש בקבצי Markdown עבור דפי האינטרנט שלך על ידי שימוש בחבילת ngx-markdown node.

אתה יכול ללמוד עוד על ערימות טכנולוגיות אחרות שיכולות להיות שימושיות להקמת אתר בלוגים. אחד מאלה הוא הוגו, מחולל אתרים סטטי שמעבד גם קובצי Markdown כדפי אינטרנט.