Membangun Tema Gatsby Untuk Situs Web yang Didukung WordPress

Gatsby adalah kerangka kerja sumber terbuka yang dibangun di atas React. Dengan Gatsby, Anda dapat menarik data dari (hampir) di mana saja dan menggunakannya untuk menghasilkan situs web statis atau dinamis. Data dapat diambil dari CMS, yang pasti membawa WordPress ke meja. Anda mendapatkan keuntungan dari situs web statis (kecepatan, keamanan, hosting statis) sambil terus mengelola konten Anda melalui dasbor WordPress.

Salah satu kekhasan kerangka kerja Gatsby adalah ia mengusulkan tema sebagai alat penyesuaian. Sebagai seseorang dengan latar belakang yang kuat di WordPress, saya menemukan konsep tema Gatsby sangat menarik. Saya dulu mendesain dan mengembangkan tema WordPress. Namun, dengan meningkatnya minat pada solusi Jamstack, saya secara bertahap beralih bekerja dengan WordPress sebagai CMS tanpa kepala. Pada artikel ini, saya ingin berbagi beberapa konsep yang telah saya pelajari dari transisi ini.

Catatan: Sebelum kita melangkah lebih jauh, mari kita fokus pada alat yang akan kita gunakan. Gatsby menyediakan plugin resmi gatsby-source-wordpress. Untuk membuatnya berfungsi, kita perlu menyiapkan ujung WordPress kita. Lebih tepatnya, kita perlu mengekspos data WordPress rasa Gatsby melalui GraphQL API. Dalam praktiknya, itu berarti menginstal dua plugin WordPress WPGraphQL dan WPGatsby. Keduanya tersedia melalui repositori plugin WordPress resmi dan tidak memerlukan konfigurasi apa pun.

Apa Itu Tema Gatsby?

Tema Gatsby adalah sekelompok fungsi bersama yang diabstraksikan dalam paket Node.js. Oleh karena itu, sebuah tema ditakdirkan untuk diterbitkan (ke registri seperti npm) dan digunakan kembali sebagai dependensi yang dapat diinstal.

Karena kita berbicara tentang Gatsby dan WordPress di sini, saya akan langsung menjelaskannya — ada kesamaan dengan tema WordPress, tetapi kita tidak boleh menyamakan pengertian tema WordPress dengan tema Gatsby. Untuk seseorang dengan latar belakang WordPress (seperti saya), disosiasi mungkin sulit pada awalnya.

Tema WordPress adalah sistem templat wajib yang mendefinisikan apa yang kita lihat di bagian depan. Tanggung jawab tema WordPress yang baik berakhir di sini. Seharusnya tidak memperkenalkan fungsionalitas apa pun karena fungsionalitas adalah wilayah plugin. Oleh karena itu, ada pemisahan yang ketat antara tema dan plugin di ekosistem WordPress. Tema harus menangani lapisan presentasi, dan plugin menangani aspek fungsional.

Mengikuti definisi Gatsby, tema bertanggung jawab atas fungsionalitas . Bukankah seharusnya kita menyebutnya plugin? Sebenarnya, Gatsby, seperti halnya WordPress, memiliki plugin dan tema. Plugin, seperti halnya tema, adalah paket Node.js yang dapat diinstal yang mengimplementasikan API Gatsby. Dan sebenarnya, tema Gatsby adalah plugin Gatsby. Jika plugin memiliki bagian, halaman, atau bagian dari halaman di situs — kami menyebutnya tema.

Selain itu, tidak seperti WordPress, Gatsby tidak memerlukan penggunaan tema untuk membangun situs. Sebagai gantinya, Anda mungkin akan mulai membuat situs Anda dengan menyiapkan proyek yang terstruktur seperti di bawah ini:

Tidak apa-apa sampai Anda memiliki lebih dari satu situs untuk dipelihara. Dalam hal ini, Anda mungkin ingin mengabstraksikan bagian umum dari proses dan mengelola (versi dan memperbarui) secara terpisah.

Berkat sistem tema Gatsby, Anda dapat menggabungkan bagian-bagian yang dibagikan ke dalam satu paket (atau beberapa paket), menerbitkan paket dan akhirnya menginstalnya di berbagai aplikasi. Perhatikan, bahwa saya menggunakan paket bentuk jamak — Anda dapat menggabungkan beberapa tema dalam sebuah proyek.

