使用 WebStorm 開發 Hugo (Modern CSS)
WebStorm 目前並沒有原生支援 Hugo,須另外安裝 Smart Hugo plugin,且不再使用 Prettier 與 Stylelint,直接使用 WebStorm 內建功能,打造 Zero Dependency 與 No Node.js 開發環境。
WebStorm 目前並沒有原生支援 Hugo,須另外安裝 Smart Hugo plugin,且不再使用 Prettier 與 Stylelint,直接使用 WebStorm 內建功能,打造 Zero Dependency 與 No Node.js 開發環境。
原本使用 Theme 開發,或想將別人開發的 Theme 改成 Themeless 架構,只需做少許的改變即可。
WebStorm 目前並沒有原生支援 Hugo,必須另外安裝 Smart Hugo plugin,但原生支援 Prettier 美化 HTML/SCSS/JavaScript,與 Stylelint 加強 CSS 檢查與排序。
Hugo 內建的 Web Server 只能用在 開發階段,無法用在編譯後的 HTML/JavaScript/CSS,需要透過其他 Web Server。
hugo server 預設會以 FastRender ,只渲染 有修改 部分,但這只適合 Content Creator,並不適用於 Theme Creator。
Hugo 編譯時,預設不會先刪除 public 目錄,這導致若你原本刪除了一些 Markdown 或重新命名,將會繼續留在 public 目錄下,可加上 cleanDestinationDir 參數讓 Hugo 在編譯前先刪除 public 目錄。
hugo server 預設會將 HTML/CSS/JavaScript 渲染到 public 目錄下,可加上 renderToMemory 渲染到記憶體,將可加快渲染速度。
Hugo 有一些參數特別適合 開發 與 編譯 時使用,可將最 常用 參數直接寫在 NPM Script。
實務上會想將每個 Template 或 Partial 有自己的 CSS 檔,在開發階段亦保持獨立,直到編譯階段再將所有 CSS 檔合併成單一 CSS 檔。
WebStorm 已經提供 Vue Plugin 完整支援 Vue,唯一只有 .vue 格式縮排部分,Webstorm 與 Vue 的看法迥異,在 Reformat Code 之後,縮排會完全跑掉,需要稍微調整。