最近這段時(shí)間，有花不少精力去做頁(yè)面上的效果交互，這里展開(kāi)聊聊幾款編輯器的使用感受。

目前 WordPress 新版本默認(rèn)使用的都是古騰堡編輯器，這款編輯器非常輕便，整體的體積也不大，使用起來(lái)算是非常簡(jiǎn)單了。

一般使用這款編輯器能實(shí)現(xiàn)非?；A(chǔ)的圖文編輯效果，有點(diǎn)類似于 Office 辦公文檔的效果。

但如果你想在此基礎(chǔ)上實(shí)現(xiàn)更高階一點(diǎn)的頁(yè)面效果，可能就需要在古騰堡的基礎(chǔ)上升級(jí)一下了。

網(wǎng)站的動(dòng)效要求不是很高的話，我會(huì)選擇使用 Astra 主題出的那款 Spectra 編輯器插件。

準(zhǔn)確來(lái)說(shuō)，Spectra 只能算是古騰堡編輯器的功能增強(qiáng)插件，在古騰堡的基礎(chǔ)上實(shí)現(xiàn)了一些比較高級(jí)的功能。

有興趣的話，可以去分別嘗試使用古騰堡編輯器與 Spectra 編輯插件做一個(gè)內(nèi)容相同的區(qū)塊，然后對(duì)比這個(gè)區(qū)塊的源代碼。

你會(huì)發(fā)現(xiàn) Spectra 只是在古騰堡的基礎(chǔ)上套用了一種標(biāo)記規(guī)則，其兩種代碼規(guī)則都比較容易閱讀。

而且 Spectra 提供了一些封裝插件，很大程度上簡(jiǎn)化了頁(yè)面排版操作，所以對(duì)于詢盤(pán)站點(diǎn)這種簡(jiǎn)單頁(yè)面需求的網(wǎng)站，安裝一個(gè) Spectra 插件基本就夠了。

但是 Spectra 的局限也很大，主要就是受限于 WordPress 系統(tǒng)的限制，沒(méi)辦法做到所有區(qū)塊、所有內(nèi)容的全部自定義設(shè)計(jì)。

比如你安裝電商插件后，想去設(shè)計(jì)一版商品詳情頁(yè)或者重構(gòu)一下商品歸檔之類的頁(yè)面，會(huì)發(fā)現(xiàn) Spectra 基本基本無(wú)能為力。

此時(shí)就需要使用更高階一點(diǎn)的編輯器，像老牌的 Elementor，還有一些新興的 Oxygen 之類的。

因?yàn)槲易约阂恢边^(guò)去一直使用的是 Elementor，所以對(duì)這款編輯器更熟悉一些。

你會(huì)發(fā)現(xiàn)當(dāng)你深度使用之后，Elementor 基本能實(shí)現(xiàn)全部頁(yè)面的自定義設(shè)計(jì)，尤其是配合一些第三方功能增強(qiáng)插件的情況下，基本能實(shí)現(xiàn)非?？犰诺膭?dòng)畫(huà)效果。

有時(shí)候我看到一些競(jìng)爭(zhēng)對(duì)手的優(yōu)秀頁(yè)面案例，便想應(yīng)用到我自己的網(wǎng)站上。

此時(shí)便可以借助 Elementor 的能力，用編輯器一比一實(shí)現(xiàn)出來(lái)。

說(shuō)實(shí)話這個(gè)過(guò)程并不難，主要考驗(yàn)的是對(duì)編輯器的熟練能力，先去把這些區(qū)塊的大框架定義好，并約束好區(qū)塊之下各個(gè)組件的內(nèi)外邊距。

剩下就是一個(gè)區(qū)塊一個(gè)區(qū)塊進(jìn)行設(shè)計(jì)了，對(duì)照著參考頁(yè)面，去將圖片、文案等等元素的細(xì)節(jié)寫(xiě)好就行了。

其實(shí)并沒(méi)有什么技術(shù)含量，主要考驗(yàn)的還是耐心操作的能力。

當(dāng)然現(xiàn)在 AI 模型的能力也很強(qiáng)，也可以嘗試將截圖發(fā)送給 AI 然后讓其輸出相應(yīng)的代碼。

這種做法我嘗試過(guò) HTML，直接應(yīng)用在用代碼構(gòu)建的網(wǎng)站上，其效果還不錯(cuò)的。

但目前還沒(méi)嘗試過(guò)讓 AI 輸出 Elementor 的區(qū)塊代碼，后面有機(jī)會(huì)可以試試。