如何用JavaScript调整Mailchimp邮件归档的文本排列格式？

步骤1：更新CSS样式 #

替换原有的<style>内容，添加浮动布局和清除浮动的样式，确保布局正常：

<style type="text/css">
/* 基础归档容器样式 */
.display_archive {
  font-family: helvetica, verdana;
  font-size: 18px;
}

/* 每个邮件项的容器，清除浮动避免高度塌陷 */
.campaign {
  line-height: 125%;
  margin: 10px 0;
  padding: 5px 0;
  overflow: hidden; /* 关键：清除子元素浮动影响 */
  border-bottom: 1px solid #eee; /* 可选：添加项之间的分隔线 */
}

/* 标题左浮动 */
.campaign-title {
  float: left;
}

/* 日期右浮动，可选调整颜色 */
.campaign-date {
  float: right;
  color: #666;
}
</style>

步骤2：添加JavaScript文本重排代码 #

在原有的Mailchimp脚本之后，添加这段JS代码，用来拆分日期和标题并重构DOM结构：

<script type="text/javascript">
// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有邮件归档项
  const campaignItems = document.querySelectorAll('.campaign');
  
  // 遍历每个项处理
  campaignItems.forEach(item => {
    // 获取项里的链接元素
    const link = item.querySelector('a');
    if (!link) return; // 如果没有链接，跳过当前项
    
    // 按" - "拆分文本（注意前后空格，匹配原格式）
    const [dateText, titleText] = link.textContent.split(' - ');
    if (!dateText || !titleText) return; // 格式不符合则跳过
    
    // 创建标题span元素，添加类名
    const titleSpan = document.createElement('span');
    titleSpan.className = 'campaign-title';
    titleSpan.textContent = titleText.trim();
    
    // 创建日期span元素，添加类名
    const dateSpan = document.createElement('span');
    dateSpan.className = 'campaign-date';
    dateSpan.textContent = dateText.trim();
    
    // 清空原链接的文本，插入标题span
    link.innerHTML = '';
    link.appendChild(titleSpan);
    
    // 在邮件项里插入日期span
    item.appendChild(dateSpan);
  });
});
</script>

步骤3：整合完整代码 #

把更新后的CSS、原Mailchimp脚本和新JS代码整合在一起，替换你原来的代码：

<style type="text/css">
/* 基础归档容器样式 */
.display_archive {
  font-family: helvetica, verdana;
  font-size: 18px;
}

/* 每个邮件项的容器，清除浮动避免高度塌陷 */
.campaign {
  line-height: 125%;
  margin: 10px 0;
  padding: 5px 0;
  overflow: hidden; /* 关键：清除子元素浮动影响 */
  border-bottom: 1px solid #eee; /* 可选：添加项之间的分隔线 */
}

/* 标题左浮动 */
.campaign-title {
  float: left;
}

/* 日期右浮动，可选调整颜色 */
.campaign-date {
  float: right;
  color: #666;
}
</style>

<!-- 原Mailchimp生成脚本 -->
<script type="text/javascript" src="//itleaderboard.us18.list-manage.com/generate-js/?u=3c0abed3fa8e00bd96d5481fd&fid=8258&show=10"></script>

<!-- 自定义文本重排脚本 -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const campaignItems = document.querySelectorAll('.campaign');
  
  campaignItems.forEach(item => {
    const link = item.querySelector('a');
    if (!link) return;
    
    const [dateText, titleText] = link.textContent.split(' - ');
    if (!dateText || !titleText) return;
    
    const titleSpan = document.createElement('span');
    titleSpan.className = 'campaign-title';
    titleSpan.textContent = titleText.trim();
    
    const dateSpan = document.createElement('span');
    dateSpan.className = 'campaign-date';
    dateSpan.textContent = dateText.trim();
    
    link.innerHTML = '';
    link.appendChild(titleSpan);
    item.appendChild(dateSpan);
  });
});
</script>

代码说明 #

1. CSS部分：

   • overflow: hidden 用于清除子元素浮动带来的容器高度塌陷问题
   • .campaign-title 和 .campaign-date 分别设置左右浮动，实现目标布局
   • 可选的分隔线和日期颜色调整，用来提升视觉层次感

2. JavaScript部分：

   • DOMContentLoaded 确保页面元素加载完成后再执行代码，避免出现找不到元素的错误
   • querySelectorAll('.campaign') 获取所有邮件归档项
   • split(' - ') 按原格式的分隔符拆分文本，注意保留前后空格以匹配原结构
   • 创建两个<span>元素分别存放日期和标题，添加类名方便CSS控制
   • 重构DOM结构，将标题放在可点击的链接内，日期放在邮件项容器中

处理完成后，每个归档项会呈现标题左对齐（链接可点击）、日期右对齐的布局，同时去掉了原有的分隔符“-”。

内容的提问来源于stack exchange，提问作者Tracy Kistler