页面加载中
博客快捷键
按住 Shift 键查看可用快捷键
ShiftK
开启/关闭快捷键功能
ShiftA
打开/关闭中控台
ShiftD
深色/浅色显示模式
ShiftS
站内搜索
ShiftR
随机访问
ShiftH
返回首页
ShiftL
友链页面
ShiftP
关于本站
ShiftI
原版/本站右键菜单
松开 Shift 键或点击外部区域关闭
互动
最近评论
暂无评论
标签
寻找感兴趣的领域
暂无标签
    0
    文章
    0
    标签
    8
    分类
    10
    评论
    128
    功能
    深色模式
    标签
    JavaScript12TypeScript8React15Next.js6Vue10Node.js7CSS5前端20
    互动
    最近评论
    暂无评论
    标签
    寻找感兴趣的领域
    暂无标签
      0
      文章
      0
      标签
      8
      分类
      10
      评论
      128
      功能
      深色模式
      标签
      JavaScript12TypeScript8React15Next.js6Vue10Node.js7CSS5前端20
      随便逛逛
      博客分类
      文章标签
      复制地址
      深色模式
      AnHeYuAnHeYu
      Search⌘K
      博客
        暂无其他文档

        Anheyu-app 新建邮箱模板分享

        文章摘要
        本文详细介绍了为Anheyu-app创建的两个邮箱模板,一个用于作者收到评论,另一个用于用户收到回复。作者收到评论模板通过HTML代码实现,包括通知头部、评论者信息、评论内容、信息标签和查看评论按钮,整体设计简约清晰。用户收到回复模板同样采用HTML编写,包含头部、用户评论内容、回复者信息、回复内容、查看完整对话按钮和页脚。两个模板均采用类似聊天的风格,便于用户阅读和理解。作者鼓励读者使用或修改这些模板,并希望得到反馈以供借鉴。
        December 27, 20256 分钟 阅读147 次阅读

        今天,闲的没事的时候给Anheyu-app新建了两个邮箱模板,分别用于作者收到评论和用户收到回复。以下是对这两个模板的详细说明和代码示例。
        假如你是使用别的评论软件如twikoo,artalk等,原理上还是一致的,只需要把占位符换成这两种评论的专用的格式即可(文档上应该有写吧)。

        作者收到评论模板

        这个模板用于通知作者他们的文章收到了新的评论。
        效果如图所示:

        以下是模板的HTML代码:

        html
        html>html>head>
            meta charset="UTF-8">
            meta name="viewport" content="width=device-width, initial-scale=1.0">
            title>收到新评论title>head>body style="margin: 0; padding: 0; background-color: #0f0f0f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
            table width="100%" cellpadding="0" cellspacing="0" style="background-color: #0f0f0f; padding: 50px 20px;">
                tr>
                    td align="center">
                        table width="640" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">
                            
                            tr>
                                td style="background-color: #0f0f0f; padding: 48px 40px; text-align: center; border-bottom: 3px solid #c9a227;">
                                    p style="margin: 0 0 12px; color: #c9a227; font-size: 12px; letter-spacing: 6px; text-transform: uppercase;">New Commentp>
                                    h1 style="margin: 0; color: #ffffff; font-size: 32px; font-weight: 300; letter-spacing: 1px;">收到新评论h1>
                                td>
                            tr>
        
                            
                            tr>
                                td style="padding: 40px; background-color: #f0f2f5;">
                                    
                                    table width="100%" cellpadding="0" cellspacing="0">
                                        
                                        tr>
                                            td>
                                                table width="100%" cellpadding="0" cellspacing="0">
                                                    tr>
                                                        
                                                        td width="52" style="vertical-align: top; padding-right: 12px;">
                                                            img src="{{.IMG}}" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%;">
                                                        td>
                                                        
                                                        td style="vertical-align: top;">
                                                            table width="100%" cellpadding="0" cellspacing="0">
                                                                
                                                                tr>
                                                                    td align="left" style="padding-bottom: 8px;">
                                                                        span style="color: #c9a227; font-size: 13px; font-weight: 600;">{{.NICK}}span>
                                                                        span style="color: #c9a227; font-size: 11px; margin-left: 8px; background-color: rgba(201, 162, 39, 0.15); padding: 2px 8px; border-radius: 10px;">新评论span>
                                                                    td>
                                                                tr>
                                                                
                                                                tr>
                                                                    td align="left">
                                                                        div style="display: inline-block; max-width: 85%; background-color: #ffffff; border-radius: 18px 18px 18px 4px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                                                                            div style="color: #333333; font-size: 14px; line-height: 1.7;">{{.COMMENT}}div>
                                                                        div>
                                                                    td>
                                                                tr>
                                                                
                                                                tr>
                                                                    td align="left" style="padding-top: 10px; padding-left: 4px;">
                                                                        span style="display: inline-block; background-color: rgba(0,0,0,0.06); color: #666666; font-size: 11px; padding: 5px 10px; border-radius: 12px; margin-right: 8px;">
                                                                            span style="color: #999999;">邮箱span>  {{.MAIL}}
                                                                        span>
                                                                        span style="display: inline-block; background-color: rgba(0,0,0,0.06); color: #666666; font-size: 11px; padding: 5px 10px; border-radius: 12px;">
                                                                            span style="color: #999999;">IPspan>  {{.IP}}
                                                                        span>
                                                                    td>
                                                                tr>
                                                            table>
                                                        td>
                                                        
                                                        td width="60" style="vertical-align: top;">td>
                                                    tr>
                                                table>
                                            td>
                                        tr>
                                    table>
                                td>
                            tr>
        
                            
                            tr>
                                td style="padding: 24px 40px 40px; background-color: #f0f2f5; text-align: center;">
                                    a href="{{.POST_URL}}" style="display: inline-block; background-color: #c9a227; color: #0f0f0f; text-decoration: none; padding: 16px 48px; font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border-radius: 30px;">查看评论a>
                                td>
                            tr>
        
                            
                            tr>
                                td style="background-color: #0f0f0f; padding: 28px 40px; text-align: center;">
                                    p style="margin: 0; color: #555555; font-size: 12px;">
                                        a href="{{.SITE_URL}}" style="color: #c9a227; text-decoration: none;">{{.SITE_NAME}}a>
                                        span style="color: #333333; margin: 0 12px;">|span>
                                        评论系统自动通知
                                    p>
                                td>
                            tr>
                        table>
                    td>
                tr>
            table>body>html>

        用户收到回复模板

        这个模板用于通知用户他们的评论收到了回复。
        效果如图所示:

        以下是模板的HTML代码:

        html
        html>html>head>
            meta charset="UTF-8">
            meta name="viewport" content="width=device-width, initial-scale=1.0">
            title>您收到了一条回复title>head>body style="margin: 0; padding: 0; background-color: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
            table width="100%" cellpadding="0" cellspacing="0" style="background-color: #1a1a2e; padding: 50px 20px;">
                tr>
                    td align="center">
                        table width="640" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">
                            
                            tr>
                                td style="background-color: #16213e; padding: 48px 40px; text-align: center; border-bottom: 3px solid #e8b923;">
                                    h1 style="margin: 0 0 8px; color: #ffffff; font-size: 28px; font-weight: 300; letter-spacing: 2px;">您收到了一条回复h1>
                                    p style="margin: 0; color: #e8b923; font-size: 14px; letter-spacing: 4px; text-transform: uppercase;">{{.SITE_NAME}}p>
                                td>
                            tr>
        
                            
                            tr>
                                td style="padding: 40px; background-color: #f0f2f5;">
                                    
                                    table width="100%" cellpadding="0" cellspacing="0">
        
                                        
                                        tr>
                                            td style="padding-bottom: 24px;">
                                                table width="100%" cellpadding="0" cellspacing="0">
                                                    tr>
                                                        
                                                        td width="60" style="vertical-align: top;">td>
                                                        
                                                        td style="vertical-align: top;">
                                                            table width="100%" cellpadding="0" cellspacing="0">
                                                                
                                                                tr>
                                                                    td align="right" style="padding-bottom: 8px;">
                                                                        span style="color: #666666; font-size: 13px; font-weight: 600;">{{.PARENT_NICK}}span>
                                                                        span style="color: #999999; font-size: 11px; margin-left: 8px;">您span>
                                                                    td>
                                                                tr>
                                                                
                                                                tr>
                                                                    td align="right">
                                                                        div style="display: inline-block; max-width: 85%; background-color: #16213e; border-radius: 18px 18px 4px 18px; padding: 14px 18px; text-align: left;">
                                                                            div style="color: #ffffff; font-size: 14px; line-height: 1.7;">{{.PARENT_COMMENT}}div>
                                                                        div>
                                                                    td>
                                                                tr>
                                                            table>
                                                        td>
                                                        
                                                        td width="52" style="vertical-align: top; padding-left: 12px;">
                                                            img src="{{.PARENT_IMG}}" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%;">
                                                        td>
                                                    tr>
                                                table>
                                            td>
                                        tr>
        
                                        
                                        tr>
                                            td style="padding-bottom: 16px;">
                                                table width="100%" cellpadding="0" cellspacing="0">
                                                    tr>
                                                        
                                                        td width="52" style="vertical-align: top; padding-right: 12px;">
                                                            img src="{{.IMG}}" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%;">
                                                        td>
                                                        
                                                        td style="vertical-align: top;">
                                                            table width="100%" cellpadding="0" cellspacing="0">
                                                                
                                                                tr>
                                                                    td align="left" style="padding-bottom: 8px;">
                                                                        span style="color: #e8b923; font-size: 13px; font-weight: 600;">{{.NICK}}span>
                                                                        span style="color: #e8b923; font-size: 11px; margin-left: 8px; background-color: rgba(232, 185, 35, 0.15); padding: 2px 8px; border-radius: 10px;">新回复span>
                                                                    td>
                                                                tr>
                                                                
                                                                tr>
                                                                    td align="left">
                                                                        div style="display: inline-block; max-width: 85%; background-color: #ffffff; border-radius: 18px 18px 18px 4px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                                                                            div style="color: #333333; font-size: 14px; line-height: 1.7;">{{.COMMENT}}div>
                                                                        div>
                                                                    td>
                                                                tr>
                                                            table>
                                                        td>
                                                        
                                                        td width="60" style="vertical-align: top;">td>
                                                    tr>
                                                table>
                                            td>
                                        tr>
        
                                    table>
                                td>
                            tr>
        
                            
                            tr>
                                td style="padding: 32px 40px; background-color: #ffffff; text-align: center;">
                                    a href="{{.POST_URL}}" style="display: inline-block; background-color: #16213e; color: #ffffff; text-decoration: none; padding: 16px 48px; font-weight: 500; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border-radius: 30px; border: 2px solid #16213e;">查看完整对话a>
                                td>
                            tr>
        
                            
                            tr>
                                td style="background-color: #f8f9fa; padding: 32px 40px; text-align: center; border-top: 1px solid #eeeeee;">
                                    p style="margin: 0 0 8px; color: #999999; font-size: 12px;">此邮件由 a href="{{.SITE_URL}}" style="color: #16213e; text-decoration: none; font-weight: 600;">{{.SITE_NAME}}a> 自动发送p>
                                    p style="margin: 0; color: #bbbbbb; font-size: 11px;">如不希望收到此类通知,请在网站设置中修改偏好p>
                                td>
                            tr>
                        table>
                    td>
                tr>
            table>body>html>

        这两个模板的设计采用了类似聊天的风格,看着还是挺简约清晰的哈,反正我是挺喜欢的,喜欢的可以自己拿去用或者是改改的可以 (最好是改完之后发我借鉴借鉴,嘿嘿)。

        最后更新于 January 26, 2026
        On this page
        暂无目录