以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:
- 用普通的HTML(.html)编写HTML文件,并使用像
<include b.html>
这样的自定义标签 - 使用服务器端语言创build一个主文件,该文件将加载和处理您的HTML文件,并用这些文件中的实际内容replace您的自定义标记
- 保存输出到一个新的文件并使用它。
这里是用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>
我希望这个详细的答案将帮助你。