मार्कडाउन फाइलों का उपयोग करके अपनी कोणीय वेबसाइट में पेज जोड़ें

वेब सामग्री लिखने के लिए मार्कडाउन एक लोकप्रिय प्रारूप है। एचटीएमएल और सादे अंग्रेजी के बीच इसका समझौता लेखकों को अधिक परिचित वाक्यविन्यास का उपयोग करने की अनुमति देता है। यह बहु-लेखक ब्लॉग और इसी तरह की साइटों के दिन-प्रतिदिन के संचालन को आसान बनाने में बहुत मदद कर सकता है।

यदि आप एक ब्लॉग बनाना चाहते हैं या सामग्री के साथ कई वेब पेज बनाना चाहते हैं तो मार्कडाउन विशेष रूप से उपयोगी हो सकता है। मार्कडाउन फाइलों का उपयोग करने से आप उस सामग्री के आसपास के कोड के बजाय सामग्री पर अधिक ध्यान केंद्रित कर सकते हैं।

आप एनजीएक्स-मार्कडाउन नोड पैकेज का उपयोग करके मार्कडाउन को एंगुलर के साथ एकीकृत कर सकते हैं, और इसे एक घटक के भीतर काम करने के लिए कॉन्फ़िगर कर सकते हैं।

कोणीय अनुप्रयोग सेट करना

यदि आपके पास पहले से नहीं है कोणीय अनुप्रयोग, आप इस नमूना कोणीय एप्लिकेशन को डाउनलोड कर सकते हैं GitHub.

1. GitHub पर प्रोजेक्ट पेज पर, पर क्लिक करें कोड बटन। चुनना ज़िप डाउनलोड करें.
2. अपने स्थानीय कंप्यूटर पर फ़ोल्डर को अनज़िप करें।
3. किसी IDE का उपयोग करके प्रोजेक्ट खोलें, जैसे विज़ुअल कोड, नोटपैड++, या सबलाइम टेक्स्ट। यदि आप एक आईडीई का उपयोग कर रहे हैं, तो आप किसी भी आवश्यक कमांड को निष्पादित करने के लिए एक अंतर्निर्मित टर्मिनल का उपयोग कर सकते हैं।
4. टर्मिनल का उपयोग करके प्रोजेक्ट के रूट फ़ोल्डर में नेविगेट करें। रूट फोल्डर का नाम है मुओ-नमूना-कोणीय-ऐप-मुख्य, और इसमें शामिल है ई2ई तथा एसआरसी फ़ोल्डर्स उदाहरण के लिए, यदि आपका प्रोजेक्ट "डाउनलोड" फ़ोल्डर में है, तो फ़ोल्डर में नेविगेट करने के लिए निम्न कमांड चलाएँ।

   सीडी C:\Users\Sharl\Downloads\muo-sample-angular-app-main

5. परियोजना में नोड मॉड्यूल स्थापित करें। यदि आप नोड कमांड नहीं चला सकते हैं, तो आपको इंस्टॉल करने की आवश्यकता हो सकती है Node.js आपके कंप्यूटर पर।

   NPM इंस्टॉल

6. अब आप कोणीय एप्लिकेशन लॉन्च कर सकते हैं। प्रोजेक्ट के रूट फोल्डर में निम्न कमांड चलाएँ।

   एनजी सर्व

7. चलाने के बाद एनजी सर्व कमांड, प्रोजेक्ट के संकलन के पूरा होने तक प्रतीक्षा करें। एक बार यह समाप्त हो जाने के बाद, कमांड लाइन उस स्थानीय पते को आउटपुट करेगी जिस पर आपका एंगुलर ऐप चलेगा। आमतौर पर, यह चालू रहता है http://localhost: 4200/.
8. एक वेब ब्राउज़र खोलें और वह पता दर्ज करें जो आपकी साइट को होस्ट कर रहा है, उदाहरण के लिए, http://localhost: 4200/. एक बार पृष्ठ लोड हो जाने के बाद, आपको नमूना कोणीय अनुप्रयोग के लिए मुख पृष्ठ देखने में सक्षम होना चाहिए।

अपने कोणीय अनुप्रयोग में Ngx-Markdown कैसे स्थापित करें

अपने कोणीय एप्लिकेशन में मार्कडाउन फ़ाइलों का उपयोग करने में सक्षम होने के लिए, आपको एनजीएक्स-मार्कडाउन पैकेज स्थापित करना होगा।

