MJML - 模板插值、动态数据、上下文

2023-12-19

经过大量搜索后, 我很难找到如何:

  1. MJML https://mjml.io/处理动态数据和模板插值

我期待类似的事情:

import { mjml2html } from 'mjml';

const context = {
  message: 'Hello World'
};

const view = mjml2html(template, context);
<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>{message}</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

MJML 不处理任何模板。如果您需要模板,请使用模板引擎(例如车把)渲染为 MJML。

import { compile } from 'handlebars';
import { mjml2html } from 'mjml';

const template = compile(`
<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>{{message}}</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>
`);
const context = {
    message: 'Hello World'
};
const mjml = template(context);
const html = mjml2html(mjml);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

MJML - 模板插值、动态数据、上下文 的相关文章

  • 使用 React 和 Ant Design 的浮动标签

    对于我的 React 应用程序 我正在尝试构建一个表单浮动标签使用具有不同输入类型的 Antd 模板 仅使用样式使标签浮动 到目前为止 我已经能够将标签放在输入后面 但是当我将转换 转换应用于我的CSS代码时 它似乎根本不起作用 这是我的表
  • 将最新的 terser-webpack-plugin 与 Webpack5 一起使用

    根据这个链接 简洁的文档 https webpack js org plugins terser webpack plugin terseroptions如果您使用最新的 Webpack 5 则无需安装 Terser 插件 因为它已包含在
  • 使用 NPM 重命名文件

    有没有办法重命名 npm 脚本中的单个文件 我想准备要分发的文件 但我需要将构建的文件命名为与源代码中不同的名称 我尝试过 orn 但这似乎只能在命令行上工作 不能作为 npm 脚本工作 我特别希望添加跨平台依赖项来完成我的项目 而不是编写
  • 如何在iis上部署React Next.JS?

    我有一个带有 Next Js 的 React Web 应用程序 我想将其上传到我的 IIS ftp 上 我应该复制 next 文件夹吗 如果是 为什么我在这种情况下会出错 错误截图 您可以在服务器上创建一个本地主机并将请求重定向到该本地主机
  • ReactJS - 排序 - TypeError: 0 是只读的

    我试图在将对象映射到reactjs之前对其进行排序 但每次这样做时 我都会不断收到 TypeError 0 is read only 我注意到加载时 props 是空的 但即使当我试图检查数组的长度并且仅在它大于 0 时应用排序 或者当数组
  • Passport-Local 和 deSerializeUser 问题的简单身份验证

    阅读此处有关如何在 Passport 流程中反序列化和序列化用户工作的精彩描述后 了解护照序列化反序列化 https stackoverflow com questions 27637609 understanding passport s
  • 如何通过javascript关闭电子应用程序?

    我正在通过电子运行一个快速应用程序 下面是main js const electron require electron app electron app BrowserWindow electron BrowserWindow let m
  • 如何停止由 useEffect 在每次渲染时获取一些数据引起的 SideNav 闪烁 - Reactjs

    我有一个父组件 其中包含一个 SideBar 组件和一个渲染父级中嵌套路由组件的组件 SideBar 有 useEffect 钩子来进行 API 调用来检索一些数据 例如用户的名称 如果用户经过验证 我会使用它在导航顶部显示用户的名称并有条
  • req.protocol 永远不会在 nginx 代理后面提供 https

    我正在尝试识别我的 Express 应用程序是否通过https协议 Using nginx处理认证和加密 在同一台机器上 并转发请求 req protocol评估为http即使 https 正在使用并且工作正常 我已经尝试了以下两种方法 单
  • MIME 多部分流意外结束。 MIME 多部分消息不完整。 Web API 和超级代理

    我在将文件从客户端上传到 Web api 时遇到问题 我收到此错误 MIME 多部分流意外结束 MIME 多部分消息不完整 当我尝试读取多部分内容时在控制器中 我正在使用 superagent 构建一个 React JS 客户端 这是我的请
  • 静态类属性不适用于 Babel

    我正在使用 JSDOC 及其所有支持的 npm 插件来创建漂亮的文档 当 jsdoc 运行并解析 JSX 文件时遇到困难 它总是抛出如下错误 sign SyntaxError unknown Unexpected token export
  • React Redux:调度时无限循环

    我发现这个问题很常见 但我没有找到适合我的情况的解决方案 我正在尝试使用 React 和 Redux 以及 Redux thunk 将用户重定向到 React Native 中的另一个导航器 如果我只显示主屏幕 它工作正常 但是当我从登录屏
  • Mongoose 在结果的 _id 字段中返回“new ObjectId”

    当我尝试查询时 结果包含 id其中包含 new ObjectId 的字段 如何避免这种 new ObjectId 并仅将哈希值包含为字符串 由于此问题 将数据作为 JSON 响应发送回失败 下面是一个基本的demo 我的查询代码 book
  • 护照 Facebook 注销无法使用

    我试图实现 Passport Facebook 我在 server js 中的代码如下所示 用户点击 Facebook 登录时使用的路由 router get auth facebook passport authenticate face
  • 基于布尔 prop 的条件字段验证

    我想要favoriteAlcohol仅当以下情况时才需要验证 需要的字段props isAdult传递给组件的是true Yup object shape favoriteAlcohol Yup string when props isAd
  • Node JS,延迟响应

    var http require http var s http createServer function req res res writeHead 200 Content Type text plain res write Hello
  • cookie 未在跨域上设置 - AngularJS 和 NodeJS/Express

    跨域请求时未设置 cookie 我的服务器在 localhost 8000 中运行 客户端在 localhost 9000 中运行 服务器nodejs express上的cors设置是 app use function req res ne
  • React Router - 如何约束路由匹配中的参数?

    我真的不知道如何使用正则表达式等来约束参数 如何区分这两条路线呢
  • JavaScript 在对象中创建数组并将数据推送到数组

    我是编程新手 我正在尝试 React 并具有函数 addComment 当用户向新闻添加评论时执行该函数 此时我需要创建一个属性comments 数组 并分配或推送到该数组输入评论值价值 但现在我只重写了数组的 0 个元素 无法添加新元素
  • 在 React 中渲染来自 Firebase 的数据

    请帮助我渲染从 Firebase 实时数据库检索的数据 我成功从 Firebase 中以数组形式检索数据 下一步是显示数据 问题就从这里开始了 我想要显示的数据应该存储在 模块 状态 首先 它被设置为一个空数组 然后检索数据 通过 Coum

