أضف صفحات إلى موقع الويب الزاوي الخاص بك باستخدام ملفات Markdown

Markdown هو تنسيق شائع لكتابة محتوى الويب. يسمح حل وسطه بين HTML واللغة الإنجليزية البسيطة للكتاب باستخدام صيغة أكثر شيوعًا. يمكن أن يساعد بشكل كبير في تسهيل التشغيل اليومي للمدونات متعددة المؤلفين والمواقع المماثلة.

يمكن أن يكون Markdown مفيدًا بشكل خاص إذا كنت ترغب في إنشاء مدونة أو لديك عدة صفحات ويب بها محتوى. يتيح لك استخدام ملفات Markdown التركيز بشكل أكبر على المحتوى ، بدلاً من التعليمات البرمجية حول هذا المحتوى.

يمكنك دمج Markdown مع Angular باستخدام حزمة العقدة ngx-markdown ، وعن طريق تكوينها للعمل داخل أحد المكونات.

إعداد تطبيق الزاوي

إذا لم يكن لديك بالفعل تطبيق الزاوي، يمكنك تنزيل نموذج تطبيق Angular هذا من جيثب.

1. في صفحة المشروع على GitHub ، انقر فوق ملف شفرة زر. يختار تنزيل ZIP.
2. قم بفك ضغط المجلد على جهاز الكمبيوتر المحلي الخاص بك.
3. افتح المشروع باستخدام IDE ، مثل Visual Code أو Notepad ++ أو Sublime Text. إذا كنت تستخدم IDE ، فيمكنك استخدام محطة طرفية مدمجة لتنفيذ أي أوامر ضرورية.
instagram viewer
4. انتقل إلى المجلد الجذر للمشروع باستخدام Terminal. اسم المجلد الجذر هو muo-sample-angular-app-main، ويحتوي على ملف e2e و src المجلدات. على سبيل المثال ، إذا كان مشروعك موجودًا في مجلد "التنزيلات" ، فقم بتشغيل الأمر التالي للانتقال إلى المجلد.

   قرص مضغوط C: \ المستخدمون \ شارل \ التنزيلات \ muo-sample-angular-app-main

5. تثبيت وحدات العقدة في المشروع. إذا لم تتمكن من تشغيل أوامر العقدة ، فقد تحتاج إلى التثبيت Node.js على جهاز الكمبيوتر الخاص بك.

   npm تثبيت

6. يمكنك الآن تشغيل تطبيق Angular. قم بتشغيل الأمر التالي في المجلد الجذر للمشروع.

   يخدم ng

7. بعد تشغيل ملف يخدم ng الأمر ، انتظر حتى ينتهي المشروع من التجميع. بمجرد الانتهاء ، سيخرج سطر الأوامر العنوان المحلي الذي سيعمل عليه تطبيق Angular الخاص بك. عادة ، هذا قيد التشغيل http://localhost: 4200/.
8. افتح مستعرض ويب وأدخل العنوان الذي يستضيف موقعك ، على سبيل المثال ، http://localhost: 4200/. بمجرد تحميل الصفحة ، يجب أن تكون قادرًا على رؤية الصفحة الرئيسية لنموذج التطبيق الزاوي.

كيفية تثبيت Ngx-Markdown في تطبيق Angular الخاص بك

لتتمكن من استخدام ملفات Markdown في تطبيق Angular الخاص بك ، ستحتاج إلى تثبيت حزمة ngx-markdown.

1. في المجلد الجذر لمشروعك ، قم بتشغيل الأمر التالي في Terminal. تأكد من أن إصدار الحزمة ngx-markdown متوافق مع إصدار Angular الخاص بك.

   npm تثبيت ngx-markdown @ ^10.1.1--حفظ
   

2. افتح الملف app.module.ts. هذا الملف موجود تحت مشروع / src / app مجلد.
3. تكوين وحدة Markdown الجديدة. قم باستيراد الحزم التالية:

   يستورد {SecurityContext} من "@ الزاوي / الأساسية" ؛
   يستورد {MarkdownModule} من "ngx-markdown" ؛ 
   يستورد {HttpClientModule، HttpClient} من "@ الزاوي / المشترك / http" ؛ 

4. أضف وحدة Markdown إلى مجموعة الواردات.

   الواردات: [
    ...
    HttpClientModule ، 
   وحدة Markdown.forRoot({ محمل: HttpClient ، تعقيم: SecurityContext. لا أحد }) 
   ], 

كيفية إنشاء ملفات Markdown الخاصة بك

سيمثل كل ملف Markdown صفحة محتوى لموقعك على الويب. ستحتاج إلى إنشاء مجلد لتخزين ملفات Markdown الخاصة بك وملء ملفات Markdown الخاصة بك بالمحتوى.

1. انتقل إلى أصول المجلد ، الذي يقع تحت مشروع / src مجلد.
2. قم بإنشاء مجلد جديد يسمى المشاركات.
3. إنشاء ملفات Markdown متعددة. تستخدم ملفات Markdown ملحق .md.
4. قم بتعبئة ملفات .md ببعض المحتويات بتنسيق Markdown. إليك بعض نماذج المحتوى التي يمكنك استخدامها:

   #### 03 يونيو 2022
   # وصفة شوكولاتة لذيذة
   ___
   هذه هو كيف تصنع تشيز كيك الشوكولاتة الرائع:
   * يسحق البسكويت ويخلط مع زبدة.
   * اتركها تعيين في الثلاجة لمدة 10 دقائق.
   * اخلطي القليل من الكريمة مع شراب مركز.
   * ضعيها فوق البسكويت ثم ضعيها في الثلاجة مرة أخرى.

