Teman, saya sedang mencari a <>dapat diterima Sistem manajemen konten untuk situs tetap … yah, selama kita semua menyebutnya “situs tetap”, terus terang.
Saya tahu, saya tahu: ada a <>Ton Salah satu opsi dari sistem manajemen konten yang tersedia, dan sementara banyak dari mereka diuji, tidak ada yang sudah ada <>satuapakah kamu tahu? Model penetapan harga yang aneh, alokasi yang sulit, dan beberapa akhir sampai menjadi a <>Semuanya “tidak ada Untuk manajemen.
Juga, saya <>sungguh-sungguh Nikmati membangun dengan generator situs web seperti Astro atau Extra, tetapi mengurangi promosi karena manajemen konten kurang sempurna bagi banyak orang “tidak konvensional”.
-Advertisement-.
Beberapa harapan mungkin termasuk sistem manajemen konten:
- Mudah digunakan: Fitur terpenting, mengapa Anda dapat memilih untuk menggunakan sistem manajemen konten terutama.
- Persyaratan minimum: Dengar, saya hanya mencoba memperbarui beberapa HTML, saya tidak ingin banyak memikirkan jadwal database.
- kerja sama: Alat CMS bekerja lebih baik ketika beberapa pemegang saham bekerja bersama, atau pemegang saham yang mungkin tidak mengetahui pengurangan mobilitas atau apa itu GitHub.
- Kustomisasi: Tidak ada situs web yang sama, jadi kita harus dapat membuat bidang yang didedikasikan untuk berbagai jenis konten.
Ini bukan daftar tuntutan panjang yang mengerikan, saya ingin katakan; Agak masuk akal, bahkan. Untuk alasan ini saya senang menemukan halaman CMS.
Menurut halaman utamanya, halaman CMS adalah “CMS tanpa generator situs yang kuat”, dan saya akan bersaksi. Halaman -halaman sebagian besar dikembangkan oleh satu pengembang, Ronan Berder, tetapi itu adalah open source, dan permintaan awan di Gitap.
Ambil banyak “bagian yang baik” di alat CMS lainnya, dan satu file komposisi, CMS menyatukan hal -hal dalam antarmuka pengguna yang elegan.
Halaman CMS mencakup banyak opsi untuk kustomisasi, Anda dapat mengunduh media, membuat file yang dapat diedit, dan membuat kombinasi penuh konten. Juga, konten dapat berisi semua jenis bidang yang berbeda, dan periksa daftar lengkap spesies yang didukung, serta bidang yang sepenuhnya berdedikasi.
Sebenarnya tidak ada “ujung latar belakang” kecemasan, karena konten disimpan sebagai file datar di dalam gudang git Anda. Halaman CMS memberi orang kemampuan untuk mengelola konten dalam ribo, tanpa harus tahu cara menggunakan git, dan saya pikir ini elegan.
Otentikasi Pengguna berfungsi dalam dua cara: Pemegang saham dapat masuk dengan akun GitHub, <>atau Para pemegang saham dapat diundang melalui email, di mana mereka akan menerima URL untuk kata sandi terendah, “Magic-Link”, masuk. Ini indah, karena akun GitHub kurang umum di luar dunia Dave, kaget, dan saya tahu.
Oh, halaman memiliki CMS <>Sangat murah Penghalang masuk, karena gratis untuk digunakan.
Halaman CMS dan Grup Konten Astro
Saya membuat gudang di GitHub dengan Astro dan Page CMS menggunakan awal dari Blog Virtual Astro, dan membuatnya secara terbuka, jadi jangan ragu untuk mengkloning dan menindaklanjuti.
Saya adalah penggemar Astro untuk jangka waktu tertentu, dan halaman CMS bekerja dengan baik bersama dengan fitur koleksi konten Astro. Koleksi konten memungkinkan bola data yang tersedia dengan mudah di seluruh Astro, sehingga Anda dapat melembabkan konten di dalam halaman Astro. Bola data ini dapat berasal dari sumber yang berbeda, seperti fasad pemrograman aplikasi ketiga, tetapi biasanya sebagai tanda file penurunan harga. Coba tebak halaman apa yang benar -benar bagus CMS? <>Bukti Administratif dari File MarkdownLai
Grup konten disiapkan oleh file komposisi grup. memeriksa src/content.config.ts File dalam proyek, kami di sini mendefinisikan satu set konten yang disebut blog:
import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
// Load Markdown in the `src/content/blog/` directory.
loader: glob({ base: './src/content/blog', pattern: '**/*.md' }),
// Type-check frontmatter using a schema
schema: z.object({
title: z.string(),
description: z.string(),
// Transform string to Date object
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
heroImage: z.string().optional(),
}),
});
export const collections = { blog };itu blog Konten yang bingung tercapai /src/content/blog Panduan untuk mencocokkan file **/*.md Jenis File, Format File Markdown. itu schema Fitur opsional, bagaimanapun, Astro menyediakan fungsi yang berguna untuk memeriksa tipe dengan ZOD, yang memastikan data yang disimpan oleh halaman berfungsi seperti yang diharapkan pada astro Anda.
Halaman Komposisi CMS
Nah, sekarang setelah dia tahu Astro dari tempat Anda mencari blog Konten, mari kita lihat file pembentukan CMS, .pages.config.yml:
content:
- name: blog
label: Blog
path: src/content/blog
filename: '{year}-{month}-{day}-{fields.title}.md'
type: collection
view:
fields: [heroImage, title, pubDate]
fields:
- name: title
label: Title
type: string
- name: description
label: Description
type: text
- name: pubDate
label: Publication Date
type: date
options:
format: MM/dd/yyyy
- name: updatedDate
label: Last Updated Date
type: date
options:
format: MM/dd/yyyy
- name: heroImage
label: Hero Image
type: image
- name: body
label: Body
type: rich-text
- name: site-settings
label: Site Settings
path: src/config/site.json
type: file
fields:
- name: title
label: Website title
type: string
- name: description
label: Website description
type: string
description: Will be used for any page with no description.
- name: url
label: Website URL
type: string
pattern: ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$
- name: cover
label: Preview image
type: image
description: Image used in the social preview on social networks (e.g. Facebook, Twitter...)
media:
input: public/media
output: /mediaAda banyak hal yang terjadi di sana, tetapi di dalam content Bagian ini, mari kita perbesar blog sasaran.
- name: blog
label: Blog
path: src/content/blog
filename: '{year}-{month}-{day}-{fields.title}.md'
type: collection
view:
fields: [heroImage, title, pubDate]
fields:
- name: title
label: Title
type: string
- name: description
label: Description
type: text
- name: pubDate
label: Publication Date
type: date
options:
format: MM/dd/yyyy
- name: updatedDate
label: Last Updated Date
type: date
options:
format: MM/dd/yyyy
- name: heroImage
label: Hero Image
type: image
- name: body
label: Body
type: rich-textKami dapat mengarahkan halaman CMS ke panduan yang ingin kami simpan file penurunan harga menggunakan path Properti, mencocokkan masalah ini dengan /src/content/blog/ Astro sedang mencari konten.
path: src/content/blogke filename Kami dapat memberikan templat pola untuk digunakan ketika halaman CMS menyimpan file ke panduan pengumpulan konten. Dalam hal ini, riwayat file digunakan yearDan monthDan daySerta alamat elemen blog, menggunakan fields.title Untuk merujuk ke bidang alamat. Nama file dapat disesuaikan dengan beberapa cara berbeda, sesuai dengan skenario Anda.
filename: '{year}-{month}-{day}-{fields.title}.md'itu type Halaman properti CMS mengatakan bahwa ini adalah satu set file, bukan satu editor -in -law (kami akan mencapai ini sebentar lagi).
type: collectionDalam komposisi set konten Astro kami, kami mendefinisikan kami blog Kumpulkan dengan harapan bahwa file berisi beberapa bagian dari data identifikasi seperti: titleDan descriptionDan pubDateDan beberapa properti.
Kami dapat membalikkan persyaratan tersebut di halaman CMS kami blog Kelompok sebagai fields. Setiap bidang dapat disesuaikan untuk jenis data yang Anda cari. Di sini, Anda telah mencocokkan bidang -bidang ini dengan frontmatter default yang terletak di awal blog Astro.
fields:
- name: title
label: Title
type: string
- name: description
label: Description
type: text
- name: pubDate
label: Publication Date
type: date
options:
format: MM/dd/yyyy
- name: updatedDate
label: Last Updated Date
type: date
options:
format: MM/dd/yyyy
- name: heroImage
label: Hero Image
type: image
- name: body
label: Body
type: rich-textSekarang, setiap kali kami membuat yang baru blog Elemen dalam halaman CMS, kami akan dapat mengisi masing -masing bidang ini, dan mencocokkan rencana yang diharapkan untuk Astro.
Terlepas dari grup konten, halaman CMS juga memungkinkan Anda untuk mengelola file pengeditan, yang berguna untuk berbagai hal: variabel luas situs, bendera fitur, atau bahkan mobilitas yang dapat diedit.
Lihat site-settings Sebuah objek, kami di sini untuk menempatkan type menyukai fileDan path Nama file termasuk site.json.
- name: site-settings
label: Site Settings
path: src/config/site.json
type: file
fields:
- name: title
label: Website title
type: string
- name: description
label: Website description
type: string
description: Will be used for any page with no description.
- name: url
label: Website URL
type: string
pattern: ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$
- name: cover
label: Preview image
type: image
description: Image used in the social preview on social networks (e.g. Facebook, Twitter...)Bidang yang saya sertakan adalah pengaturan populer di tingkat situs, seperti situs titleDan descriptionDan urlDan cover gambar.
Saat berbicara tentang gambar -gambar itu, kita dapat memberi tahu halaman -halamannya di tempat menyimpan media seperti gambar dan video.
media:
input: public/media
output: /mediaitu input Fitur ini menjelaskan tempat menyimpan file, di /public/media Panduan dalam proyek kami.
itu output Fitur ini adalah fitur kecil yang berguna yang dengan mudah menggantikan jalur file, terutama untuk alat yang mungkin memerlukan konfigurasi tertentu. Misalnya, Astro Vite digunakan di bawah tutupnya, vite sudah dikenal public Panduan dan mengeluh jika disertakan dalam file file. Sebaliknya, kami dapat mengatur file output Fitur halaman hanya akan mengarahkan CMS /media Bukti sebagai gantinya.
Untuk mengetahui apa yang saya maksud, periksa tes tes src/content/blog/ Map:
---
title: 'Test Post'
description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
pubDate: 05/03/2025
heroImage: '/media/blog-placeholder-1.jpg'
---itu heroImage Sekarang properti ditunjukkan dengan benar /media/... alih-alih /public/media/....
Berkenaan dengan formasi, halaman CMS bisa sederhana atau rumit seperlunya. Anda dapat menambahkan banyak grup atau file yang dapat diedit sesuai kebutuhan, serta mengalokasikan bidang untuk setiap jenis konten. Ini memberi Anda banyak fleksibilitas untuk membuat situs!
Hubungi Halaman CMS
Sekarang situs web Astro kami telah disiapkan, dan .pages.config.yml File, kami dapat menghubungkan situs web kami ke halaman di aplikasi CMS online. Sebagai pengembang kontrol gudang, menjelajahi https://app.pagescms.org/ Masuk menggunakan akun GitHub Anda.
Beberapa pertanyaan harus diberikan tentang izin, Anda mungkin perlu memilih antara memberikan akses ke semua gudang atau harga tertentu. Secara pribadi, saya hanya memilih untuk memberikan akses ke satu gudang, dan dalam hal ini negara saya astro-pages-cms-template Ribo.
Setelah memberikan akses ke ribo, kembali ke aplikasi CMS, di mana Anda akan melihat proyek Anda dengan judul “Buka proyek”.
Mengklik tautan terbuka akan membawa Anda ke papan informasi situs, di mana kami akan dapat membuat pembaruan untuk situs kami.
Buat konten
Lihatlah panel informasi situs web kami, kami akan melihat menavigasi di sisi kiri, dengan beberapa hal yang akrab.
- Blog Itu adalah grup yang kami buat di dalam
.pages.config.ymlFile, ini akan menjadi tempat kami dapat menambahkan entri baru ke blog. - Set situs Ini adalah file editorial yang kami gunakan untuk membuat perubahan pada variabel di tingkat situs.
- Sedang Ini adalah tempat di mana gambar kami dan konten lainnya akan tinggal.
- Pengaturan Di situlah kami akan dapat membebaskan kami
.pages.config.ymlFile langsung. - Kolaborator Ini memungkinkan kami untuk mengundang orang lain untuk berkontribusi pada konten di situs.
Kami dapat membuat posting blog baru dengan mengklik Tambahkan login Tombol di kanan atas
Di sini kita dapat mengisi semua bidang konten blog kita, lalu tekan Melestarikan tombol.
Setelah disimpan, halaman CMS akan membuat file markdown, menyimpan file di panduan yang sesuai, dan secara otomatis mematuhi perubahan di gudang kami. Beginilah halaman CMS membantu kami mengelola konten kami tanpa perlu menggunakan git secara langsung.
Penerbitan secara otomatis
Satu -satunya hal yang tersisa adalah persiapan operasi penerbitan otomatis melalui penyedia layanan yang Anda pilih. Astro memiliki integrasi dengan penyedia layanan seperti Netlify, CloudFlare Pages dan Vercel, tetapi dapat di -host di mana saja Anda dapat menjalankan node Aplikasi.
Astro biasanya sangat cepat untuk konstruksi (terima kasih kepada vite), jadi sementara pembaruan situs tidak akan <>segeraMereka akan tetap agak cepat untuk diterbitkan. Jika situs Anda siap menggunakan kemampuan tampilan Astro di sisi server, alih -alih lokasi yang benar -benar tetap, perubahan mungkin jauh lebih cepat dalam penerbitan.
kesimpulan
Menggunakan templat referensi, kami telah memeriksa bagaimana set konten Astro bekerja di samping halaman CMS. Kami juga telah belajar cara menghubungkan gudang proyek kami ke aplikasi CMS ke halaman, dan cara membuat pembaruan konten melalui dasbor. Akhirnya, jika Anda bisa, jangan lupa untuk menyiapkan publikasi otomatis, sehingga menyebarkan konten dengan cepat.
Menggunakan halaman CMS untuk mengelola konten lokasi tetap yang awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga Digitalocean. Anda harus mendapatkan buletin.
-Advertisement-.
