设计师咨询：Velocity邮件页眉页脚统一管理及实时预览方案

兄弟，我太懂你这种几百份复制粘贴来的邮件模板维护的痛苦了——之前帮几个设计师朋友解决过几乎一模一样的问题，结合你的两个硬性要求（编辑能预览、修改全局同步），给你两个非常落地的方案：

方案1：Velocity宏 + 本地预编译预览工具（推荐，最贴合Velocity生态） #

这个方案既能利用Velocity的特性做全局管理，又能解决预览时无法加载外部文件的问题：

1. 封装页眉页脚为Velocity宏
   把你的页眉、页脚分别写成独立的Velocity宏文件，比如header.vm和footer.vm：

   #macro(renderHeader)
   <!-- 这里放完整的页眉HTML，所有CSS必须内联（邮件客户端要求） -->
   <table style="width:100%;background:#f5f5f5;">
     <tr><td>你的页眉内容...</td></tr>
   </table>
   #end
   

   页脚同理，把完整的页脚代码放进#macro(renderFooter)块里。

2. 在邮件模板中引用宏
   每一份邮件模板里，只需要保留核心内容，然后引入宏文件并调用：

   #include("header.vm")
   #renderHeader()
   
   <!-- 这里是你邮件的核心内容，只需要维护这部分 -->
   <div class="content">...</div>
   
   #include("footer.vm")
   #renderFooter()
   

3. 本地预编译实现预览
   因为直接在浏览器打开.vm文件看不到渲染效果，你可以用简单的本地工具预编译Velocity模板为HTML：

   • 用velocity-cli（Node.js工具），安装后跑一行命令：velocity render *.vm --out ./preview，就能把所有.vm文件编译成带完整页眉页脚的HTML，直接在浏览器打开预览。
   • 每次修改header.vm或footer.vm后，重新跑一遍编译命令，所有邮件模板的预览文件都会自动同步更新，完全满足你“修改全局同步+预览设计效果”的要求。

方案2：标记式片段 + 批量替换工具（零Velocity学习成本，适合纯设计师） #

如果你不想折腾Velocity语法，这个方案更简单直接：

1. 给页眉页脚加全局标记
   把每一份邮件模板里的页眉替换成唯一标记，比如{{GLOBAL_HEADER}}，页脚替换成{{GLOBAL_FOOTER}}，核心内容保留不变：

   {{GLOBAL_HEADER}}
   
   <!-- 邮件核心内容 -->
   <div>...</div>
   
   {{GLOBAL_FOOTER}}
   

2. 维护单独的页眉页脚文件
   把真正的页眉HTML存在global-header.html，页脚存在global-footer.html里，平时只修改这两个文件。

3. 批量替换生成预览

   • 预览时，用VS Code的“查找全部替换”功能：先打开所有邮件模板，把{{GLOBAL_HEADER}}替换成global-header.html里的内容，{{GLOBAL_FOOTER}}替换成global-footer.html的内容，保存后就能直接在浏览器打开预览。
   • 也可以用专门的批量文本替换工具（比如TextCrawler），一键完成所有模板的标记替换，效率极高。

额外的设计师友好小技巧 #

• 不管用哪个方案，所有CSS必须内联到HTML元素里——邮件客户端几乎不支持外部CSS或<style>标签，这是邮件模板的核心要求。
• 预览时可以用浏览器的“开发者工具”模拟不同屏幕尺寸，或者用本地邮件预览工具（比如Email on Acid桌面版）查看不同邮箱客户端的渲染效果。

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