有没有办法稍后使用 EJS 和 nodejs/express 添加 CSS/JS

发布于 11-19 06:34 字数 708 浏览 2 评论 0原文

我正在使用带有nodejs/express的EJS模板引擎,我想知道是否可以在例如index.ejs(不是layout.ejs)

layout.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/stylesheets/smoothness/jquery-ui-1.8.14.custom.css' />
  </head>
  <body>
    <%- body %>
  </body>
</html>

中添加另一个css或js文件index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

我不想在每个模板中添加第二个 css 文件,而只想在 index.ejs 中添加 - 有什么办法可以做到这一点吗?

i'm using the EJS template engine with nodejs/express and i'm wondering if it's possible to add another css or js file in e.g the index.ejs (not the layout.ejs)

layout.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/stylesheets/smoothness/jquery-ui-1.8.14.custom.css' />
  </head>
  <body>
    <%- body %>
  </body>
</html>

index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

i don't want to add the second css file in every template but only the index.ejs - is there any way i can do that?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

浅暮の光2024-11-26 06:34:29

在这里找到了解决方案: Node .js with Express:在 Jade 视图中使用脚本标签导入客户端 javascript?

它使用 jade 而不是 EJS,但工作原理完全相同。
以下是 Express 2.4.0 的一些代码片段。

您必须将以下“帮助程序”添加到您的 app.js 中,

app.helpers({
  renderScriptsTags: function (all) {
    if (all != undefined) {
      return all.map(function(script) {
        return '<script src="/javascripts/' + script + '"></script>';
      }).join('\n ');
    }
    else {
      return '';
    }
  }
});

app.dynamicHelpers({
  scripts: function(req, res) {
    return ['jquery-1.5.1.min.js'];
  }
});

layout.ejs 看起来像这样:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
      <link rel='stylesheet' href='/stylesheets/style.css' />
      <%- renderScriptsTags(scripts) %>
  </head>
  <body>
    <%- body %>
  </body>
</html>

如果您不向脚本数组添加任何脚本,则仅添加“jquery-1.5”。 1.min.js' 将被包含 - 如果您想将文件添加到子页面,您可以这样做:

test.ejs

<% scripts.push('jquery-ui-1.8.14.custom.min.js', 'jquery.validate.min.js') %>

<h1><%= title %></h1>
<p>I'm a template with 3 js files in the header</p>

就是这样。

found a solution here: Node.js with Express: Importing client-side javascript using script tags in Jade views?

it's using jade instead of EJS but works all the same.
here are some code-snippets for express 2.4.0.

you have to add the following "helpers" to your app.js

app.helpers({
  renderScriptsTags: function (all) {
    if (all != undefined) {
      return all.map(function(script) {
        return '<script src="/javascripts/' + script + '"></script>';
      }).join('\n ');
    }
    else {
      return '';
    }
  }
});

app.dynamicHelpers({
  scripts: function(req, res) {
    return ['jquery-1.5.1.min.js'];
  }
});

the layout.ejs looks sth like this:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
      <link rel='stylesheet' href='/stylesheets/style.css' />
      <%- renderScriptsTags(scripts) %>
  </head>
  <body>
    <%- body %>
  </body>
</html>

if you don't add any scripts to the scripts-array, only 'jquery-1.5.1.min.js' will be included - if you want to add files to a subpage you can do this like so:

test.ejs

<% scripts.push('jquery-ui-1.8.14.custom.min.js', 'jquery.validate.min.js') %>

<h1><%= title %></h1>
<p>I'm a template with 3 js files in the header</p>

that's it.

北方。的韩爷2024-11-26 06:34:29

由于助手和动态助手在 Express > 中消失了3,我重写了 pkyeck 代码,以便它可以在 Express 3 中工作。

所以在 app.js 中用这个代替助手/dynamicHelpers 。让其他一切保持原样。

app.locals({
    scripts: [],
  renderScriptsTags: function (all) {
    app.locals.scripts = [];
    if (all != undefined) {
      return all.map(function(script) {
        return '<script src="/javascripts/' + script + '"></script>';
      }).join('\n ');
    }
    else {
      return '';
    }
  },
  getScripts: function(req, res) {
    return scripts;
  }
});

As helpers and dynamicHelpers are gone in Express > 3, I rewrote pkyeck code so it works in Express 3.

So in app.js have this instead of the helpers / dynamicHelpers. Leave everything else as is.

app.locals({
    scripts: [],
  renderScriptsTags: function (all) {
    app.locals.scripts = [];
    if (all != undefined) {
      return all.map(function(script) {
        return '<script src="/javascripts/' + script + '"></script>';
      }).join('\n ');
    }
    else {
      return '';
    }
  },
  getScripts: function(req, res) {
    return scripts;
  }
});
老子叫无熙2024-11-26 06:34:29

