Markdown Dosyalarını Kullanarak Angular Web Sitenize Sayfalar Ekleyin

Markdown, web içeriği yazmak için popüler bir formattır. HTML ve sade İngilizce arasındaki uzlaşma, yazarların daha tanıdık bir sözdizimi kullanmalarına olanak tanır. Çok yazarlı blogların ve benzer sitelerin günlük işleyişini kolaylaştırmaya büyük ölçüde yardımcı olabilir.

Markdown, özellikle bir blog oluşturmak veya içeriğe sahip birden çok web sayfanız varsa yararlı olabilir. Markdown dosyalarını kullanmak, o içeriğin etrafındaki kod yerine içeriğe daha fazla odaklanmanıza olanak tanır.

ngx-markdown düğüm paketini kullanarak ve bir bileşen içinde çalışacak şekilde yapılandırarak Markdown'ı Angular ile entegre edebilirsiniz.

Açısal Uygulama Ayarlama

Zaten sahip değilseniz açısal uygulama, bu örnek Angular uygulamasını adresinden indirebilirsiniz. GitHub.

1. GitHub'daki proje sayfasında, kod buton. Seçme ZIP'i indir.
instagram viewer
2. Klasörü yerel bilgisayarınıza açın.
3. Projeyi Visual Code, Notepad++ veya Sublime Text gibi bir IDE kullanarak açın. Bir IDE kullanıyorsanız, gerekli komutları yürütmek için yerleşik bir terminal kullanabilirsiniz.
4. Bir terminal kullanarak projenin kök klasörüne gidin. Kök klasörün adı muo-örnek-açısal-uygulama-ana, ve içerir e2e ve kaynak klasörler. Örneğin, projeniz "İndirilenler" klasöründeyse, klasöre gitmek için aşağıdaki komutu çalıştırın.

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

5. Düğüm modüllerini projeye kurun. Düğüm komutlarını çalıştıramıyorsanız, yüklemeniz gerekebilir Node.js bilgisayarınıza

   npm Yüklemek

6. Artık Angular uygulamasını başlatabilirsiniz. Projenin kök klasöründe aşağıdaki komutu çalıştırın.

   hizmet etmek

7. çalıştırdıktan sonra hizmet etmek komutu, projenin derlemeyi bitirmesini bekleyin. Tamamlandığında, komut satırı, Angular uygulamanızın üzerinde çalışacağı yerel adresi çıkaracaktır. Genellikle, bu açık http://localhost: 4200/.
8. Bir web tarayıcısı açın ve sitenizi barındıran adresi girin, örneğin, http://localhost: 4200/. Sayfa yüklendikten sonra, örnek açısal uygulama için ana sayfayı görebilmeniz gerekir.

Angular Uygulamanızda Ngx-Markdown Nasıl Kurulur

Angular uygulamanızda Markdown dosyalarını kullanabilmek için ngx-markdown paketini yüklemeniz gerekir.

1. Projenizin kök klasöründe, terminalde aşağıdaki komutu çalıştırın. ngx-markdown paketi sürümünün Angular sürümünüzle uyumlu olduğundan emin olun.

   npm Yüklemek ngx-markdown@^10.1.1--kaydetmek
   

2. Dosyayı aç app.module.ts. Bu dosya altında proje/kaynak/uygulama dosya.
3. Yeni Markdown modülünü yapılandırın. Aşağıdaki paketleri içe aktarın:

   içe aktarmak { Güvenlik Bağlamı } itibaren '@açısal/çekirdek';
   içe aktarmak { MarkdownModule } itibaren 'ngx-markdown'; 
   içe aktarmak { HttpClientModule, HttpClient } itibaren '@açısal/ortak/http'; 

4. Markdown modülünü import dizisine ekleyin.

   ithalat: [
    ...
    HttpClientModule, 
   MarkdownModule.forKök({ yükleyici: HttpClient, sterilize edin: SecurityContext. YOK }) 
   ], 

Markdown Dosyalarınızı Nasıl Oluşturursunuz?

Her Markdown dosyası, web siteniz için bir içerik sayfasını temsil edecektir. Markdown dosyalarınızı içinde depolamak ve Markdown dosyalarınızı içerikle doldurmak için bir klasör oluşturmanız gerekecektir.

1. şuraya gidin: varlıklar altında bulunan klasör proje/kaynak dosya.
2. adlı yeni bir klasör oluşturun. gönderiler.
3. Birden çok Markdown dosyası oluşturun. Markdown dosyaları bir .md uzantısı kullanır.
4. .md dosyalarını bir miktar içerikle doldurun Markdown sözdiziminde biçimlendirilmiş. İşte kullanabileceğiniz bazı örnek içerikler:

   #### 03 Haziran 2022
   # Lezzetli Çikolata Tarifi
   ___
   Bu dır-dir harika bir Çikolatalı Cheesecake nasıl yapılır:
   * Bisküvileri ezin, karıştırın ile birlikte Tereyağı.
   * Bırak Ayarlamak 10 dakika buzdolabında.
   * Biraz krema karıştırın ile birlikte şurup.
   * Bisküvilerin üzerine koyup tekrar buzdolabına kaldırın.

