html - 以 HTML 格式语法包含另一个 Jade 文件

Question

我正在使用Jade只是使用 include 在我的 HTML 文件中包含其他部分。如果我编写 Jade 语法而不是 HTML 语法，则效果很好。但就我而言，我只需要编写 HTML 语法。我尝试仅将 jade 用于include。

从此link ，我发现我们可以通过在代码中包含 . 或 | 来编写 HTML。因此，为了测试这一点，我编写了如下代码:

文件index.jade

div.main.
     <div class="wrapper">
         include header
     </div>

正如你在上面的代码中看到的，我在 Jade 语法行中添加了 . 作为后缀，即 div.main.，这让我可以从下一个开始编写 HTML线。

文件header.jade

<header></header>

但这不起作用。呈现的 HTML 如下所示:

文件index.html

<div class="main">
    <div class="wrapper">
         include header
    </div>
</div>

如果我不使用 . 并遵循 Jade 语法，则一切正常。但就我而言，我确实需要用 HTML 编写，而不是用 Jade 编写。

是否有解决方法可以使 include 在 HTML 语法中工作？

Answer 1

嗯，可以做你想做的事，但我不确定 Jade 是否是最好的选择。

注意:在 Jade 中，每行以 < 开头被认为是纯文本，所以不需要使用 dot或|编写 html 标签。

这是您想要的工作示例:

a.jade

div.main
  <div class="wrapper">
  include b.jade
  </div>

b.jade

<div class="b">I am content from b.jade</div>

编译 a.jade 后我们得到:

a.html

<div class="main">
  <div class="wrapper">
    <div class="b">I am content from b.jade</div>
  </div>
</div>

此代码经过测试，在最新版本的 Jade 上可以 100% 工作，但仅当您不增加缩进级别时才有效。例如，以下代码将不起作用:

div.main
  <div class="wrapper">
    include b.jade
  </div>

编译时会抛出:unexpected token "indent" ，以及错误本身:

div.main
  <div class="wrapper">
    include b.jade
  ^^ extra indent "tab"
  </div>

对于嵌套纯 HTML 来说也是如此，因此如下:

div.main
  <div class="wrapper">
    <div class="foo">
      include b.jade
    </div>
  </div>

也会抛出这个错误:unexpected token "indent" ，以及错误:

div.main
  <div class="wrapper">
    <div class="foo">
  ^^
      include b.jade
  ^^^^
    </div>
  ^^
  </div>

<小时/>

你可以编写这样的代码:

div.main
  | <div class="wrapper">
  |  <div class="foo">
  |    <div class="bar">
  include b.jade
  |    </div>
  |  </div>
  | </div>

并假设我们已经有了 b.jade ，它将被编译为:

<div class="main">
  <div class="wrapper">
   <div class="foo">
     <div class="bar"><div class="b">I am content from b.jade</div></div>
   </div>
  </div>
</div>

但是请注意我放置 include b.jade 的位置，与上一个 Jade 命令 div.main 相比，只添加了一个选项卡(因此包含的文件将嵌套到 .main div 中)，如果您希望代码正常工作，则应该遵循该缩进规则。

<小时/>

替代解决方案

正如我在开头所写的，对于您的情况，Jade 并不是最佳选择。我会使用另一种服务器端语言来完成您想要的操作。

这是一个基本算法:

1. 以纯 HTML (.html) 格式编写 HTML 文件，并使用自定义标签(如 <include b.html>)作为包含内容。
2. 使用服务器端语言创建一个主文件，该文件将加载和处理您的 HTML 文件，并将您的自定义标记替换为这些文件中的实际内容
3. 将输出保存到新文件并使用它。

这是一个用 PHP 编写的示例:

ma​​ster.php

<?php

$main_file = "a.html";
$content = file_get_contents($main_file);

$content = preg_replace_callback(
    '!<include\s+([^>]+)>!',
    function ($m) {
        return file_get_contents($m[1]);
    }, $content
);

file_put_contents("bundle.{$main_file}", $content);

现在 HTML 文件:

a.html

<div class="main">
    <div class="wrapper">
        <include b.html>
    </div>
</div>

b.html

<div class="b">foobar</div>

现在我们将执行 master.php我们会得到bundle.a.html包含以下内容:

bundle.a.html

<div class="main">
    <div class="wrapper">
        <div class="b">foobar</div>
    </div>
</div>