Node.js,Expressメモ⑤の2

エンドゲーム見たいけど予約でいっぱいですね。こんにちは。

Part5はいろんなページにいって知っといてね！って感じなので
いろいろなページをやる2回目です。

サブぺージをこなしたらすすんでる？？
ははーん、さてはasync.waterfall方式だな。

今回はテンプレートのページを見ます。
前回からいきなり日本語翻訳かましてます。

翻訳したらビューが2つになって左右に原文と翻訳が並んでくれたらいいのに。。

Pug

このチュートリアルで使うテンプレートエンジンです。
Nodeテンプレートの中で最も人気のあるテンプレートだそうです。
テンプレート言語は大きく以下の2つに分かれていてPugは後者だそうです。
・レイアウトを定義するためにHTMLを使うもの
・HTMLにコンパイルできるマークアップ言語

syntax

Pugは典型的なHTMLファイルの構造をマップしていてインデントは入れ子になった要素を示すために
使われます。

doctype html
html(lang="en")
  head
    title=title
    script(type="text/javascript").
  body
    h1=title

    p this is a line with #[em some emphasis] and #[strong strong text] markup.
    p this liine has un-escaped data: !{"<em> is enphasised</em>} and escaped data: #{"<em> is not emphasised</em>"}.
    | this line follows on.
    p= "Evaluated and <em>escaped expression</em>:" + title

    p A line with a link
      a(href="/catalog/authors")Some link text
      | and some extra text.

    ul
      each val in [1, 2, 3, 4, 5]
        li=val
※一部抜粋

ぜんぜんルールがわかりません笑

要素属性は関連付けられている要素の後ろのカッコ内に定義。
link(rel="stylesheet", href="/stylesheets/style.css")
meta(name="viewport" content="width=device-width initial-scale=1")

タグの後に等号が付く場合は次のテキストをjavaScriptとして扱われる。。
h1= title
p= "Evaluated and <em>escaped expression</em:>" + title

!{} #{}などを使って生のHTMLを埋め込むこともできます。

p This is a line with #[em some emphasis] and #[strong strong text] markup.
p This line has an un-escaped string: !{'<em> is emphasised</em>'}, an escaped string: #{'<em> is not emphasised</em>'}, and escaped variables: #{title}.
`

などなど、、
これは、、。テキストで拡張性を持たせる方法はめちゃくちゃ工夫しなきゃいけないから
慣れるまでものすごいハード。

ただExpressからの変数とかは、構文にのっとってやるんだよ！それがテンプレートだよ！
ということがわかったのでこのページはさらっと飛ばします笑

丸写ししても仕方がないので。。。
つづく