Question

我有一个layout.ejs文件，它为节点应用程序提供了每个页面的基本布局。这包括一些基本的CSS文件（即引导程序）。我还有其他使用该layout.ejs文件渲染其主体的ejs文件，但我也希望它们能够为某些自定义样式包括自己的CSS文件。

我尝试将CSS直接包含在其他ejs文件中，但这只是在html正文中设置了css文件。我曾考虑过使用一个将CSS文件注入客户端的javascript文件，但这对我来说太“ hacky”了。

目前，我的测试布局（从layout.ejs继承的布局）基本上是这样的：

<head>
    <link href="../public/styles/index.css" rel="stylesheet" type="text\css">
</head>
<section id="box-section" class="blox-mf route">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="title-box text-center">
            <h3 class="title-a">
              Title2
            </h3>
            <p class="subtitle-a" style="color: #be3131;">
                Subtitle 2
            </p>
            <div class="line-mf"></div>
          </div>
        </div>
      </div>
    </div>
</section>

<script src="/scripts/index.js" crossorigin="anonymous"></script>

正如我所说，我所拥有的只是一个附着在html主体上的css，而不是在标头中，因此所有内容都将默认样式保留为layout.ejs文件。有没有一种方法可以通过找到一种方法来获得使用基本布局css文件的不同路径但允许使用其自己的css进行一些更改的方式来实现呢？

Answer 1

我找到了一种执行此操作的方法。它所要做的就是将一个变量传递到模板ejs中，该变量是css文件的URI数组。然后，ejs遍历数组并使用所需的css文件创建模板。

以下是通过css文件传递的代码：

myCss.push({
    uri: 'public/styles/index.css'
})
res.render('./home', {
    styles: myCss,
});

然后在模板上，您要做的就是：

<% for(var i=0; i < styles.length; i++) { %>
    <link href="<%= styles[i].uri %>" rel="stylesheet"  type="text/css">
<% } %>

现在您可以传递路线所需的所有图纸。需要一些代码重构来替换必须手动添加的链接，但是您可以了解它的本质。

编辑：这需要一些设置来提供静态文件。您可以通过将其包含在快速应用程序中来实现此目的：

app.use(express.static(__dirname + '/public'));

如何包含从layout.ejs文件借用的ejs中的单独CSS文件？

1 个答案: