Tema Mars: Melihat dalam Tema WordPress Headless Frontity

Artikel ini dimulakan sebelum pengambilalihan Frontity dan pasukannya. Pengasas Frontity merancang untuk memindahkan rangka kerja ke dalam projek yang didorong oleh komuniti, memastikan kestabilannya, operasi bebas bug, dan dokumentasi komprehensif. Seperti projek sumber terbuka yang lain, Frontity akan tetap bebas, menawarkan peluang untuk sumbangan dan peningkatan masyarakat. Butiran lanjut boleh didapati di FAQ mereka.

Artikel terdahulu saya terperinci mewujudkan tapak WordPress tanpa kepala dengan Frontity dan secara ringkas memeriksa struktur failnya. Artikel ini memasuki pakej @frontity/mars-theme (tema Mars), menyediakan panduan langkah demi langkah untuk penyesuaian. Tema Mars berfungsi sebagai titik permulaan yang sangat baik, menjadi tema lalai Frontity, sama seperti WordPress's Twenty Twenty-One.

Kami akan meneroka komponen teras tema Mars, termasuk "blok bangunan" nya, dan memeriksa pelbagai komponen yang termasuk dalam pakej. Kami akan meliputi fungsi, operasi, dan gaya dengan contoh praktikal.

Mari mulakan!

Jadual Kandungan

• Pengenalan: Memahami blok bangunan Frontity
• Bahagian 1: Meneroka Struktur Tema Mars
• Bahagian 2: Menggunakan komponen senarai
• Bahagian 3: Pautan, Menu, dan Imej Pilihan
• Bahagian 4: Menggayakan Projek Frontity
• Bahagian 5: Menyesuaikan tema Frontity Mars
• Bahagian 6: Sumber dan Pengakuan
• Kesimpulan: Pemikiran dan Refleksi Akhir

Komponen asas Frontity

Mari kita kembali semula struktur fail projek frontity dari artikel sebelumnya, menonjolkan komponen teras Frontity: frontity.settings.js , package.json , dan folder packages/mars-theme . Fail package.json menyediakan maklumat projek penting, termasuk nama, penerangan, pengarang, dan kebergantungan. Pakej utama termasuk:

• frontity : Pakej utama yang mengandungi kaedah pembangunan aplikasi depan dan CLI.
• @frontity/core : Mengendalikan bundling, rendering, gabungan, transpiling, dan berkhidmat. Akses langsung biasanya tidak diperlukan untuk pembangunan aplikasi. Senarai lengkap adalah dalam dokumentasi depan.
• @frontity/wp-source : Sambungkan ke API REST WordPress, mengambil data untuk tema Mars.
• @frontity/tiny-router : Mengurus window.history and Routing.
• @frontity/html2react : Menukar HTML untuk bertindak balas, menggunakan pemproses untuk menggantikan bahagian HTML dengan komponen React.

Inti Frontity, atau @frontity/package (juga dikenali sebagai "blok bangunan"), termasuk perpustakaan komponen React yang berguna di @frontity/components , mengeksport komponen seperti Link , Auto Prefetch , Image , Props , Iframe , Switch , dan fungsi dan objek lain. Deskripsi terperinci dan maklumat sintaks adalah dalam API Rujukan Pakej.

Dokumentasi Frontity menerangkan proses permulaan projek: semua pakej yang ditakrifkan di frontity.settings.js diimport oleh @frontity/file-settings , dan tetapan dan eksport mereka digabungkan oleh @frontity/core ke dalam satu kedai. Kedai ini membolehkan akses ke negeri dan tindakan pakej yang berbeza semasa pembangunan menggunakan @frontity/connect , Pengurus Negeri Frontity.

Seterusnya, kami akan mengkaji bagaimana blok bangunan ini digunakan dalam tema Mars untuk membuat projek frontity berfungsi dengan titik akhir WordPress tanpa kepala.

Bahagian 1: Memahami Struktur Tema Mars

