astro theme cactus
v5.0.0
Astro Cactus adalah starter sederhana yang dibangun dengan kerangka Astro. Gunakan untuk membuat blog atau situs web yang mudah digunakan.
Lihat Demo, yang dihosting di Netlify
Buat repo baru dari template ini.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusGanti pnpm dengan npm/benang pilihan Anda
| Memerintah | Tindakan |
|---|---|
pnpm install | Menginstal dependensi |
pnpm dev | Memulai server pengembang lokal di localhost:3000 |
pnpm build | Bangun situs produksi Anda ke ./dist/ |
pnpm postbuild | Skrip Pagefin untuk membangun pencarian statis postingan blog Anda |
pnpm preview | Pratinjau build Anda secara lokal, sebelum diterapkan |
pnpm sync | Hasilkan tipe berdasarkan konfigurasi Anda di src/content/config.ts |
src/site.config.ts untuk meta data situs dasarastro.config.ts/public :src/styles/global.css dengan gaya terang dan gelap Anda sendiri.src/site.config.ts . Anda dapat menemukan lebih banyak tema dan opsi di sini.src/components/SocialList.astro untuk menambah/mengganti profil media Anda. Ikon dapat ditemukan @ icones.js.org, sesuai instruksi Astro Icon.src/content/post/ & src/content/note/ dengan file .md/mdx. Lihat di bawah untuk lebih jelasnya.src/pages/og-image/[slug].png.ts ke fungsi markup di mana Anda dapat mengedit kelas html/tailwind sesuai kebutuhan . Anda dapat menggunakan taman bermain ini untuk membantu desain Anda.src/content/post/social-image.md . Info lebih lanjut tentang frontmatter dapat ditemukan di sinifont-mono , yang terletak di file css global src/styles/global.css . Anda dapat mengubah font dengan menghapus varian font-mono , setelah itu TailwindCSS akan default ke tumpukan keluarga font font-sans . Jika Anda telah melakukan fork pada template, Anda dapat menyinkronkan fork tersebut dengan proyek Anda sendiri, ingatlah untuk tidak mengklik Buang Perubahan karena Anda akan kehilangan milik Anda sendiri.
Jika Anda memiliki repositori templat, Anda dapat menambahkan templat ini sebagai remote, seperti yang dibahas di sini.
Tema ini menggunakan Koleksi Konten untuk mengatur file Markdown dan MDX lokal, serta frontmatter pengecekan tipe dengan skema -> src/content/config.ts .
Menambahkan postingan/catatan semudah menambahkan file .md(x) ke folder src/content/post dan/atau src/content/note , yang nama filenya akan digunakan sebagai slug/url. Postingan yang disertakan dengan template ini ada sebagai contoh bagaimana menyusun frontmatter Anda. Selain itu, dokumen Astro memiliki bagian terperinci tentang halaman penurunan harga.
| Properti (* wajib diisi) | Keterangan |
|---|---|
| judul * | Cukup jelas. Digunakan sebagai link teks ke postingan, h1 pada halaman postingan, dan properti judul halaman. Memiliki panjang maksimal 60 karakter, diatur di src/content/config.ts |
| keterangan * | Mirip dengan di atas, digunakan sebagai properti deskripsi seo. Memiliki panjang minimal 50 dan panjang maksimal 160 karakter, diatur dalam skema posting. |
| tanggal terbitan * | Sekali lagi cukup sederhana. Untuk mengubah format tanggal/lokal, saat ini en-GB , perbarui opsi tanggal di src/site.config.ts . Perhatikan bahwa Anda juga dapat meneruskan opsi tambahan ke komponen <FormattedDate> jika diperlukan. |
| tanggal diperbarui | Ini adalah tanggal opsional yang menunjukkan kapan postingan telah diperbarui, dalam format yang sama dengan Tanggal Publikasi. |
| tag | Tag bersifat opsional pada postingan apa pun yang dibuat. Setiap tag baru akan ditampilkan di yourdomain.com/posts & yourdomain.com/tags , dan menghasilkan laman yourdomain.com/tags/[yourTag] |
| gambar sampul | Ini adalah objek opsional yang akan menambahkan gambar sampul ke bagian atas postingan. Sertakan src : " path-to-image " dan alt : " image alt ". Anda dapat melihat contohnya di src/content/post/cover-image.md . |
| ogGambar | Ini adalah properti opsional. Gambar OG akan dibuat secara otomatis untuk setiap postingan yang tidak menyediakan properti ini. Jika Anda ingin membuat sendiri untuk postingan tertentu, sertakan properti ini dan link ke gambar Anda, tema kemudian akan otomatis melewati pembuatannya. |
| draf | Ini adalah properti opsional karena disetel ke false secara default dalam skema. Dengan menambahkan true, postingan tersebut akan disaring dari produksi yang dibangun di sejumlah tempat, inc. getAllPosts() panggilan, og-images, rss feed, dan halaman yang dihasilkan. Anda dapat melihat contohnya di src/content/post/draft-post.md |
| Properti (* wajib diisi) | Keterangan |
|---|---|
| judul * | string, panjang maksimal 60 karakter. |
| keterangan | untuk digunakan untuk properti deskripsi meta kepala. |
| tanggal terbitan * | Format ISO 8601 dengan offset diperbolehkan. |
Astro Cactus menyertakan cuplikan VSCode bermanfaat yang membuat 'rintisan' materi depan untuk postingan dan catatan, dapat ditemukan di sini -> .vscode/post.code-snippets . Mulailah mengetikkan kata frontmatter pada file .md(x) yang baru Anda buat untuk memicunya. Cuplikan Visual Studio Code muncul di IntelliSense melalui (⌃Space) di mac, (Ctrl+Space) di windows.
Integrasi ini menghadirkan fitur pencarian statis untuk mencari postingan dan catatan blog. Dalam bentuknya yang sekarang, pencarian halaman hanya berfungsi setelah situs dibuat. Tema ini menambahkan skrip postbuild yang harus dijalankan setelah Astro membangun situsnya. Anda dapat melakukan pratinjau secara lokal dengan menjalankan build && postbuild.
Hasil pencarian hanya mencakup halaman dari postingan dan catatan. Jika Anda ingin menyertakan halaman lain/semua halaman Anda, hapus/letakkan kembali atribut data-pagefind-body ke tag artikel yang terdapat di src/layouts/BlogPost.astro dan src/components/note/Note.astro .
Ini juga memungkinkan Anda memfilter postingan berdasarkan tag yang ditambahkan di bagian depan postingan blog. Jika Anda lebih suka menghapus ini, hapus atribut data data-pagefind-filter="tag" dari tautan di src/components/blog/Masthead.astro .
Jika Anda memilih untuk tidak menyertakan integrasi ini, cukup hapus komponen src/components/Search.astro , dan hapus instalan @pagefind/default-ui & pagefind dari package.json. Anda juga perlu menghapus skrip postbuild dari sini.
Anda dapat mengurangi muatan css awal dari css Anda, seperti yang ditunjukkan di sini, dengan memperlambat pemuatan gaya komponen web.
Anda mungkin ingin melacak jumlah pengunjung yang Anda terima ke blog/situs web Anda untuk memahami tren dan postingan/halaman populer yang Anda buat. Ada sejumlah penyedia di luar sana yang bisa digunakan, termasuk web host seperti vercel, netlify, dan cloudflare.
Tema/templat ini tidak menyertakan solusi spesifik karena ada sejumlah kasus penggunaan dan/atau opsi yang mungkin digunakan atau tidak digunakan oleh sebagian orang.
Anda mungkin diminta untuk menyertakan cuplikan di dalam tag HEAD situs web Anda saat menyiapkannya, yang dapat ditemukan di src/layouts/Base.astro . Alternatifnya, Anda dapat menambahkan cuplikan di src/components/BaseHead.astro .
Astro docs memiliki bagian dan rincian yang bagus tentang cara menerapkan situs Astro Anda sendiri di berbagai platform dan kekhasannya.
Secara default situs akan dibangun (lihat bagian Perintah di atas) ke direktori /dist .
Tema ini terinspirasi oleh Hexo Theme Cactus
MIT
