iT邦幫忙

4

簡易的靜態網頁產生器:stasis

  • 分享至 

  • xImage
  •  

自行用指令產生靜態網頁可能會碰到的麻煩維護問題,
可藉著靜態網頁產生器來簡化流程,
stasis 是最簡易的方案。
為何用 stasis
靜態網頁產生器有多種,
功能也很多,
而 stasis 是簡潔而夠用的工具。
stasis 支援許多種的樣版引擎
包括 HAML、Markdown等格式。
想用這些輕量標籤來維護網站,
stasis所提供的功能,
可讓工作更為省力。

先有ruby的程式環境後,再安裝 stasis 就可使用:

$ gem install stasis
Fetching: directory_watcher-1.4.1.gem (100%)
Successfully installed directory_watcher-1.4.1
Fetching: slop-3.3.2.gem (100%)
Successfully installed slop-3.3.2
Fetching: tilt-1.3.3.gem (100%)
Successfully installed tilt-1.3.3
Fetching: stasis-0.2.0.gem (100%)
Successfully installed stasis-0.2.0
4 gems installed

簡單執行
單一hmal檔:index.html.haml,執行 stasis 後產生 public/index.html

!!!5
%html
  %head
    %meta{:charset => 'UTF-8'}
    %title 測試
  %body
    %h1 這是 index 頁面
    %h2.lorem_w2
    %p.lorem_p3
    %script{:src=>"/js/jquery.min.js",:type=>"text/javascript"}
    %script{:src=>"/js/lorem.js",:type=>"text/javascript"}

利用layout template
如果要把 layout.html.haml 與各別頁面分開的話,
編輯一個 controller.rb

layout 'layout.html.haml'

而layout.html.haml的內容:

!!!5
%html
  %head
    %meta{:charset => 'UTF-8'}
    %title 測試
  %body
    = yield
    %script{:src=>"/js/jquery.min.js",:type=>"text/javascript"}
    %script{:src=>"/js/lorem.js",:type=>"text/javascript"}

在執行前觀看一下檔案目錄的分布:

$ tree
.
├── controller.rb
├── index.html.haml
├── js
│   ├── jquery.min.js
│   └── lorem.js
└── layout.html.haml

1 directory, 5 files

執行 stasis 後,同目錄裡的其他目錄或圖形相關檔案,
也會一起複製到輸出的目錄public裡:

$ tree
.
├── controller.rb
├── index.html.haml
├── js
│   ├── jquery.min.js
│   └── lorem.js
├── layout.html.haml
└── public
    ├── index.html
    └── js
        ├── jquery.min.js
        └── lorem.js

3 directories, 8 files

只要更動了任何的HAML格式的檔案後,
執行 stasis 便可以把所有的內容更新輸出。

所以在快寫 HTML 時,可以用 HAML 的語法來快寫,
但一堆HAML需要產生成HTML之時,
可以快速地簡單管理HAML及HTML檔案。

參考
An hour with HAML and Stasis
http://www.rubydoc.info/github/winton/stasis/file/README.md

系列文章列表


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言