วิธีสร้างไซต์ WordPress แบบ Headless ด้วย Faust.js (ใน 9 ขั้นตอน)

หากคุณต้องการใช้ WordPress headless เฟรมเวิร์กคุณภาพเป็นสิ่งที่ต้องมี อย่างไรก็ตาม แม้จะได้รับความช่วยเหลือเล็กน้อยจากเฟรมเวิร์กที่ทันสมัย ​​แต่คุณอาจยังคงประสบปัญหาในการดูตัวอย่างเนื้อหาของคุณอย่างมีประสิทธิภาพ

นั่นคือที่มาของ Faust.js เฟรมเวิร์กใหม่นี้ควบคุมพลังของ Next.js และ React และรวมสิ่งนี้เข้ากับฟีเจอร์การแสดงตัวอย่างโพสต์ที่สะดวก ด้วย Faust.js คุณสามารถดูเนื้อหาของคุณก่อนที่จะกด เผยแพร่ เหมือนกับเว็บไซต์ WordPress ทั่วไป

ในบทความนี้ เราจะสำรวจว่าเหตุใดคุณจึงอาจต้องการใช้ Faust.js สำหรับโครงการ WordPress ที่ไม่มีส่วนหัว จากนั้นเราจะแสดงวิธีตั้งค่าเฟรมเวิร์กใหม่นี้และสร้างส่วนหน้าอย่างง่าย มาเริ่มกันเลย!

ทำไมคุณอาจต้องการเรียกใช้ไซต์ WordPress ที่ไม่มีหัว

ระบบจัดการเนื้อหาทั่วไป (CMS) ประกอบด้วยส่วนหน้าและส่วนหลัง และ WordPress ก็ไม่มีข้อยกเว้น อย่างไรก็ตาม มันเป็นไปได้ที่จะเรียกใช้ WordPress หัวขาด

'หัว' หมายถึงเลเยอร์การนำเสนอ ในขณะที่ 'เนื้อหา' เป็นที่จัดเก็บและเขียนเนื้อหา ด้วยการลบส่วนหน้า (ส่วนหัว) ออกจากส่วนหลัง (เนื้อหา) คุณสามารถเรียกใช้ WordPress แบบไม่มีส่วนหัว

ด้วยโปรเจ็กต์หัวขาด คุณจะยังคงใช้แดชบอร์ดและเครื่องมือ WordPress ที่คุ้นเคย อย่างไรก็ตาม คุณมีอิสระในการออกแบบส่วนหน้าของคุณเอง โดยไม่ขึ้นกับข้อจำกัดปกติของ WordPress ซึ่งช่วยให้คุณควบคุมวิธีการแสดงเนื้อหาของคุณได้อย่างสมบูรณ์

การสร้างส่วนหน้าของคุณเองอาจเป็นโอกาสที่น่าตื่นเต้น แต่ก็ไม่ได้ตรงไปตรงมาเป็นพิเศษ โชคดีที่มีเครื่องมือที่สามารถยกของหนักให้คุณได้มาก

ผู้ใช้ CMS ที่ไม่มีหัวหลายคนเลือกที่จะขอความช่วยเหลือจากเครื่องมือ เช่น Frontity, Gatsby framework หรือ Next.js ที่ใช้ React อย่างไรก็ตาม ตามธรรมเนียมแล้ว การแสดงตัวอย่างโพสต์และเพจบนไซต์ที่ไม่มีส่วนหัวนั้นทำได้ยาก แม้ว่าจะใช้เฟรมเวิร์กก็ตาม นั่นคือที่มาของ Faust.js:

เฟรมเวิร์กนี้สร้างขึ้นจาก Next.js และ React และมุ่งมั่นที่จะมอบประสบการณ์การเผยแพร่ที่สอดคล้องกับ WordPress แบบดั้งเดิม เพื่อให้บรรลุสิ่งนี้ Faust.js นำเสนอตัวอย่างเนื้อหาที่ไร้รอยต่อ

Faust.js ยังใช้ไคลเอ็นต์ GraphQL สิ่งนี้ทำให้คุณสามารถสืบค้น WordPress WPraphQL API โดยไม่ต้องทราบการสืบค้น GraphQL ล่วงหน้า

นอกจากนี้ Faust.js ยังมีกลไกในตัวสำหรับตรวจสอบสิทธิ์ส่วนหลังของ WordPress ทำให้ง่ายต่อการสร้างเนื้อหาที่มีรั้วรอบขอบชิดและไซต์อีคอมเมิร์ซด้วย CMS ที่ไม่มีส่วนหัวของคุณ

