tyoshikawa1106のブログ

- Force.com Developer Blog -

Node:JadeテンプレートでJavascriptとCSSを読み込む方法

Node.jsで開発するときに、Jadeテンプレートというのが用意されています。普通のHTMLとはちょっと書き方が違ったりします。例えばこんな感じ。

---
title: React.js Starter Kit
component: ContentPage
---
div
  div
    h3 Runtime Components
    dl
      dt <a href="https://facebook.github.io/react/">React</a>
      dd A JavaScript library for building user interfaces, developed by Facebook
      dt <a href="http://facebook.github.io/flux/">Flux</a>
      dd Application architecture for building user interfaces
  div
    h3 Development Tools
    dl
      dt <a href="http://webpack.github.io/">Webpack</a>
      dd Compiles front-end source code into modules / bundles
      dt <a href="http://www.browsersync.io/">BrowserSync</a>
      dd A lightweight HTTP server for development
  div
    h3 Fork me on GitHub
    p <a href="https://github.com/kriasoft/react-starter-kit">github.com/kriasoft/react-starter-kit</a>


このJadeをつかうときに、JSやCSSを読み込む処理はどうやって書けば良いのかなと確認してみました。こんな感じで大丈夫みたいです。

link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css")
script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js")

f:id:tyoshikawa1106:20160511133616p:plain