发布于2022年11月4日2年前 前言在综合前人的基础上,对typecho邮件评论模板进行了更新,修复了配色方案以及自适应效果。在文章末尾即可下载。代码owner代码<base target="_blank" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> <style type="text/css"> ::-webkit-scrollbar{ display: none; } </style> <style id="cloudAttachStyle" type="text/css"> #divNeteaseBigAttach, #divNeteaseBigAttach_bak{display:none;} </style> <div class="container" style="max-width:500px;margin:20px auto;background-color:#fff;box-shadow:1px 1px px #888888;border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,""> <div class="mail-box" style="width:100%;"> <div class="mail-header" style="background:url('https://blog.bbskali.cn/emali.jpg') center center no-repeat;background-size:100% auto;margin:10px 0;width:100%;height:220px;box-sizing:border-box;overflow-y:hidden;"> </div> <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="https://blog.bbskali.cn"> {siteTitle} </a>上有新的评论啦! </p> </div> <p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;"> <strong style="display:inline-block;line-height:20px;background-color:#00a7e0;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author}</strong> 在 <strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong> 新评论: </p> <div style="margin:40px auto;width:95%"> <p>{author} 在您文章《{title}》上发表评论如下,请您检阅:</p> <p 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;">{text}</p> <p class="wrap" style="text-decoration:none"><span class="w260"><img class="ico" width="16" height="16" src="https://blog.bbskali.cn/time.png">:{time}</span><span class="w20"> </span><span class="wauto"><img class="ico" width="18" height="18" src="https://blog.bbskali.cn/ip.png">:{ip}</span></p> <p class="wrap" style="text-decoration:none"><span class="w260"><img class="ico" width="16" height="16" src="https://blog.bbskali.cn/email.png">:{mail}</span><span class="w20"> </span><span class="wauto"><img class="ico" width="21" height="19" src="https://blog.bbskali.cn/start.png">:{status}</span></p> <p><a style="text-decoration:none; color:#12addb" href="{permalink}" target='_blank'>[查看评论]</a> | <a style="text-decoration:none; color:#12addb" href="{manage}" target='_blank'>[管理评论] </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> <p class="mail-footer" style="border-radius:3px;margin:0;padding:15px 20px;text-align:right;"> {siteTitle} 献上诚挚的问候 </p> </div> </div> <style type="text/css"> body{font-size:14px;font-family:arial,verdana,sans-serif;line-height:1.666;padding:0;margin:0;overflow:auto;white-space:normal;word-wrap:break-word;min-height:100px} td, input, button, select, body{font-family:Helvetica, 'Microsoft Yahei', verdana} pre {white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;width:95%} th,td{font-family:arial,verdana,sans-serif;line-height:1.666} img{ border:0} header,footer,section,aside,article,nav,hgroup,figure,figcaption{display:block} blockquote{margin-right:0px} .wrap span { display: inline-block; font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif; font-size: 12px; } .w260{ width: 190px;} .w20{ width: 20px;} .wauto{ width: auto;} .ico{vertical-align:middle; } </style> <style id="ntes_link_color" type="text/css">a,td a{color:#064977}</style> guest代码<base target="_blank" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> <style type="text/css"> ::-webkit-scrollbar{ display: none; } </style> <style id="cloudAttachStyle" type="text/css"> #divNeteaseBigAttach, #divNeteaseBigAttach_bak{display:none;} </style> <div class="container" style="max-width:500px;margin:20px auto;background-color:#fff;box-shadow:1px 1px px #888888;border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,""> <div class="mail-box" style="width:100%;"> <div class="mail-header" style="background:url('https://blog.bbskali.cn/emali.jpg') center center no-repeat;background-size:100% auto;margin:10px 0;width:100%;height:220px;box-sizing:border-box;overflow-y:hidden;"> </div> <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="https://blog.bbskali.cn"> {siteTitle} </a>上的评论有回复啦! </p> </div> <p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;"> <strong style="display:inline-block;line-height:20px;background-color:#ec6149;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author_p}</strong> 您在 <strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong> 的评论: </p> <div style="margin:40px auto;width:95%"> <p 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;">{text_p}</p> <p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;"> <strong style="display:inline-block;line-height:20px;background-color:#00a7e0;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author}</strong> 在 <strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong> 回复你: </p> <p 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;">{text}</p> </div> <p class="mail-footer" style="border-radius:3px;margin:0;padding:15px 20px;text-align:right;"> {siteTitle} 献上诚挚的问候 </p> </div> </div> <style type="text/css"> body{font-size:14px;font-family:arial,verdana,sans-serif;line-height:1.666;padding:0;margin:0;overflow:auto;white-space:normal;word-wrap:break-word;min-height:100px} td, input, button, select, body{font-family:Helvetica, 'Microsoft Yahei', verdana} pre {white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;width:95%} th,td{font-family:arial,verdana,sans-serif;line-height:1.666} img{ border:0} header,footer,section,aside,article,nav,hgroup,figure,figcaption{display:block} blockquote{margin-right:0px} </style> <style id="ntes_link_color" type="text/css">a,td a{color:#064977}</style>效果图评论提醒效果评论回复效果使用下载附件,上传至plugins后台开启即可。附件下载点击下载 版权属于:逍遥子大表哥本文链接:https://blog.bbskali.cn/657.html按照知识共享署名-非商业性使用 4.0 国际协议进行许可,转载引用文章应遵循相同协议。
创建帐户或登录后发表意见