基於React的框架的Frontity簡化了快速無頭WordPress網(wǎng)站的創(chuàng)建。將其視為WordPress的Next.js。儘管無頭WordPress可能現(xiàn)在是一個利基市場，但Frontity的展示突顯了其日益普及，以CNBC Africa和Forbes Africa等著名網(wǎng)站為特色。它的文檔和教程主要集中在無頭博客上。

本指南詳細介紹了創(chuàng)建基本的前線站點並自定義其默認火星主題（在後續(xù)文章中）。我們將使用Frontity框架掩蓋設(shè)置無頭WordPress網(wǎng)站。

目錄

• 先決條件和要求
• 了解界限
• 界面站點安裝：
  • 步驟1：項目創(chuàng)建
  • 步驟2：選擇火星主題
  • 步驟3：項目安裝
  • 步驟4：目錄更改和服務(wù)器重新啟動
• WordPress網(wǎng)站設(shè)置：
  • 實現(xiàn)漂亮的永久鏈接
• 將界限連接到WordPress：
  • 步驟1：菜單更新
  • 步驟2：項目文件夾結(jié)構(gòu)
  • 步驟3：樣式修改
• 部署到Vercel：
  • 步驟1：構(gòu)建生產(chǎn)版本
  • 步驟2：Vercel帳戶創(chuàng)建
  • 步驟3：創(chuàng)建vercel.json
  • 步驟4：部署
• 結(jié)論
• 資源

這不是專家指南，而是實用的演練。有關(guān)全面的詳細信息，請諮詢Frontity的官方文件。

先決條件和要求

建議熟悉React和ES6 JavaScript。其他要求（詳細介紹了前線文檔）：

• HTML和CSS的能力
• 命令行經(jīng)驗
• node.js服務(wù)器
• 代碼編輯器

了解界限

界限是專門為WordPress設(shè)計的React框架。它具有自己的州經(jīng)理和CSS樣式解決方案。它以兩種模式運行：

• 解耦模式： Frontity從WordPress REST API獲取數(shù)據(jù)，將最終的HTML作為同構(gòu)React應(yīng)用程序提供。主要領(lǐng)域指向前線，以及WordPress的子域。
• 嵌入式模式：前線主題取代了WordPress主題。一個插件向HTML的Frontity Server提出了內(nèi)部HTTP請求。主要域指向WordPress。

Frontity的內(nèi)置AMP功能優(yōu)化了頁面速度。

額葉站點安裝

這涉及建立一個界限項目和一個WordPress站點（作為數(shù)據(jù)源）。

首先，確保安裝node.js和npm：

節(jié)點 -  version
npm- version
NPM安裝NPM@最新-G＃升級NPM（如果需要）

步驟1：創(chuàng)建一個界項目

使用前線CLI：

 NPX界限創(chuàng)造了我的額度

步驟2：選擇火星主題

界限提供了兩個主題；選擇mars-theme 。

步驟3：跨性項目安裝

Frontity Server安裝項目及其依賴關(guān)係。

步驟4：更改目錄並重新啟動開發(fā)服務(wù)器

導(dǎo)航到項目目錄並啟動服務(wù)器：

 CD My-Frontity
NPX前線開發(fā)?；蚣喚€前景開發(fā)

訪問http://localhost:3000 。

WordPress網(wǎng)站安裝

設(shè)置WordPress站點（本地或現(xiàn)有）。確?？梢栽L問WordPress REST API（例如， http://mytestsite.local/wp-json ）。

啟用漂亮的永久鏈接

在設(shè)置>永久鏈接中激活漂亮的永久鏈接（帖子名）。

連接前線與WordPress

更新frontity.settings.js ：

 // Frontity.settings.js
const設(shè)置= {
  ...，，
  軟件包：[
    ...，，
    {
      名稱：“@Frontity/wp-source”，
      狀態(tài)： {
        來源： {
          API：“ http：//your-wordpress-site.com/wp-json” //用您的URL替換
        }
      }
    }
  這是給出的
}

重新啟動服務(wù)器。

步驟1：更新菜單

按照火星主題的結(jié)構(gòu)，將您的菜單項添加到frontity.settings.js 。

步驟2：項目文件夾結(jié)構(gòu)

了解項目的結(jié)構(gòu)： node_modules ， package.json ， frontity.settings.js ， packages/mars-theme 。

步驟3：修改樣式

界限使用情感進行造型。根據(jù)主題組件中需要修改樣式。

部署到Vercel

步驟1：創(chuàng)建生產(chǎn)版本

NPX界限構(gòu)建

步驟2：Vercel帳戶創(chuàng)建

創(chuàng)建一個Vercel帳戶並登錄：

 NPX Vercel登錄

步驟3：創(chuàng)建vercel.json

創(chuàng)建vercel.json ：

 {
  “版本”：2，
  “構(gòu)建”：[
    {
      “ src”：“ package.json”，
      “使用”：“@Frontity/現(xiàn)在”
    }
  這是給出的
}

步驟4：部署

NPX Vercel

結(jié)論

Frontity為構(gòu)建無頭WordPress站點提供了用戶友好的方法。

資源

• 界限文檔
• 前線博客
• 相關(guān)的YouTube教程（搜索“界教程”）

以上是創(chuàng)建一個帶有前景的無頭WordPress網(wǎng)站的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！