Tema dan Bayangan Anak

Saat bekerja dengan Gatsby dan WordPress, Anda akan mengidentifikasi beberapa fungsi inti yang umum untuk semua proyek. Maksud saya di sini: sumber data dan membangun halaman secara dinamis. Tampaknya bermanfaat untuk memiliki tema yang menangani logika sumber data dan pembuatan halaman. Di sisi lain, bagaimana Anda memutuskan untuk menampilkan halaman Anda dapat berubah dari satu proyek ke proyek lainnya. Apa pun yang Anda tetapkan di tingkat inti, Anda mungkin perlu menggantinya di beberapa titik.

Salah satu pendekatan yang mungkin adalah memiliki tema inti (induk) dan membangun tema anak di atas tema inti.

Apa yang saya maksud dengan tema anak Gatsby?

Mari kita lanjutkan dengan perbandingan tema anak WordPress. Tema anak WordPress memungkinkan kami untuk menambahkan fungsionalitas dan mengganti template. Mereka menyediakan cara yang aman untuk meningkatkan dan memodifikasi tema yang ada.

Tema anak Gatsby menggunakan tema induk sebagai pluginnya. Kita kemudian dapat menggunakan konsep shadowing yang memberi tema anak kemampuan untuk menimpa file tema induk; itu mirip dengan mengganti template WordPress dalam tema anak. Membayangi berarti kita dapat mengganti file dari direktori src yang disertakan dalam bundel webpack. Perlu digarisbawahi bahwa bayangan dimungkinkan pada tingkat proyek (di mana kami menggunakan tema kami sebagai paket). Kita akan melihatnya beraksi nanti di artikel ini.

Dengan WordPress, kami dibatasi hanya pada satu tema induk, hanya satu tema anak, dan tidak ada rantai lebih lanjut yang memungkinkan. Dengan fleksibilitas tema Gatsby, kita bisa melangkah lebih jauh. Dimungkinkan untuk membuat konfigurasi berbeda dari rantai induk-anak.

Sekarang mari kita lihat tema Gatsby beraksi. Dalam contoh kita, kita akan membangun dua tema, gatsby-theme-wp-parent dan child-theme gatsby-theme-wp-child . Saya memilih pengaturan ini demi kesederhanaan. Dalam skenario dunia nyata, Anda mungkin ingin menguraikan fungsionalitas Anda menjadi lebih banyak tema, masing-masing dengan beberapa tanggung jawab khusus.

Kami akan menerbitkan tema kami, menginstalnya dalam proyek, dan menambahkan penyesuaian lebih lanjut melalui bayangan tingkat proyek.

Pengaturan Pengembangan

Ilustrasi terakhir menggambarkan struktur proyek pengguna akhir ( situs) , di mana tema dikonsumsi. Mereka diinstal sebagai dependensi proyek. Pengaturan ini mengasumsikan bahwa tema tersedia melalui beberapa repositori npm, yang berarti kami telah menerbitkannya. Kami belum sampai di sana. Kita perlu membangun tema induk dan anak terlebih dahulu. Tapi seperti apa pengaturan pengembangannya ? Tema kami adalah dua paket independen, tetapi kami perlu mengerjakannya secara paralel dalam satu proyek selama pengembangan. Selain itu, kami ingin menyiapkan demo dalam proyek yang sama yang mengimplementasikan tema secara langsung.

Salah satu solusi yang mungkin adalah ruang kerja benang. Dengan ruang kerja benang, kami bekerja dalam satu mono-repo dengan satu file kunci di tingkat akar proyek. Selain itu, dependensi dapat dihubungkan bersama, yang berarti bahwa ruang kerja saling bergantung satu sama lain, dan kami menggunakan versi lokal selama pengembangan.

Bagaimana cara mengatur ruang kerja benang? Pertama, pastikan benang sudah terpasang secara global. Selanjutnya, di root monorepo Anda, tambahkan file package.json yang menentukan ruang kerja:

 { "private": true, "workspaces": [ "packages/*", "demo" ] }

Sekarang, setiap tema adalah subfolder di dalam packages dengan file package.json sendiri dan entri utama yang kosong index.js . Saya melanjutkan seperti itu dengan setiap tema yang saya tambahkan:

 mkdir packages/gatsby-theme-wp-parent touch packages/gatsby-theme-wp-parent/package.json packages/gatsby-theme-wp-parent/index.js

