Dalam artikel saya yang terdahulu, saya membincangkan bagaimana saya belajar untuk membuat laman web Gatsby yang dikuasai oleh WordPress menggunakan plugin Gatsby Source WPGraphql. Projek ini dilakukan berikutan versi perkembangan WPGraphQL yang berterusan dan tutorial yang sangat baik oleh Henrik Wirth. Walaupun WPGraphQL digunakan di beberapa tapak pengeluaran pada masa itu, terdapat banyak lelaran yang memperkenalkan perubahan pecah. Sejak pelepasan WPGraphql v1.0 November lalu, plugin stabil dan tersedia melalui Direktori Plugin WordPress.
Plugin WPGraphQL boleh digunakan untuk membuat tapak yang menggunakan WordPress untuk pengurusan kandungan, tetapi dengan bahagian depan yang didorong oleh Gatsby. Kami memanggil ini sebagai "cms decoupled" atau "tanpa kepala" kerana back-end dan front-end tapak adalah entiti berasingan yang masih bercakap antara satu sama lain melalui API di mana komponen di bahagian depan mengambil data dari CMS.
Tapak plugin WPGraphQL mempunyai dokumentasi langkah demi langkah yang kukuh untuk memulakan, dan pos pengumuman pelepasan menyenaraikan sembilan contoh tapak peringkat pengeluaran menggunakan plugin.
Dalam erti kata sebenar tapak "decoupled" atau "tanpa kepala", WPGraphQL boleh digunakan untuk data Port WordPress ke rangka kerja lain, seperti Next.js, Vue.js, antara lain. Untuk rangka kerja Gatsby, plugin sumber WordPress Gatsby disyorkan, dan ia menggunakan WPGraphQL untuk sumber data dari WordPress.
Mari kita buat semuanya bersama -sama dan melawat plugin.
Dalam artikel saya yang terdahulu, kami meliputi prasyarat yang diperlukan untuk menubuhkan laman web WordPress dan Gatsby, dan memindahkan data WordPress back-end ke tapak depan Gatsby yang berkuasa dengan penempatan tapak. Saya melangkau banyak butiran di sini kerana konsep asas adalah sama untuk artikel ini, kecuali data WordPress diambil oleh plugin sumber Gatsby WordPress kali ini.
Jika anda baru ke Gatsby dan baru sahaja melompat ke dalam Gatsby's Generator Generator Statik yang dihasilkan, saya akan mencadangkan membaca "Kajian Jujur Gatsby" oleh pakar React David Cramer dan "Gatsby vs Next.js" oleh Jared Palmer. Apa yang akan kami sampaikan bukan untuk semua orang, dan artikel -artikel ini mungkin berguna untuk menilai sendiri sama ada teknologi yang sesuai untuk anda dan projek anda.
WPGraphql, atau GraphQL adalah API bahasa pertanyaan utama yang digunakan dalam rangka kerja Gatsby. Terdapat kemas kini yang kerap dalam GraphQL dan yang sering memerlukan pengetahuan pakar dan mengawasi perubahan. Lagipun, GraphQL direka oleh pakar React untuk pakar React yang lain. Yang mengatakan, terdapat beberapa arahan penyelesaian masalah dan kendur WPGraphQL di mana kedua -dua WPGraphQL dan Gatsby Source WordPress plugin penulis secara aktif mengambil bahagian dan membantu menjawab soalan.
Artikel ini bukan panduan langkah demi langkah mengenai cara menggunakan plugin sumber WordPress Gatsby. Sekali lagi, itu sudah tersedia dalam dokumentasi Gatsby. Sebaliknya, jika anda menjadi pakar dalam React, JavaScript, Node.js atau Graphql, maka apa yang kami sampaikan di sini mungkin perkara yang sudah anda ketahui. Artikel ini adalah sekeping pendapat berdasarkan pengalaman peribadi saya, yang saya harap berguna untuk pengguna WordPress purata dengan pengetahuan asas kerja mengenai subjek.
Dan, sebelum kita memulakan, patut disebutkan bahawa plugin Sumber WordPress Gatsby telah ditulis semula sepenuhnya dalam versi 4 dan menggunakan WPGraphQL sebagai sumber datanya. Pelepasan sebelumnya, Versi 3, dibina dengan API REST sebagai sumber datanya. Oleh kerana versi stabil plugin baru -baru ini dikeluarkan, bilangan tema starter dan demo yang menyokongnya adalah terhad.
Untuk projek ini, saya menubuhkan laman web WordPress yang baru dengan Local by Flywheel yang menggunakan dua puluh dua tema lalai. Saya mengimport data ujian unit tema untuk halaman dan jawatan, seperti yang diterangkan dalam Codex WordPress. Walaupun ini adalah garis dasar yang saya bekerjasama, ini mungkin dengan mudah menjadi tapak WordPress yang sedia ada sama ada pada pelayan jauh atau pemasangan tempatan.
Sekarang kita mempunyai garis dasar yang mantap, kita boleh log masuk ke pentadbir WordPress dan memasang plugin WPGraphQL dan WPGATSBY yang kita perlukan dan mengaktifkannya.
Seperti yang kita hadapi dalam artikel sebelumnya, apa yang dilakukannya ialah mendedahkan API GraphQL dan WPGraphiQL dalam admin WordPress, yang membolehkan API GraphIQL untuk membuat "taman permainan" untuk menguji pertanyaan GraphQL berdasarkan data WordPress.
Gatsby terkenal dengan dokumentasi yang baik dan templat starter pepejal. Untuk membuat laman web WordPress yang baru, tutorial Gatsby mencadangkan sama ada menggunakan starter atau bermula dari awal adalah baik untuk apa yang kita lakukan.
Gatsby juga menawarkan perpustakaan laman web contoh untuk kes penggunaan asas yang dibina di sekitar teknologi tertentu. Pada masa ini terdapat satu yang menggunakan WordPress dan satu yang menggunakan WordPress dengan plugin Fields Custom Advanced. Ambil perhatian bahawa tapak contoh di perpustakaan masih menggunakan plugin Gatsby-Source-WordPress 3 dan belum dikemas kini ke versi 4, seperti penulisan ini.
Menurut tutorial Gatsby, terdapat tiga pilihan untuk mewujudkan tapak Gatsby yang berkuasa WordPress. Mari lihat setiap satu.
Dokumen mempunyai panduan langkah demi langkah tentang cara menubuhkan tapak WordPress-Gatsby, tetapi inilah intipati.
Jalankan perkara berikut dalam baris arahan untuk mengambil starter dari repositori GitHub dan klonnya ke dalam folder projek My-WPStarter:
#! Repo starter klon Gatsby New My-wpstarter https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
Kemudian, pasang pakej NPM
#! npm Pemasangan NPM #! atau benang Benang memasang
Sekarang bahawa starter diklonkan, mari kita buka fail Gatsby-Config.js dalam editor kod kami dan mengemas kini pilihan URLnya untuk mengambil data dari titik akhir WordPress kami (lihat di atas).
// gatsby-config.js
{
Selesaikan: Gatsby-Source-WordPress,
Pilihan: {
// WordPress adalah URL GraphQL.
URL: Process.env.wpgraphql_url || https://wpgatsbydemo.wpengine.com/graphql,
},
},Sekarang, kami akan menggantikan URL Endpoint Sumber Data Starter dengan URL Laman WordPress kami sendiri:
// fail gatsby-config.js
{
Selesaikan: `gatsby-source-wordpress`,
Pilihan: {
URL: `http: // gatsbywpv4.local/graphql`,
},
},Mari kita pastikan kami berada di direktori projek My-WPStarter. Dari folder Projek, kami akan menjalankan arahan Gatsby untuk membina tapak Gatsby baru kami dari titik akhir sumber data WordPress kami. Di terminal kita sepatutnya dapat melihat data pengambilan plugin Gatsby-Source-WordPress, termasuk kesilapan dan proses tapak yang berjaya di sepanjang jalan.
Sekiranya kita melihat mesej Bundle Buangan Pembangunan Kejayaan pada akhirnya, ini bermakna proses membina tapak Gatsby selesai dan laman web ini dapat dilihat di http: // localhost: 8000.
Ini adalah blog starter kosong dengan fail asas dan beberapa komponen. Struktur failnya sangat mirip dengan Gatsby-Starter-Blog, kecuali yang satu ini mempunyai folder Templat yang termasuk Fail Template Blog-Post.js dan Blog-Post-Achive.js.
Apabila kita melihat Explorer API GraphIQL di http: // localhost: 8000/___ graphql kita dapat melihat semua data dari WordPress yang didedahkan oleh WPGraphQL, serta pertanyaan dan mengambil data tertentu dari UI.
Anda mendapatnya! Gatsby menganggap selebihnya terpulang kepada kami untuk membina, menggunakan komponen Gatsby yang menarik data WordPress untuk persembahan.
Dokumentasi Gatsby menawarkan panduan langkah demi langkah terperinci mengenai cara membuat laman WordPress-Gatsby baru dari awal menggunakan tema starter lalai Gatsby.
Kami akan memutar projek baru dari baris arahan:
#! Buat laman web Gatsby baru Gatsby New Wpgatsby-From-Scratch-Demo
Ini membawa kami folder WPGatsby-From-Scratch-Demo yang termasuk tema starter. Dari sini, kami akan CD ke dalam folder itu dan mula membangun:
CD WPGATSBY-FROM-SCRATCH-DEMO Gatsby berkembang
Sekarang kita boleh membuka http: // localhost: 8000 dalam penyemak imbas dan dapatkan halaman selamat datang.
Sekarang kami baik untuk pergi untuk mula merebut data dari laman WordPress kami. Mari pasang plugin Sumber Gatsby:
#! Pasang dengan rpm NPM Pasang Gatsby-Source-WordPress #! Pasang dengan benang Benang Tambah Gatsby-Source-WordPress
Jika kami menyemak penyemak imbas kami sekarang, anda akan mendapati bahawa tiada apa yang berlaku - kami masih mendapat sambutan yang sama. Untuk mengambil data tapak WordPress kami, kami perlu menambah plugin ke fail gatsby-config.js. Buka fail dan masukkan yang berikut:
// gatsby-config.js
modul.exports = {
sitemetadata: {
// ...
},
Plugin: [
// Tambah plugin Gatsby-Source-WordPress
{
Selesaikan: `gatsby-source-wordpress`,
Pilihan: {
/*
* URL penuh API GraphQL Situs WordPress.
* Contoh: 'https://www.example-site.com/graphql'
*/
URL: `http: // gatsbywpv4.local/graphql`,
},
},
// Plugin berikut tidak diperlukan untuk Gatsby-Source-WordPress ....
],
}Sama seperti kali terakhir, kita perlu menukar sumber endpoint data WordPress ke URL tapak WordPress kami. Mari kita jalankan Gatsby berkembang di terminal kita untuk memulakan perkara.
Walau bagaimanapun, apabila kami membuka http: // localhost: 8000 dalam penyemak imbas kami, tiada apa yang berlaku. Kami masih melihat skrin selamat datang yang sama. Tetapi jika kita memeriksa GraphIQL dalam penyemak imbas kami (di http: // localhost: 8000/___ graphql) maka kita melihat semua data WordPress yang terdedah kepada laman Gatsby kami yang dapat kami tanya dan memaparkan seperti yang kami inginkan.
Mari uji pertanyaan berikut yang saya tarik terus dari tutorial Gatsby, dalam Explorer Graphiql:
pertanyaan {
allwppost {
nod {
id
tajuk
petikan
slug
Tarikh (formatstring: "mmmm dd, yyyy")
}
}
}Apabila kita menjalankan pertanyaan di atas, kita akan melihat nilai harta AllWpost.Nodes, dengan sub sifat untuk ID, tajuk, petikan, dan lain -lain.
Sekarang, mari kita buka fail komponen Src/Components/Pages/Index.js kami dan ganti kod dengan ini:
// src/komponen/halaman/index.js
Import React dari "React"
import {graphql} dari "Gatsby"
susun atur import dari "../components/layout"
Import SEO dari "../components/seo"
Eksport fungsi lalai rumah ({data}) {
kembali (
<sepledout>
<seo title="home"></seo>
<h1> Blog WordPress saya </h1>
<h4> Posts </h4>
{Data.AllWPOST.Nodes.Map (node => ((
<dana>
<p> {node.title} </p>
<div dangerouslysetinnerhtml="{{__html:" node.excerpt></div>
))}
atur>
)
}
Eksport const pageQuery = graphql`
pertanyaan {
allWpPost (sort: {fields: [date]}) {
nod {
tajuk
petikan
slug
}
}
}
`</dana></sepledout>Simpan, mulakan semula pelayan dengan Gatsby berkembang, dan muat semula halaman. Sekiranya binaan itu berjaya, maka laman utama laman web kami harus memaparkan senarai catatan blog yang disusun dari WordPress!
Berikutan tutorial, mari buat halaman untuk setiap catatan blog dan hubungkan tajuk pos dari senarai ke halaman pos. Proses membuat halaman menggunakan data markdown diterangkan secara terperinci dalam Bahagian 7 dari tutorial asas Gatsby, yang akan kami ikuti di sini juga.
Seperti yang diterangkan dalam tutorial, Gatsby menggunakan API CreatePages, atau apa yang dipanggilnya sebagai API "Workhorse", untuk membuat halaman secara pemrograman dari data (dari Markdown atau WordPress). Tidak seperti data Markdown, kami tidak perlu membuat slug di sini kerana setiap jawatan WordPress mempunyai slug tersendiri yang boleh diambil dari titik akhir data WordPress.
Gatsby menggunakan fail gatsby-node.js, yang terletak di akar projek kami, untuk membuat programatik membuat catatan blog. Mari buka fail Gatsby-node.js dalam editor teks kami Tambahkan kod berikut dari tutorial.
// gatsby-node.js
Const Path = Memerlukan (`Path`)
Exports.CreatePages = ({Graphql, Actions}) => {
const {createPage} = tindakan
Kembali Graphql (`
{
allWpPost (sort: {fields: [date]}) {
nod {
tajuk
petikan
kandungan
slug
}
}
}
`) .then (result => {
Console.log (json.stringify (hasil, null, 4))
proses.exit ()
})
}Seperti yang dinyatakan dalam tutorial Gatsby Bahagian 7, kod di atas adalah bahagian pertama membuat halaman pos kami dari sumber data WordPress. Berikutan panduan, mari mulakan semula pelayan kami dan mengembangkan laman web kami dengan Gatsby berkembang.
Kita harus melihat output Console.log di terminal kita sebagai halaman yang sedang dibina). Walau bagaimanapun, laman utama kami masih kelihatan sama. Untuk membuat jawatan tunggal, Gatsby memerlukan templat untuk membina halaman, yang akan kami buat dalam langkah seterusnya .. itulah yang akan kami lakukan seterusnya.
Mari buat folder Src/Components/Templates dalam direktori Src/dan buat fail blog-post.js dengan menampal coretan kod berikut dari tutorial:
// src/templates/blog-post.js
Import React dari "React"
susun atur import dari "../components/layout"
import {graphql} dari "Gatsby"
Eksport Fungsi Default BlogPost ({Data}) {
Const Post = Data.AllWPOST.Nodes [0]
Console.log (pos)
kembali (
<sepledout>
<dana>
<h1> {post.title} </h1>
<div dangerouslysetinnerhtml="{{__html:" post.content></div>
atur>
)
}
Eksport const query = graphql`
pertanyaan ($ slug: string!) {
allWpPost (penapis: {slug: {eq: $ slug}}) {
nod {
tajuk
kandungan
}
}
}
`</dana></sepledout>Seperti yang dijelaskan dalam tutorial, coretan kod di atas membuat satu jawatan dengan React JSX dan membungkus post.title dan post.content (baris 12-13) di sekitar komponen Src/Components/Layout.js. Di bahagian bawah fail, pertanyaan GraphQL ditambah dan memanggil jawatan tertentu berdasarkan pembolehubah Slug Post $ slug. Pembolehubah ini diserahkan kepada template blog-post.js apabila halaman dibuat dalam gatsby-node.js.
Seterusnya kita juga harus mengemas kini baris 12-13 fail Gatsby-node.js kami dengan kod berikut dari tutorial.
// gatsby-node.js
Const Path = Memerlukan (`Path`)
Exports.CreatePages = ({Graphql, Actions}) => {
const {createPage} = tindakan
Kembali Graphql (`
{
allWpPost (sort: {fields: [date], order: dec}) {
nod {
tajuk
petikan
kandungan
slug
}
}
}
`) .then (result => {
result.data.allwppost.nodes.Foreach (node => {
createPage ({
Laluan: node.slug,
komponen: path.resolve (`./src/templates/blog-post.js`),
konteks: {
// Ini adalah pembolehubah $ slug yang diluluskan ke blog-post.js
slug: node.slug,
},
})
})
})
}Mari berhenti dan mulakan semula pelayan tempatan kami dengan Gatsby membangun dan melihat laman web ini. Kami tidak akan melihat laman utama kami dengan senarai pautan pos blog. Walau bagaimanapun, jika kita menyemak dengan http: // localhost: 8000/ABCDF kita harus melihat halaman 404 berikut dengan senarai halaman individu dan pautan jawatan.
Jika kita periksa http: // localhost: 8000/hello-gatsby-world, kita harus "Hello Gatsby WordPress World" dalam semua kemuliaannya.
Langkah seterusnya ialah menghubungkan tajuk pos dari laman utama ke jawatan sebenar.
Menghubungkan kerja dari laman utama ke halaman pos dilakukan dengan membungkus tajuk pos dalam fail index.js dengan komponen pautan Gatsby. Mari buka fail index.js yang kami buat sebelum ini dan tambahkan komponen pautan:
// src/komponen/halaman/index.js
Import React dari "React"
import {link, graphql} dari "gatsby"
susun atur import dari "../components/layout"
Import SEO dari "../components/seo"
Eksport fungsi lalai rumah ({data}) {
kembali (
<sepledout>
<seo title="home"></seo>
{/* <h1> Blog WordPress saya </h1>
<h4> Posts </h4> */}
{Data.AllWPOST.Nodes.Map (node => ((
<div key="{node.slug}">
<link to="{node.slug}">
<h2> {node.title} </h2>
<div dangerouslysetinnerhtml="{{__html:" node.excerpt></div>
</div>
))}
atur>
)
}
Eksport const pageQuery = graphql`
pertanyaan {
allWpPost (sort: {fields: [date], order: dec}) {
nod {
tajuk
petikan
slug
}
}
}
`</sepledout>Kami mengimport komponen pautan dari Gatsby dan kemudian membungkus tajuk pos dengan komponen pautan dan merujuk slug jawatan. Mari membersihkan kod dengan mengulas tajuk halaman, menukar elemen tajuk ke
Seperti yang kita lakukan sebelum ini, mari kita berhenti dan mulakan semula pelayan pembangunan dengan Gatsby berkembang, dan lihat laman web kami di http: // localhost: 8000. Tajuk pos harus dihubungkan ke halaman pos tunggal.
Ini sejauh mana kita akan mengambil kaedah kedua ini. Selebihnya dari apa yang kami sampaikan akan menerangkan bagaimana untuk mengambil item menu dan menanyakan jenis data lain - seperti jenis pos tersuai - dan konfigurasikan binaan dan pratonton tambahan dan lain -lain.
Anda boleh menggunakan prosedur yang sama untuk memanggil dan membuat halaman, jenis pos tersuai, bidang tersuai, taksonomi, dan semua kandungan yang menyeronokkan dan fleksibel WordPress dikenali. Ini boleh menjadi mudah atau kompleks seperti yang anda mahukan, jadi terokai dan bersenang -senang dengannya!
-Gatsby Tutorial Doc
Template starter Gatsby untuk WordPress Twenty Twenty Twation Gatsby dicipta dan dikekalkan oleh Henrik Wirth, yang juga mempunyai panduan langkah demi langkah yang sangat terperinci dan menyeluruh yang mungkin anda ingat dari artikel sebelumnya. Starter ini, tidak seperti yang lain, sebenarnya dikemas kini ke versi 4 plugin Sumber Gatsby dan berfungsi keluar dari kotak selepas persediaan WordPress awal yang diterangkan dalam dokumentasi. Ia mengekalkan dua puluh dua puluh gaya yang sama di tapak front-end Gatsby, tetapi mempunyai beberapa batasan-termasuk, komen, halaman arkib bulanan, dan tag-yang tidak disokong.
Mula-mula mari kita klon starter dalam folder dua puluh dua starter kami.
#! Clone Gatsby-starter-wordpress-twenty-twenty gatsby new twenty-twenty-starter https://github.com/henrikwirth/gatsby-starter-wordpress-twenty-twenty
Mari cd ke dalam folder itu dan kemudian jalankan Gatsby berkembang untuk berputar di laman web ini. Ia tidak akan berfungsi dengan betul pada kali pertama kerana kami tidak mengubah nilai wpgraphql_url kami lagi dalam fail env.example. Kita perlu menamakan semula fail dari .env.example kepada hanya .env, seperti yang dicadangkan dalam dokumentasi.
Selepas itu, mulakan semula pelayan pembangunan dengan Gatsby berkembang. Ia harus membina laman web dengan jayanya.
Menu mungkin atau mungkin tidak muncul bergantung pada bagaimana menu WordPress dinamakan. Slug menu starter untuk menu item menu adalah utama dalam menu.js (baris 8). Kerana saya telah menetapkan tapak WordPress saya menggunakan menu utama, saya terpaksa mengemas kini fail menu.js dengan sewajarnya.
Kerana starter telah diuji dengan versi lama alat kami, saya memutuskan untuk membongkar plugin ke versi terkini - WPGraphQL 1.2.6, WPGATSBY 1.0.6, dan Gatsby Source WordPress 4.0.1 - dan ia berfungsi dengan baik tanpa sebarang kesilapan.
Twenty Twenty Starter mengikuti struktur fail tema Twenty Nineteen Gatsby, serta Starter Gatsby WordPress maju. Henrik Wirth menerangkan bagaimana data WordPress dipindahkan ke Gatsby dalam panduan langkah demi langkahnya, seperti juga Muhammad Muhsin dalam tutorial. Jika tidak, membuat halaman, templat halaman, item menu port adalah sama.
Starter ini menggunakan CSS yang sama bahawa WordPress Twenty Twenty Temema, dan folder aset yang sama, termasuk fon, imej, fail SVG, dan fail lain yang dimasukkan dalam tema lalai.
Jika anda gembira dengan WordPress Twenty Twenty Styling, maka itu sahaja. Nikmati laman web Gatsby yang dihancurkan baru anda!
Tetapi katakan kita mahu bekerja dengan gaya tersuai. Fail CSS diimport dari folder Aset melalui fail Gatsby-Browser.js.
Mari kita ubah gaya untuk tajuk tapak, footer, jawatan dan halaman. Gatsby menyediakan pilihan yang berbeza untuk gaya komponennya dan, dalam projek ini, saya mengikuti modul CSS untuk penggayaan dan markup CSS yang diubahsuai dari dua puluh dua komponen starter dengan sewajarnya.
Kita boleh mulakan dengan membuat folder gaya di Src/komponen/gaya dan, di dalamnya, folder asas. Inilah struktur fail umum yang kami targetkan:
#! Struktur separa /folder gaya
SRC
|-/Komponen
|-/Styles
| ---main.css
|-/asas
|-reset.css
| --variables.css
|-/scss
| ---header.module.css
| ---mainnav.module.css
|-footer.module.css
| --elements.module.css
// dan sebagainya ...Kami mahu gaya tajuk dan footer tapak, jadi mari kita buka header.js dan footer.js komponen di starter dan menggantikan kod dengan yang berikut:
// src/komponen/header.js
Import React dari "React"
import {graphql, link, useStaticQuery} dari "Gatsby"
Menu import dari "./menu"
Gaya import dari "../styles/scss/header.module.css"
Logo import dari '../images/gatsby-icon.png'
header const = () => {
const {wp} = useStaticQuery (graphql`
{
wp {
Generalsettings {
tajuk
Penerangan
}
}
}
`)
kembali (
<header classname="{style.masthead}">
<div classname="{style.masthead_info}">
<link to="/">
<img src="%7Blogo%7D" alt="logo" style="max-width:90%" ketinggian="100" paparan="inline-block" marginbottom="0" classname="{style.site_logo}">
<div classname="{style.site_header}">
<div classname="{style.site_title}">
<pautan ke="/" berbahaya>
<div classname="{style.site_description}" dangerouslysetinnerhtml="{{__html:" wp.generalsettings.description></div>
</pautan>
</div>
<menu></menu>
)
}
Eksport Header Lalai<p> Begitu juga, komponen Footer.js diubahsuai seperti berikut:</p>
<pre rel="JavaScript" data-line=""> // src/komponen/footer.js
Import React dari "React"
Gaya import dari "../styles/scss/footer.module.css"
Eksport lalai () => (
<footer classname="{style.colophon}">
<p> © {new date (). getfullear ()} | Laman ini dikuasakan oleh {''} <a href="https://www.gatsbyjs.org"> gatsbyjs </a> {'dan'} <a href="https://www.wordpress.org">
)</a></p></footer>Sekarang, mari mulakan semula pelayan pembangunan kami. Kita harus melihat perkara berikut, termasuk tajuk dan footer yang disesuaikan. Saya menggunakan gaya yang sama dari pembelajaran Gatsby yang merupakan kursus dalam talian oleh Morten Rand-Hendriksen (saya peminat!).
Anda boleh merebut semua kod yang saya gunakan di GitHub.
Terdapat banyak jawatan yang membandingkan kelebihan dan kekurangan laman WordPress dan Jamstack yang dipisahkan seperti contoh Gatsby yang telah kami tutupi. Dalam penyelidikan saya, saya menyedari bahawa tiada seorang pun daripada mereka yang lengkap seperti apa yang telah ditulis oleh Chris dalam "WordPress dan Jamstack" di mana dia membandingkan segala -galanya, dari prestasi dan ciri, kepada pengalaman pemaju dan membina proses, dan seterusnya.
Saya dapati artikel berikut membuat beberapa kesimpulan yang berguna mengenai pelbagai topik, termasuk:
Anggapan umum adalah bahawa hosting Jamstack murah, dan lebih murah daripada hosting stack lampu tradisional. Tetapi sebenarnya ada sedikit yang perlu dipertimbangkan dan kos sebenar anda mungkin berbeza -beza.
Memandangkan semua perkara yang anda dapatkan untuk "Percuma" dalam WordPress-berfikir komen, plugin, integrasi, dan lain-lain-anda mungkin tertanya-tanya sama ada ia bernilai perdagangan dalam persediaan pelayan untuk penyelesaian sampingan klien. Dalam "statik atau tidak?" Siaran, Chris memecahkan sebab -sebab mengapa anda mahu memilih satu daripada yang lain.
Kami mendapat komen asli dari kotak dengan WordPress. Namun, sokongan untuk komen di tapak statik adalah sedikit juggernaut. Dalam "Komen Jamstack" di sini di CSS-Tricks, penulis menerangkan bagaimana komen dinamik boleh dilaksanakan di tapak statik, seperti Gatsby, menggunakan perkhidmatan Netlify. Saya secara ringkas menyentuh perkara ini dalam artikel sebelumnya.
Pada masa ini tidak ada templat Gatsby React yang ditujukan kepada bukan pemaju tetapi beberapa agensi, seperti tema Gatsby WP dan pasaran paling milik mereka, mula mengisi jurang. Sebagai contoh, tema Gatsby WP merangkumi plugin untuk kandungan dinamik seperti integrasi MailChimp, menggunakan plugin Borang 7 Kenalan untuk Borang, Yoast SEO, dan banyak lagi. WorldForest menyenaraikan 30 templat Gatsby, termasuk tema e -dagang Gatsby - WordPress yang memberi anda idea sejauh mana kita boleh pergi dengan persediaan seperti ini. Ingatlah: ini adalah tapak komersial, dan banyak yang anda dapati mempunyai kos yang dilampirkan kepadanya.
Jika anda ingat, saya mengakhiri artikel terakhir saya dengan refleksi peribadi dalam perjalanan saya untuk membuat laman WordPress tanpa kepala yang menggunakan Gatsby sebagai hujung depan. Pengambilan awal saya kurang daripada semakan bercahaya:
Berdasarkan pengalaman saya yang sangat terhad, saya fikir bahawa tema Gatsby WordPress yang ada sekarang tidak bersedia untuk kegunaan masa perdana untuk pengguna seperti saya. Ya, sangat menarik untuk mencuba sesuatu di tepi pendarahan yang jelas dalam minda banyak pengguna WordPress dan pemaju. Pada masa yang sama, kerja yang sentiasa berubah yang dilakukan pada editor WordPress Block, WPGraphql dan Gatsby Source WordPress plugin menjadikannya sukar untuk meramalkan di mana perkara -perkara yang sedang berjalan dan apabila ia akan menyelesaikan keadaan di mana ia selamat untuk digunakan dalam konteks lain.
Oleh itu, selepas semua ini perjalanan panjang saya ke laman WordPress tanpa kepala, apa yang saya ambil sekarang? Sebagai pelajar yang berfikiran terbuka, pemikiran saya masih berkembang. Tetapi saya tidak dapat bersetuju dengan apa yang dikatakan Chris dalam "statik atau tidak?" Pos:
Ia adalah pilihan yang boleh diterima dan sering pintar untuk menjalankan laman web WordPress. Saya berfikir mengenainya dari segi keteguhan dan kesediaan ciri. Perlukan e-dagang? Ada di sana. Perlukan borang? Terdapat plugin yang hebat. Perlu menambah bagaimana CMS berfungsi? Anda mempunyai kawalan ke atas jenis kandungan dan apa yang ada di dalamnya. Perlukan Auth? Itu ciri teras. Berharap anda mempunyai pengalaman penyuntingan yang hebat? Gutenberg adalah mulia.
Saya seorang peminat WordPress dan saya suka WordPress sebagai CMS. Walau bagaimanapun, sebagai cabaran pembelajaran teknologi, saya belum berputus asa untuk mempunyai tapak WordPress yang dipisahkan sebagai projek peribadi.
Saya harus mengakui bahawa pembelajaran untuk membuat tapak Gatsby yang dipisahkan dengan WordPress terus mengecewakan. Saya mengakui bahawa mana -mana timbunan teknologi moden bukan "cawan teh" untuk banyak pengguna WordPress. Gatsby mempunyai lengkung pembelajaran yang curam kerana susunan ini disasarkan untuk pemaju yang berpengalaman dan pemaju JavaScript.
Pembelajaran sendiri teknologi baru boleh menjadi pengalaman yang mengecewakan. Pembelajaran Gatsby sangat mengecewakan jika kita (termasuk anda benar -benar) berlaku kepada kekurangan pengalaman dengan Node, React, JavaScript dan, yang paling penting, Graphql. Laman projek pembelajaran saya akan pecah kerana beberapa kebergantungan dan penetapannya mungkin membawa saya beberapa hari penyelidikan. Saya kadang -kadang tertanya -tanya jika masalah itu bernilai hasilnya. Jangan salahkan saya; Kekecewaan saya adalah dengan kekurangan pengalaman saya sendiri, bukan rangka kerja sendiri (kerana mereka luar biasa).
Malah pemaju yang berpengalaman seperti David Cramer dan Jared Palmer mencari menggunakan Gatsby dan Graphql mengecewakan dan echo beberapa sentimen yang sama yang kita hadapi ketika menggunakan GraphQL. Saya tidak boleh bersetuju dengan David yang menulis:
Ia adalah penjana laman web statik. Ia secara harfiah tidak memerlukan GraphQL di seluruh tempat. Walaupun terdapat beberapa contoh di dunia nyata di mana ia bernilai, ia tidak sepatutnya memerlukan API GraphQL untuk membaca objek yang sudah ada dalam ingatan.
GraphQL adalah API bahasa pertanyaan pendapat dan spesifikasinya sering berubah. Sesungguhnya, kebanyakan perbincangan dalam kendur WPGraphQL berkaitan dengan pertanyaan.
Semasa bekerja pada projek ini, saya menyeberang rangka kerja React Frontity sambil membaca artikel mengenai trik CSS. Ia mengambil semua data WordPress dengan API REST tanpa menulis satu pertanyaan. Itu seolah -olah menjadi pilihan yang lebih baik, sekurang -kurangnya untuk kes penggunaan saya. Di samping itu, nampaknya alternatif yang lebih mudah. Dalam pengalaman ringkas saya dengannya, saya tidak perlu berurusan dengan sebarang masalah pergantungan atau perpustakaan sama sekali. Konsep tema Frontity begitu WordPress-y dan menyediakan tutorial yang sangat baik.
Saya sedang meneroka sama ada kerangka depan akan menjadi pilihan yang lebih baik untuk tapak projek saya yang dihancurkan dan akan berkongsi pengalaman saya dalam artikel masa depan.
Gatsby merasakan ia disasarkan kepada pemaju React dan JavaScript yang berpengalaman, bukan untuk pemula seperti saya! Plugin Gatsby-Source-WordPress dan Gatsby-Source-WPGraphql melakukan tugas yang sangat baik untuk mendedahkan data WordPress ke laman web Gatsby, tetapi selebihnya terpulang kepada pengguna untuk membentangkan data di hujung depan menggunakan rangka kerja pilihan anda: React, Vue, seterusnya, dan lain-lain.
Kekurangan pengetahuan bunyi React dan JavaScript adalah halangan utama untuk pemula. Masyarakat Gatsby mengisi banyak jurang ini, dan terdapat banyak sumber yang tersedia untuk terus belajar dan meneroka.
Dua rundingan bengkel dari Persidangan Gatsby 2021 baru -baru ini berkaitan dengan laman web Gatsby WordPress. Dalam satu, Jason Bahl menjadi tuan rumah bengkel yang berjalan melalui cara membuat blog Gatsby yang dikuasakan oleh data WordPress, termasuk menyokong plugin Yoast SEO, dan bagaimana untuk menggunakan laman web ini ke Gatsby Cloud.
Terdapat satu lagi bengkel yang dihoskan oleh Landers Matt Engine WP di mana dia menunjukkan bagaimana untuk menetapkan perkara menggunakan plugin Fields Advanced Custom untuk membuat halaman ahli pasukan.
Kedua-dua ceramah adalah baik, terutamanya jika anda belajar lebih baik dengan pengalaman tangan. Saya juga mendapati episod podcast MATT Laporan ini dengan Jason Bahl di mana Jason menjawab soalan asas yang ditujukan kepada pemula.
Morten Rand-Hendriksen mempunyai kursus yang sangat baik di LinkedIn Learning yang menggunakan plugin sumber Gatsby WordPress. Sekiranya anda berminat dengan lebih banyak pengalaman membuat tapak yang disesuaikan yang berkembang pada dua permulaan Gatsby yang kami tutupi, kursus ini hebat kerana dalam mengajar bagaimana untuk membuat tapak kerja yang lengkap, lengkap dengan navigasi header dropdown, menu footer, pos, halaman, kategori, tag, dan navigasi halaman.
Fail latihan untuk kursus ini boleh didapati di repositori pembelajaran GitHub LinkedIn.
Pada masa saya menulis ini, terdapat sepuluh pemula Gatsby untuk WordPress. Seperti yang telah disebutkan sebelumnya, hanya Gatsby starter WordPress Twenty Twenty adalah berdasarkan versi terbaru dari plugin WordPress Gatsby Sumber; selebihnya adalah versi 3.
Terima kasih kerana membaca. Saya sentiasa berminat untuk mengetahui bagaimana pengguna WordPress yang kurang pengalaman teknikal seperti saya menggunakan plugin ini. Sekiranya anda mempunyai maklum balas, sila hantarkan mereka dalam komen.
Atas ialah kandungan terperinci Menggunakan plugin WordPress Sumber Gatsby baru. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah yang berlaku apabila saya tidak dapat menyambung ke rangkaian?
connectionresetSolution
Bagaimana untuk mengoptimumkan satu halaman
Bagaimana untuk membeli dan menjual Bitcoin di Huobi.com
Bagaimana untuk menyelesaikan 500 ralat pelayan dalaman
tekan sebarang kekunci untuk memulakan semula
Bagaimana untuk melaksanakan fungsi paging jsp
Pengenalan kepada perisian pemodelan parametrik
Bagaimana untuk melaksanakan skrip shell
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
