工程科的通知@ faire
你好,Mjml社区,我们在Faire很兴奋地宣布,我们将接管维持开源的Mjml反应项目!
在过去的一年里,费尔广泛使用了mjml反应. 这个软件包使我们能够融入mjml的所有好处,而不必要求我们的开发者在从网络转移到电子邮件时学习一个新的dev环境. 因此,我们大大减少了创建电子邮件的开发努力,同时将电子邮件将问题传播到最低限度.
我们从Mjml反应中看到了很多好处, 这就是为什么我们要继续维持这个一揽子计划,用我们自己的一些新想法来改进它! 现在,你可以检查我们 在 @faire/mjml-反应我们希望这能在多数情况下成为Mjml反应的倒置替代,但如果有任何问题,我们急于与你合作。 不要犹豫 MJML Slack集团 或归档 a 有问题从那里,你可以期待新的改进即将到来.
当然,我们想向维克斯团队 表示热烈的感谢, 感谢它建设并维持了这个项目.
mjml -反应.. 
• 妇女
有个很棒的图书馆 米姆尔 上面写着github repo https://github.com/mjmlio/mjml 页面存档备份,存于互联网档案馆。 。 。 .
MJML 是一种由 邮件喷射。 。 。 .
因此,为了在苍蝇上创建电子邮件,我们创建了图书馆 React 组件.
今天以 V2 开始 - 100% 向后兼容 https://github.com/wix-incubator/mjml-resact/ (中文(中国大陆) )
V2是用于 https://github.com/wix-incubator/mjml-resact/ (中文(中国大陆) ),并获得一些额外的支持。 如果缺少组件,你可以做公关反对 https://github.com/Faire/mjml-resact/tree/main-v2 页面存档备份,存于互联网档案馆 或者提出一个问题 我们试着解开你的封口.
V3有什么新鲜事??
我们希望Mjml反应的V3能够相当容易地从V2迁移到.
- 字典:mjml-反应现在用字典来写,有助于确保正确的道具传递到mjml组件
- 完整的mjml组件支持:我们使用自动脚本来拉出mjml组件并创建相应的mjml-反应组件. 这意味着我们得到了所有组件的全力支持 最新的mjml版本
- 其他小的更改:在 mjml-反应中为 mjml 结尾标记添加危险Set InnerHTML , 更新测试, 在代码中添加 docuenation
开始
- 根据您的渲染环境在 mjml 或 mjml- 浏览器中选择渲染 。 还包括所需额外依赖.
节点 :
npm install @faire/mjml-react mjml react react-dom
浏览器 :
npm install @faire/mjml-react mjml-browser react react-dom
- 连接您的渲染函数( uncomment)
mjml或者说mjml-browser(中文(简体) )
import { renderToMjml } from "@faire/mjml-react/utils/renderToMjml";
// import mjml2html from "mjml";
// import mjml2html from "mjml-browser";
import { MJMLParseResults } from "mjml-core";
import React from "react";
export function renderReactToMjml(
email: React.ReactElement
): Promise<MJMLParseResults> {
return mjml2html(renderToMjml(email));
}
- 然后写一个像专业的代码:
import {
Mjml,
MjmlHead,
MjmlTitle,
MjmlPreview,
MjmlBody,
MjmlSection,
MjmlColumn,
MjmlButton,
MjmlImage,
} from "@faire/mjml-react";
import { renderReactToMjml } from "./renderReactToMjml";
const { html, errors } = await renderReactToMjml(
<Mjml>
<MjmlHead>
<MjmlTitle>Last Minute Offer</MjmlTitle>
<MjmlPreview>Last Minute Offer...</MjmlPreview>
</MjmlHead>
<MjmlBody width={500}>
<MjmlSection fullWidth backgroundColor="#efefef">
<MjmlColumn>
<MjmlImage src="https://static.wixstatic.com/media/5cb24728abef45dabebe7edc1d97ddd2.jpg" />
</MjmlColumn>
</MjmlSection>
<MjmlSection>
<MjmlColumn>
<MjmlButton
padding="20px"
backgroundColor="#346DB7"
href="https://www.wix.com/"
>
I like it!
</MjmlButton>
</MjmlColumn>
</MjmlSection>
</MjmlBody>
</Mjml>,
{ validationLevel: "soft" }
);
因此,您将获得一个好看的电子邮件 HTML(手机中的工作也)
选项
@faire/ mjml- react 在渲染到 HTML 时设置了以下 MJML 选项 :
{
keepComments: false,
beautify: false,
minify: false,
minifyOptions: {
collapseWhitespace: true,
minifyCss: true,
removeComments: "safe",
removeEmptyAttributes: true,
},
validationLevel: 'strict'
}
如果您想要覆盖这些对象, 您可以将对象传递到 render 作为第二个论点。 见 MJML 文档 对于您可以设置的全部选项列表.
扩展
import {
MjmlHtml,
MjmlComment,
MjmlConditionalComment
} from '@faire/mjml-react/extensions';
<MjmlComment>Built with ... at ...</MjmlComment>
// <!--Built with ... at ...-->
<MjmlConditionalComment>MSO conditionals</MjmlConditionalComment>
// <!--[if gte mso 9]>MSO conditionals<![endif]-->
<MjmlConditionalComment condition="if IE">MSO conditionals</MjmlConditionalComment>
// <!--[if IE]>MSO conditionals<![endif]-->
<MjmlHtml tag="div" html="<span>Hello World!</span>" />
// <div><span>Hello World!</span></div>
用户
我们也有一些用于处理输出 HTML 的功能.
因为并非所有邮件客户端都会支持命名为 HTML 的实体, 如 '。 。 。 .
所以我们得把它们换成六分卫.
import {
namedEntityToHexCode,
fixConditionalComment,
} from "@faire/mjml-react/utils";
const html = "<div>'</div>";
namedEntityToHexCode(html);
// <div>'</div>
fixConditionalComment(
"<!--[if mso]><div>Hello World</div><![endif]-->",
"Hello",
"if IE"
);
// <!--[if IE]><div>Hello World</div><![endif]-->
限制
现 mjml 财务报告和审定财务报表 @faire/mjml-react 图书馆是用来在一个节点内运行的.
示例项目
您可以在此找到一个示例工程 https://github.com/wix-incubator/mjml-反应-实例 互联网档案馆的存檔,存档日期2013-12-21