Dengan package.json sebagai berikut:

 { "name": "@pehaa/gatsby-theme-wp-parent", "version": "1.0.0", "license": "MIT", "main": "index.js" }

Kami akan membahas penerbitan tema sedikit lebih jauh. Namun, untuk saat ini, perhatikan bahwa kami akan menerbitkan tema kami sebagai paket cakupan; Saya menggunakan nama panggilan saya @pehaa sebagai ruang lingkup di sini. Ingatlah bahwa, jika Anda memutuskan untuk menerbitkan paket cakupan ke registri npm publik https://registry.npmjs.org, Anda harus menyatakan akses publik secara eksplisit dan menambahkan yang berikut ini ke file package.json mereka:

 "publishConfig": { "access": "public" }

Selain tema, kami juga membutuhkan ruang kerja demo tempat kami akan mencoba kode kami. Demo harus berupa paket "private" karena tidak seharusnya dipublikasikan.

 // demo/package.json { "private": true, "name": "demo", "version": "1.0.0", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "clean": "gatsby clean" } }

Dengan pengaturan ruang kerja, kami dapat menjalankan skrip pengembangan atau pembuatan dari mana saja di monorepo kami dengan menentukan skrip dan ruang kerja seperti:

 yarn workspace demo develop

Omong-omong, Anda tidak terbatas pada satu demo saja. Misalnya, GatsbyWPThemes GatsbyWPThemes kami berisi beberapa demo yang kami tambahkan ke direktori examples . Dalam hal ini, file package.json tingkat akar mendefinisikan ruang kerja sebagai berikut:

 "workspaces": [ "packages/*", "examples/*" ]

Membangun Tema Gatsby

Pertama-tama, kita perlu menginstal react , react-dom dan gatsby . Kita perlu menginstal ketiganya sebagai dependensi rekan ( -P ) di setiap tema dan sebagai dependensi di demo kita. Kami juga menginstal tema induk sebagai ketergantungan tema anak dan tema anak sebagai ketergantungan demo.

 yarn workspace @pehaa/gatsby-theme-wp-parent add -P react react-dom gatsby yarn workspace @pehaa/gatsby-theme-wp-child add -P react react-dom gatsby yarn workspace @pehaa/gatsby-theme-wp-child add "@pehaa/gatsby-theme-wp-parent@*" yarn workspace demo add react react-dom gatsby "@pehaa/gatsby-theme-wp-child@*"

Catatan : Anda tidak dapat menambahkan @pehaa/gatsby-theme-wp-parent atau @pehaa/gatsby-theme-wp-child tanpa nomor versi. Anda harus menentukannya sebagai @* atau @1.0.0 . Tanpa itu, npm akan mencoba mengambil paket dari repositori alih-alih menggunakan yang lokal. Kemudian, ketika kami menerbitkan paket kami dengan Lerna, semua * akan secara otomatis diperbarui ke versi tema saat ini dan tetap sinkron.

Tema Induk

Sekarang mari kita fokus pada tema induk dan dependensinya:

 yarn workspace @pehaa/gatsby-theme-wp-parent add gatsby-source-wordpress gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp gatsby-awesome-pagination

Tanggung jawab tema induk kami adalah memuat plugin sumber dan tiga plugin yang diperlukan untuk memproses dan menampilkan gambar. Kami memuat semuanya di file gatsby-config.js .

 // gatsby-config.js module.exports = (options) => { return { plugins: [ 'gatsby-plugin-sharp', // must have for gatsby 'gatsby-transformer-sharp', // must have for gatsby images 'gatsby-plugin-image', { resolve: 'gatsby-source-wordpress', options: { url: `${options.wordPressUrl}/graphql`, }, }, ], } }

