如何将样式从 css 文件导入 .ejs 模板并通过电子邮件发送？

问题描述 投票：0回答：1

我想做什么：

  1. 发送一封带有样式的电子邮件；
  2. 有单独的文件，一个用于我的 .ejs 模板，一个 .css 用于对应于该模板的样式。

问题是什么：

  1. 如果我为样式创建单独的路由并将其插入到 HTML 中，用户将需要“授权”下载这些样式；
  2. 如果我只是像普通 HTML 一样导入，它不会通过电子邮件。

我在用什么：

  • Express.js
  • 打字稿
  • EJS
  • nodemailer

我现在的文件结构是怎样的：

  • 源码
    • 意见
      1. index.ejs
      2. 样式.css
      • internal_view_group
        1. 样式.css
        • internal_template_name
          1. 样式.css
          • 语言环境
            1. pt-br.ejs
            2. zh-cn.ejs
      • public_view_group
        1. 样式.css
        • public_template_name
          1. 样式.css
          • 语言环境
            1. pt-br.ejs
            2. zh-cn.ejs

好吧，如果目录有点乱或者看不懂，我来帮你分解一下：

  • 文件夹“views”包含我所有的模板和样式，它还包含我的 index.ejs，这就是我在呈现 HTML 时调用的内容，该索引随后将从组、模板调用样式，然后从中调用 HTML模板，考虑它使用的语言。它还有一个 style.css，一个必须在所有模板中使用的全局样式表，无论它属于哪个组。

  • 文件夹“internal_view_group”是一组模板，比如我们有一个internal组，模板用于内部交流，还有一个public组，用于一般公众交流。它还有一个默认的 style.css，应用于该组中的每个模板。

  • 文件夹“internal_template_name”是一个模板，它在“locales”文件夹中有它的语言环境和一个必须应用于被调用语言环境的样式表。

考虑到“问题是”部分，我怎么能在我的代码上有这种级别的组织，有单独的文件并且仍然可以工作？

css node.js email ejs nodemailer
1个回答
0
投票

由于您使用 index.ejs 调用所有其他模板和样式，您也可以使用来自 EJS 的 <%- %> 标签直接将样式注入到此 index.ejs 中。

这个标签的作用：导入一个文件（通常是.EJS），读取它的内容并将它的输出为 HTML。

所以你想做什么到 index.js 是类似这样的东西：

<head>
    <%-
        '<style>'
        + include(`./style.css`)
        + include(`./${template_group}/style.css`)
        + include(`./${template_group}/${template_name}/style.css`)
        + '</style>'
    %>
</head>
<body>
    <%- include(`./${template_group}/${template_name}/locale/${locale}.ejs`) %>
</body>

这会将所有样式的 RAW 内容输出到代码中（不是缩小版本）。

样式标签在 javascript 逻辑内部而不是在输出周围被字符串包围的原因是 VSCode 可能会在您的代码中报告错误，因为样式部分内有 EJS 标签，这样，输出终端将不会有任何内容报告。

如果你发现你要发送的HTML代码的最终大小太大，可能成为问题，你可以使用javascript原型。include后的字符串函数，如

include('./style.css').replaceAll(' ', '')
，替换所有空格但保留换行符（未测试）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.