كيفية تقديم ملف Markdown في أحد المكونات

ستحتاج إلى سرد كل ملف من هذه الملفات في الصفحة الرئيسية للتطبيق ، حتى تتمكن من الانتقال إليها.

1. فتح home.component.html ملف. هذا الملف موجود تحت مشروع / src / app / home مجلد.
2. أضف روابط إلى صفحات Markdown الجديدة الخاصة بك. يجب عليك إنشاء الروابط الخاصة بك وفقًا لاسم ملفات Markdown الخاصة بك. على سبيل المثال ، إذا كان لديك ملف Markdown يسمى "Recipe.md" ، فسيكون عنوان URL للصفحة "/ posts / post / Recipe".

   <فئة div ="الروابط">
   <جهاز التوجيه Link ="/posts/post/ChocolateCheesecakeRecipe" النمط ="الهامش السفلي: 24 بكسل">وصفة تشيز كيك الشوكولاتة >></أ>
   <ر>
   <جهاز التوجيه Link ="/posts/post/StrawberryCheesecakeRecipe" النمط ="الهامش السفلي: 24 بكسل">وصفة تشيز كيك الفراولة
   >></أ>
   <ر>
   <جهاز التوجيه Link ="/posts/post/CaramelCheesecakeRecipe" النمط ="الهامش السفلي: 24 بكسل">وصفة تشيز كيك الكراميل >></أ>
   </div>

3. أضف بعض الأنماط إلى الروابط:

   الروابط {
    الحشو: 72 بكسل ؛
    محاذاة النص: مركز ؛
   }

4. قم بإنشاء مكون آخر يمكنك استخدامه كصفحة منفصلة. يجب أن تكون هذه الصفحة قادرة على عرض أي ملف Markdown معين. في المحطة ، قم بتشغيل ما يلي نانوغرام توليد أمر لإنشاء مكون جديد:

   ng g c المنزل / المشاركات

5. يجب أن يكون هناك الآن أربعة ملفات جديدة تم إنشاؤها داخل مجلد "posts" الجديد. يتضمن هذا "posts.component.html" و "posts.component.css" و "posts.component.ts" و "posts.component.spec.ts".
6. افتح ال posts.component.html ملف ، وأضف كود HTML لعرض ملفات Markdown.

   <أسلوب div ="المساحة المتروكة: 100 بكسل" تخفيض السعر [src] ="بريد"></div>

7. افتح ال posts.component.ts ملف. قم بإضافة استيراد التوجيه.

   يستورد {ActivatedRoute} من "@ الزاوي / جهاز التوجيه" ؛

8. استبدل الدالتين المُنشئ و ngOnInit () برمز TypeScript لعرض ملفات Markdown. سيأخذ هذا اسم المقالة في رابط url ، ويوجه إلى ملف Markdown المقابل المخزن في مجلد الأصول.

   آخر: سلسلة ؛ 
   href: سلسلة ؛ 
   البناء(طريق خاص: ActivatedRoute) {} 
   ngOnInit (): فارغ {
   يترك اسم المقالة = هذه.route.snapshot.paramMap.get ("مقالة") ؛ 
   هذه.href = نافذة او شباك.location.href؛ 
    this.post = './assets/posts/' + اسم المقال + '.md'; 
   }

9. افتح ال app-routing.module.ts ملف. هذا الملف موجود تحت مشروع / src / app مجلد.
10. قم باستيراد مكون التدوين الجديد وإضافته إلى مصفوفة المسارات.

    يستورد {PostsComponent} من "./home/posts/posts.component" ؛
    مقدار ثابت المسارات: الطرق = [
    // ...
     { طريق: 'المشاركات / آخر /: مقالة'، المكون: PostsComponent} ، 
    ];

11. يمكنك الآن تشغيل تطبيق Angular مرة أخرى.

    يخدم ng 

12. يزور http://localhost: 4200 أو أيهما يستضيف موقعك.
13. انقر فوق أحد روابط الصفحة. يجب أن تشاهد الآن عرض Markdown على صفحة منفصلة.
14. يمكنك تنزيل مثال عملي من ملف جيثب صفحة المشروع. يمكنك اتباع التعليمات الموجودة في ملف README لتنزيل المشروع وتشغيله.

استخدام Markdown في تطبيق Angular الخاص بك

يتيح لك استخدام ملفات Markdown على موقع الويب الخاص بك التركيز أكثر على المحتوى الخاص بك. يمكن أن يكون هذا مفيدًا جدًا لمواقع المدونات. إذا كان لديك تطبيق Angular ، فيمكنك استخدام ملفات Markdown لصفحات الويب الخاصة بك باستخدام حزمة ngx-markdown node.

يمكنك معرفة المزيد حول المداخن التقنية الأخرى التي يمكن أن تكون مفيدة لإعداد موقع التدوين على الويب. أحد هؤلاء هو Hugo ، وهو منشئ مواقع ثابت يقوم أيضًا بعرض ملفات Markdown كصفحات ويب.