以HTML格式语法包含另一个玉文件

我正在使用翡翠包括其他部分在我的HTML使用include 。 这工作正常,如果我写的玉语法而不是HTML语法。 但就我而言,我只需要编写HTML语法。 我只是试图用玉来include而已。

从这个链接中 ,我发现我们可以通过包含来编写HTML .| 在代码中。 所以,为了testing这个,我写了这样的代码:

index.jade

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

正如你可以在上面的代码中看到的,我补充说. 作为玉语法线的后缀,即div.main. ,它让我从下一行写HTML。

header.jade

 <header></header> 

但是这不起作用,呈现的HTML看起来像这样:

的index.html

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

如果我不使用. 并遵循玉的语法,一切工作正常。 但就我而言,我真的需要用HTML编写,而不是用玉来写。

所以,我的问题是:是否有任何解决方法,使HTML语法内的include工作?

那么,有可能做你想做的,但我不知道如果玉是最好的select。

注意:在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> 

此代码已经过testing,并且与最新版本的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中),如果您想要使用该缩进规则代码工作。


替代scheme

正如我刚开始写的,Jade并不是你的最佳select。 我会用另一种服务器端语言去做你想做的事情。

这是一个基本的algorithm:

  1. 用普通的HTML(.html)编写HTML文件,并使用像<include b.html>这样的自定义标签
  2. 使用服务器端语言创build一个主文件,该文件将加载和处理您的HTML文件,并用这些文件中的实际内容replace您的自定义标记
  3. 保存输出到一个新的文件并使用它。

这里是用PHP编写的一个例子:

master.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> 

我希望这个详细的答案将帮助你。