Sage是一個WordPress入門主題，具有現(xiàn)代開發(fā)工作流程。
Sage是一個WordPress入門主題，具有現(xiàn)代開發(fā)工作流程。
之前在 reddit 發(fā)過一個問題，wordpress 上是否有類似 Laravel Blade 這樣的模板系統(tǒng)。
第一個回復我的大哥，推薦了?Sage，第一眼看到 Sage 感覺是個龐然大物，加之我對 wordpress 也完全不了解，不明白這貨有什么用。 于是最初選擇了?bladerunner?。
但是，使用 bladerunner 開發(fā)的過程中，我逐步發(fā)現(xiàn)，影響我開發(fā)效率的絕不僅僅是模板的問題，還有前端組件的積累問題； 同時，我也體會到了使用 Sass 寫模塊化可復用的樣式的重要性。
于是，我對于 wordpress 主題開發(fā)工具棧又有了新的要求
- Sass
- 模板系統(tǒng)
- 基礎代碼框架
轉了一圈，發(fā)現(xiàn) Sage 9 完全符合我的這3個需求
- 采用了 Laravel Blade 模板引擎
- 使用 Webpack/npm 替代了 gulp/bower。webpack 我不太熟悉，需要了解，但是 bower 在多年前我就覺得是個垃圾，果然現(xiàn)在死翹翹了。
- ES6. 大兄弟，這個有點激進了。還在我也樂于折騰。
- 內置 bootstrap 4。這個比較雞肋，而且我用 sass 的主要目的是 fuck off bootstrap
來源于：Github
Sage是一個WordPress入門主題，具有現(xiàn)代開發(fā)工作流程。
特征
- Sass的樣式表
- 現(xiàn)代JavaScript
- Webpack用于編譯資產(chǎn)，優(yōu)化圖像以及連接和縮小文件
- Browsersync用于同步瀏覽器測試
- 刀片作為模板引擎
- 用于將數(shù)據(jù)傳遞到Blade模板的控制器
- CSS框架（可選）：Bootstrap 4，Bulma，F(xiàn)oundation，Tachyons，Tailwind
請參閱roots-example-project.com上的工作示例。
要求
在繼續(xù)之前，請確保已安裝所有依賴項：
- WordPress?> = 4.7
- PHP?> = 7.1.3（已
php-mbstring啟用） - 作曲家
- Node.js?> = 8.0.0
- 紗
主題結構
themes / your-theme-name / ＃ →基于Sage的主題 ├──app/ ＃ →主題 PHP│├──控制器/ ＃ →控制器文件 │├──admin.php ＃ →主題定制器設置 │├─ ─filters.php ＃ →主題過濾器 │├──helpers.php ＃ →輔助功能 │└──setup.php ＃ →主題設置 ├──composer.json ＃ →自動加載的應用程序`/`文件 ├──作曲家。鎖定 ＃ →作曲家鎖定文件（永不編輯） ├──dist/ ＃→內置主題資產(chǎn)（從未編輯） ├──node_modules / ＃ →Node.js的包（從未編輯） ├──的package.json ＃ →Node.js的依賴性和腳本 ├──資源/ ＃ →主題素材和模板 │├ ──resources / ＃ →前端資產(chǎn) ││├──config.json ＃ →編譯資產(chǎn)設置 ││├──構建/ ＃ →Webpack和ESLint配置 ││├──字體/ ＃ →主題字體 ││ ├──圖片/ ＃ →主題圖片 ││├──腳本/ ＃→主題JS ││└──風格/ ＃ →主題風格 │├──的functions.php ＃ →作曲家自動加載，主題包括 │├──的index.php ＃ →切勿手動編輯 │├──screenshot.png ＃ →主題WP管理員的截圖 │├──style.css ＃ →主題元信息 │└──視圖/ ＃ →主題模板 │├──布局/ ＃ →基本模板 │└──部分/ ＃ →部分模板 └──供應商/ ＃ →Composer包（永不編輯）
主題設置
編輯app/setup.php以啟用或禁用主題功能，設置導航菜單，發(fā)布縮略圖大小和側邊欄。
主題發(fā)展
yarn從主題目錄運行以安裝依賴項- 更新
resources/assets/config.json設置： devUrl?應該反映您的本地開發(fā)主機名publicPath應反映您的WordPress文件夾結構（/wp-content/themes/sage適用于非Bedrock安裝）
看完后一臉懵逼？沒關系，我也是，所以我用了這個
