Thêm các trang vào trang web Angular của bạn bằng cách sử dụng tệp Markdown
Bắt đầu tạo nội dung trang web của bạn trong Markdown và tận dụng cú pháp gọn gàng hơn, dễ bảo trì hơn của nó.
Markdown là một định dạng phổ biến để viết nội dung web. Sự dung hòa giữa HTML và tiếng Anh thuần túy cho phép người viết sử dụng một cú pháp quen thuộc hơn. Nó có thể giúp giảm bớt hoạt động hàng ngày của các blog nhiều tác giả và các trang web tương tự.
Markdown có thể đặc biệt hữu ích nếu bạn muốn tạo một blog hoặc có nhiều trang web có nội dung. Sử dụng tệp Markdown cho phép bạn tập trung nhiều hơn vào nội dung, thay vì mã xung quanh nội dung đó.
Bạn có thể tích hợp Markdown với Angular bằng cách sử dụng gói nút ngx-markdown và bằng cách định cấu hình nó hoạt động trong một thành phần.
Mục Lục
Thiết lập một ứng dụng Angular
Nếu bạn chưa có ứng dụng Angular, bạn có thể tải xuống ứng dụng Angular mẫu này từ GitHub.
- Trên trang dự án trên GitHub, nhấp vào Mã số cái nút. Lựa chọn Tải xuống ZIP.
- Giải nén thư mục vào máy tính cục bộ của bạn.
- Mở dự án bằng IDE, chẳng hạn như Mã trực quan, Notepad ++ hoặc Văn bản Sublime. Nếu bạn đang sử dụng IDE, bạn có thể sử dụng một thiết bị đầu cuối tích hợp để thực hiện bất kỳ lệnh cần thiết nào.
- Điều hướng đến thư mục gốc của dự án bằng thiết bị đầu cuối. Tên của thư mục gốc là muo-sample-angle-app-mainvà nó chứa e2e và src thư mục. Ví dụ: nếu dự án của bạn nằm trong thư mục “Tải xuống”, hãy chạy lệnh sau để điều hướng đến thư mục.
cd C:UsersSharlDownloadsmuo-sample-angular-app-main - Cài đặt các mô-đun nút vào dự án. Nếu bạn không thể chạy các lệnh nút, bạn có thể cần cài đặt Node.js vào máy tính của mình.
npm install - Bây giờ bạn có thể khởi chạy ứng dụng Angular. Chạy lệnh sau trong thư mục gốc của dự án.
ng serve - Sau khi chạy ng phục vụ lệnh, đợi dự án biên dịch xong. Sau khi hoàn tất, dòng lệnh sẽ xuất địa chỉ cục bộ mà ứng dụng Angular của bạn sẽ chạy trên đó. Thông thường, điều này là trên http: // localhost: 4200 /.
- Mở trình duyệt web và nhập địa chỉ đang lưu trữ trang web của bạn, ví dụ: http: // localhost: 4200 /. Khi trang đã tải xong, bạn sẽ có thể xem trang chủ của ứng dụng góc cạnh mẫu.
Cách cài đặt Ngx-Markdown trong ứng dụng Angular của bạn
Để có thể sử dụng tệp Markdown trong ứng dụng Angular, bạn sẽ cần cài đặt gói ngx-markdown.
- Trong thư mục gốc của dự án của bạn, hãy chạy lệnh sau trong thiết bị đầu cuối. Đảm bảo rằng phiên bản gói ngx-markdown tương thích với phiên bản Angular của bạn.
npm install ngx-markdown@^10.1.1 - Mở tập tin app.module.ts. Tệp này nằm dưới dự án / src / app thư mục.
- Định cấu hình mô-đun Markdown mới. Nhập các gói sau:
import { SecurityContext } from '@angular/core';
import { MarkdownModule } from 'ngx-markdown';
import { HttpClientModule, HttpClient } from '@angular/common/http'; - Thêm mô-đun Markdown vào mảng nhập.
imports: [
...
HttpClientModule,
MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE })
],
Cách tạo tệp Markdown của bạn
Mỗi tệp Markdown sẽ đại diện cho một trang nội dung cho trang web của bạn. Bạn sẽ cần tạo một thư mục để lưu trữ các tệp Markdown của mình và điền nội dung vào các tệp Markdown của bạn.
- Điều hướng đến tài sản thư mục, nằm dưới dự án / src thư mục.
- Tạo một thư mục mới có tên bài viết.
- Tạo nhiều tệp Markdown. Tệp đánh dấu sử dụng phần mở rộng .md.
- Điền vào các tệp .md với một số nội dung được định dạng theo cú pháp Markdown. Dưới đây là một số nội dung mẫu bạn có thể sử dụng:
___
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.
Cách hiển thị tệp đánh dấu trong một thành phần
Bạn sẽ cần liệt kê từng tệp này trên trang chủ của ứng dụng để có thể điều hướng đến chúng.
- Mở home.component.html tập tin. Tệp này nằm dưới dự án / src / app / home thư mục.
- Thêm liên kết đến các trang Markdown mới của bạn. Bạn nên xây dựng các liên kết của mình theo tên của các tệp Markdown của bạn. Ví dụ: nếu bạn có tệp Markdown có tên “Recipe.md”, thì URL của trang sẽ là “/ posts / post / Recipe”.
<div class="links">
<a routerLink="/posts/post/ChocolateCheesecakeRecipe" style="margin-bottom:24px">Chocolate Cheesecake Recipe >></a>
<br>
<a routerLink="/posts/post/StrawberryCheesecakeRecipe" style="margin-bottom:24px">Strawberry Cheesecake Recipe
>></a>
<br>
<a routerLink="/posts/post/CaramelCheesecakeRecipe" style="margin-bottom:24px">Caramel Cheesecake Recipe >></a>
</div> - Thêm một số kiểu vào các liên kết:
.links {
padding: 72px;
text-align: center;
} - Tạo một thành phần khác mà bạn có thể sử dụng như một trang riêng biệt. Trang này sẽ có thể hiển thị bất kỳ tệp Markdown nào đã cho. Trong thiết bị đầu cuối, hãy chạy như sau ng tạo ra lệnh để tạo một thành phần mới:
ng g c home/posts - Bây giờ sẽ có bốn tệp mới được tạo bên trong thư mục “bài viết” mới. Điều này bao gồm “posts.component.html”, “posts.component.css”, “posts.component.ts” và “posts.component.spec.ts”.
- Mở posts.component.html và thêm mã HTML để hiển thị các tệp Markdown.
<div style="padding:100px" markdown [src]="post"></div> - Mở posts.component.ts tập tin. Thêm nhập Định tuyến.
import { ActivatedRoute } from '@angular/router'; - Thay thế hàm tạo và hàm ngOnInit () bằng mã TypeScript để hiển thị các tệp Markdown. Thao tác này sẽ lấy tên của bài viết trong liên kết url và định tuyến đến tệp Markdown tương ứng được lưu trữ trong thư mục nội dung.
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';
} - Mở app-routing.module.ts tập tin. Tệp này nằm dưới dự án / src / app thư mục.
- Nhập thành phần bài đăng mới và thêm nó vào mảng tuyến đường.
import { PostsComponent } from './home/posts/posts.component';
const routes: Routes = [
{ path: 'posts/post/:article', component: PostsComponent },
]; - Bây giờ bạn có thể khởi chạy lại ứng dụng Angular.
ng serve - Truy cập http: // localhost: 4200 hoặc bất kỳ địa chỉ nào đang lưu trữ trang web của bạn.
- Nhấp vào một trong các liên kết trang. Bây giờ bạn sẽ thấy nội dung Markdown hiển thị trên một trang riêng biệt.
- Bạn có thể tải xuống một ví dụ hoạt động từ trang dự án GitHub. Bạn có thể làm theo hướng dẫn trong tệp README để tải xuống và chạy dự án.
Sử dụng Markdown trong ứng dụng Angular của bạn
Sử dụng tệp Markdown trên trang web của bạn cho phép bạn tập trung hơn vào nội dung của mình. Điều này có thể rất hữu ích cho các trang web viết blog. Nếu bạn có ứng dụng Angular, bạn có thể sử dụng tệp Markdown cho các trang web của mình bằng cách sử dụng gói nút ngx-markdown.
Bạn có thể tìm hiểu thêm về các ngăn xếp công nghệ khác có thể hữu ích cho việc thiết lập một trang web viết blog. Một trong số đó là Hugo, một trình tạo trang tĩnh cũng hiển thị các tệp Markdown dưới dạng trang web.