วิธีสร้างไซต์ WordPress แบบ Headless ด้วย Faust.js (ใน 9 ขั้นตอน)

ตอนนี้เราได้พูดถึงสิ่งที่ Faust.js คืออะไรและประโยชน์หลักๆ บางส่วนแล้ว เรามาดูกันว่าคุณจะเริ่มต้นใช้งานเฟรมเวิร์กนี้ได้อย่างไร ต่อไปนี้เป็นวิธีสร้าง CMS ที่ไม่มีส่วนหัวด้วย Faust.js ในเก้าขั้นตอน

ขั้นตอนที่ 1: เตรียมสภาพแวดล้อมการพัฒนาของคุณ

ก่อนที่คุณจะเริ่มต้น คุณจะต้องติดตั้ง Node.js และ Node Package Manager (NPM) คุณจะต้องติดตั้ง WordPress ซึ่งคุณสามารถโฮสต์ในเครื่องหรือบนเว็บเซิร์ฟเวอร์ก็ได้

คุณจะใช้ปลั๊กอิน WordPress สองสามตัว ก่อนอื่น ปลั๊กอิน WPraphQL จะเปลี่ยน WordPress เป็น GraphQL API พร้อมให้โปรเจ็กต์ของคุณใช้งานได้

คุณจะต้องใช้ WPE Headless ด้วย ปลั๊กอินนี้มีคุณสมบัติพิเศษบางอย่างที่ช่วยให้แน่ใจว่า WordPress ทำงานอย่างถูกต้องในฐานะ CMS ที่ไม่มีส่วนหัว คุณสามารถดาวน์โหลดเวอร์ชันล่าสุดของปลั๊กอินนี้ แล้วอัปโหลดไปยังแดชบอร์ด WordPress ของคุณ

เพื่อช่วยให้คุณเริ่มต้นใช้งานเฟรมเวิร์ก Faust.js คุณจะต้องใช้โปรเจ็กต์ตัวเริ่มต้น create-next-app สิ่งนี้จะสร้างแอปพลิเคชัน Next.js ที่บูตสแตรปพร้อมการกำหนดค่าและไฟล์ที่จำเป็นทั้งหมดที่มีอยู่แล้ว จากนั้นคุณสามารถใช้สิ่งนี้เป็นพื้นฐานสำหรับโครงการ Faust.js ที่ไม่มีส่วนหัวของคุณ

คุณสามารถติดตั้ง create-next-app โดยใช้เครื่องมือ npx ซึ่งมาพร้อมกับ NPM ในหน้าต่าง Terminal หรือ Command Prompt ในเครื่องของคุณ ให้เรียกใช้สิ่งต่อไปนี้:

 npx create-next-app faust-headless-demo

นี้จะสร้าง โปรเจ็กต์ faust-headless-demo ในไดเร็กทอรี ผู้ใช้ ในเครื่องของคอมพิวเตอร์ของคุณ เมื่อกระบวนการนี้เสร็จสิ้น Terminal จะแจ้งให้คุณเริ่มแอปพลิเคชัน Next.js โดยใช้คำสั่งต่อไปนี้:

 cd faust-headless-demo npm run dev

ขอแสดงความยินดี คุณเพิ่งสร้างโครงการ Next.js สำเร็จ! หากต้องการดูแอปพลิเคชันนี้ ให้ไปที่ “http://localhost:3000” ในเบราว์เซอร์ของคุณ:

ตอนนี้คุณควรเห็นไซต์เริ่มต้น Next.js หากคุณพบข้อความแสดงข้อผิดพลาด ให้ลองเรียกใช้คำสั่ง npm run dev อีกครั้ง ซึ่งอาจช่วยแก้ปัญหาได้

ขั้นตอนที่ 2: ตั้งค่า TypeScript

Faust.js ใช้ TypeScript ซึ่งเป็น superset แบบพิมพ์ของ JavaScript ที่เพิ่มการตรวจสอบประเภทเวลาคอมไพล์ สิ่งนี้ทำให้คุณสามารถตรวจจับข้อผิดพลาดในขณะคอมไพล์ แทนที่จะรอจนถึงรันไทม์ ในการติดตั้ง TypeScript ให้รันคำสั่งต่อไปนี้ใน Terminal ของคุณ:

 npm install --save-dev @types/react npm install typescript --save-dev