随机推荐

  • 使用容器视图控制器访问导航栏

    编写自己的容器时关于 UINavigationController 和 UINavigatinBar 的两个问题 1 我使用故事板创建了初始容器并将其嵌入到 UINavigationController 中 我发现 childViewCon
  • java缓存hashmap每天都会过期

    我想要一个HashMap
  • 如何从 C++ COM 迁移到 C++CLI

    我有一个通过 COM 公开内容的 C DLL 我想将其转换为公开托管接口的 C CLI 理想情况下 我只需添加 CLI 并一一转换接口即可 到目前为止我还没有取得任何成功 所以我正在寻找具体的策略 更多详情 很久以前 我创建了一个使用 CO
  • 世界地图与 ggmap

    我正在使用 ggmap 并希望有一张以澳大利亚为中心的世界地图 我可以轻松地绘制地理编码点 与其他一些地图包相比 ggmap 似乎更容易使用 然而 当我使用下面的代码浏览地图时 它会出错 gc lt geocode australia ce
  • Random ArrayIndexOutOfBoundsException,使用流按值对 Map 元素进行排序

    最近几天 我开始 玩 一些 Java 8 功能 例如流 我研究了一些文档和几个示例 在我的应用程序中 我有一个 Map 我需要获取具有最高值的三个元素 浮动部分 我尝试对我的代码进行不同的修改 其中一些解决方案还 按值对 Map 进行排序
  • Membership.ValidateUser 在 IIS 上始终返回 false

    Membership ValidateUser 方法适用于开发服务器 iis express 和 cassini 但在我的 IIS 上 它作为我的开发机器上的应用程序发布 它总是返回false 即使用户被批准 也不会被锁定 并且用户名和密码
  • 在 ACE 编辑器中应用Deltas

    我正在尝试在 Ace 编辑器中保存更改操作 然后回放它们 下面有一些伪代码 要点是 applyDeltas API 似乎没有为我的编辑器做任何事情 我绑定到编辑器更改事件 将更改增量推送到数组 并尝试稍后播放它 当我运行下面的代码时 我没有
  • data:text/html 处的网页对于某些 WebView text/html 内容字符串不可用

    我正在使用以下 Java 代码创建一些用于显示内容的 HTML public String htmlFromArrayList ArrayList
  • 如何写入 BitLocker 加密卷的物理扇区?

    I call CreateFile 我打开 PhysicalDrive0 然后我读取了 BitLocker 加密卷的扇区 一切正常 通过这种方式 我可以创建使用 BitLocker 加密的卷的物理 加密 扇区的备份副本 然后 我打电话Cre
  • Java - 使用流+ lambda 的多个集合的交集

    我有以下函数用于统一多个集合 包括重复元素 public static
  • oracle中的varchar2排序是如何工作的?

    我正在按 Varchar2 列对 Oracle SQL 查询进行排序 但是当我得到结果时 我无法正确理解顺序 这是逻辑顺序 第一个小写字母 数字 符号 在这里 我附上其中一项测试的结果排序 select FieldToOrder from
  • 如何从同一项目中的另一个 Kubernetes 集群调用 Kubernetes 集群公开的服务

    我有两个服务 集群 K1 中的 S1 和集群 K2 中的 S2 他们有不同的硬件要求 服务 S1 需要与 S2 通信 出于安全原因 我不想公开 S2 的公共 IP 在 K2 集群的计算实例上使用 NodePorts 和网络负载平衡会降低灵活
  • 如何调整 PyQt4 中 QMenuBar 的大小以适应 4K 显示

    我需要用 Python 编写一个带有用户界面的应用程序 我决定使用 PyQt4 来制作 GUI 它包含在 Python 的 Anaconda 发行版中 让 GUI 在 4K 显示器上流畅运行并非易事 默认情况下 大多数组件都太小 有些组件
  • 无法安装 vim 表格插件

    没有安装说明tabular https github com godlygeek tabular插入 我尝试将文件复制到正确的文件夹中 或者放入 vim bundle为了让病原体处理它 在这两种情况下 当我加载 vim 时 我都会收到以下错
  • HTML img src 位于根文件夹之外

    我试图引用源文件夹外部的图像文件 目前的结构是 Images img1 png My Source Folder Page 1 index html 从index html 文件中 我想引用img1 png 文件 我尝试了以下代码 img
  • IDLE 的子进程未建立连接。 IDLE 无法启动或个人防火墙软件阻止连接

    我尝试卸载它并搜索其他答案 它们都没有起作用 IDLE 打开 但我无法运行我编写的任何内容 在 Windows 10 中 1 输入 受控文件夹访问 2 选择 允许应用程序通过受控文件夹访问 对 UAC 选择 是 3 单击 添加允许的应用程序
  • java.lang.Math.PI 等于 GCC 的 M_PI 吗?

    我正在用 Java 和 C C 编写一些参考算法 其中一些算法使用 我希望每个算法的两种实现都能产生完全相同的结果 没有不同的舍入 迄今为止一直有效的一种方法是使用自定义的pi常量 在两种语言中完全相同 例如 3 14159 然而 当 Ja
  • 如何在 matplotlib 中创建具有垂直阴影的绘图[重复]

    这个问题在这里已经有答案了 I want to be able to replicate the following plot x 轴上有时间 y 轴上有 GDP GDP 线只是每日时间历史 无论其值如何 而衰退数据具有以下结构 从 1 1
  • ngrx 影响错误处理

    我有一个关于 ngrx效果的非常基本的问题 如何忽略效果执行期间发生的错误 使其不影响将来的效果执行 我的情况如下 我有一个动作 登录 和一个监听该动作的效果 如果此效果中发生错误 我想忽略它 当发生此错误后第二次调度 LOGIN 时 应再
  • MJML - 模板插值、动态数据、上下文

    经过大量搜索后 我很难找到如何 MJML https mjml io 处理动态数据和模板插值 我期待类似的事情 import mjml2html from mjml const context message Hello World con