FoF 邮件美化

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

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

我也来分享一个模板 🙂 主题回复（其他模板请自行在其基础上修改）： <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> if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 效果图：版权声明：该模板修改自 Valine Adminn邮件模板

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

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

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

v2ex 我给的模板已经是自适应主题色。其他邮件需要自己改相应插件的源文件

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

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>

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 已经解决了，谢谢您嘞

Henry

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

Golden

Henry

适用于 Beta 14+ 的模板

Flarum/subscriptions 新帖通知邮件

<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;">
		<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:#3798e8; 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="{!! $url->to('forum')->base() !!}/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="{!! $url->to('forum')->base() !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: #3798e8; text-decoration: none;">查看完整内容</a>
					</p>
					<p>欢迎再度光临
						<a href="{{ $url->to('forum')->base() }}" 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="{{ $url->to('forum')->base() }}" 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>

Flarum/mentions 提及通知邮件

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
</html>
<body>	

	<body style="font-family: 'Open Sans', sans-serif; background: white; color: #426799; margin: 0; padding: 0;">
		<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:#9354ca; 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="{!! $url->to('forum')->base() !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: #3798e8; text-decoration: none;">查看 Ta 说了什么</a>
					</p>
					<p>欢迎再度光临
						<a href="{{ $url->to('forum')->base() }}" 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="{{ $url->to('forum')->base() }}" 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>

Flarum/mentions 帖子被回复通知邮件

<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;">
	<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="{!! $url->to('forum')->base() !!}/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="{!! $url->to('forum')->base() !!}/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="{{ $url->to('forum')->base() }}" 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="{{ $url->to('forum')->base() }}" 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>

Henry

Golden 谢谢😀

Golden

chins 那个是使用论坛的主色调。你可以换成自己固定的颜色。

twoshun

有点问题

Golden

twoshun 一楼顶部说明看了吗

Golden

🔄 2020年11月15日更新

0.2.0

Beta 14 就绪 🥳
Flarum 的 UrlGenerator 通过 $url 调用，可用于您的模板中。

重大变更

所有模板都或多或少需要更新代码，包括默认模板。

如果您使用默认模板

后台进入 Pretty Mail 设置，点击 每个模板 的 恢复默认 按钮。
页面底部点击 保存
清除缓存 php flarum cache:clear
完成

如果您使用自定义模板

编辑每个模板，替换以下两处变更：
不再支持 app()->url()，请替换为 $url->to('forum')->base()
不再支持 $baseUrl，同上，请替换为 $url->to('forum')->base()
页面底部点击 保存
清除缓存 php flarum cache:clear
完成

更新

composer require fof/pretty-mail:^0.2.0
php flarum cache:clear</code>

Allen13in

Golden 中文社区的模板可以参考一下嘛

籽夏a

点击保存，左下角提示您没有权限进行此操作怎么办

yannis

Allen13in

请参考第23条
https://discuss.flarum.org.cn/d/1299/23

Allen13in

yannis 好的谢谢

« 上一页