MD 邮件模板功能设计实现
2017-07-14 00:00
218 查看
摘要: markdown 模板生成
邮件内容展示优化
效果图如下:
模板如下:
实现部分
1、依赖
2、css 添加
3、遇到的坑
velocity ## 功能与MD 冲突 临时解决办法
总结:此种方法适合后端程序员使用 省去了样式配置等工作
出来的结果是可以接受的表格也可以。如果有好的方式请告知我 省去的的烦恼
邮件内容展示优化
效果图如下:
模板如下:
### 汇总表如下 ### 对比项 | BTCP | 官网 -------- | ------ | ------ 总金额 |$resultTotal.btcpAmout|$resultTotal.gwAmout 总发货量|${resultTotal.btcpQty}|${resultTotal.gwQty} 总订单量|${btcpTotal}|${gwTotal}
实现部分
1、依赖
<!-- MD to html 工具 --> <dependency> <groupId>org.pegdown</groupId> <artifactId>pegdown</artifactId> <version>1.6.0</version> </dependency> <!-- 引入模板引擎 --> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity</artifactId> <version>1.7</version> </dependency>
2、css 添加
<style type="text/css"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { margin:0; padding:0; font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif; color: #555; background:#f5f5f5 url(bg.jpg); } a {color:#666;} #content {width:65%; max-width:690px; margin:6% auto 0;} /* Pretty Table Styling CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/ */ table { overflow:hidden; border:1px solid #d3d3d3; background:#fefefe; width:70%; margin:5% auto 0; -moz-border-radius:5px; /* FF1+ */ -webkit-border-radius:5px; /* Saf3-4 */ border-radius:5px; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } th, td {padding:18px 28px 18px; text-align:center; } th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;} td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;} tr.odd-row td {background:#f6f6f6;} td.first, th.first {text-align:left} td.last {border-right:none;} /* Background gradients are completely unnecessary but a neat effect. */ td { background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); } tr.odd-row td { background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6)); } th { background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed); background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb)); } /* I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements. Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it. */ tr:first-child th.first { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; /* Saf3-4 */ } tr:first-child th.last { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; /* Saf3-4 */ } tr:last-child td.first { -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; /* Saf3-4 */ } tr:last-child td.last { -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; /* Saf3-4 */ }</style>
3、遇到的坑
velocity ## 功能与MD 冲突 临时解决办法
context.put("sharp", "##"); vm =vm.replaceAll("##", "\\$sharp"); String email =VelocityUtil.generate(context,vm );
总结:此种方法适合后端程序员使用 省去了样式配置等工作
出来的结果是可以接受的表格也可以。如果有好的方式请告知我 省去的的烦恼
相关文章推荐
- Prototype功能预览八:一个注解实现短信邮件内容模板
- C#设计模式之Template模板方法模式实现ASP.NET自定义控件 密码强度检测功能
- XML与ASP简单结合实现HTML模板功能
- ASP.NET 实现邮件发送和接受的功能(Mail)
- 另外一个ASP.NET 实现邮件发送和接受的功能(Sockets)
- XML与ASP简单结合实现HTML模板功能
- 设计模式:利用Command模式实现无限次数的Undo/Redo功能
- GridView中实现类邮件的CheckBox全选功能
- 实现邮件群发功能
- ASP.NET 实现邮件发送和接受的功能(Sockets)
- ASP+JMAIL实现自动发邮件功能(转)
- PDA电子邮件系统中邮件识别与封装模块的设计与实现
- 企业级服务器设计与实现经验之系统框架(二)--功能/应用服务器主体框架
- C++实现网络服务器命令模式(设计及模板实现)
- C++设计模式:Singleton的模板实现之一
- XML与ASP简单结合实现HTML模板功能
- 利用CDO实现邮件回执功能
- 利用xml 的数据描述功能设计灵活的专题模板
- XML与ASP简单结合实现HTML模板功能
- 微软的设计思想:总感觉有点返祖现象,以前VB中很方便的功能,在C#中却要很复杂才能实现 treeview