Why LiveCanvas?
by Jeff不論你是一個架站新手或資深網頁全端工程師,你一定聽過下面這些台詞:
- 如果你是專業的 開發人員 / 工程師 ,客製化"手刻代碼"可以確保你有最高的運行效率、彈性、自由度和最佳化效果,但這是一個漫長以及痛苦的過程。
- 使用頁面編輯器是一個比較快速的替代方案,但頁面編輯器也有它的缺點。頁面編輯器通常會產生龐大的
DIV
樹狀結構,而這會對 SEO 、速度、以及代碼維護性帶來影響。這裡面有很多黑盒子 ( 意很難知道裡面的具體內容 ) ,而且要擺脫這個狀況並不容易。 - 另一方面,如果對於主題和套件沒有一個正確的認知,WordPress 可能會從一個好朋友變成一個緩慢死亡的噩夢。一大堆被濫用的"建立在套件上的套件"的網頁設計方法,未來會導致網站無法維護以及性能低落。
遺憾的是,多數人都認為上述的話有一定的道理,卻無法改變什麼。
所以,核心的問題與挑戰是:
能否使用一種"混合"的開發方式,同時具備自由度、擴展性、維護性、開發快速等優點,來創建快速,強大的網站?
我們持續關注這個問題與挑戰,並且提出可行的解決方案。
現存問題
頁面編輯器爛爆了!頁面編輯器的通病大多是:
- 編輯器綁定: 一旦你創建頁面,你就被"綁住"了,必須依賴使用這個頁面編輯
- 差勁的性能: 為了滿足"各種場景需求",因此引入了許多你根本用不到的資源
- 缺乏自由度: 頁面編輯器通常會限制你的 HTML 代碼以一種特定的方式呈現
然而... 另一種方式 ( 手刻代碼 ) 也不是最好的...
手刻代碼也爛爆了!
尤其是,你只有一個人的時候- 您必須是一個能寫出高品質且低錯誤代碼的一流開發者
- 開發速度很慢...超慢! 而且很容易出錯!
- 這會讓你放更多心力在寫代碼的工具,而不是你想傳遞的 內容 / 信息
解決方案
HTML5, WordPress 還有 Bootstrap... 將帶給你前所未有的體驗!LiveCanvas - 是一個創新且強大的工具,能讓你使用 "現成的" Bootstrap 5 區塊快速寫出精練的 HTML
您也可以定義和重用您自己的自定義的 HTML 區塊 - 並使用一些獨特的 HTML5 屬性使文字區域可編輯。
LiveCanvas 是一個方便、無須配置的 WordPress 套件,佔用空間極小,壓縮後不到 150k
!
但是一個編輯器是不夠的。您的下一個優秀的 Web 項目需要一個完整、穩定的基礎。
極致性能的技術棧組合!
與優秀的開源技術結合LiveCanvas ( 頁面編輯器 ) + Picostrap ( 主題 ) + Vanilla WordPress ( 原生 WordPress ) = 極致性能的網站
LiveCanvas 插件經過優化整合,可與 Picostrap ( 一個絕不妥協、性能一流、可靠、開源的系統主題 )一起使用。
Picostrap 是由 CustomStrap 改良後並整合 Bootstrap 5 而來。 ( CustomStrap 是 UnderStrap 的精簡子主題,它是 GitHub 上最受關注的基於 Bootstrap 4 的 WordPress 入門主題。 )
PicoStrap 擁有堅若磐石的基礎,易於客製化以及擴充功能。
使用這種極致性能的技術棧組合,您將獲得一種感覺就像您已經安裝了 緩存 / 快取 插件的速度 - 但您還沒有。
[順道一題,LiveCanvas 可以輕鬆地與任何其他 BootStrap 4、符合標準的 WordPress 主題一起使用,但為了獲得最佳效果和性能保證,建議使用 Picostrap 或 CustomStrap]
愛上 LiveCanvas 的十個理由
LOVE ❤️, LOVE ❤️, LOVE ❤️- 全部都在你的掌控之中
- 您可以從 CodePen 或任何教程中複製
HTML
內容,並在貼在您的頁面中。 - 易於開始
- 建立高效、快速的的網頁
- 您可以查看和優化整個頁面或單個元素的
HTML
代碼 - 編輯頁面時可以預覽所有 RWD ( 手機板 )斷點
- HTML 代碼自動縮排
- 編輯塊時自動修復損壞的
DIV
/元素 - 使用 WordPress 作為後端,利用標準修訂歷史來獲得最大的安全性
- 不綁定其他第三方插件:不使用自訂的短碼(
shortcode
),而是將純粹的 HTML 代碼內容保存在 WordPress 中,您可以用任意方式將內容取出並獨力運用 ( 即便脫離 LiveCanvas 與 WordPress )
LiveCanvas 的故事
因為頁面編輯器爛爆了!建立優秀的網站並不容易。即使在科技發達的 2022 年也不容易。如果有人跟你說做一個網站很簡單,那麼,他一定是外行的!你肯定是被他豪洨了!😂
大部分的建站網站說得其實也沒有錯 —— 技術上說,任何人都可以"建立一個網站" —— 但這只會導致你對你要做的任務本身產生一種完全錯誤的認知。
建一個網站 - 很容易。但把網站"做好做對” - 就沒這麼容易了,為什麼這麼說?恩...無論你的產業是在任何類型的利基市場,為了取得不錯的銷售成果,你"通常"都需要在一些關鍵因素上"做好做對"。
殘酷的事實是,經驗、知識和編寫至少一些 HTML
代碼的能力肯定會對你的建站旅途有所幫助。所以,網站管理員、設計師、開發人員歡呼吧!沒有人會取代你的工作 —— 即使是在到處充滿著"一鍵建站"網站廣告的時代。
[我的故事]
我已經工作了大約 15 年,身兼各種網站的管理員 - 在過去的十年裡,我主要開發和支持一些 WordPress 主題和插件。這讓我有機會查看數百個由不同人組成的 wp-admin
後台面板 - 我已經看了太多普通人對 WordPress 的操作 - 以及經常做出哪種災難級操作。
<免責聲明>
在深入研究之前,讓我說句 ❤️❤️ 我很愛 WordPress ❤️❤️。我從 2005 年開始使用它,2.0 版 - 我認為它是一個非常有價值的工具,可以做非常多非常多非常多事情。WordPress 當然是 Blog 界的王者,也適用於大多數類型的網站 —— 當然也包刮電子商務,即使還是有一些限制。
幾乎無限的主題和套件生態系統是 WordPress 一個巨大的優點 —— 直到你意識到,嗯...裡面有很多很棒的東西,但也有很多根本用不到的功能...:你需要準確地選擇要裝的東西。與電子用品還有軟體一樣,保持簡單 ( keep it simple ) 是減少故障與提高穩定度的黃金法則。
身為一個會寫一點代碼的工程師,我個人在許多項目中使用原生 WordPress,主要是作為一個框架,然後安裝 2~5 個非常有名的套件,然後從頭開始編寫一個或多個自訂套件來處理自定義的邏輯。遵循這種工作方式,我從來沒有遇到過升級 WordPress 核心或插件的問題 —— ( 我一直都這樣做 )而且它在任何性能一般的主機上瀏覽網站或後端時的性能都很好。
</免責聲明>
[問題]
那麼,哪個是我看到一遍又一遍看到可怕行為😵💫?就是,當我看到人們安裝了 20 多個插件,一個具有 200K 的主題和一個頁面編輯器 —— 實際上他們的中小企業只要做一頁網站就夠了 —— 這種情況純靜態的 HTML 就可以做到了。安裝、載入了不必要的套件與功能,然後得到糟糕的結果🤮 - 你通常會得到一個緩慢、低性能的網站,需要很長時間才能在手機上完成加載。對我來說,它就像海灘上的金字塔 - 完全不受約束的消費主義 - 一直裝一直裝一直裝。
當我不得不在這些"無用的怪物站點"上調試問題時,它把我嚇死了😬 —— 因為需要花很多時間才能理解問題在哪裡 —— 這種感覺就像"治標不治本",完全沒有解決真正的問題。當這個網站使用了頁面編輯器以及合理數量的套件時,還有另一件事困擾著我。因為我有 SEO 的相關知識,所以我無法忽視下面這點 —— 頁面編輯器產生的 HTML 標記:為什麼每個頁面編輯器都必須產生十數個嵌套的 DIV
?我想在地獄中一定有這些 DIV
的容身之處😈。
[簡單說就是]
頁面編輯器認為人們無需編寫代碼就可以做任何事情,確實如此,但他們沒有告訴他們這樣做的成本還有代價。那麼,我們可以改變一些事情嗎?作為一名網站管理員,我覺得在臃腫的頁面編輯器和傳統的手刻代碼編輯器中間還有一個 空間 / 機會 。
理想上,難道不能有一個工具來使網站開發過程:有趣、靈活、對新手安全、...但對於會寫代碼的人來說又有極高的擴展性嗎?不知道怎麼的,我想出了一個工具,"假設"我不會寫代碼的狀況下,可以直接操作簡單的可視界面 ( 100%與前端畫面一致 ) 來快速構建頁面,而又不會給開發人員在使用可視頁面編輯器時帶來"綁手綁腳"的感覺。
在業餘時間,我開始開發一些概念與驗證原型,探索開發這種頁面編輯器的可能性,它能夠簡化網頁的創建和編輯 - 可以 控制 / 編寫 整頁 HTML
代碼的頁面 - 但又能節省時間。簡單講就是,一種自動化寫 HTML 代碼的工具。
我真的覺得一路走來的經驗很有用。經過幾年的實驗後,結論是 —— 這個頁面編輯器的想法完全可行,但可能是一個很小的利基市場,不容易做大。
[技術選型]
基本上,我希望 LiveCanvas 是:
-
一種構建超快速網站的方法,它可以存在於 WordPress 中,也可以作為靜態
HTML
網站發佈 ( 獨立於 WordPress 和 Livecanvas ) -
一個可視化編輯器,允許您重用經過良好測試的 RWD 組件並製作自己的組件
-
一個實時的
HTML
代碼編輯器,可以輕鬆優化所有可視化生成的代碼,並將頁面 HTML 保持為的"真實來源"( 因為例如 Elementor 是存入HTML
+JSON
,而 Divi 和 Avada 的 Fusion Builder 都是存入shortcode
短碼 ) -
一個與 WordPress 配合良好的插件,將標準的頁首和頁尾留給主題,允許對頁面進行邊到邊( edge-to-edge )的製作 - 同時保持原本 WordPress 的版型覆寫機制 ( Override ),例如自定義文章類型 ( post type )
-
一個極度輕量級的套件,完全不會對網站添加任何額外的
Javascsript
或CSS
文件 -
一個沒有任何限制的工具 - 可用於製作小型和大型網站
-
一個令人振奮的工具,具有嵌入式"現成的"
HTML
,可滿足現代化的網站設計需求,整合了 SVG 圖庫、Unsplash 免授權圖庫的搜尋 API,以及您需要的一切 -
一個我真的很想建立網頁的地方,並在使用它的時候玩得開心!
為了達到這個目標,技術上需要一些時間才能找到正確的選擇。主要問題之一是使用哪個 CSS 框架;順便說,我在拆解一些流行的 WordPress 頁面編輯器時,我發現他們加載了額外的 CSS 框架,該 CSS 框架被添加到主題中。所以...您最終會擁有一個使用兩種不同網格系統的網站 —— 一種用於前端畫面,一種用於編輯器畫面。這只是頁面編輯器問題中的冰山一角...拜託不要讓我繼續往下說......
我想擁有一個精簡、可靠、開源技術來與 LiveCanvas "合作" —— 以一種可重複、良好且快速的方式開始構建新網站並保證良好的性能,最大限度地減少臃腫。在我探索和測試了許多 CSS 框架的負載、設計思想和入門主題之後...
最終,我決定選擇 Bootstrap 4 ( 現在已經升到 Bootstrap 5 了 ) 作為 CSS 框架。我認為這是當今最好的妥協,用一個真正經歷過實戰考驗的工具來製作一個完美 RWD 的網站 - 特別是它還有龐大的用戶和社群 - 前端開發人員應該會感到痛哭流涕。
為了"合併" WordPress 和 Bootstrap,我需要一個好的入門主題。我最後選擇了 UnderStrap —— 是 GitHub 上最受歡迎的 Bootstrap 4 WordPress 主題 —— 而且它的設定真的很簡單。另一個有趣的替代方案是 Roots.io 的 Sage,但是它對於新手來說開始使用它太複雜了。我想要一些簡單的東西就好。未來我們會支持更複雜的東西。我就是這麼看的。
雖然搭載了主題,但依然擁有完全的 CSS 樣式自由 - 您可以選擇在 UnderStrap 中重新用 SCSS
編譯 Bootstrap 並根據需要在視覺上調整啟動主題 - UnderStrap 是為了特定目的而製作的 - 對懶人來說,我構建了一個免費的 UnderStrap 子主題 - 包含 30+ 現成的 Bootstrap 樣式,以及一些方便的工具 —— 而且一樣保持苗條和純粹。
[未來展望]
今天,LiveCanvas 已經是一個產品,來自英國、德國、澳大利亞、西班牙、法國的一群設計師投入了他們的心血,讓 LiveCanvas 每天都變得更好。我將永遠感激他們 —— 實際上每當我看到他們用 LiveCanvas 建立的網站,不止一次讓我驚艷到不行🤩。 LiveCanvas 已完全準備好在生產環境 ( production environment ) 上使用 - 順便說, LiveCanvas 官網當然也是用 LiveCanvas 做的。我發誓,用 LiveCanvas 工作一定很有趣!
Jeff @ dopewp.com (現在為 LiveCanvas.com)