Mulai menulis konten situs Anda di Markdown dan manfaatkan sintaksnya yang lebih bersih dan lebih mudah dipelihara.
Penurunan harga adalah format populer untuk menulis konten web. Kompromi antara HTML dan bahasa Inggris biasa memungkinkan penulis untuk menggunakan sintaks yang lebih familiar. Ini dapat sangat membantu memudahkan menjalankan blog multi-penulis sehari-hari dan situs serupa.
Penurunan harga bisa sangat berguna jika Anda ingin membuat blog atau memiliki banyak halaman web dengan konten. Menggunakan file penurunan harga memungkinkan Anda untuk lebih fokus pada konten, daripada kode di sekitar konten itu.
Anda dapat mengintegrasikan Markdown dengan Angular menggunakan paket node ngx-markdown, dan dengan mengonfigurasinya agar berfungsi di dalam komponen.
Menyiapkan Aplikasi Sudut
Jika Anda belum memiliki Aplikasi sudut, Anda dapat mengunduh contoh aplikasi Angular ini dari GitHub.
- Pada halaman proyek di GitHub, klik pada Kode tombol. Pilih Unduh ZIP.
- Buka zip folder ke komputer lokal Anda.
- Buka proyek menggunakan IDE, seperti Visual Code, Notepad++, atau Sublime Text. Jika Anda menggunakan IDE, Anda dapat menggunakan terminal bawaan untuk menjalankan perintah yang diperlukan.
- Arahkan ke folder root proyek menggunakan terminal. Nama folder root adalah muo-sampel-sudut-aplikasi-utama, dan mengandung e2e dan src folder. Misalnya, jika proyek Anda berada di folder "Unduhan", jalankan perintah berikut untuk menavigasi ke folder tersebut.
CD C:\Users\Sharl\Downloads\muo-sample-angular-app-main - Instal modul simpul ke dalam proyek. Jika Anda tidak dapat menjalankan perintah node, Anda mungkin perlu menginstal Node.js ke komputer Anda.
npm Install - Anda sekarang dapat meluncurkan aplikasi Angular. Jalankan perintah berikut di folder root proyek.
ng melayani - Setelah menjalankan ng melayani perintah, tunggu proyek selesai dikompilasi. Setelah selesai, baris perintah akan menampilkan alamat lokal tempat aplikasi Angular Anda akan berjalan. Biasanya, ini aktif http://localhost: 4200/.
- Buka browser web dan masukkan alamat yang menghosting situs Anda, misalnya, http://localhost: 4200/. Setelah halaman dimuat, Anda seharusnya dapat melihat halaman beranda untuk contoh aplikasi sudut.
Cara Menginstal Ngx-Markdown di Aplikasi Angular Anda
Untuk dapat menggunakan file penurunan harga di aplikasi Angular Anda, Anda perlu menginstal paket ngx-markdown.
- Di folder root proyek Anda, jalankan perintah berikut di terminal. Pastikan versi paket ngx-markdown kompatibel dengan versi Angular Anda.
npm Install ngx-markdown@^10.1.1--menyimpan - Buka filenya app.module.ts. File ini berada di bawah proyek/src/aplikasi map.
- Konfigurasikan modul penurunan harga yang baru. Impor paket berikut:
impor { Konteks Keamanan } dari '@sudut/inti';
impor {Modul Penurunan Harga } dari 'ngx-penurunan harga';
impor { HttpClientModule, HttpClient } dari '@angular/common/http'; - Tambahkan modul penurunan harga ke larik impor.
impor: [
...
HttpClientModule,
modul penurunan harga.forRoot({ pemuat: HttpClient, bersihkan: SecurityContext. TIDAK ADA })
],
Cara Membuat File Penurunan Harga
Setiap file penurunan harga akan mewakili halaman konten untuk situs web Anda. Anda perlu membuat folder untuk menyimpan file penurunan harga dan mengisi file penurunan harga dengan konten.
- Navigasikan ke aktiva folder, yang berada di bawah proyek/src map.
- Buat folder baru bernama posting.
- Buat beberapa file penurunan harga. File penurunan harga menggunakan ekstensi .md.
- Isi file .md dengan beberapa konten diformat dalam sintaks penurunan harga. Berikut beberapa contoh konten yang dapat Anda gunakan:
#### 03 Juni 2022
#Resep Cokelat Lezat
___
Ini adalah bagaimana Anda membuat Kue Keju Cokelat yang luar biasa:
* Hancurkan biskuit, campur dengan mentega.
* Biarkan mengatur dalam lemari es selama 10 menit.
* Campur beberapa krim dengan sirup.
* Letakkan di atas biskuit lalu masukkan kembali ke dalam lemari es.
Cara Merender File Penurunan Harga dalam Komponen
Anda perlu membuat daftar masing-masing file ini di halaman beranda aplikasi, sehingga Anda dapat menavigasi ke sana.
- Membuka home.component.html mengajukan. File ini berada di bawah proyek/src/aplikasi/rumah map.
- Tambahkan tautan ke halaman Penurunan Harga baru Anda. Anda harus membuat link Anda sesuai dengan nama file penurunan harga Anda. Misalnya, jika Anda memiliki file penurunan harga yang disebut "Recipe.md", maka URL halamannya akan menjadi "/posts/post/Recipe".
<kelas div="link">
<routerLink="/posts/post/ChocolateCheesecakeRecipe" gaya="margin-bawah: 24px">Resep kue keju coklat >></sebuah>
<br>
<routerLink="/posts/post/StrawberryCheesecakeRecipe" gaya="margin-bawah: 24px">Resep Kue Keju Strawberry
>></sebuah>
<br>
<routerLink="/posts/post/CaramelCheesecakeRecipe" gaya="margin-bawah: 24px">Resep Caramel Cheesecake >></sebuah>
</div> - Tambahkan beberapa gaya ke tautan:
.link {
bantalan: 72px;
perataan teks: tengah;
} - Buat komponen lain yang dapat Anda gunakan sebagai halaman terpisah. Halaman ini harus dapat merender file penurunan harga yang diberikan. Di terminal, jalankan yang berikut ini ng menghasilkan perintah untuk membuat komponen baru:
ng g c rumah/posting - Sekarang seharusnya ada empat file baru yang dihasilkan di dalam folder "postingan" baru. Ini termasuk "posts.component.html", "posts.component.css", "posts.component.ts" dan "posts.component.spec.ts".
- Buka posts.component.html file, dan tambahkan kode HTML untuk membuat file penurunan harga.
<gaya div="bantalan: 100px" penurunan harga [src]="pos"></div> - Buka posts.component.ts mengajukan. Tambahkan impor Perutean.
impor { Rute Diaktifkan } dari '@sudut/router'; - Ganti fungsi konstruktor dan ngOnInit() dengan kode TypeScript untuk merender file penurunan harga. Ini akan mengambil nama artikel di tautan url, dan merutekan ke file Penurunan harga yang sesuai yang disimpan di folder aset.
pos: string;
href: string;
konstruktor(rute pribadi: ActivatedRoute) {}
ngOnInit(): ruang kosong {
membiarkan nama artikel = ini.route.snapshot.paramMap.get('artikel');
ini.href = jendela.lokasi.href;
this.post = './aset/postingan/' + nama artikel + '.md';
} - Buka app-routing.module.ts mengajukan. File ini berada di bawah proyek/src/aplikasi map.
- Impor komponen posting baru dan tambahkan ke array route.
impor { Komponen Postingan } dari './home/posts/posts.component';
konstan rute: Rute = [
// ...
{ jalur: 'postingan/postingan/:artikel', komponen: PostsComponent },
]; - Anda sekarang dapat meluncurkan aplikasi Angular lagi.
ng melayani - Mengunjungi http://localhost: 4200 atau alamat mana pun yang menghosting situs Anda.
- Klik salah satu tautan halaman. Anda sekarang akan melihat konten penurunan harga dirender pada halaman terpisah.
- Anda dapat mengunduh contoh kerja dari GitHub halaman proyek. Anda dapat mengikuti petunjuk di file README untuk mengunduh dan menjalankan proyek.
Menggunakan Penurunan Harga di Aplikasi Sudut Anda
Menggunakan file penurunan harga di situs web Anda memungkinkan Anda untuk lebih fokus pada konten Anda. Ini bisa sangat berguna untuk situs web blogging. Jika Anda memiliki aplikasi Angular, Anda dapat menggunakan file penurunan harga untuk halaman web Anda dengan menggunakan paket node ngx-markdown.
Anda dapat mempelajari lebih lanjut tentang tumpukan teknologi lain yang dapat berguna untuk menyiapkan situs web blogging. Salah satunya adalah Hugo, generator situs statis yang juga membuat file penurunan harga sebagai halaman web.