如何自定义Letter Opener邮件模板：从默认到轻量级的完整指南

2026-01-29 11:31:18作者：秋阔奎Evelyn

Letter Opener是一款强大的Ruby开发工具，它允许开发者在浏览器中预览邮件而无需实际发送，极大地简化了邮件功能的测试流程。本文将详细介绍如何自定义Letter Opener的邮件模板，从默认模板到轻量级模板，帮助你打造符合项目需求的邮件预览界面。

认识Letter Opener的模板系统

Letter Opener默认提供了两种邮件模板，分别位于项目的lib/letter_opener/templates/目录下：

default.html.erb：功能完整的默认模板，包含邮件头信息、样式和交互功能
light.html.erb：轻量级模板，仅包含最基本的邮件内容展示

这两种模板为开发者提供了不同场景下的邮件预览需求，同时也为自定义模板提供了良好的基础。

默认模板详解：default.html.erb

默认模板是Letter Opener最常用的模板，它提供了丰富的功能和完整的邮件信息展示。让我们来了解其主要组成部分：

邮件头信息区域

默认模板的邮件头部分位于<div id="message_headers">中，展示了邮件的各种元数据：

<dl>
  <dt>From:</dt>
  <dd><%= h from %></dd>
  
  <% unless sender.empty? %>
    <dt>Sender:</dt>
    <dd><%= h sender %></dd>
  <% end %>
  
  <% unless reply_to.empty? %>
    <dt>Reply-To:</dt>
    <dd><%= h reply_to %></dd>
  <% end %>
  
  <% if mail.subject %>
    <dt>Subject:</dt>
    <dd><strong><%= h mail.subject %></strong></dd>
  <% end %>
  
  <dt>Date:</dt>
  <dd><%= Time.now.strftime("%b %e, %Y %I:%M:%S %p %Z") %></dd>
  
  <% unless to.empty? %>
    <dt>To:</dt>
    <dd><%= h to %></dd>
  <% end %>
  
  <% unless cc.empty? %>
    <dt>CC:</dt>
    <dd><%= h cc %></dd>
  <% end %>
  
  <% unless bcc.empty? %>
    <dt>BCC:</dt>
    <dd><%= h bcc %></dd>
  <% end %>
  
  <% if @attachments.any? %>
    <dt>Attachments:</dt>
    <dd>
    <% @attachments.each do |filename, path| %>
      <a href="<%= path %>"><%= filename %></a>&nbsp;
    <% end %>
    </dd>
  <% end %>
</dl>

这个部分展示了发件人、收件人、主题、日期等关键信息，并支持附件显示。

邮件内容区域

邮件内容展示部分根据邮件类型（纯文本或HTML）提供了不同的展示方式：

<% if type == "plain" %>
  <pre id="message_body"><%= auto_link(h(body)) %></pre>
<% else %>
  <iframe seamless="seamless" srcdoc="<base target='_top'><%= h(body) %>"></iframe>
<% end %>

对于HTML邮件，模板使用iframe来安全地展示邮件内容，避免样式冲突。

样式与交互功能

默认模板包含了完整的CSS样式定义，位于<style>标签内，定义了容器、邮件头、邮件内容等元素的样式。此外，还包含了一段JavaScript代码，用于处理iframe的兼容性问题。

轻量级模板：light.html.erb

轻量级模板是一个极简的邮件预览解决方案，代码非常简洁：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=<%= encoding %>">
    <% if mail.subject %>
      <title><%= h mail.subject %></title>
    <% end %>
  </head>
  <body>
    <%= body %>
  </body>
</html>

这个模板只包含最基本的HTML结构，直接将邮件内容嵌入到页面中，不包含任何额外的样式或邮件头信息。适用于只需要查看邮件内容的简单场景。

如何选择合适的模板

选择模板时，可以根据项目需求和个人偏好来决定：

默认模板：适合需要完整邮件信息展示的场景，特别是在调试邮件头、附件等功能时非常有用。
轻量级模板：适合只关注邮件内容本身的场景，加载速度更快，界面更简洁。

你可以通过配置Letter Opener来指定使用哪个模板，也可以根据不同的环境（开发、测试）使用不同的模板。

自定义模板的步骤

如果你需要创建自己的邮件模板，可以按照以下步骤进行：

1. 创建新的模板文件

在lib/letter_opener/templates/目录下创建一个新的ERB模板文件，例如custom.html.erb。

2. 设计模板结构

可以参考默认模板或轻量级模板的结构，根据需求添加或删除元素。模板中可以使用以下变量：

mail：邮件对象，包含主题、发件人、收件人等信息
body：邮件内容
type：邮件类型（"plain"或"rich"）
from：发件人地址
to：收件人地址
cc：抄送地址
bcc：密送地址
reply_to：回复地址
sender：发送者地址
@attachments：附件列表

3. 应用自定义模板

在配置Letter Opener时，指定使用自定义模板：

config.action_mailer.delivery_method = :letter_opener
config.action_mailer.letter_opener.template = :custom

模板定制技巧

添加自定义样式

可以在模板的<style>标签中添加自定义CSS，美化邮件预览界面：

#container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#message_headers {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

调整布局结构

根据需要调整邮件头和邮件内容的布局，例如将邮件头信息改为卡片式布局，或调整信息的排列顺序。

添加额外信息

可以在模板中添加额外的调试信息，如邮件ID、模板名称等，帮助开发和测试：

<div id="debug_info" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;">
  <p>邮件ID: <%= mail.message_id %></p>
  <p>模板名称: custom.html.erb</p>
</div>

总结

Letter Opener提供了灵活的邮件模板系统，通过默认模板和轻量级模板满足不同的预览需求。通过自定义模板，你可以打造更符合项目需求的邮件预览界面，提高开发效率。无论是需要完整的邮件信息展示，还是简洁的内容预览，Letter Opener都能满足你的需求，是Ruby邮件开发的必备工具。

要开始使用Letter Opener，只需将仓库克隆到本地：

git clone https://gitcode.com/gh_mirrors/le/letter_opener

然后按照项目文档进行配置，即可开始享受便捷的邮件预览功能。根据项目需求选择或自定义合适的模板，让邮件开发和测试变得更加高效和愉悦！

letter_opener

Preview mail in the browser instead of sending.

项目地址：https://gitcode.com/gh_mirrors/le/letter_opener

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

Java

RuoYi-Vue3

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Vue

1.37 K

781