新手请教Jade的一个问题
如何用Jade写js\n <a class=“cla1”><li class=“cla2”>hello world</li></a>\n呢，不胜感激…!
7 回复
What is Harp?
Harp is a static web server that also serves Jade, Markdown, EJS, Less, Stylus, Sass, and CoffeeScript as HTML, CSS, and JavaScript without any configuration. It supports the beloved layout/partial paradigm and it has flexible metadata and global objects for traversing the file system and injecting custom data into templates. Optionally, Harp can also compile your project down to static assets for hosting behind any valid HTTP server.
安装
$ [sudo] npm install -g harp
$ harp -h
Usage: harp [options] [command]
Commands:
init [options] [path] Initialize a new Harp project in current directory
server [options] [path] Start a Harp server in current directory
multihost [options] [path] Start a Harp server to host a directory of Harp projects
compile [options] [projectPath] [outputPath] Compile project to static assets (HTML, JS and CSS)
Options:
-h, --help output usage information
-V, --version output the version number
Use 'harp <command> --help' to get more information or visit http://harpjs.com/ to learn more.
创建并初始化项目
$ harp init harp-demo
Downloading boilerplate: https://github.com/harp-boilerplates/default
Initialized project at /Users/sang/workspace/17koa/book-source/web/harp-demo
文件说明
$ tree harp-demo
.
├── 404.jade
├── _layout.jade
├── index.jade
└── main.less
0 directories, 4 files
默认生成只有4个文件
404.jade很明显会编译成404.html_layout.jade是布局文件，页面中不变的地方都放到布局里index.jade主文件，会编译成index.html，它是页面里可变的地方，需要配合布局main.less会编译成main.css
这是一个比较经典的结构，可以满足大部分人的需求，首先页面要区分可变和不可变，不可变的放到布局里，可变的留空，等具体页面填空即可。css采用less编写，是比较常规的做法，至于404类似的页面，是网站必备的，大家按照harp的约定做就好了。
关于布局需要说明一下，如果没有在_data.json配置的话，默认使用_layout.jade
启动项目
$ harp server harp-demo
------------
Harp v0.20.1 – Chloi Inc. 2012–2015
Your server is listening at http://localhost:9000/
Press Ctl+C to stop the server
------------
改写starter-template
starter-template是bootstrap3里比较简单的示例，首页只有75行代码，改写起来比较简单。对于这种转换思维方式的高级写法来说，先用自己熟悉的写一遍，然后再改写会比较容易学会。通过比较，思考，牢记里面的规则，可以更快的接受这些高级写法的好处，进而提高工作效率。
初始化项目
$ harp init harp-starter-template
Downloading boilerplate: https://github.com/harp-boilerplates/default
Initialized project at /Users/sang/workspace/17koa/book-source/web/harp-starter-template
改写index.html为index.jade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
按照我们之前的原则，拆分不可变部分和可变部分
从上面的代码可以知道，<div class=“starter-template”>外的container是可变部分，其他部分是不可变的。据此我们就可以决定_layout.jade和index.jade如何编写了、
不可变部分_layout.jade
doctype html
html(lang='en')
head
meta(charset='utf-8')
|
meta(http-equiv='X-UA-Compatible', content='IE=edge')
|
meta(name='viewport', content='width=device-width, initial-scale=1')
// The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags
meta(name='description', content='')
|
meta(name='author', content='')
|
link(rel='icon', href='/favicon.ico')
|
title Starter Template for Bootstrap
// Bootstrap core CSS
link(href='dist/css/bootstrap.min.css', rel='stylesheet')
// IE10 viewport hack for Surface/desktop Windows 8 bug
link(href='assets/css/ie10-viewport-bug-workaround.css', rel='stylesheet')
// Custom styles for this template
link(href='starter-template.css', rel='stylesheet')
// Just for debugging purposes. Don't actually copy these 2 lines!
//if lt IE 9
script(src='/assets/js/ie8-responsive-file-warning.js')
|
script(src='assets/js/ie-emulation-modes-warning.js')
// HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
//if lt IE 9
script(src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js')
|
script(src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js')
|
body
nav.navbar.navbar-inverse.navbar-fixed-top
.container
.navbar-header
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
span.sr-only Toggle navigation
|
span.icon-bar
|
span.icon-bar
|
span.icon-bar
|
a.navbar-brand(href='#') Project name
|
#navbar.collapse.navbar-collapse
ul.nav.navbar-nav
li.active
a(href='#') Home
|
li
a(href='#about') About
|
li
a(href='#contact') Contact
// /.nav-collapse
|
.container
!= yield
// /.container
//
Bootstrap core JavaScript
==================================================
// Placed at the end of the document so the pages load faster
script(src='jquery.min.js')
|
script(src='dist/js/bootstrap.min.js')
// IE10 viewport hack for Surface/desktop Windows 8 bug
script(src='assets/js/ie10-viewport-bug-workaround.js')
注意!= yield是留空
可变部分index.jade
.starter-template
h1 Bootstrap starter template
|
p.lead
| Use this document as a way to quickly start any new project.
br
| All you get is this text and a mostly barebones HTML document.
此时，如果我们要在写一个一样布局的页面，只要把index.jade改成xx.jade即可，代码写起来非常简单。抛开布局外，可变的地方就显得少很多了，这就是模板引擎的好处 。
a.forgot-password-link(href="#", data-target="#forgot-box")
i.ace-icon.fa.fa-arrow-left
| I forgot my password
