Middleman Usecase / TokyouMiddlemanMeetup#1
•
2 likes•963 views
The document demonstrates how to customize Middleman templates by adding CSS and JavaScript files. It shows a layout template that yields content and includes CSS and JS files. The CSS and JS files included are based on data from the page being rendered. This allows individual pages to specify additional CSS and JS files to load for that page.
Recommended
More Related Content
Viewers also liked
Similar to Middleman Usecase / TokyouMiddlemanMeetup#1
Similar to Middleman Usecase / TokyouMiddlemanMeetup#1 (20)
More from Kotaro Kawashima
Recently uploaded
Recently uploaded (20)
Middleman Usecase / TokyouMiddlemanMeetup#1
- 5. layout - yield <prj_dir> / layout / layout.slim doctype 5 html body#top == yield <prj_dir> / index.slim |Tokyo br |Middleman br |Meetup http://localhost:4567 / index.html <!DOCTYPE html><html><body id=top> Tokyo<br/>Middleman<br/>Meetup </body></html>
- 10. customize <prj_dir> / layout / layout.slim - csses = ["base"]; - if data.page.css - csses.concat(data.page.css) == stylesheet_link_tag csses - jses = ["jquery.min", "base"]; - if data.page.js - jses.concat(data.page.js) == javascript_include_tag jses <prj_dir> / index.slim --css: ["top"] js: ["top"] --- http://localhost:4567 loading css: - base.css - top.css loading js: - jquery.min.js - base.js - top.js
- 11. [tmm#1] $ cp -r ./createdTemplate ~/.middleman/ or [tmm#1] $ cd ~/.middleman/ [tmm#1] $ middleman init myTemplate --skip-bundle then [tmm#1] $ cd ~/Documents/works/ [tmm#1] $ middleman init tmm1 -T myTemplate