首先，我是电子邮件标记的新手。所以我决定使用 mjml 来构造一个字母，但我遇到了问题——标记没有正确呈现：MJML 不包含组件，我不明白为什么。项目是使用 npm 包 mjml-component-boilerplate 创建的，因为我想注册自己的组件。
我的 index.mjml
<mj-body>
<mj-include path="./components/blocks/header.mjml" />
<mj-include path="./components/blocks/main.mjml" />
<mj-include path="./components/blocks/footer.mjml" />
</mj-body>
输出 index.html 的一部分（与 main.mjml 和 footer.mjml 相同）
<div>
<!-- mj-include fails to read file : ./components/blocks/header.mjml at D:\projects\ctc_projects\chetv\site\reshala_promo\email\components\blocks\header.mjml -->
头文件.mjml
<mj-section>
<mj-column>
<mj-div css-class="header">
<mj-image
src="/assets/images/logo.png"
alt="ЧЕ!"
title="https://chetv.ru/"
href="https://chetv.ru/"
target="__blank"
css-class="header__logo"
/>
</mj-div>
</mj-column>
</mj-section>
并且，对于一个案例，如果它有任何意义我的 MjDiv 组件
import { registerDependencies } from 'mjml-validator'
import { BodyComponent } from 'mjml-core'
registerDependencies({
'mj-body': ['mj-div'],
'mj-column': ['mj-div'],
'mj-section': ['mj-div'],
'mj-div': [
'mj-text', 'mj-image', 'mj-accordion',
'mj-carousel', 'mj-divider', 'mj-group',
'mj-navbar', 'mj-raw', 'mj-social',
'mj-div', 'mj-a', 'mj-p', 'mj-h1'
]
});
export default class MjDivComponent extends BodyComponent {
static endingTag = true;
static allowedAttributes = {
'css-class': 'css-class',
'style': 'style'
};
render() {
return `<div
${this.htmlAttributes({
class: this.getAttribute('css-class'),
style: this.getAttribute('style')
})}
>${this.getContent()}</div>`;
}
}