1. अपने प्रोजेक्ट के रूट फ़ोल्डर में, टर्मिनल में निम्न कमांड चलाएँ। सुनिश्चित करें कि ngx-markdown पैकेज संस्करण आपके कोणीय संस्करण के साथ संगत है।

   NPM इंस्टॉल एनजीएक्स-मार्कडाउन@^10.1.1--सहेजें
   

2. फ़ाइल खोलें ऐप.मॉड्यूल.ts. यह फ़ाइल के अंतर्गत है परियोजना/स्रोत/एप्लिकेशन फ़ोल्डर।
3. नया मार्कडाउन मॉड्यूल कॉन्फ़िगर करें। निम्नलिखित पैकेज आयात करें:

   आयात { सुरक्षा प्रसंग } से '@ कोणीय/कोर';
   आयात { मार्कडाउन मॉड्यूल } से 'एनजीएक्स-मार्कडाउन'; 
   आयात { एचटीपी क्लाइंट मॉड्यूल, एचटीपी क्लाइंट } से '@ कोणीय/सामान्य/http'; 

4. मार्कडाउन मॉड्यूल को आयात सरणी में जोड़ें।

   आयात: [
    ...
    एचटीपी क्लाइंट मॉड्यूल, 
   मार्कडाउनमॉड्यूलजड़ के लिए({ लोडर: HttpClient, sanitize: SecurityContext. कोई भी नहीं }) 
   ], 

अपनी मार्कडाउन फाइलें कैसे बनाएं

प्रत्येक मार्कडाउन फ़ाइल आपकी वेबसाइट के लिए सामग्री के एक पृष्ठ का प्रतिनिधित्व करेगी। आपको अपनी मार्कडाउन फाइलों को स्टोर करने और सामग्री के साथ अपनी मार्कडाउन फाइलों को पॉप्युलेट करने के लिए एक फ़ोल्डर बनाने की आवश्यकता होगी।

1. पर नेविगेट करें संपत्ति फ़ोल्डर, जो के अंतर्गत है परियोजना/स्रोत फ़ोल्डर।
2. नाम का एक नया फोल्डर बनाएं पदों.
3. कई मार्कडाउन फाइलें बनाएं। मार्कडाउन फाइलें .md एक्सटेंशन का उपयोग करती हैं।
4. कुछ सामग्री के साथ .md फ़ाइलों को पॉप्युलेट करें मार्कडाउन सिंटैक्स में स्वरूपित. यहां कुछ नमूना सामग्री है जिसका आप उपयोग कर सकते हैं:

   #### 03 जून 2022
   #स्वादिष्ट चॉकलेट रेसिपी
   ___
   इस है आप एक शानदार चॉकलेट चीज़केक कैसे बनाते हैं:
   *बिस्कुट को क्रश करके मिक्स करें साथ मक्खन।
   * ऐसा होने दें समूह 10 मिनट के लिए फ्रिज में।
   * कुछ क्रीम मिलाएं साथ सिरप।
   * इसे बिस्कुट के ऊपर रख दें और फिर वापस फ्रिज में रख दें।

एक घटक में मार्कडाउन फ़ाइल को कैसे प्रस्तुत करें

आपको इनमें से प्रत्येक फाइल को एप्लिकेशन के होम पेज पर सूचीबद्ध करना होगा, ताकि आप उन तक नेविगेट कर सकें।

1. खुला हुआ Home.component.html फ़ाइल। यह फ़ाइल के अंतर्गत है प्रोजेक्ट/src/ऐप/होम फ़ोल्डर।
2. अपने नए मार्कडाउन पृष्ठों के लिंक जोड़ें। आपको अपने लिंक को अपनी मार्कडाउन फाइलों के नाम के अनुसार बनाना चाहिए। उदाहरण के लिए, यदि आपके पास "Recipe.md" नामक मार्कडाउन फ़ाइल थी, तो पृष्ठ का URL "/posts/post/Recipe" होगा।

   <डिव क्लास ="लिंक">
   <एक राउटरलिंक ="/posts/post/ChocolateCheesecakeRecipe" शैली ="मार्जिन-बॉटम: 24px">चॉकलेट चीज़केक पकाने की विधि >></एक>
   <बीआर>
   <एक राउटरलिंक ="/posts/post/StrawberryCheesecakeRecipe" शैली ="मार्जिन-बॉटम: 24px">स्ट्रॉबेरी चीज़केक रेसिपी
   >></एक>
   <बीआर>
   <एक राउटरलिंक ="/posts/post/CaramelCheesecakeRecipe" शैली ="मार्जिन-बॉटम: 24px">कारमेल चीज़केक पकाने की विधि >></एक>
   </div>

