خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

با استفاده از فایل های Markdown صفحات را به وب سایت Angular خود اضافه کنید

ارشیا یوسفی ادیب ۷ اردیبهشت, ۱۴۰۳ 4 min read

شروع به نوشتن محتوای سایت خود در Markdown کنید و از نحو تمیزتر و قابل نگهداری تر آن استفاده کنید.

Markdown یک فرمت محبوب برای نوشتن محتوای وب است. سازش بین HTML و انگلیسی ساده به نویسندگان اجازه می دهد تا از نحو آشناتری استفاده کنند. این می تواند تا حد زیادی به سهولت اجرای روزانه وبلاگ های چند نویسنده و سایت های مشابه کمک کند.

اگر می‌خواهید یک وبلاگ ایجاد کنید یا چندین صفحه وب با محتوا داشته باشید، Markdown می‌تواند مفید باشد. استفاده از فایل‌های Markdown به شما این امکان را می‌دهد که به جای کدهای اطراف آن محتوا، بیشتر روی محتوا تمرکز کنید.

می توانید Markdown را با Angular با استفاده از بسته گره ngx-markdown ادغام کنید و با پیکربندی آن برای کار در یک جزء.

راه اندازی یک برنامه زاویه ای

اگر قبلاً برنامه Angular ندارید، می توانید این نمونه برنامه Angular را از GitHub دانلود کنید.

  1. در صفحه پروژه در GitHub، روی دکمه Code کلیک کنید. دانلود ZIP را انتخاب کنید.
  2. پوشه را در رایانه محلی خود از حالت فشرده خارج کنید.
  3. پروژه را با استفاده از یک IDE باز کنید، مانند Visual Code، Notepad++ یا Sublime Text. اگر از یک IDE استفاده می کنید، می توانید از یک ترمینال داخلی برای اجرای هر دستور لازم استفاده کنید.
  4. با استفاده از ترمینال به پوشه ریشه پروژه بروید. نام پوشه ریشه muo-sample-angular-app-main است و حاوی پوشه‌های e2e و src است. به عنوان مثال، اگر پروژه شما در پوشه “Downloads” است، دستور زیر را اجرا کنید تا به folder.cd C:\Users\Sharl\Downloads\muo-sample-angular-app-main بروید.
  5. ماژول های گره را در پروژه نصب کنید. اگر نمی توانید دستورات node را اجرا کنید، ممکن است لازم باشد Node.js را روی computer.npm install خود نصب کنید
  6. اکنون می توانید برنامه Angular را راه اندازی کنید. دستور زیر را در پوشه root project.ng serve اجرا کنید
  7. پس از اجرای دستور ng serve منتظر بمانید تا کامپایل پروژه تمام شود. پس از اتمام، خط فرمان آدرس محلی را که برنامه Angular شما روی آن اجرا می شود، خروجی می دهد. معمولاً این در http://localhost:4200/ است.
  8. یک مرورگر وب باز کنید و آدرسی را که میزبان سایت شما است وارد کنید، به عنوان مثال http://localhost:4200/. پس از بارگیری صفحه، باید بتوانید صفحه اصلی نمونه برنامه زاویه ای را ببینید.
مطلب مرتبط:   نحوه ایجاد انیمیشن و انتقال در Vue.js

GitHub: دکمه کد با گزینه Download ZIP گسترش یافته است

cd C:\Users\Sharl\Downloads\muo-sample-angular-app-main
npm install
ng serve

Angular: خروجی سرویس ng نشان می دهد که آدرس میزبان وب سایت استنمونه پروژه Angular که در یک مرورگر وب میزبانی می شود

چگونه Ngx-Markdown را در برنامه Angular خود نصب کنید