ตอนนี้ คุณต้องสร้างไฟล์ tsconfig.json ไฟล์นี้ระบุตัวเลือกคอมไพเลอร์ที่จำเป็นสำหรับการรันโครงการของคุณ:

 npx tsc --init

เมื่อคุณตั้งค่า TypeScript แล้ว คุณจะต้องแปลงไฟล์ JavaScript บางไฟล์ให้อยู่ในรูปแบบ TypeScript ไปที่ไดเร็กทอรี Users ในเครื่องของคุณ ซึ่งควรมี ไดเร็กทอรี faust-headless-demo ใหม่:

ภายใน faust-headless-demo ให้เปิดไดเร็กทอรี เพจ ตอนนี้คุณสามารถเปลี่ยนชื่อไฟล์ _app.js เป็น _app.tsx และแทนที่เนื้อหาด้วยสิ่งต่อไปนี้:

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

ถัดไป เปลี่ยนชื่อ pages/index.js เป็น pages/index.tsx แอป Next.js ของคุณได้รับการกำหนดค่าอย่างถูกต้องสำหรับ TypeScript แล้ว

ขั้นตอนที่ 3: สร้างส่วนประกอบ React ที่นำกลับมาใช้ใหม่ได้

ณ จุดนี้ คุณสามารถนำโปรเจ็กต์ของคุณไปทดสอบโดยแสดงเนื้อหาจำลอง ในไดเร็กทอรีเพจท้องถิ่นของคุณ ให้สร้างไฟล์ posts.tsx :

ในไฟล์นี้ คุณจะต้องป้อนข้อความ หากเนื้อหาต่อไปนี้ปรากฏในเบราว์เซอร์ของคุณ คุณจะรู้ว่าแอปพลิเคชัน Next.js ของคุณได้รับการกำหนดค่าอย่างถูกต้อง:

 export default function PostsPage() { return <h1>The posts page</h1>; }

ในเบราว์เซอร์ของคุณ ให้ไปที่ “http://localhost:3000/posts” ตอนนี้คุณควรเห็นเนื้อหาจำลองนี้:

เมื่อคุณได้ตรวจสอบการตั้งค่าของคุณแล้ว ขั้นตอนต่อไปคือการสร้างส่วนประกอบ React พื้นฐาน ในที่สุด คุณจะใช้องค์ประกอบนี้เพื่อแสดงรายการโพสต์ WordPress ทั้งหมดของคุณ

แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มส่วนประกอบ React ทั้งหมดของคุณไปยังไดเร็กทอรีเฉพาะ เมื่อคำนึงถึงสิ่งนี้ ให้ไปที่รูทของโปรเจ็กต์และสร้างโฟลเดอร์ ส่วนประกอบ :

ภายในไดเร็กทอรีนี้ ให้สร้างไฟล์ post.tsx องค์ประกอบ React สามารถรับข้อมูลจากองค์ประกอบหลักผ่านอุปกรณ์ประกอบฉาก ในตัวอย่างนี้ คุณจะต้องส่งชื่อและเนื้อหาของแต่ละโพสต์ไปยังองค์ประกอบของโพสต์

ใน TypeScript คุณสามารถทำสิ่งนี้ได้โดยการสร้างอินเทอร์เฟซเพื่อแมปข้อมูลที่คุณต้องการส่ง ภายในไฟล์ posts.tsx ของคุณ ให้เพิ่มสิ่งต่อไปนี้:

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

ตอนนี้คุณมีส่วนประกอบ React ที่นำกลับมาใช้ใหม่ได้ ขั้นตอนต่อไปคือการใช้องค์ประกอบนี้ในหน้าโพสต์ของคุณ

ขั้นตอนที่ 4: แสดงรายการโพสต์

ในการเริ่มต้น ให้เปิดไฟล์ pages/posts.tsx ณ จุดนี้ คุณเพียงแค่ให้ข้อมูลปลอม ซึ่งคุณจะแสดงในรูปแบบรายการ:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

คุณสามารถสร้างรายการโพสต์โดยวนซ้ำผ่านอาร์เรย์โพสต์ คุณต้องแสดงองค์ประกอบ Post สำหรับแต่ละรายการ:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

บันทึกการเปลี่ยนแปลงของคุณ และปิดไฟล์นี้ จากนั้นตรงไปที่ “http://localhost:3000/posts”:

แท็บนี้ควรแสดงรายการโพสต์ปลอม เมื่อคุณเชื่อมต่อ Faust.js กับส่วนหลังของ WordPress แล้ว คุณจะใช้องค์ประกอบ React เพื่อแสดงรายการโพสต์ในชีวิตจริงของเว็บไซต์ของคุณ

