博客添加邮件订阅(2): Mailchimp

2023-11-21
#Blog

1. 引言

邮件订阅用 Mailchimp1。

此邮件订阅功能还是参考博客——山茶花舍2。

2. 步骤

  1. 先在注册和登录账号： https://us21.admin.mailchimp.com/

  2. 点击 Create an Automation Email，选择 Share blog updates，点击 “Begin”进入下一步

  3. RSS Feed： RSS feed URL 处填写为自己网站的 RSS 订阅链接，比如： https://xiaoledeng.com/index.xml ，周期可以根据需要设置。 选中 Resize RSS feed images to fit template，可以优化邮件内图片的尺寸。完成后，点击右下角的 Next。

  4. Recipients：选择 Entire audience（全体观众）。完成后，点击右下角的 Next。

  5. Setup：这一步设置Campaign info。Email subject 为发送邮件的标题，Mailchimp 的 RSS 格式化标签3为：*|RSSITEM:TITLE|*。From Name 为邮件中显示的发件人名字。From email address 为邮件中显示的发件人地址。 More options 中的 Auto-convert video 推荐选中，可以优化 Newsltter 内视频的样式。完成后，点击右下角的 Next。

  6. Template：这一步选择邮件模版。选中 Basic 栏下的 1 Column。

  7. Design：这一步设置邮件样式。将左侧预设的中间内容移除，在右侧的 Blocks 栏内找到 RSS Header 与 RSS Items，将这两项拖入左侧内容中。分别设置 RSS Header 与 RSS Items的样式为 Custom，可以设置字体 Font。完成后，点击右下角的 Next。

  8. Confirm：每一步完成，点击右下角的 Confirm。

  9. 博客添加订阅邮件页：在 Audience 上有提供 Signup forms, 推荐： Embed code，在config.toml添加菜单栏

[[menu.main]]
weight = 50
name = "Subscribe"
url = "/subscribe/"

在content/文件夹，添加subscribe.md文件，内容为：

---
title:
---

<div id="mc_embed_shell">
      <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
  <style type="text/css">
        #mc_embed_signup{background:#fff; false;clear:left; font:14px Helvetica,Arial,sans-serif; width: 350px;}
        /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
           We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
    <form action="https://xiaoledeng.us21.list-manage.com/subscribe/post?u=89d1f8a7730d94c22f142d471&amp;id=5b8957b4b2&amp;f_id=0017e8e6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
        <div id="mc_embed_signup_scroll"><h2>Subscribe my website</h2>
            <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
            <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div><div class="mc-field-group"><label for="mce-FNAME">First Name </label><input type="text" name="FNAME" class=" text" id="mce-FNAME" value=""></div><div class="mc-field-group"><label for="mce-LNAME">Last Name </label><input type="text" name="LNAME" class=" text" id="mce-LNAME" value=""></div>
        <div id="mce-responses" class="clear foot">
            <div class="response" id="mce-error-response" style="display: none;"></div>
            <div class="response" id="mce-success-response" style="display: none;"></div>
        </div>
    <div aria-hidden="true" style="position: absolute; left: -5000px;">
        /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
        <input type="text" name="b_89d1f8a7730d94c22f142d471_5b8957b4b2" tabindex="-1" value="">
    </div>
        <div class="optionalParent">
            <div class="clear foot">
                <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe">
                <p style="margin: 0px auto;"><a href="http://eepurl.com/iErh_6" title="Mailchimp - email marketing made easy and fun"><span style="display: inline-block; background-color: transparent; border-radius: 4px;"><img class="refferal_badge" src="https://digitalasset.intuit.com/render/content/dam/intuit/mc-fe/en_us/images/intuit-mc-rewards-text-dark.svg" alt="Intuit Mailchimp" style="width: 220px; height: 40px; display: flex; padding: 2px 0px; justify-content: center; align-items: center;"></span></a></p>
            </div>
        </div>
    </div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>

3. Mailchimp修改时区

登录 Mailchimp，点击右上角头像，选择 Profile — Settings — Details — Timezone，选择合适的时区（比如：GMT+08:00 Shanghai），最后保存。

4. 延伸阅读

  1. Mailchimp
  2. 静态博客添加 Newsletter 的几种推荐方案
  3. Mailchimp 官方 RSS 格式参考
  4. 使用mailchimp将RSS转为邮件订阅 - 拾月