برای اینکه بتوانید از فایل های Markdown در برنامه Angular خود استفاده کنید، باید بسته ngx-markdown را نصب کنید.

  1. در پوشه ریشه پروژه خود، دستور زیر را در ترمینال اجرا کنید. مطمئن شوید که نسخه بسته ngx-markdown با نسخه Angular شما سازگار است.npm نصب ngx-markdown@^10.1.1 –save
  2. فایل app.module.ts را باز کنید. این فایل در پوشه project/src/app قرار دارد.
  3. ماژول Markdown جدید را پیکربندی کنید. بسته‌های زیر را وارد کنید: import { SecurityContext } from ‘@angular/core’; import { MarkdownModule } from ‘ngx-markdown’; وارد کردن { HttpClientModule, HttpClient } از ‘@angular/common/http’;
  4. ماژول Markdown را به import array.imports اضافه کنید: [    …    HttpClientModule,     MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE }) ],
npm install ngx-markdown@^10.1.1 --save
import { SecurityContext } from '@angular/core';
import { MarkdownModule } from 'ngx-markdown'; 
import { HttpClientModule, HttpClient } from '@angular/common/http'; 
imports: [
    ...
    HttpClientModule, 
    MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE }) 
],

چگونه فایل های Markdown خود را ایجاد کنیم

هر فایل Markdown یک صفحه از محتوای وب سایت شما را نشان می دهد. شما باید یک پوشه ایجاد کنید تا فایل های Markdown خود را در آن ذخیره کرده و فایل های Markdown خود را با محتوا پر کنید.

  1. به پوشه assets که در زیر پوشه project/src قرار دارد بروید.
  2. یک پوشه جدید به نام posts ایجاد کنید.
  3. چندین فایل Markdown ایجاد کنید. فایل‌های Markdown از پسوند md. استفاده می‌کنند.
  4. فایل‌های md. را با محتوایی که در نحو Markdown قالب‌بندی شده‌اند، پر کنید. در اینجا چند نمونه از محتوایی است که می توانید استفاده کنید:#### 03 ژوئن 2022# دستور العمل شکلاتی خوشمزه___به این ترتیب یک کیک پنیر شکلاتی عالی درست می کنید:* بیسکویت ها را خرد کنید، با کره مخلوط کنید.* بگذارید 10 دقیقه در یخچال بماند.* مخلوط کنید. مقداری خامه با شربت.* آن را روی بیسکویت ها قرار دهید و دوباره در یخچال قرار دهید.
مطلب مرتبط:   8 دوره برتر Angular برای کاربران مبتدی و پیشرفته

نمونه ای از فایل های Markdown در مدیر فایل

#### 03 June 2022
# Delicious Chocolate Recipe
___
This is how you make an awesome Chocolate Cheesecake:
* Crush the biscuits, mix with butter.
* Let it set in the fridge for 10 minutes.
* Mix some cream with syrup.
* Put it on top of the biscuits then put it back in the fridge.

نحوه رندر کردن فایل Markdown در یک کامپوننت

