新手请教Jade的一个问题
发布于 8 年前 作者 yyf19871102 6170 次浏览 来自 问答

如何用Jade写js\n <a class=“cla1”><li class=“cla2”>hello world</li></a>\n呢,不胜感激…!

7 回复

jade是视图模板,怎么能说用 jade 写 xx 呢?

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.jadeindex.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即可,代码写起来非常简单。抛开布局外,可变的地方就显得少很多了,这就是模板引擎的好处 。

不好意思我不会粘代码,就是这个QQ截图20160513125506.png里面的“I forgot my password”这行该怎么写呢,写在i标签里面字体就不对了啊

不理解你的问题

@yyf19871102 我给你的资料里有hade,你难道都不看看么?

@yyf19871102

a.forgot-password-link(href="#", data-target="#forgot-box")
  i.ace-icon.fa.fa-arrow-left
  | I forgot my password
回到顶部