3. लिंक में कुछ स्टाइल जोड़ें:

   लिंक {
    पैडिंग: 72px;
    पाठ-संरेखण: केंद्र;
   }

4. एक अन्य घटक बनाएं जिसे आप एक अलग पृष्ठ के रूप में उपयोग कर सकते हैं। यह पृष्ठ किसी भी मार्कडाउन फ़ाइल को प्रस्तुत करने में सक्षम होना चाहिए। टर्मिनल में, निम्नलिखित चलाएँ एनजी उत्पन्न एक नया घटक बनाने के लिए आदेश:

   एनजी जी सी होम / पोस्ट

5. नए "पोस्ट" फ़ोल्डर के अंदर अब चार नई फाइलें उत्पन्न होनी चाहिए। इसमें "posts.component.html", "posts.component.css", "posts.component.ts" और "posts.component.spec.ts" शामिल हैं।
6. खोलें post.component.html फ़ाइल, और मार्कडाउन फ़ाइलों को प्रस्तुत करने के लिए HTML कोड जोड़ें।

   <डिव स्टाइल ="पैडिंग: 100px" मार्कडाउन [src]="पद"></div>

7. खोलें post.component.ts फ़ाइल। रूटिंग आयात जोड़ें।

   आयात { सक्रिय मार्ग } से '@ कोणीय/राउटर';

8. मार्कडाउन फाइल्स को रेंडर करने के लिए कंस्ट्रक्टर और ngOnInit () फंक्शन्स को टाइपस्क्रिप्ट कोड से बदलें। यह यूआरएल लिंक में लेख का नाम लेगा, और संपत्ति फ़ोल्डर में संग्रहीत संबंधित मार्कडाउन फ़ाइल को रूट करेगा।

   पोस्ट: स्ट्रिंग; 
   href: स्ट्रिंग; 
   निर्माता(निजी मार्ग: सक्रिय मार्ग) { } 
   एनजीऑनइनिट (): शून्य {
   होने देना लेख का नाम = यह.route.snapshot.paramMap.get ('लेख'); 
   यह.href = खिड़कीस्थान। href; 
    यह पोस्ट = './संपत्ति/पद/' + लेखनाम + 'एमडी'; 
   }

9. खोलें ऐप-रूटिंग.मॉड्यूल.ts फ़ाइल। यह फ़ाइल के अंतर्गत है परियोजना/स्रोत/एप्लिकेशन फ़ोल्डर।
10. नया पोस्ट घटक आयात करें और इसे मार्ग सरणी में जोड़ें।

    आयात { पोस्टकंपोनेंट } से './home/posts/posts.component';
    स्थिरांक मार्ग: मार्ग = [
    // ...
     { रास्ता: 'पोस्ट/पोस्ट/:लेख', घटक: पोस्टकंपोनेंट }, 
    ];

11. अब आप एंगुलर एप्लिकेशन को फिर से लॉन्च कर सकते हैं।

    एनजी सर्व 

12. मुलाकात http://localhost: 4200 या जो भी पता आपकी साइट को होस्ट कर रहा है।
13. पेज के लिंक में से किसी एक पर क्लिक करें। अब आपको मार्कडाउन सामग्री को एक अलग पृष्ठ पर प्रस्तुत करना चाहिए।
14. आप से एक कार्यशील उदाहरण डाउनलोड कर सकते हैं GitHub परियोजना पृष्ठ। प्रोजेक्ट को डाउनलोड करने और चलाने के लिए आप README फ़ाइल में दिए गए निर्देशों का पालन कर सकते हैं।

अपने कोणीय अनुप्रयोग में मार्कडाउन का उपयोग करना

अपनी वेबसाइट पर मार्कडाउन फाइलों का उपयोग करने से आप अपनी सामग्री पर अधिक ध्यान केंद्रित कर सकते हैं। यह ब्लॉगिंग वेबसाइटों के लिए बहुत उपयोगी हो सकता है। यदि आपके पास एक कोणीय अनुप्रयोग है, तो आप ngx-markdown नोड पैकेज का उपयोग करके अपने वेब पृष्ठों के लिए मार्कडाउन फ़ाइलों का उपयोग कर सकते हैं।

आप अन्य तकनीकी स्टैक के बारे में अधिक जान सकते हैं जो ब्लॉगिंग वेबसाइट स्थापित करने के लिए उपयोगी हो सकते हैं। उनमें से एक ह्यूगो है, जो एक स्थिर साइट जनरेटर है जो मार्कडाउन फ़ाइलों को वेबपृष्ठों के रूप में भी प्रस्तुत करता है।