如何为MJML body组件添加id属性以实现邮件模板锚点链接？

Hey there! Let’s break down how to add an ID to your MJML <mj-body> component and get those anchor links working smoothly—this is totally doable, and I’ll walk you through the exact steps plus compatibility tips.

First: Directly Add the ID to <mj-body> #

MJML is designed to pass valid HTML attributes through to its rendered output, so you can simply add the id attribute directly to the <mj-body> tag, just like you would in raw HTML. Here’s a full example:

<mjml>
  <mj-head>
    <mj-title>Anchor Link Demo</mj-title>
  </mj-head>
  <!-- Add your ID directly to mj-body -->
  <mj-body id="email-body">
    <!-- Anchor link pointing to a section later in the email -->
    <mj-section>
      <mj-column>
        <mj-button href="#pricing-section">Jump to Pricing</mj-button>
      </mj-column>
    </mj-section>

    <!-- Spacer to make the jump visible -->
    <mj-section height="500px">
      <mj-column>
        <mj-text>Scroll down to see the pricing section!</mj-text>
      </mj-column>
    </mj-section>

    <!-- Target section with its own ID -->
    <mj-section id="pricing-section">
      <mj-column>
        <mj-text font-size="24px" font-weight="bold">
          Pricing Plans
        </mj-text>
        <mj-text>
          Basic: $9/month<br>
          Pro: $19/month<br>
          Enterprise: Custom
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

When MJML renders this, the <mj-body id="email-body"> will turn into a standard HTML <body id="email-body"> tag, and your anchor links will reference the id on the <mj-section> (which becomes a <div id="pricing-section"> in the output).

If Direct ID Doesn’t Work: Use Global Attributes #

If you’re using an older MJML version or want to define the body ID globally (useful for templates reused across multiple emails), use the <mj-attributes> component in your <mj-head>:

<mjml>
  <mj-head>
    <mj-title>Global Body ID Demo</mj-title>
    <mj-attributes>
      <!-- Define the ID for all mj-body instances -->
      <mj-body id="global-email-body" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <!-- Same content as the first example -->
  </mj-body>
</mjml>

Critical Compatibility Tip for Outlook Desktop #

Outlook’s desktop app (Windows) can be finicky with anchor links that rely solely on id attributes. To make your links work there, add a native HTML <a name="your-anchor-name"></a> tag inside the target section using <mj-raw> (MJML’s way to inject raw HTML):

<mj-section id="pricing-section">
  <mj-column>
    <!-- Add this raw HTML anchor for Outlook compatibility -->
    <mj-raw><a name="pricing-section"></a></mj-raw>
    <mj-text font-size="24px" font-weight="bold">
      Pricing Plans
    </mj-text>
    <!-- Rest of your content -->
  </mj-column>
</mj-section>

Then update your link to use the name attribute too (or keep both for broadest support): <mj-button href="#pricing-section">Jump to Pricing</mj-button>

Quick Recap #

• Add an id directly to <mj-body> (or use <mj-attributes> for global setup)
• Assign id attributes to the sections you want to link to
• Add a <a name="..."></a> via <mj-raw> if you need to support Outlook desktop

That’s all you need to get anchor links working in your MJML templates!

内容的提问来源于stack exchange，提问作者Ayooluwa Oyewo