邮箱模板自用教程

代码文件mail.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码通知</title>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .main {
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            padding: 30px;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            background: linear-gradient(145deg, #fefefe, #f4f4f4);
            box-shadow: 
                0 4px 12px rgba(0,0,0,0.05),
                inset 5px 5px 10px #c1c6cd,
                inset -5px -5px 10px #fff;
        }
        h3 {
            color: #5a3e36;
            margin-bottom: 8px;
        }
        .link {
            color: #9c515b;
            text-decoration: none;
            font-weight: 600;
        }
        .hr {
            height: 1px;
            background: linear-gradient(to right, transparent, #d4a59a, transparent);
            border: 0;
            margin: 20px 0;
        }
        .content {
            /* text-align: center; */
            background: linear-gradient(145deg, #f8f8f8, #f0f0f0);
            border-radius: 10px;
            padding: 20px;
            margin: 15px 0;
            border: 1px solid #e5e5e5;
            box-shadow: 
                inset 3px 3px 6px #c1c6cd,
                inset -3px -3px 6px #fff;
        }
        .verification-code {
            text-align: center;
            font-size: 36px;
            font-weight: 700;
            letter-spacing: 6px;
            color: #9c515b;
            padding: 20px;
            background: rgba(156, 81, 91, 0.05);
            border-radius: 8px;
            margin: 10px 0;
            text-shadow: 0 2px 3px rgba(0,0,0,0.1);
        }
        .bold {
            font-weight: 600;
            color: #777;
            margin: 15px 0 5px;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #b3b3b1;
        }
        .footer-img {
            width: 48px;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .action-btn {
            display: inline-block;
            padding: 10px 20px;
            background: linear-gradient(145deg, #f8f8f8, #f0f0f0);
            color: #9c515b;
            text-decoration: none;
            border-radius: 8px;
            box-shadow: 
                3px 3px 6px #c1c6cd,
                -3px -3px 6px #fff;
            transition: all 0.2s;
        }
        .action-btn:hover {
            box-shadow: 
                inset 3px 3px 6px #c1c6cd,
                inset -3px -3px 6px #fff;
        }
        .chakan {
            text-align: center;
        }

        .chakan a:hover {
            box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff !important
        }

        .chakan a {
            color: #9c515b;
            text-decoration: none;
            padding: 10px 15px;
            font-size: 13px;
            border-radius: 10px;
            box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
            transition: all .3s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="main">
        <center>
            <h3>你收到了来自 <a class="link">昴</a> 的验证码</h3>
        </center>
      
        <hr class="hr">
      
        <p class="bold">验证码信息：</p>
        <div class="content">
            操作类型：账户安全验证<br>
            有效时间：15分钟<br>
            使用场景：注册/登录/修改密码/身份验证
        </div>
      
        <p class="bold">您的验证码：</p>
        <div class="content">
            <div class="verification-code">{{占位符}}</div>
        </div>
      
        <p class="bold">此邮件由系统自动发出，请勿回复</p>
      
        <div class="chakan" style="text-align: center; margin: 25px 0;">
            <a href="#" class="action-btn">如非本人操作请忽略 »</a>
        </div>
      
        <div class="footer">
            <img src="https://q.qlogo.cn/headimg_dl?dst_uin=3067027828&spec=100" class="footer-img">
            <hr style="width: 200px; border: 0; border-top: 1px solid #e0e0e0; margin: 15px auto;">
            © 2021-2024 <a href="https://6wd.cn" style="color: #9c515b; text-decoration: none;">枫の屋·6wd.cn</a>
        </div>
    </div>
</body>
</html>

效果图

样式配置说明

基础样式

类名/元素 可配置项 默认值 说明
body background-color #f5f5f5 页面背景色
font-family 系统字体栈 全局字体设置
.main max-width 800px 主容器最大宽度
background 浅灰渐变 主容器背景
box-shadow 复合阴影 立体效果

关键组件

标题区域

h3 {
  color: #5a3e36; /* 标题颜色 */
}
.link {
  color: #9c515b; /* 发送者链接颜色 */
}

分隔线

.hr {
  background: linear-gradient(...); /* 渐变分隔线 */
}

内容卡片

.content {
  background: linear-gradient(...); /* 卡片背景 */
  box-shadow: inset...; /* 内阴影效果 */
}

验证码显示

.verification-code {
  color: #9c515b; /* 验证码颜色 */
  background: rgba(156, 81, 91, 0.05); /* 半透明背景 */
  letter-spacing: 6px; /* 字符间距 */
}

操作按钮

.action-btn {
  /* 正常状态 */
  box-shadow: 3px 3px 6px #c1c6cd, -3px -3px 6px #fff;
  
  /* 悬停状态 */
  &:hover {
    box-shadow: inset...;
  }
}

动态内容替换

在HTML中找到以下占位符进行替换也可以固定，提供的代码是固定的：

<!-- 发送者名称 -->
<a class="link">{{发送者名称}}</a>

<!-- 验证码 -->
<div class="verification-code">{{验证码}}</div>

<!-- 操作信息 -->
操作类型：{{操作类型}}<br>
有效时间：{{有效时间}}<br>
使用场景：{{使用场景}}

<!-- 页脚信息 -->
<img src="{{LOGO_URL}}">
<a href="{{网站链接}}">{{网站名称}}</a>
© {{起始年份}}-{{当前年份}}

使用示例

PHP替换示例

$template = file_get_contents('template.html');
$replacements = [
  '{{发送者名称}}' => '星辰系统',
  '{{验证码}}' => 'A1B2C3',
  '{{操作类型}}' => '密码重置',
  '{{有效时间}}' => '15分钟',
  '{{使用场景}}' => '账户安全验证',
  '{{LOGO_URL}}' => 'https://example.com/logo.png',
  '{{网站链接}}' => 'https://example.com',
  '{{网站名称}}' => '示例公司',
  '{{起始年份}}' => '2021',
  '{{当前年份}}' => date('Y')
];

$email_content = str_replace(
  array_keys($replacements),
  array_values($replacements),
  $template
);

Node.js替换示例

const fs = require('fs');
let template = fs.readFileSync('template.html', 'utf8');

const data = {
  sendername: '星辰系统',
  code: 'X9Y8Z7',
  // ...其他替换字段
};

Object.entries(data).forEach(([key, value]) => {
  template = template.replace(new RegExp(`{{${key}}}`, 'g'), value);
});

注意事项

  1. 保持CSS中的neumorphism设计风格时，注意阴影方向的一致性
  2. 验证码区域建议保持足够的对比度
  3. 在移动端测试显示效果
  4. 生产环境请移除所有注释代码

这个Markdown教程：
1. 完全基于您提供的原始代码
2. 采用表格和代码块结合的方式展示配置项
3. 包含多语言示例
4. 保持您原有的设计风格说明
5. 突出显示了所有可配置点

您可以直接将此Markdown文档保存为`README.md`或`CONFIG.md`与模板文件配套使用。