Bir Bileşende Markdown Dosyası Nasıl Oluşturulur

Bu dosyaların her birini uygulamanın ana sayfasında listelemeniz gerekecek, böylece onlara gidebilirsiniz.

1. Açık home.component.html dosya. Bu dosya altında proje/kaynak/uygulama/ev dosya.
2. Yeni Markdown sayfalarınıza bağlantılar ekleyin. Linklerinizi Markdown dosyalarınızın ismine göre oluşturmalısınız. Örneğin, "Recipe.md" adlı bir Markdown dosyanız varsa, sayfanın URL'si "/posts/post/Recipe" olacaktır.

   <div sınıfı="bağlantılar">
   <bir yönlendiriciLink="/posts/post/ChocolateCheesecakeRecipe" stil="kenar boşluğu-alt: 24px">Çikolatalı Cheesecake Tarifi >></a>
   <br>
   <bir yönlendiriciLink="/posts/post/StrawberryCheesecakeRecipe" stil="kenar boşluğu-alt: 24px">Çilekli Cheesecake Tarifi
   >></a>
   <br>
   <bir yönlendiriciLink="/posts/post/CaramelCheesecakeRecipe" stil="kenar boşluğu-alt: 24px">Karamelli Cheesecake Tarifi >></a>
   </div>

3. Bağlantılara biraz stil ekleyin:

   .bağlantılar {
    dolgu: 72 piksel;
    metin hizalama: merkez;
   }

4. Ayrı bir sayfa olarak kullanabileceğiniz başka bir bileşen oluşturun. Bu sayfa, verilen herhangi bir Markdown dosyasını oluşturabilmelidir. Terminalde aşağıdakileri çalıştırın oluşturmak yeni bir bileşen oluşturma komutu:

   ng g c ana sayfa/yazılar

5. Artık yeni "gönderiler" klasörü içinde oluşturulan dört yeni dosya olmalıdır. Buna "posts.component.html", "posts.component.css", "posts.component.ts" ve "posts.component.spec.ts" dahildir.
6. Aç posts.component.html dosyasını seçin ve Markdown dosyalarını oluşturmak için HTML kodunu ekleyin.

   <div stili="dolgu: 100 piksel" işaretleme [src]="İleti"></div>

7. Aç mesajlar.bileşen.ts dosya. Yönlendirme içe aktarımını ekleyin.

   içe aktarmak { ActivatedRoute } itibaren '@açısal/yönlendirici';

8. Markdown dosyalarını işlemek için yapıcı ve ngOnInit() işlevlerini TypeScript koduyla değiştirin. Bu, url bağlantısındaki makalenin adını alacak ve varlıklar klasöründe depolanan ilgili Markdown dosyasına yönlendirecektir.

   gönderi: dize; 
   href: dize; 
   kurucu(özel rota: ActivatedRoute) { } 
   ngOnInit(): geçersiz {
   İzin Vermek makaleAdı = Bu.route.snapshot.paramMap.get('makale'); 
   Bu.href = pencere.location.href; 
    this.post = './varlıklar/gönderiler/' + makaleAdı + '.md'; 
   }

9. Aç app-routing.module.ts dosya. Bu dosya altında proje/kaynak/uygulama dosya.
10. Yeni gönderi bileşenini içe aktarın ve onu route dizisine ekleyin.

    içe aktarmak { Gönderi Bileşeni } itibaren './home/posts/posts.component';
    const rotalar: Rotalar = [
    // ...
     { yol: 'gönderiler/gönderi/:makale', bileşen: PostsComponent }, 
    ];

11. Artık Angular uygulamasını yeniden başlatabilirsiniz.

    hizmet etmek 

12. Ziyaret etmek http://localhost: 4200 veya sitenizi hangi adres barındırıyorsa.
13. Sayfa bağlantılarından birine tıklayın. Şimdi Markdown içeriğini ayrı bir sayfada görmelisiniz.
14. Çalışan bir örneği şuradan indirebilirsiniz: GitHub proje sayfası. Projeyi indirip çalıştırmak için README dosyasındaki talimatları takip edebilirsiniz.

Angular Uygulamanızda Markdown Kullanma

Web sitenizde Markdown dosyalarını kullanmak, içeriğinize daha fazla odaklanmanızı sağlar. Bu, blog siteleri için çok yararlı olabilir. Bir Angular uygulamanız varsa, ngx-markdown düğüm paketini kullanarak web sayfalarınız için Markdown dosyalarını kullanabilirsiniz.

Bir blog sitesi kurmak için faydalı olabilecek diğer teknoloji yığınları hakkında daha fazla bilgi edinebilirsiniz. Bunlardan biri, Markdown dosyalarını web sayfaları olarak da işleyen statik bir site oluşturucu olan Hugo'dur.