Sebelum penyesuaian, mari kita membiasakan diri dengan struktur fail tema mars ( @frontity/mars-theme ):

 <code>packages/mars-theme/ |__ src/ |__ index.js |__ components/ |__ list/ |__ index.js |__ list-item.js |__ list.js |__ pagination.js |__ featured-media.js |__ header.js |__ index.js |__ link.js |__ loading.js |__ menu-icon.js |__ menu-model.js |__ menu.js |__ nav.js |__ page-error.js |__ post.js |__ title.js</code>

Komponen utama tema Mars adalah: /src/index.js , src/list/index.js , dan src/components/index.js . Dokumentasi Frontity memberikan penjelasan terperinci tentang bagaimana komponen -komponen ini ditakrifkan dan saling berkaitan. Mari kita fokus pada tiga yang paling penting: akar, tema, dan senarai.

Komponen Root Tema ( /src/index.js )

Fail src/index.js (akar tema) adalah penting. Ia berfungsi sebagai titik masuk, mensasarkan a<div> Dalam markup tapak untuk menyuntik akar semua pakej yang dipasang. Tema Frontity mengeksport <code>root dan pakej yang diperlukan ke dalam DOM. Dokumentasi Frontity menggambarkan ini menggunakan slot dan mengisi corak extensibility. Contoh dari pakej tema Mars menunjukkan bagaimana ia memulakan komponen akar:

 // mars-theme/src/components/index.js
// ... (kod yang ditinggalkan untuk keringkasan) ...

Pakej eksport komponen akar termasuk roots , fills , state , actions , dan libraries . Maklumat lanjut mengenai komponen root berada dalam dokumentasi frontity.

Komponen Tema ( /src/components/index.js )

Komponen tema frontity adalah komponen peringkat akar utama yang dieksport oleh ruang nama Theme . Ia dibalut dengan fungsi @frontity/connect , menyediakan akses kepada state , actions , dan libraries . Ini membolehkan komponen tema membaca keadaan, menggunakan tindakan, dan menggunakan kod dari pakej lain.

 // mars-theme/src/components/index.js
// ... (kod yang ditinggalkan untuk keringkasan) ...

Contoh ini, dari tema Mars /src/components/index.js , menggunakan state.source.get() untuk mendapatkan data untuk membuat komponen seperti senarai dan pos.

Bahagian 2: Bekerja dengan Komponen Senarai

Bahagian sebelumnya meliputi komponen peringkat tema. Sekarang, mari kita periksa komponen tertentu: senarai.

Komponen Senarai dieksport oleh src/components/list/index.js , menggunakan @loadable/components untuk pemisahan kod. Komponen hanya memuat apabila pengguna melihat senarai; Ia tidak diberikan apabila melihat satu siaran.

Memaparkan senarai catatan

Komponen src/components/list/list.js membuat senarai jawatan menggunakan state.source.get(link) dan medan items .

 // src/komponen/senarai/senarai.js
// ... (kod yang ditinggalkan untuk keringkasan) ...

Fungsi connect menyediakan akses kepada keadaan global. list-item.js dan pagination.js juga diimport.

Memasuki senarai jawatan

Komponen Pagination ( src/components/list/pagination.js ) membolehkan pengguna menavigasi antara halaman jawatan.

 // src/komponen/senarai/pagination.js
// ... (kod yang ditinggalkan untuk keringkasan) ...

Fungsi connect memberikan akses kepada keadaan dan tindakan global.

Memaparkan catatan tunggal

Komponen Post memaparkan jawatan dan halaman tunggal. Strukturnya sama, kecuali jawatan termasuk metadata (pengarang, tarikh, kategori, dll.).

 // src/komponen/post.js
// ... (kod yang ditinggalkan untuk keringkasan) ...

Rendering bersyarat memastikan metadata dipaparkan hanya untuk jawatan, dan imej yang dipaparkan ditunjukkan berdasarkan tetapan tema.

Bahagian 3: Pautan, Menu, dan Imej Pilihan