ขั้นตอนที่ 5: กำหนดค่า Faust.js Framework

ในที่สุดคุณก็พร้อมที่จะตั้งค่าเฟรมเวิร์ก Faust.js แล้ว ในการเริ่มต้น ติดตั้งการพึ่งพาการผลิตและการพัฒนาโดยรันคำสั่งต่อไปนี้:

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

จากนั้นไปที่ไดเรกทอรีรากของโครงการ ภายในโฟลเดอร์นี้ ให้สร้างไฟล์ faust.config.js ใหม่:

คุณจะใช้ไฟล์นี้เพื่อเชื่อมต่อ Faust.js กับส่วนหลังของ WordPress ตอนนี้คุณสามารถป้อนรหัสต่อไปนี้:

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

ภายในไดเรกทอรีนี้ คุณจะต้องสร้างไฟล์ . env.local ด้วย สิ่งนี้จะเก็บตัวแปรสภาพแวดล้อมทั้งหมดของคุณ:

ภายใน .env.local ให้เพิ่มรหัสต่อไปนี้ อย่าลืมแทนที่ เว็บไซต์ ของคุณด้วย URL ของคุณเอง:

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

นอกจากนี้ คุณจะต้องแทนที่ YOUR_PLUGIN_SECRET ด้วยความลับที่ไม่มีหัวของเว็บไซต์ของคุณ คุณสามารถค้นหาข้อมูลนี้ได้โดยไปที่ การตั้งค่า > หัวขาด ในแดชบอร์ด WordPress ของคุณ:

Faust.js จะใช้ความลับที่ไม่มีหัวนี้เพื่อตรวจสอบความถูกต้องของคำขอไปยัง WordPress ทำให้สามารถดูตัวอย่างเนื้อหาฉบับร่างที่ส่วนหน้าของคุณได้

ขั้นตอนที่ 6: กำหนดค่าไคลเอนต์ GraphQL ของคุณสำหรับ Faust.js

Faust.js ใช้ GQty เป็นไคลเอนต์ GraphQL ในการกำหนดค่า GQty ให้สร้างไฟล์ gqty.config.js ในไดเรกทอรีรากของโครงการของคุณ:

ขณะนี้คุณสามารถเปิดไฟล์นี้เพื่อแก้ไขได้ ภายใน gqty.config.js ให้คัดลอกและวางสิ่งต่อไปนี้:

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

ขั้นตอนต่อไปคือการสร้างไคลเอ็นต์ GQty ซึ่งคุณจะใช้ในการสืบค้นข้อมูลเว็บไซต์ของคุณ ในรูทของโปรเจ็กต์ของคุณ ให้สร้างไดเร็กทอรี ไคลเอนต์ ใหม่ ภายในโฟลเดอร์นี้ ให้สร้างไฟล์ index.ts ที่มีรหัสต่อไปนี้:

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

ขณะนี้ คุณสามารถบันทึกการเปลี่ยนแปลง และปิดไฟล์ index.ts เมื่อคุณมีชิ้นส่วนทั้งหมดแล้ว คุณก็พร้อมที่จะสร้างสคีมา GraphQL แล้ว

ขั้นตอนที่ 7: เรียกใช้สร้างสคริปต์

ขั้นตอนต่อไปคือการเพิ่มสคริปต์สร้างไปยังไฟล์ package.json ของคุณ สคริปต์นี้จะสร้างสคีมาที่จำเป็นตามโครงสร้างของไซต์ WordPress ของคุณ

หากต้องการเพิ่มสคริปต์นี้ ให้ไปที่โฟลเดอร์รูทของโปรเจ็กต์และเปิดไฟล์ package.json คุณสามารถเพิ่มสคริปต์ สร้าง ไปยังบล็อกโค้ดแรกได้:

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

ก่อนเรียกใช้สคริปต์นี้ คุณจะต้องเปิดใช้งานการวิปัสสนาสาธารณะสำหรับเว็บไซต์ของคุณเป็นการชั่วคราว ในแดชบอร์ดของ WordPress ให้ไปที่ GraphQL > Settings จากนั้นเลื่อนไปที่ เปิดใช้งานการวิปัสสนาสาธารณะ และเลือกกล่องกาเครื่องหมายที่มาพร้อมกัน:

คลิก บันทึกการเปลี่ยนแปลง ตอนนี้คุณสามารถเรียกใช้สคริปต์ สร้าง โดยป้อนคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

 npm run generate