在app.js中添加行:

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public')); // This line.

在layout.ejs中:

<!DOCTYPE html>
<html>
  <head>
    <title>Authentication Example</title>
    <link rel="stylesheet" href="/stylesheets/style.css"/>
    <script src="/javascripts/jquery.js"></script>    
  </head>
  <body>
    <%- body %>
  </body>
</html>

在index.ejs或login.ejs中:

<h1>Login</h1>
<form method="post" action="/login">
  <p>
    <label>Username:</label>
    <input type="text" name="username">
  </p>
  <p>
    <label>Password:</label>
    <input type="text" name="password">
  </p>
  <p>
    <input type="submit" value="Login">
  </p>
</form>
<script src="/javascripts/test.js"></script> <!-- Second Script -->

在test.js中:

$(document).ready(function() {
    try{
        alert("Hi!!!");
    }catch(e)
    {
        alert("Error");
    }
});

问候。


In app.js add line:

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public')); // This line.

In layout.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title>Authentication Example</title>
    <link rel="stylesheet" href="/stylesheets/style.css"/>
    <script src="/javascripts/jquery.js"></script>    
  </head>
  <body>
    <%- body %>
  </body>
</html>

In index.ejs or login.ejs:

<h1>Login</h1>
<form method="post" action="/login">
  <p>
    <label>Username:</label>
    <input type="text" name="username">
  </p>
  <p>
    <label>Password:</label>
    <input type="text" name="password">
  </p>
  <p>
    <input type="submit" value="Login">
  </p>
</form>
<script src="/javascripts/test.js"></script> <!-- Second Script -->

In test.js:

$(document).ready(function() {
    try{
        alert("Hi!!!");
    }catch(e)
    {
        alert("Error");
    }
});

Regards.

另类2024-11-26 06:34:29

感谢 @asprotte 为 Express 4.x 提供此内容。你测试过这个吗?
因为它似乎对我不起作用。所以我对您的代码做了一些更改,如下:

将其放入 app.js 文件中

app.locals.scripts = [];
app.locals.addScripts=function (all) {
app.locals.scripts = [];
    if (all != undefined) {
        app.locals.scripts =  all.map(function(script) {
            console.log(script);
            return "<script src='/js/" + script + "'></script>";
        }).join('\n ');
    }

};
app.locals.getScripts = function(req, res) {
    return app.locals.scripts;
};

,然后放入模板文件中(我在这里使用 ejs 模板):

<% addScripts(['cart.js']) %>

然后在布局文件中,我们需要将它们附加在页面底部获取我已经测试过的脚本

<%- getScripts() %>

,它对我有用。如果我错了,请纠正我。

谢谢,

Thanks @asprotte for providing this for express 4.x. Did you tested this?
Because it does not appears to be working for me. So I have made some changes to your code here are they:

Put this in app.js file

app.locals.scripts = [];
app.locals.addScripts=function (all) {
app.locals.scripts = [];
    if (all != undefined) {
        app.locals.scripts =  all.map(function(script) {
            console.log(script);
            return "<script src='/js/" + script + "'></script>";
        }).join('\n ');
    }

};
app.locals.getScripts = function(req, res) {
    return app.locals.scripts;
};

then in template file put (I am using ejs template here) :

<% addScripts(['cart.js']) %>

Then in the layout file we need these to append at the bottom of the page get the scripts

<%- getScripts() %>

I have tested it and its working for me. Please correct me if I am wrong.

Thanks,

风吹过旳痕迹2024-11-26 06:34:29

感谢您说明此选项 pkyeck!

在express 4.x中app.locals是一个对象。这是 pkyeck 的答案,重写后可在 Express 4.x 中工作:

app.locals.scripts = [];
app.locals.addScripts=function (all) {
    app.locals.scripts = [];
    if (all != undefined) {
        return all.map(function(script) {
            return "<script src='/javascripts/" + script + "'></script>";
        }).join('\n ');
    }
    else {
        return '';
    }
};
app.locals.getScripts = function(req, res) {
    return scripts;
};

Thanks for illustrating this option pkyeck!

In express 4.x app.locals is an object. Here's pkyeck's answer rewritten to work in express 4.x:

app.locals.scripts = [];
app.locals.addScripts=function (all) {
    app.locals.scripts = [];
    if (all != undefined) {
        return all.map(function(script) {
            return "<script src='/javascripts/" + script + "'></script>";
        }).join('\n ');
    }
    else {
        return '';
    }
};
app.locals.getScripts = function(req, res) {
    return scripts;
};

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文