首先,我是电子邮件标记的新手。因此,我决定使用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 -->
header.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>`;
}
}
最佳答案
您演示了将<mj-include>
组件放在<mj-body>
之后(如https://mjml.io/documentation/#mj-include中所示)。那对我不起作用。
当我将<mj-include>
元素放在<mj-head>
之后时,它确实对我有用。祝好运!
我将您的其余帖子解释为背景,而不是再问其他问题。否则请通知我。
顺便说一句:除了stackoverflow,MJML信息的另一个重要来源是https://mjml.slack.com。
关于javascript - MJML:mj-include无法读取文件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51740951/