1. 包含 Include

包含(include)功能允许您把另外的文件内容插入进来。

//- includes/head.pug
head
  title 我的网站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')
//- includes/foot.pug
footer#footer
  p Copyright (c) foobar
//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    include includes/foot.pug

对应的 HTML:

<!DOCTYPE html>
<html>

<head>
  <title>我的网站</title>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/app.js"></script>
</head>

<body>
  <h1>我的网站</h1>
  <p>欢迎来到我这简陋得不能再简陋的网站。</p>
  <footer id="footer">
    <p>Copyright (c) foobar</p>
  </footer>
</body>

</html>

被包含的文件的路径,如果是一个绝对路径(如 include /root.pug),那么前面会加上 options.basedir 选项属性来进行解析。否则,路径应该相对于正在被编译的当前文件。

在 Pug v1 里,如果没有给出文件扩展名,会自动加上 .pug。但是这个特性在 Pug v2 中这是不赞成使用的。

1.1. 包含纯文本

被包含的如果不是 Pug 文件,那么就只会当作文本内容来引入。

/* style.css */
h1 {
  color: red;
}
// script.js
console.log('真了不起!');
//- index.pug
doctype html
html
  head
    style
      include style.css
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    script
      include script.js

对应的 HTML:

<!DOCTYPE html>
<html>

<head>
  <style>
    /* style.css */

    h1 {
      color: red;
    }
  </style>
</head>

<body>
  <h1>我的网站</h1>
  <p>欢迎来到我这简陋得不能再简陋的网站。</p>
  <script>
    // script.js
    console.log('真了不起!');
  </script>
</body>

</html>

1.2. 使用过滤器包含文本

您可以合并过滤器和包含语句,从而做到引入文件内容并直接用过滤器处理它们。

# article.md

这是一篇用 Markdown 写的文章。
//- index.pug
doctype html
html
  head
    title 一篇文章
  body
    include:markdown-it article.md

对应的 HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>一篇文章</title>
  </head>
  <body>
    <h1>article.md</h1>
    <p>这是一篇用 Markdown 写的文章。</p>
  </body>
</html>
Copyright © tuzhu008 2017 all right reserved,powered by Gitbook该文件修订时间: 2017-12-18 16:31:32

results matching ""

    No results matching ""