شما باید هر یک از این فایل ها را در صفحه اصلی برنامه لیست کنید تا بتوانید به آنها بروید.

  1. فایل home.component.html را باز کنید. این فایل در پوشه project/src/app/home قرار دارد.
  2. پیوندهایی را به صفحات Markdown جدید خود اضافه کنید. شما باید لینک های خود را با توجه به نام فایل های Markdown خود بسازید. برای مثال، اگر یک فایل Markdown به نام “Recipe.md” داشتید، URL صفحه “/posts/post/Recipe” خواهد بود.
        دستور پخت کیک پنیر شکلاتی >>        دستور پخت کیک پنیر توت فرنگی ><       >        دستور العمل چیزکیک کاراملی >>
  3. یک سبک به پیوندها اضافه کنید:.links {  padding: 72px; text-align: center;}
  4. یک مؤلفه دیگر ایجاد کنید که می توانید از آن به عنوان یک صفحه جداگانه استفاده کنید. این صفحه باید بتواند هر فایل Markdown را ارائه دهد. در ترمینال، دستور ng generate زیر را برای ایجاد یک جزء جدید اجرا کنید: ng g c home/posts
  5. اکنون باید چهار فایل جدید در پوشه جدید “پست ها” تولید شود. این شامل “posts.component.html”، “posts.component.css”، “posts.component.ts” و “posts.component.spec.ts” است.
  6. فایل posts.component.html را باز کنید و کد HTML را برای رندر کردن فایل‌های Markdown اضافه کنید.
  • فایل posts.component.ts را باز کنید. مسیریابی import.import { ActivatedRoute } را از «@angular/router» اضافه کنید.
  • برای رندر کردن فایل‌های Markdown، توابع سازنده و ngOnInit() را با کد TypeScript جایگزین کنید. با این کار، نام مقاله در پیوند url گرفته می شود و به فایل Markdown مربوطه ذخیره شده در assets folder.post: string هدایت می شود. href: رشته سازنده (مسیر خصوصی: ActivatedRoute) { } ngOnInit(): void {    letar articleName = this.route.snapshot.paramMap.get(‘article’); this.href = window.location.href; this.post = ‘./assets/posts/’ + articleName + ‘.md’; }
  • فایل app-routing.module.ts را باز کنید. این فایل در پوشه project/src/app قرار دارد.
  • مؤلفه پست جدید را وارد کنید و به آرایه مسیرها اضافه کنید.import { PostsComponent } from ‘./home/posts/posts.component’;const routes: Routes = [  // …  { path: ‘posts/post/: article’, component: PostsComponent }, ];
  • اکنون می توانید برنامه Angular را دوباره اجرا کنید. ng serve
  • از http://localhost:4200 یا هر آدرسی که سایت شما را میزبانی می کند، بازدید کنید.
  • روی یکی از لینک های صفحه کلیک کنید. اکنون باید رندر محتوای Markdown را در یک صفحه جداگانه ببینید.
  • می توانید یک نمونه کار را از صفحه پروژه GitHub دانلود کنید. برای دانلود و اجرای پروژه می توانید دستورالعمل های موجود در فایل README را دنبال کنید.
    • <div class="links">
        <a routerLink="/posts/post/ChocolateCheesecakeRecipe" style="margin-bottom:24px">Chocolate Cheesecake Recipe >></a>
        

        <a routerLink="/posts/post/StrawberryCheesecakeRecipe" style="margin-bottom:24px">Strawberry Cheesecake Recipe
            >></a>
        

        <a routerLink="/posts/post/CaramelCheesecakeRecipe" style="margin-bottom:24px">Caramel Cheesecake Recipe >></a>
    </div>
    .links {
      padding: 72px;
      text-align: center;
    }
    ng g c home/posts
    <div style="padding:100px" markdown [src]="post"></div>
    import { ActivatedRoute } from '@angular/router';
    post: string; 
    href: string; 
    constructor(private route: ActivatedRoute) { } 
    ngOnInit(): void {
        let articleName = this.route.snapshot.paramMap.get('article'); 
        this.href = window.location.href; 
        this.post = './assets/posts/' + articleName + '.md'; 
    }
    import { PostsComponent } from './home/posts/posts.component';
    const routes: Routes = [
      // ...
      { path: 'posts/post/:article', component: PostsComponent }, 
    ];
    ng serve

    رندر علامت گذاری در صفحه ای با محتوای نمونه

    استفاده از Markdown در برنامه Angular شما

    استفاده از فایل‌های Markdown در وب‌سایت به شما این امکان را می‌دهد که تمرکز بیشتری روی محتوای خود داشته باشید. این می تواند برای وب سایت های وبلاگ نویسی بسیار مفید باشد. اگر یک برنامه Angular دارید، می توانید از فایل های Markdown برای صفحات وب خود با استفاده از بسته گره ngx-markdown استفاده کنید.

    می‌توانید در مورد سایر پشته‌های فناوری که می‌توانند برای راه‌اندازی یک وب‌سایت وبلاگ‌نویسی مفید باشند، اطلاعات بیشتری کسب کنید. یکی از آن ها Hugo است، یک مولد سایت استاتیک که فایل های Markdown را نیز به عنوان صفحات وب ارائه می کند.

    Tags: