FoF 邮件美化

Golden 我在调试过程中发现邮件主题颜色可以使用 color: {{ $settings->get('theme_primary_color') }} if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 这样就不用每次更换主题颜色都再去调整一遍邮箱模板了。另外找回密码、注册激活、私人讨论这个几个邮件模板去哪儿修改？

Kyrne

FoF 邮件美化 | FriendsOfFlarum Pretty Mail

Flarum 扩展程序。允许您自定义 HTML 邮件模板。

非常感谢 @clarkwinkelmann 编写初始代码！

通过插件设置配置自定义电子邮件模板
默认模板支持 Flarum 以及第三方扩展发送的所有电子邮件

安装

通过巴扎市场或 composer 手动安装：

composer require fof/pretty-mail

升级

composer update fof/pretty-mail

重要提示

由于 Flarum 处理某些电子邮件的方式，我们不得不利用「hack」使其正常工作。~~这应该可以在beta 8中修复。~~ 请前往我们的 GitHub 报告您遇到的任何问题。

默认模板

链接

　捐赠我们

FriendsOfFlarum 制作插件

Golden

中文社区使用的模板是由开源的 Halo 博客系统设计的，开源不易，请保留代码中的版权信息！

此楼层的模板适用于 Beta13 及以下的 Flarum，适用于 Beta14+ 的模板请看 23楼

关注的主题有新帖通知模板

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
</html>
	<body style="font-family: 'Open Sans', sans-serif; background: white; color: #426799; margin: 0; padding: 0;">
		<!-- ZH -->
		<div class="card-container" style="width:100%; max-width:720px; text-align:left; margin:0 auto; padding-top:20px; padding-bottom:20px;">
			<div class="card-body" style="border-radius:5px; border:1px solid #eee; overflow:hidden;">
				<h1 class="card-title" style="color:#fff; background:{{ $settings->get('theme_primary_color') }}; font-size:24px; font-weight:normal; padding: 20px 40px; margin:0;">
					有新帖！
				</h1>
				<div class="card-postContent" style="background:#fff; padding:20px 32px 40px; color:#6e6e6e; font-size:13px; line-height:24px;">
					<p>{!! $user->display_name !!}, 您好!</p>
					<p>您关注的主题：<a href="{!! $baseUrl !!}/d/{!! $blueprint->post->discussion_id !!}" target="_blank" style="color: #3798e8; text-decoration: none;">{!! $blueprint->post->discussion->title !!}</a>
						<br>
					</p>
					<p>{!! $blueprint->post->user->display_name !!} 回了个帖子:
						<br>
					</p>
					<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 100px;">
						{!! $blueprint->post->formatContent() !!}
					</div>
					<p>您可以点击
						<a href="{!! $baseUrl !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: #3798e8; text-decoration: none;">查看完整内容</a>
					</p>
					<p>欢迎再度光临
						<a href="{{ $baseUrl }}" style="color: #3798e8;	text-decoration: none;">Flarum 中文社区</a>
					</p>
					<p>除非您取消收藏这个主题，否则主题下一有新帖发出，您就会收到邮件通知。</p>
					<p>(此邮件由系统自动发出, 请勿回复。如有打扰，请见谅。)</p>
					<p></p>
					<p></p>
				</div>
				<p class="card-footer" style="color:#6e6e6e; text-align:right; padding:0 32px; font-size:13px; line-height:24px;">
					邮件发自：<a href="{{ $baseUrl }}" style="color: #3798e8;	text-decoration: none;">Flarum 中文社区</a>
					<br>
					主题：<a href="https://github.com/halo-dev/halo" style="color: #3798e8;	text-decoration: none;">©Halo</a>
				</p>
			</div>
		</div>
</body>

新主题通知模板

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
</html>
	<body style="font-family: 'Open Sans', sans-serif; background: white; color: #426799; margin: 0; padding: 0;">
		<!-- ZH -->
		<div class="card-container" style="width:100%; max-width:720px; text-align:left; margin:0 auto; padding-top:20px; padding-bottom:20px;">
			<div class="card-body" style="border-radius:5px; border:1px solid #eee; overflow:hidden;">
				<h1 class="card-title" style="color:#fff; background:{{ $settings->get('theme_primary_color') }}; line-height:70px; font-size:24px; font-weight:normal; padding: 15px 40px; margin:0;">
					有人艾特你！
				</h1>
				<div class="card-postContent" style="background:#fff; padding:20px 32px 40px; color:#6e6e6e; font-size:13px; line-height:24px;">
					<p>{!! $user->display_name !!}, 您好!</p>
					<p>{!! $blueprint->post->user->username !!} 在这个主题艾特了你 ：</p>
					<p>{!! $blueprint->post->discussion->title !!}</p>
					<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 100px;">
						{!! $blueprint->post->formatContent() !!}
					</div>
					<p>您可以点击
						<a href="{!! $baseUrl !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: #3798e8; text-decoration: none;">查看 Ta 说了什么</a>
					</p>
					<p>欢迎再度光临
						<a href="{{ $baseUrl }}" style="color: #3798e8;	text-decoration: none;">Flarum CN 社区</a>
					</p>
					<p>(此邮件由系统自动发出, 请勿回复。如有打扰，请见谅。)</p>
					<p></p>
					<p></p>
				</div>
				<p class="card-footer" style="color:#6e6e6e; text-align:right; padding:0 32px; font-size:13px; line-height:24px;">
					邮件发自：<a href="{{ $baseUrl }}" style="color: #3798e8;	text-decoration: none;">Flarum CN 社区</a>
					<br>
					主题：<a href="https://github.com/halo-dev/halo" style="color: #3798e8;	text-decoration: none;">©Halo</a>
				</p>
			</div>
		</div>
</body>