สคริปต์นี้จะสร้างไฟล์ client/schema.generated.ts ณ จุดนี้ คุณสามารถปิดใช้งานการวิปัสสนาสาธารณะภายในแดชบอร์ด WordPress ของคุณได้

ขั้นตอนที่ 8: กำหนดส่วนประกอบ FaustProvider และ Hook

ตอนนี้ คุณต้องห่อแอปพลิเคชัน Next.js โดยใช้องค์ประกอบ <FaustProvider> ในตัว React Higher-Order Component นี้จะจัดเตรียม Faust.js พร้อมบริบทที่จำเป็นในการดึงข้อมูลและแคชข้อมูล

เพื่อให้บรรลุสิ่งนี้ ให้เปิดไฟล์ pages/_app.tsx ของโปรเจ็กต์ จากนั้นคุณสามารถแทนที่เนื้อหาด้วยสิ่งต่อไปนี้:

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

ตอนนี้คุณพร้อมที่จะสืบค้นข้อมูลจากส่วนหลังของ WordPress แล้ว คุณจะใช้เบ็ด usePosts ซึ่งมีอินเทอร์เฟซมาตรฐานที่ดึงรายการโพสต์จาก WordPress API ที่ไม่มีส่วนหัว

เปิดไดเร็กทอรี pages/posts.tsx และลบโค้ด Lorem Lipsum ต้นแบบทั้งหมด จากนั้นคุณสามารถใช้ usePosts hook:

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

ไฟล์สคีมาที่คุณสร้างจะส่งออกประเภทโพสต์ ซึ่งหมายความว่าคุณสามารถใช้ประเภทนี้เพื่อกำหนดอุปกรณ์ประกอบฉาก Post ในการยอมรับ Post prop ให้เปิดไฟล์ components/post.tsx และเพิ่มสิ่งต่อไปนี้:

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

คุณสามารถระบุว่าคุณต้องการรับเนื้อหาที่แสดงผลหรือเนื้อหาดิบหรือไม่ ในโค้ดด้านบน คุณกำลังเลือกแสดงเนื้อหา

ขั้นตอนที่ 9: เชื่อมต่อ Faust.js กับเว็บไซต์ WordPress ของคุณ

ขั้นตอนสุดท้ายคือการสร้างลิงก์ระหว่างข้อมูลของคุณกับองค์ประกอบโพสต์ คุณต้องเพิ่มโค้ดบรรทัดเดียวในไฟล์ posts.tsx :

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

หลังจากทำการเปลี่ยนแปลงเหล่านี้แล้ว ให้โหลด “http://localhost:3000/posts” ในเบราว์เซอร์ของคุณ ตอนนี้คุณควรเห็นรายการโพสต์ทั้งหมดจากเว็บไซต์ WordPress ของคุณ:

หากโพสต์ของคุณไม่ปรากฏขึ้น ให้ยุติกระบวนการทำงานโดยปิดเทอร์มินัลของคุณ จากนั้นเปิดหน้าต่างใหม่และใช้คำสั่ง change directory เพื่อให้ Terminal ชี้ไปที่โปรเจ็กต์ Faust.js ในพื้นที่ของคุณ (เช่น cd /Users/username/faust-headless-demo ) จากนั้นคุณสามารถเริ่มเซิร์ฟเวอร์การพัฒนา ( npm run dev ) และลองรีเฟรชหน้า “http://localhost:3000/posts”

บทสรุป

นักพัฒนา WordPress ที่ไม่มีหัวหลายคนเลือกใช้เฟรมเวิร์ก อย่างไรก็ตาม เมื่อถึงเวลาดูตัวอย่างเนื้อหา เฟรมเวิร์กจำนวนมากบังคับให้คุณลงชื่อเข้าใช้ไซต์ภายนอกหรือดูหน้าแสดงตัวอย่างภายในเฟรม

Faust.js มุ่งมั่นที่จะมอบประสบการณ์การดูตัวอย่างที่สม่ำเสมอและราบรื่น เมื่อคุณตั้งค่าเฟรมเวิร์กนี้ คุณจะสามารถดูเนื้อหาของคุณโดยใช้เวิร์กโฟลว์ WordPress ที่คุ้นเคย คุณยังเข้าถึงชุดเครื่องมือ React และ Node.js ที่คุ้นเคยได้อีกด้วย

คุณมีคำถามใด ๆ เกี่ยวกับเฟรมเวิร์ก Faust.js หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!