Getting Started – Pug
Installation ¶ Pug is available via npm: $ npm install pug Overview ¶ The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “localsâ€) as an argument. Call that resultant function with your data, and voilà !, it will return a string of HTML rendered with your data. The compiled function can be re-use
jadeãŒpugã«ãªã£ã¦å¤‰ã‚ã£ãŸæ‰€ã®ãƒ¡ãƒ¢ - ã‹ã‚‚メモ
HTMLã®ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã®éš›ã«jadeを愛用ã—ã¦ã„ã¾ã™ã€‚ jadeãŒpugã«ãªã£ã¦ã‹ã‚‰ã€æ‰€ã€…仕様ãŒå¤‰ã‚ã£ã¦ã„ãŸã®ã§ãƒ¡ãƒ¢ Mixinã®å‘¼ã³å‡ºã—æ–¹ãŒå¤‰ã‚ã£ãŸ mixin 関数å() ã§ã¯ãªã+関数å()ã«ãªã£ãŸã€‚ jade mixin foo('引数') ↓ pug +foo('引数') æ–‡å—列ä¸ã®å¤‰æ•°å±•é–‹ã®æ–¹æ³•ãŒå¤‰ã‚ã£ãŸ jadeã®æ™‚ã¯"ã§å›²ã¾ã‚ŒãŸæ–‡å—列ã®ä¸ã«#{変数å}ã§æ–‡å—列展開ãŒã§ãã¦ã„ã¾ã—ãŸãŒã€ pugã‹ã‚‰ã¯æ–‡å—列展開をã™ã‚‹å ´åˆã¯`ã§æ–‡å—列を囲ã¿${変数å}ã¨ã™ã‚‹ã‹ã€jadeã§ã‚‚使ãˆã¦ã„ãŸ+演算åã§æ–‡å—列ã¨å¤‰æ•°ã‚’連çµã™ã‚‹ã‹ã«ãªã£ã¦ã¾ã—ãŸã€‚ ã“ã‚Œã¯ã¡ã‚‡ã£ã¨jadeã®ã¨ãã®æ–¹ãŒä¾¿åˆ©ã ã£ãŸæ„Ÿã˜ãŒã—ã¾ã™... jade a(href="#{link}") p(class="foo#{bar}hoge") p(class="foo" + bar + "hoge") ↓ pug a(href=`$
Pug(Jade)ã§åŠ¹çŽ‡çš„ãªãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—環境を作る ｜ Tips Note by TAM
HTMLã®ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚’ã™ã‚‹ã¨ãã€ãƒ¡ã‚¿æƒ…å ±ã‚„ãƒ˜ãƒƒãƒ€ãƒ¼ã®ã‚ˆã†ãªå…±é€šéƒ¨åˆ†ã‚’効率的ã«ç®¡ç†ã™ã‚‹ãŸã‚ã«Pugã¨ã„ã†ãƒ†ãƒ³ãƒ—レートエンジンをよã使ã£ã¦ã„ã¾ã™ã€‚最åˆã¯ã€Œå°Žå…¥ã‚³ã‚¹ãƒˆãŒé«˜ã„ã€ã¨è€ƒãˆã¦ã„ã¾ã—ãŸãŒã€ãれ以上ã®ãƒ¡ãƒªãƒƒãƒˆãŒã‚ã‚‹ã¨æ„Ÿã˜ã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã—ãŸã€‚ 今回ã¯Pugã®ãƒ†ãƒ³ãƒ—レートを作ã£ãŸã®ã§ã€ãã®ä½¿ã„方を紹介ã—ã¾ã™ã€‚ 今回ã¯Pugã®è¨˜æ³•ã«ã¤ã„ã¦ã¯ç´°ã‹ã説明ã§ãã¾ã›ã‚“ã®ã§ã€è©³ã—ã„仕様ã¯å…¬å¼ã‚µã‚¤ãƒˆã‚’確èªã—ã¦ãã ã•ã„。 Getting Started – Pug テンプレートエンジンã¨Pugã«ã¤ã„㦠テンプレートエンジンã¨ã„ã†ã®ã¯ã€ç‰¹å®šã®å‡¦ç†ã‚’ãŠã“ãªã†ãƒ†ãƒ³ãƒ—レートã«è¡¨ç¤ºã•ã›ãŸã„データ（文å—列やタグãªã©ï¼‰ã‚’渡ã™ã“ã¨ã§ã€ç„¡é§„ãªãHTMLを作æˆã—ã¦ã„ã仕組ã¿ã®ã“ã¨ã§ã™ã€‚CSSã«ãŠã‘ã‚‹Sassã®ã‚ˆã†ãªã‚‚ã®ã¨è€ƒãˆã¦ã‚‚ã„ã„ã¨æ€ã„ã¾ã™ã€‚ 今回使用ã™ã‚‹ãƒ†ãƒ³ãƒ—レートエンジンã®Pugã«ã¯ä»¥ä¸‹ã®ã‚ˆã†ãªç‰¹å¾´ãŒã‚ã‚Šã¾ã™ã€‚ é–‰ã˜ã‚¿ã‚°ï¼ˆ
JADE LANGUAGE Node Template Engine
!!! 5 html(lang="en") head title= pageTitle(car insurance montana) :javascript | if (foo) { | bar() | } body h1 Jade - node template engine #container - if (youAreUsingJade) You are amazing - else Get on it! Get on it! Get on it! Get on it! <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> //<![CDATA[ if (foo) { bar() } //]]> </script> </head> <body> <h1>J
1
ランã‚ング
ランã‚ング
ãŠçŸ¥ã‚‰ã›
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Hexo 入門#1 基本
Html2Jade
Jade ã«ã¤ã„ã¦ã€‚
https://blog.mismithportfolio.com/web/20160326pugbegin
HTML 2 Jade - a converter for HTML
{{#tags}}- {{label}}
{{/tags}}