帖子被回复通知模板

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
</html>
<body style="font-family: 'Open Sans', sans-serif; background: white; color: #426799; margin: 0; padding: 0;">	
	<!-- ZH -->
	<div class="card-container" style="width:100%; max-width:720px; text-align:left; margin:0 auto; padding-top:20px; padding-bottom:20px;">
		<div class="card-body" style="border-radius:5px; border:1px solid #eee; overflow:hidden;">
			<h1 class="card-title" style="color:#fff; background:{{ $settings->get('theme_primary_color') }}; font-size:24px; font-weight:normal; padding: 15px 40px; margin:0;">
				有人回复你！
			</h1>
			<div class="card-postContent" style="background:#fff; padding:20px 32px 40px; color:#6e6e6e; font-size:13px; line-height:24px;">
				<p>{!! $user->display_name !!}!, 您好!</p>
				<p>您在<a href="{!! app()->url() !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">《{!! $blueprint->post->discussion->title !!}》(#{!! $blueprint->post->number !!}楼)</a>的发言:
					<br>
				</p>
				<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 100px;">
					{!! $blueprint->post->formatContent() !!}
				</div>
				<p>{!! $blueprint->reply->user->username !!} 回复了您:
					<br>
				</p>
				<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 100px;">
					{!! $blueprint->reply->formatContent() !!}
				</div>
				<p>您可以点击
					<a href="{!! app()->url() !!}/d/{!! $blueprint->reply->discussion_id !!}/{!! $blueprint->reply->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">查看完整内容</a>
				</p>
				<p>欢迎再度光临
					<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">Flarum CN 社区</a>
				</p>

				<p>(此邮件由系统自动发出, 请勿回复。如有打扰，请见谅。)</p>
				<p></p>
				<p></p>
			</div>
			<p class="card-footer" style="color:#6e6e6e; text-align:right; padding:0 32px; font-size:13px; line-height:24px;">
				邮件发自：<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">Flarum CN 社区</a>
				<br>
				主题：<a href="https://github.com/halo-dev/halo" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">©Halo</a>
			</p>
		</div>
	</div>
</body>

qazwsdc

Golden 感谢！不过经测试新帖通知模板收不到邮件，其他两个回复和艾特邮件正常。是不是模板哪里有点问题
PS：已经关注了主题，但就是收不到邮件

Henry

Golden 能分享一下Beta15的邮件模板吗😋感激不尽
已经通过查看更新文档解决了，不用了，感谢！

Golden

qazwsdc 应该是因为漏写了一行 <body> 标签

HackerYunen

我也来分享一个模板 🙂
主题回复（其他模板请自行在其基础上修改）：

<div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
  <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
    <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在
      <a style="text-decoration:none;color: #ffffff;" href="{{ $baseUrl }}">Flarum 中文社区</a>上的留言有新回复啦！
    </p>
  </div>
  <div style="margin:40px auto;width:90%">
    <p>{!! $user->display_name !!} 同学，您曾在<a style="text-decoration:none; color:#12addb" target="_blank"  href="{!! app()->url() !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}">《{!! $blueprint->post->discussion->title !!}》(#{!! $blueprint->post->number !!}楼)</a>上发表评论：</p>
    <div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{!! $blueprint->post->formatContent() !!}</div>
    <p>{!! $blueprint->reply->user->username !!} 给您的回复如下：</p>
    <div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{!! $blueprint->post->formatContent() !!}</div>
    <p>您可以点击
      <a style="text-decoration:none; color:#12addb" href="{!! $baseUrl !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}#comments">查看回复的完整內容</a>，欢迎再次光临
      <a style="text-decoration:none; color:#12addb" href="{{ $baseUrl }}">Flarum 中文社区</a>。
    </p>
    <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
  </div>
</div>

效果图：

版权声明：该模板修改自Valine Adminn邮件模板

v2ex

“关注的主题有新帖通知模板” 和 “新主题通知模板” 是一模一样的？
默认模板也应该写一个

Golden

v2ex 当然一样啦，毕竟是同一个站点的邮件，保持风格统一，为了做不同通知的区分，可以把页眉的颜色变一下

v2ex

Golden
我在调试过程中发现邮件主题颜色可以使用

color: {{ $settings->get('theme_primary_color') }}

这样就不用每次更换主题颜色都再去调整一遍邮箱模板了。

另外找回密码、注册激活、私人讨论这个几个邮件模板去哪儿修改？

Golden

v2ex 我给的模板已经是自适应主题色。

其他邮件需要自己改相应插件的源文件

v2ex

Golden 我觉得“Halo 博客系统”的模板更好看哈哈哈

v2ex

Golden 其他邮件需要自己改相应插件的源文件

有没有具体的文件路径能提供一下呢？

v2ex

Golden
另外，这个“默认模板”有什么用途，怎么修改成Halo一样的邮件样式呢？

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            body {
                font-family: 'Open Sans', sans-serif;
                background: white;
                color: #426799;
                margin: 0;
                padding: 0;
            }
            .content {
                box-sizing: border-box;
                width: 100%;
                max-width: 500px;
                margin: 0 auto;
                padding: 10px 20px;
            }
            .header {
                border-bottom: 1px solid #e8ecf3;
             }
             .header a {
                color: {{ $settings->get('theme_primary_color') }};
                text-decoration: none;
             }
             .footer {
                background: #e8ecf3;
             }
        </style>
        @if ($forumStyle !== '')
            <style>
                {!! $forumStyle !!}
            </style>
        @endif
    </head>
</html>
<body>
    <div class="header">
        <div class="content">
            <a href="{{ $baseUrl }}">{{ $settings->get('forum_title') }}</a>
        </div>
    </div>
    <div class="content">
        {!! $body !!}
    </div>
    <div class="footer">
        <div class="content">
            <p>此邮件由 {{ $settings->get('forum_title') }} 系统发送，请勿直接回复！</p>
        </div>
    </div>
</body>

Golden

v2ex 就是 halo 的呀

v2ex

Golden 今天发现邮件中如果有图片会出现错位，这应该怎么解决？

v2ex

@Golden
刚刚测试了一下，可以这样做，在body中添加img标签样式如下

img {
    max-width: 100%;
    width: auto;
    height: auto;
}

取消每个卡片高度限制

<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 100px;">

改成下面这样

<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;">

去掉max-height: 100px;
我不知道原来这个样式中max-height: 100px;具体的用途，限制内容过长？

Golden

v2ex

v2ex 我不知道原来这个样式中max-height: 100px;具体的用途，限制内容过长？

是配合 line-clamp 限制文字达到一定行数后隐藏的功能。

v2ex

Golden 呃，跟我猜想的差不多，但是我觉得通过元素隐藏不完美，这样会造成我上面截图所出现的问题，一张图片就占满了全部高度，正文根本看不见，且图片还只能显示一部分，最好是能通过直接限制邮件内容（字数）长度来隐藏过多的文本内容。你觉得呢？或许可以给邮件模板作者提个建议，可以在插件中选择允许发送的字符数长度（字数）。

chins

为社么已启用这个就发不出邮件，15

Golden

chins 有没有套用社区里的邮件模板呢？

chins

Golden 已经解决了，谢谢您嘞