Komponen senarai adalah penting untuk memaparkan jawatan. Mari kita periksa komponen penting lain.

Komponen pautan ( src/components/link.js )

Komponen MarsLink ( src/components/link.js ) adalah pembalut di sekitar komponen @frontity/components/link .

 // src/komponen/link.js
// ... (kod yang ditinggalkan untuk keringkasan) ...

Ia termasuk pengendali untuk menutup menu mudah alih apabila pautan diklik.

Menu Frontity ( src/components/nav.js )

Komponen Nav ( src/components/nav.js ) melangkah ke atas item menu yang ditakrifkan di frontity.settings.js atau keadaan frontity, URL yang sepadan dan memaparkan komponen dalam tajuk.

 // src/komponen/nav.js
// ... (kod yang ditinggalkan untuk keringkasan) ...

Fungsi connect menyediakan akses kepada keadaan. Komponen menu tambahan ( menu.js dan menu-modal.js ) disediakan untuk paparan mudah alih.

Komponen Imej Pilihan ( /src/components/featured-media.js )

Media yang diketengahkan ditakrifkan dalam theme.state.featured komponen root.state.featured. Kod penuh berada di /src/components/featured-media.js .

Bahagian 4: Menggayakan Projek Frontity

Gaya di frontity berbeza dari WordPress. Frontity menyediakan komponen yang boleh diguna semula yang dibina dengan komponen dan emosi gaya, perpustakaan CSS-in-JS.

Menggunakan komponen gaya

Komponen gaya dicipta menggunakan fungsi styled emosi. Contohnya:

 // Membuat komponen gaya butang
import {gaya} dari "frontity";

butang const = styled.div`
  Latar Belakang: LightBlue;
  Lebar: 100%;
  Teks-Align: Pusat;
  Warna: Putih;
`;

Menggunakan prop CSS

Prop css membolehkan gaya inline menggunakan literals templat.

 / * Menggunakan sebagai css prop */
import {css} dari "frontity";

const pinkbutton = () => (
  <div css="{css`background:" pink>
    Butang merah jambu saya
  </div>
);

Menggunakan<global></global> komponen

The<global></global> Komponen menggunakan gaya di seluruh tapak.

 // ... (kod yang ditinggalkan untuk keringkasan) ...

Bahagian 5: Menyesuaikan tema Frontity Mars

Bahagian ini menunjukkan penyesuaian tema Marikh. (Contoh terperinci dan coretan kod yang ditinggalkan untuk keringkasan; rujuk respons asal untuk contoh kod lengkap.) Penyesuaian utama termasuk:

• Menamakan semula pakej tema.
• Navigasi refactoring dengan pengambilan menu dinamik (menggunakan plugin menu WP-Rest-API V2).
• Mengubah struktur fail untuk organisasi yang lebih baik.
• Menambah komponen footer tersuai.
• Menyesuaikan tajuk tema.
• Menambah<global></global> komponen gaya.
• Melaksanakan tipografi cecair.
• Menambah Webfonts.
• Halaman dan jawatan gaya (termasuk gaya blok Gutenberg).

Bahagian 6: Sumber dan Pengakuan

(Senarai sumber dan kredit yang ditinggalkan untuk keringkasan; rujuk respons asal untuk senarai lengkap.)

Kesimpulan: Pemikiran dan Refleksi Akhir

Eksplorasi Frontity dan tema Mars ini menyoroti keramahan pemula, penyelenggaraan yang rendah, dan keserasian dengan tema blok eksperimen. Walau bagaimanapun, kos hosting semasa dan bidang untuk penambahbaikan dokumentasi diperhatikan. Penjelajahan lebih lanjut mengenai pembangunan tapak tanpa kepala menggunakan Gatsby dan Frontity, bersama -sama dengan evolusi tema blok WordPress, dirancang.

Atas ialah kandungan terperinci Tema Mars: Melihat dalam Tema WordPress Headless Frontity. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!