Selain sumber konten, kita perlu membangun rute untuk konten WordPress kita secara dinamis. Kita perlu membuat rute untuk halaman statis WordPress, posting individual, arsip blog, arsip kategori, dan arsip tag. Gatsby menyediakan createPages API sebagai bagian dari Gatsby Node API. Mari kita lihat kode yang bertanggung jawab untuk pembuatan posting individu.

 exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions const postsQuery = await graphql(` query GET_POSTS { allWpPost(sort: {order: DESC, fields: date}) { edges { node { uri id } } } } `) const posts = postsQuery.data.allWpPost.edges posts.forEach(({ node }) => { createPage({ path: node.uri, component: path.resolve('../src/templates/post-query.js'), context: { // Data passed to context is available in page queries as GraphQL variables // we need to add the post id here // so our blog post template knows which blog post it should display id: node.id }, }) }) }

Anda dapat menemukan kode lengkapnya di repositori GitHub ini. Anda mungkin memperhatikan bahwa itu bervariasi tergantung pada jenis halaman. Ini berbeda untuk posting, halaman, atau arsip, terutama dengan pagination yang diterapkan untuk yang terakhir. Namun, itu mengikuti pola yang sama:

• jalankan kueri "dapatkan item" async graphql ;
• loop di atas item yang dihasilkan dan jalankan fungsi pembantu createPage untuk setiap item, dengan meneruskan:
  • jalan,
  • component — file templat; Gatsby harus tahu apa yang harus ditampilkan setiap halaman,
  • context — data apa pun yang mungkin dibutuhkan template (disediakan di bidang component ).

Karena kami tidak ingin khawatir tentang bagian UI dalam tema induk — kami mendelegasikannya ke komponen yang akan kami bayangan di tema anak.

 // src/templates/post-query.js import { graphql } from "gatsby" import Post from "../components/Post" export default Post export const pageQuery = graphql` query ($id: String!) { wpPost(id: { eq: $id }) { # query all usefull data } } `

Komponen Post memiliki akses ke data dari kueri halaman graphql yang ditentukan dalam file template. Komponen kami menerima hasil kueri melalui props sebagai props.data . File komponen kami terpisah dari template tetapi memiliki akses ke datanya. Dengan pengaturan ini, kita dapat membayangi komponen Post tanpa harus menulis ulang kueri.

 // src/components/Post.js import React from 'react' const Post = (props) => { return <pre>{JSON.stringify(props.data, null, 2)}</pre> } export default Post

Tema Anak

Sekarang, mari beralih ke tema anak dan menambahkan dependensinya.

Catatan : Saya memilih untuk menggunakan UI Chakra sebagai perpustakaan komponen, ini didasarkan pada emosi dan dilengkapi dengan plugin Gatsby sendiri. Kami juga perlu menginstal gaya khusus konten WordPress dari @wordpress/block-library .

 yarn workspace @pehaa/gatsby-theme-wp-child add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled @wordpress/block-library framer-motion gatsby-plugin-webfonts html-react-parser

Tanggung jawab tema anak adalah bagian UI, dan kita perlu mengganti output yang dihasilkan oleh tema induk. Agar bayangan berfungsi, kita perlu mengikuti struktur file dari tema induk. Misalnya, untuk mengganti komponen Post dari gatsby-theme-wp-parent/src/components/Post.js kita perlu membuat file Post.js di gatsby-theme-wp-child/src/@pehaa/gatsby-theme-wp-parent/components . Folder perantara @pehaa sesuai dengan cakupan paket gatsby-theme-wp-parent .

Melewati Opsi Ke Tema

Kami memuat dan mengonfigurasi plugin gatsby dalam file gatsby-config.js . Kami akan memiliki tiga file konfigurasi dalam pengaturan kami, satu di setiap level, tema induk kami, tema anak, dan demo.

 ├── demo │ └── gatsby-config.js ├── packages │ ├── gatsby-theme-wp-child │ │ └── gatsby-config.js │ └── gatsby-theme-wp-parent │ └── gatsby-config.js └── ...

Pada tingkat demo, konfigurasi memuat tema anak seperti:

 // demo/gatsby-config.js module.exports = { plugins: [ { resolve: '@pehaa/gatsby-theme-wp-child', options: { wordPressUrl: process.env.GATSBY_WP_URL, /* other options */ }, }, ], }

Seperti yang Anda lihat di atas, kami memberikan opsi ke tema anak. Ini akan tersedia dalam file konfigurasi pada level tema anak. Itu mungkin karena plugin Gatsby memiliki konfigurasi yang diekspor sebagai fungsi. Jadi, ketika kita memuat plugin yang menyediakan beberapa opsi, plugin menerimanya sebagai argumen dari fungsi konfigurasinya. Secara khusus, opsi yang kami berikan ke sebuah tema dapat "diteruskan" ke tema tingkat induknya seperti:

 // gatsby-theme-wp-child/gatsby-config.js const defaultFonts = ... module.exports = (options) => { // destructure option to extract fonts const {fonts, ...rest} = options return { plugins: [ { resolve: `@pehaa/gatsby-theme-wp-parent`, options: { // "forward" the options gatsby-theme-wp-child options to its parent theme ...rest } }, '@chakra-ui/gatsby-plugin', { resolve: `gatsby-plugin-webfonts`, options: { fonts: fonts || defaultFonts }, }, ], } }

Mari kita lihat kembali kode di atas. Perhatikan bahwa kami mendefinisikan wajah font pada tingkat tema anak, tetapi kami tetap memiliki kemungkinan untuk memodifikasinya melalui opsi tema.

 // demo/gatsby-config.js module.exports = { plugins: [ { resolve: `@pehaa/gatsby-theme-wp-child`, options: { wordPressUrl: process.env.GATSBY_WP_URL, fonts: { google: [{family: "Rubik"}], }, }, }, ], }

Saat mengonfigurasi tema kita, kita harus ingat bahwa tema hanyalah sebuah paket, dan pengguna akhir tidak secara langsung mengakses kodenya. Oleh karena itu, ada baiknya untuk berpikir ke depan dan mengekspos pengaturan yang tepat. Jika tema kita memuat plugin yang memerlukan konfigurasi, kita mungkin harus meneruskan opsi plugin dari tingkat proyek (demo) ke bawah.

Mari kita lihat sebuah contoh. Tema induk kami menggunakan plugin gatsby-source-wordpress yang mengambil data dari WordPress. Plugin ini hadir dengan banyak opsi, beberapa di antaranya mungkin penting untuk proses pembuatan, seperti schema.requestConcurrency , atau schema.timeout . Tetapi, sekali lagi, tema induk hanyalah sebuah paket, dan pengguna akhir tidak dapat mengedit file gatsby-config nya. Ini mungkin tampak jelas, tetapi entah bagaimana kami melewatkannya dalam rilis awal Tema WP Gatsby. Namun, dengan perbaikan cepat, pengguna dapat meneruskan opsi gatsby-plugin-source-wordpress dari konfigurasi proyek…

 // user's project gatsby-config.js module.exports = { plugins: [ { resolve: `@pehaa/gatsby-theme-wp-child`, options: { wordPressUrl: process.env.GATSBY_WP_URL, gatsbySourceWordPressOptions: {}, // ... }, }, ], }

… melalui tema anak dan induk ke plugin tujuan:

 // packages/gatsby-theme-wp-parent/gatsby-config.js module.exports = (options) => { return { plugins: [ // ... { resolve: `gatsby-plugin-source-wordpress`, options: { url: `${options.wordPressUrl}/graphql`, ...options.gatsbySourceWordPressOptions }, }, ], } }

Tema CSS

Solusi CSS-in-JS yang mendukung tema tampaknya cocok untuk tema Gatsby. Tema anak Gatsby kami akan menggunakan kerangka UI Chakra, dan kami akan sedikit menyesuaikan tema CSS-nya. Ya, Chakra UI juga menggunakan pengertian “tema”. Dalam konteks ini, tema adalah objek JavaScript yang menyimpan nilai gaya sistem desain, skala, dan/atau token desain. Untuk menghindari kebingungan, saya akan menyebutnya sebagai "tema CSS". Kami telah menginstal paket @chakra-ui yang diperlukan bersama dengan plugin Gatsby @chakra-ui/gatsby-plugin . Mari jelajahi kode plugin untuk mengetahui cara kerjanya. Ini sebenarnya membungkus aplikasi Gatsby kita ke dalam ChakraProvider dan mengekspos file src/theme.js untuk dibayangi, sehingga kita dapat melanjutkan seperti ini:

 /* packages/gatsby-theme-wp-child/src/@chakra-ui/gatsby-plugin/theme.js */ import { extendTheme } from "@chakra-ui/react" const theme = { fonts: { body: "Karma, sans-serif", heading: "Poppins, sans-serif", }, styles: { global: { body: { color: "gray.700", fontSize: "xl", }, }, }, components: { Button: { baseStyle: { borderRadius: "3xl", }, defaultProps: { colorScheme: "red", }, }, }, } export default extendTheme(theme)

Sekali lagi, kami menggunakan konsep bayangan. Aspek kunci di sini adalah lokasi di mana kita membuat file theme.js .

Nanti, kita akan melihat bagaimana membayangi tema CSS di tingkat proyek pengguna.

Menerbitkan Tema Dengan Lerna

Setelah tema Anda siap, Anda perlu mempublikasikannya. Jika Anda ingin membagikan kode Anda secara publik, kemungkinan besar Anda akan mempublikasikannya ke registri npm publik. Dan jika Anda belum pernah memublikasikan paket sebelumnya, Anda dapat membiasakan diri dengan prosesnya dengan bermain dengan Verdaccio di komputer lokal Anda.

Di Gatsby WP Themes, kami menggunakan layanan premium dari Cloudsmith. Cloudsmith mendukung pendaftar berfitur lengkap untuk paket npm dengan opsi premium untuk pendaftar pribadi dan solusi gratis untuk yang publik. Saya akan melanjutkan dengan solusi Cloudsmith gratis. Setelah Anda membuat akun, buat repositori baru; milik saya adalah pehaa/gatsby-wp-theming .

Untuk membuat perubahan pada registri Cloudsmith Anda melalui baris perintah Anda, Anda harus memberikan kredensial masuk Anda untuk registri ini. Ketik saja:

 npm login --registry=https://npm.cloudsmith.io/organistion/repository_name/

dan Anda akan dimintai nama pengguna Anda, kata sandi Anda (yang merupakan KUNCI API Anda), dan email Anda.

Dengan repositori git multi-paket, Anda mungkin ingin menggunakan Lerna untuk memfasilitasi penerbitan. Lerna sangat cocok dengan ruang kerja benang. Anda dapat menginstal Lerna CLI secara global dengan npm install --global lerna . Untuk memulainya dalam proyek kami, kami akan menjalankan perintah berikut:

 lerna init --independent

Perintah di atas akan membuat file lerna.json di root monorepo. Anda harus menambahkan "useWorkspaces" : true dan "npmClient": "yarn" secara manual; Anda mungkin juga perlu menentukan command.publish.registry jika itu bukan npm publik default.

 { "npmClient": "yarn", "useWorkspaces": true, "version": "independent", "command": { "publish": { "registry": "https://cloudsmith.io/organisation/repository_name" } } }

Kemudian, perintah lerna publish menerbitkan paket yang telah diubah sejak rilis terakhir. Secara default, Lerna menjalankan perintah untuk perubahan versi setiap paket yang diperbarui. Anda dapat melewati perintah dengan menjalankan:

 lerna publish [major|minor|patch|premajor|preminor|prepatch|prerelease] --yes

Anda juga dapat mengonfigurasi Lerna untuk menggunakan Spesifikasi Komit Konvensional untuk menentukan versi bump dan menghasilkan file CHANGELOG.md. Dengan semua opsi yang tersedia, Anda seharusnya dapat menyesuaikan cara Anda menggunakan Lerna dengan alur kerja Anda.

Menggunakan Tema Dalam Proyek

Sekarang, mari kita hentikan server pengembangan dan ambil perspektif pengguna. Kami akan membuat proyek baru, gatsby-wp-site , yang mengimplementasikan gatsby-theme-wp-child sebagai paket yang diinstal dari repositori npm. Di dalam folder proyek kami, kami akan menginstal empat dependensi kami: gatsby , react , react-dom , dan tema itu sendiri. Karena kami menggunakan Cloudsmith untuk menerbitkan paket @pehaa -scoped, kami harus menambahkan file .npmrc di mana kami menentukan repositori @pehaa -scoped seperti:

 mkdir gatsby-wp-site cd gatsby-wp-site echo "@pehaa:registry=https://npm.cloudsmith.io/pehaa/gatsby-wp-theming/" >> .npmrc yarn init -yp yarn add react react-dom gatsby @pehaa/gatsby-theme-wp-child

Situs kami hampir siap. Kita hanya perlu membuat gatsby-config.file untuk memuat tema dan menyediakan URL WordPress. Setelah selesai, kita siap menjalankan gatsby build .

 // gatsby-config.js module.exports = { plugins: [ { resolve: "@pehaa/gatsby-theme-wp-child", options: { wordPressUrl: "https://yourwordpress.website" } } ] }

Situs kami sudah siap.

Bagaimana dengan kustomisasi? Kita masih bisa memanfaatkan shadowing. Apalagi level proyek selalu diutamakan dalam hal shadowing. Mari kita lihat aksinya dengan mengganti komponen Footer. Saat ini, footer kita didefinisikan di @pehaa/gatsby-theme-wp-child/src/components/Footer.js . Kita perlu membuat folder src dan membuat ulang struktur file berikut:

 gatsby-wp-site ├── src │ └── @pehaa │ └── gatsby-theme-wp-child │ └── components │ └── Footer.js

Dengan struktur file di atas, kami siap menyediakan versi baru dari footer situs. Sebagai contoh:

 import React from "react" import { useStaticQuery, graphql } from "gatsby" import { Box } from "@chakra-ui/react" const Footer = () => { const data = useStaticQuery(graphql` query { wp { generalSettings { title } } } `) return ( <Box as="footer" p="6" fontSize="sm" bg="gray.700" color="white" mt="auto" textAlign="center" > <b>{data.wp.generalSettings.title}</b> - Built with WordPress and GatsbyJS </Box> ) } export default Footer

Terakhir, mari kita lihat bagaimana kita dapat bekerja dengan tema CSS. Dengan kode seperti di bawah ini, terletak dengan benar di src/@chakra-ui/gatsby-plugin/theme.js Anda dapat memperluas tema default di dalam proyek.

 // src/@chakra-ui/gatsby-plugin/theme.js import { extendTheme } from "@chakra-ui/react" const theme = { /* ... */ } export default extendTheme(theme)

Dalam kebanyakan kasus, ini bukan yang Anda butuhkan. Tema CSS baru mengabaikan tema dari gatsby-theme-wp-child , sedangkan Anda ingin memperluas set tema CSS di tema anak Gatsby. Yang terakhir ini dimungkinkan karena fungsi extendTheme memungkinkan Anda untuk melewatkan banyak objek. Untuk membuatnya berfungsi, Anda harus mengimpor tema CSS dari gatsby-theme-wp-child dan meneruskannya sebagai argumen kedua ke fungsi extendTheme :

 // src/@chakra-ui/gatsby-plugin/theme.js import theme from "@pehaa/gatsby-theme-wp-child/src/@chakra-ui/gatsby-plugin/theme" import { extendTheme } from "@chakra-ui/react" const extendedTheme = { fonts: { body: "Rubik, sans-serif", heading: "Rubik, sans-serif", }, /* ... */ } export default extendTheme(extendedTheme, theme)

Anda dapat melihat situsnya secara langsung di sini, itu digunakan dari cabang utama repo GitHub ini.

Membungkus

Anda baru saja melihat tema Gatsby beraksi. Dengan pendekatan tema, Anda dapat dengan cepat mengatur beberapa situs Gatsby dengan sebagian besar kode mereka dipertahankan dalam paket tema. Kita juga telah melihat bagaimana memisahkan bagian-bagian dari proyek menjadi paket-paket dan bagaimana memanfaatkan shadowing.

Dalam contoh kami, kami telah mengikuti pengaturan dua tema dengan hubungan induk-anak antara tema. Ini mungkin tidak selalu menjadi pilihan yang ideal.

Terkadang, Anda mungkin ingin melangkah lebih jauh dengan kustomisasi UI. Dalam hal ini, Anda dapat mempertimbangkan untuk memuat dan membayangi secara langsung tema induk daripada menggunakan tema anak. Dalam skenario dunia nyata, Anda mungkin akan memilih beberapa tema tingkat anak yang bertanggung jawab untuk berbagai bagian UI yang dapat digunakan kembali (misalnya komentar, formulir, atau pencarian).

Bacaan Lebih Lanjut Di Majalah Smashing

• Membangun API Dengan Fungsi Gatsby
• Fungsi Tanpa Server Gatsby Dan Stasiun Luar Angkasa Internasional
• Uangkan Perangkat Lunak Sumber Terbuka Dengan Fungsi dan Garis Gatsby
• Smashing Podcast Episode 20 Dengan Marcy Sutton: Apa Itu Gatsby?