帝国cms如何自定义留言以及评论样式


avatar
pcwnas 2022-10-04 223

在帝国cms自带的评论和留言系统的功能上,简单修改一下它的样式,就能美美的调用出畅言一样的效果了。

修改内容页评论:

1、公共模板-评论js调用模板

复制代码
  1. [!--empirenews.listtemp--] 
  2. <div class="fb">
  3. <ul>
  4. <p class="fbtime"><span>[!--pltime--]</span> [!--username--]</p>
  5. <p class="fbinfo">[!--pltext--]</p>
  6. </ul>
  7. </div>
  8. [!--empirenews.listtemp--]

2、公共模板变量-管理公共模板-[!–temp.pl–] 找到评论表单

复制代码
  1. <script>
  2.           function CheckPl(obj)
  3.           {
  4.           if(obj.saytext.value=="")
  5.           {
  6.           alert("您没什么话要说吗?");
  7.           obj.saytext.focus();
  8.           return false;
  9.           }
  10.           return true;
  11.           }
  12.           </script>
  13. <form action="[!--news.url--]e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
  14.   <div id="plpost">
  15.     <p class="saying"><span><a href="[!--news.url--]e/pl/?classid=[!--classid--]&amp;id=[!--id--]">共有<script type="text/javascript" src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=2"></script>条评论</a></span>来说两句吧...</p>
  16.     <p class="yname"><span>用户名:</span>
  17.       <input name="username" type="text" class="inputText" id="username" value="" size="16" />
  18.     </p>
  19.     <p class="yzm"><span>验证码:</span>
  20.       <input name="key" type="text" class="inputText" size="16" />
  21.       <img src="[!--news.url--]e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='[!--news.url--]e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </p>
  22.     <input name="nomember"  type="hidden" id="nomember" value="1" checked="checked" />
  23.     <textarea name="saytext" rows="6" id="saytext"></textarea>
  24.     <input name="imageField" type="submit" value="提交"/>
  25.     <input name="id" type="hidden" id="id" value="[!--id--]" />
  26.     <input name="classid" type="hidden" id="classid" value="[!--classid--]" />
  27.     <input name="enews" type="hidden" id="enews" value="AddPl" />
  28.     <input name="repid" type="hidden" id="repid" value="0" />
  29.     <input type="hidden" name="ecmsfrom" value="[!--titleurl--]">
  30.     </td>
  31.   </div>
  32. </form>
  33.  

3、评论列表模板 -管理评论模板

复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>[!--pagetitle--]</title>
  7. <meta name="keywords" content="[!--pagekey--]" />
  8. <meta name="description" content="[!--pagedes--]" />
  9. <style type="text/css">
  10. article { width: 800px; margin: auto }
  11. <!--
  12. body, Table { color: #222; font-size: 12px; }
  13. a { color: #222; text-decoration: none; }
  14. a:hover { color: #f00; text-decoration: underline; }
  15. h1 { font-size: 32px; font-weight: bold; }
  16. h2 { color: #1e3a9e; font-size: 25px; font-weight: bold; }
  17. .you { color: #1f3a87; font-size: 14px; }
  18. .text { font-size: 14px; padding-left: 5px; padding-right: 5px; line-height: 20px }
  19. .re a { color: #1f3a87; }
  20. .name { color: #1f3a87; }
  21. .name a { color: #1f3a87; text-decoration: underline; }
  22. .retext { background-color: #f3f3f3; width: 100%; float: left; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid #ccc; }
  23. .retext textarea { width: 90%; height: 130px; float: left; margin-left: 10px; border-top-style: inset; border-top-width: 2px; border-left-style: inset; border-left-width: 2px; }
  24. .hrLine { BORDER-BOTTOM: #807d76 1px dotted; }
  25. .ecomment { margin: 0; padding: 0; }
  26. .ecomment { margin-bottom: 12px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; background: #FFFFEE; padding: 3px; border: solid 1px #999; }
  27. .ecommentauthor { float: left; color: #F96; font-weight: bold; }
  28. .ecommenttext { clear: left; margin: 0; padding: 0; }
  29. -->
  30. @media only screen and (max-width: 800px) {
  31. article { width: 100% }
  32. }
  33. </style>
  34. <script src="[!--news.url--]e/data/js/ajax.js"></script>
  35. </head>
  36.  
  37. <body topmargin="0">
  38. <article>
  39.   <table width="100%" border="0" align="center" cellpadding="3" cellspacing="1">
  40.     <tr>
  41.       <td><h1>网友评论</h1></td>
  42.       <td><div align="right"><a href="#tosaypl"><strong><font color="#FF0000">我也评两句</font></strong></a></div></td>
  43.     </tr>
  44.   </table>
  45.   <table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#222">
  46.     <tr>
  47.       <td height="2"></td>
  48.     </tr>
  49.   </table>
  50.   <table width="100%" border="0" align="center" cellpadding="3" cellspacing="1">
  51.     <tr>
  52.       <td height="42"><h2>评论:<a href="[!--titleurl--]" target="_blank"><font color="#1e3a9e">[!--title--]</font></a></h2></td>
  53.       <td><div align="right"><a href="[!--titleurl--]" target="_blank">查看原文</a></div></td>
  54.     </tr>
  55.   </table>
  56.   <!--
  57. <hr align="center" width="100%" size=1 class=hrline>
  58. <table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#384EA3">
  59.   <form action="../enews/index.php" method="post" name="infopfenform">
  60.     <input type="hidden" name="enews" value="AddInfoPfen" />
  61.     <input type="hidden" name="classid" value="[!--classid--]" />
  62.     <input type="hidden" name="id" value="[!--id--]" />
  63.     <tr> 
  64.       <td width="50%" height="27" valign="middle"><font color="#FFFFFF">&nbsp;评分: 
  65.         <input type="radio" name="fen" value="1">
  66.         1分 
  67.         <input type="radio" name="fen" value="2">
  68.         2分 
  69.         <input name="fen" type="radio" value="3" checked>
  70.         3分 
  71.         <input type="radio" name="fen" value="4">
  72.         4分 
  73.         <input type="radio" name="fen" value="5">
  74.         5分 
  75.         <input type="submit" name="Submit" value="提交">
  76.         </font></td>
  77.       <td width="50%" valign="middle"><div align="center"><font color="#FFFFFF">平均得分: 
  78.           <strong><span id="pfendiv">[!--pinfopfen--]</span></strong> 分,共有 <strong>[!--infopfennum--]</strong> 
  79.           人参与评分</font></div></td>
  80.     </tr>
  81.   </form>
  82. </table>
  83. -->
  84.   <table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">
  85.     <tr>
  86.       <td height="30" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="1" cellpadding="3">
  87.           <tr>
  88.             <td width="37%">&nbsp;&nbsp;&nbsp;网友评论</td>
  89.             <td width="63%"><div align="right">[!--listpage--]&nbsp;&nbsp;&nbsp;</div></td>
  90.           </tr>
  91.         </table></td>
  92.     </tr>
  93.     <tr>
  94.       <td bgcolor="#f8fcff"> [!--empirenews.listtemp--]
  95.         <table width="96%" border="0" align="center" cellpadding="3" cellspacing="1" style="word-break:break-all; word-wrap:break-all;">
  96.           <tr>
  97.             <td height="30"><span class="name">[!--username--]</span></td>
  98.             <td><div align="right"><font color="#666666">[!--pltime--]</font></div></td>
  99.           </tr>
  100.           <tr valign="top">
  101.             <td height="50" colspan="2" class="text">[!--pltext--]</td>
  102.           </tr>
  103.           <tr>
  104.             <td height="30">&nbsp;</td>
  105.             <td><div align="right" class="re"><a href="#tosaypl"[!--includelink--]>回复</a>&nbsp; <a href="JavaScript:makeRequest('../pl/doaction.php?enews=DoForPl&plid=[!--plid--]&classid=[!--classid--]&id=[!--id--]&dopl=1&doajax=1&ajaxarea=zcpldiv[!--plid--]','EchoReturnedText','GET','');">支持</a>[<span id="zcpldiv[!--plid--]">[!--zcnum--]</span>]&nbsp; <a href="JavaScript:makeRequest('../pl/doaction.php?enews=DoForPl&plid=[!--plid--]&classid=[!--classid--]&id=[!--id--]&dopl=0&doajax=1&ajaxarea=fdpldiv[!--plid--]','EchoReturnedText','GET','');">反对</a>[<span id="fdpldiv[!--plid--]">[!--fdnum--]</span>] </div></td>
  106.           </tr>
  107.         </table>
  108.         <table width="100%" border="0" cellspacing="1" cellpadding="3">
  109.           <tr>
  110.             <td background="[!--news.url--]skin/default/images/plhrbg.gif"></td>
  111.           </tr>
  112.         </table>
  113.         [!--empirenews.listtemp--]
  114.         <div align="right"><br />
  115.           [!--listpage--]&nbsp;&nbsp;&nbsp;<br />
  116.           <br />
  117.           <font color="#FF0000">网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述&nbsp;&nbsp;&nbsp;</font><br>
  118.           <br>
  119.         </div></td>
  120.     </tr>
  121.     <script>
  122.   function CheckPl(obj)
  123.   {
  124.       if(obj.saytext.value=="")
  125.       {
  126.           alert("错误,评论不能为空");
  127.           obj.saytext.focus();
  128.           return false;
  129.       }
  130.       return true;
  131.   }
  132.   </script>
  133.     <form action="../pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
  134.       <tr id="tosaypl">
  135.         <td bgcolor="#f8fcff"><table width="100%" border="0" cellspacing="1" cellpadding="3">
  136.             <tr>
  137.               <td valign="middle">用户名:
  138.                 <input name="username" type="text" id="username" size="12" value="[!--lusername--]" />
  139.                 
  140.                 <!--密码: 
  141.             <input name="password" type="password" id="password" size="12" value="[!--lpassword--]" />--></td>
  142.             </tr>
  143.             <tr>
  144.               <td> 验证码:
  145.                 <input name="key" type="text" id="key" size="6" />
  146.                 <img src="[!--key.url--]" align="middle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='[!--news.url--]e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  147.             </tr>
  148.           </table></td>
  149.       </tr>
  150.       <tr>
  151.         <td bgcolor="#f8fcff"><table width="100%" border="0" cellspacing="1" cellpadding="3" class="retext">
  152.             <tr>
  153.               <td width="78%"><div align="center">
  154.                   <textarea name="saytext" cols="58" rows="6" id="saytext"></textarea>
  155.                 </div></td>
  156.               <td width="22%" rowspan="2"><div align="center">
  157.                   <input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" />
  158.                   匿名发表<br>
  159.                   <br />
  160.                   <input name="imageField" type="submit" id="imageField" value=" 提 交 " />
  161.                 </div></td>
  162.             </tr>
  163.             <tr>
  164.               <td><div align="center"> 
  165.                   <script src="[!--news.url--]d/js/js/plface.js"></script> 
  166.                 </div></td>
  167.             </tr>
  168.           </table></td>
  169.       </tr>
  170.       <input name="id" type="hidden" id="id" value="[!--id--]" />
  171.       <input name="classid" type="hidden" id="classid" value="[!--classid--]" />
  172.       <input name="enews" type="hidden" id="enews" value="AddPl" />
  173.       <input name="repid" type="hidden" id="repid" value="0" />
  174.     </form>
  175.   </table>
  176. </article>
  177. </body>
  178. </html>
  179.  

  
4、留言板  位置在:公共模板-留言板

      头像图片存放在/e/tool/images/

复制代码
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="gbk">
  5. <title>[!--bname--]</title>
  6. <meta name="keywords" content="[!--pagekey--]" />
  7. <meta name="description" content="    [!--pagedes--]" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <link href="[!--news.url--]skin/jxhx/css/base.css" rel="stylesheet">
  10. <link href="[!--news.url--]skin/jxhx/css/m.css" rel="stylesheet">
  11. <script src="[!--news.url--]skin/jxhx/js/jquery-1.8.3.min.js" ></script>
  12. <script src="[!--news.url--]skin/jxhx/js/comm.js"></script>
  13. <!--[if lt IE 9]>
  14. <script src="[!--news.url--]skin/jxhx/js/modernizr.js"></script>
  15. <![endif]-->
  16. </head>
  17. <body>
  18. [!--temp.header--]
  19. <article>
  20.   <div class="whitebg">
  21.     <h2 class="htitle">[!--bname--]</h2>
  22.     <div class="news_infos m20">
  23.       <div class="gbox">
  24.         <form action="../../enews/index.php" method="post" name="form1" id="form1">
  25.           <p> <strong>来说点儿什么吧...</strong></p>
  26.           <p><span> 您的姓名:</span>
  27.             <input name="name" type="text" id="name" />
  28.             *</p>
  29.           <input name="email" type="hidden" id="email" value="admin@qq.com"  />
  30.           <p><span>选择头像:</span> *</p>
  31.           <p> <i>
  32.             <input type="radio" value= "../images/tx1.jpg" id= "1" name="mycall" style="display:none" selected>
  33.             <img id="a" src="../images/tx1.jpg " onclick="myFun(this.id)"></i> <i>
  34.             <input type="radio" value= "../images/tx2.jpg" id= "2" name="mycall" style="display:none">
  35.             <img id="b" src="../images/tx2.jpg" onclick="myFun(this.id)"></i> <i>
  36.             <input type="radio" value= "../images/tx3.jpg" id= "3" name="mycall" style="display:none">
  37.             <img id="c" src="../images/tx3.jpg" onclick="myFun(this.id)"></i> <i>
  38.             <input type="radio" value= "../images/tx4.jpg" id= "4" name="mycall" style="display:none">
  39.             <img id="d" src="../images/tx4.jpg " onclick="myFun(this.id)"></i> <i>
  40.             <input type="radio" value= "../images/tx5.jpg" id= "5" name="mycall" style="display:none">
  41.             <img id="e" src="../images/tx5.jpg" onclick="myFun(this.id)"></i> <i>
  42.             <input type="radio" value= "../images/tx6.jpg" id= "6" name="mycall" style="display:none">
  43.             <img id="f" src="../images/tx6.jpg" onclick="myFun(this.id)"></i> <i>
  44.             <input type="radio" value= "../images/tx7.jpg" id= "7" name="mycall" style="display:none">
  45.             <img id="g" src="../images/tx7.jpg" onclick="myFun(this.id)"></i> <i>
  46.             <input type="radio" value= "../images/tx8.jpg" id= "8" name="mycall" style="display:none">
  47.             <img id="h" src="../images/tx8.jpg" onclick="myFun(this.id)"></i> </p>
  48.           <p><span class="tnr">留言内容:</span>
  49.             <textarea name="lytext" cols="60" rows="12" id="lytext"></textarea>
  50.           </p>
  51.           <p>
  52.             <input type="submit" name="Submit3" value="提交" />
  53.             <input name="enews" type="hidden" id="enews" value="AddGbook" />
  54. <input name="bid" type="hidden" value="1" />
  55.           </p>
  56.         </form>
  57.       </div>
  58.       [!--empirenews.listtemp--]
  59.       <div class="fb">
  60.         <ul>
  61.           <span class="tximg"><img src="[!--mycall--]"></span>
  62.           <p class="fbtime"><span>
  63.             <?=format_datetime($r[lytime],'Y-m-d')?>
  64.             </span> [!--name--]</p>
  65.           <p class="fbinfo">[!--lytext--]</p>
  66.         </ul>
  67.       </div>
  68.       [!--start.regbook--]
  69.       <div class="hf">
  70.         <ul>
  71.           <p class="zzhf"><font color="#FF0000">站长回复:</font>[!--retext--]</p>
  72.         </ul>
  73.       </div>
  74.       [!--end.regbook--] 
  75.       
  76.       [!--empirenews.listtemp--] 
  77.       <script>
  78.   function myFun(sId) {
  79.  
  80.     var oImg = document.getElementsByTagName('img');
  81.  
  82.     for (var i = 0; i < oImg.length; i++) {
  83.       if (oImg[i].id == sId) {
  84.         oImg[i].previousSibling.previousSibling.checked = true;
  85.         oImg[i].style.opacity = '1';
  86.       } else {
  87.         oImg[i].style.opacity = '.8';
  88.  
  89.       }
  90.     }
  91.   }
  92. </script> 
  93.     </div>
  94.     <!--newsinfo end--> 
  95.     
  96.   </div>
  97. </article>
  98. <div class="clear"></div>
  99. [!--temp.footer--]
  100. </body>
  101. </html>
  102.  

  
5、css 增加以下css,jxhx的路径在 /skin/jxhx/css/base.css

/* 以下图片存放在skin/html/images  */
 

复制代码
.saying { line-height: 30px; color: #a9a6a6; } .saying span { float: right } .saying span a { color: #de1513; } img#plKeyImg { display: inline-block; } .yname { margin: 10px 10px 10px 0 } .yname span, .yzm span { padding-right: 10px; } .yzm { margin: 0 10px 10px 0 } .gbox input[type="submit"] { display: block; background: #303030; color: #fff; border: 0; line-height: 30px; padding: 0 20px; border-radius: 5px; float: right; } #plpost textarea#saytext { width: 100%; } #plpost input[type="submit"] { display: block; background: #040404; color: #fff; border: 0; line-height: 30px; padding: 0 20px; border-radius: 5px; float: right; } .gbox { padding: 0; overflow: hidden; } .gbox p { margin-bottom: 10px; overflow: hidden; } p.fbtime { color: #000; } .fbtime span { float: right; color: #999; font-size: 12px; overflow: hidden; white-space: nowrap; } p.fbinfo { margin: 10px 0; } .fb ul { margin: 10px 0; padding: 20px 10px; border-bottom: #ececec 1px solid; } span.tximg { display: block; float: left; margin-right: 10px; } .gbox i { display: block; float: left; margin-right: 10px; } .gbox i input { margin: 10px auto; display: block; } .hf ul { padding: 10px 10px; background: #f9f9f9; } .hf { padding-bottom: 20px; border-bottom: #dedddd 1px dashed; } textarea#lytext { width: 99%; } .gbox input[type="submit"] { display: block; background: #040404; color: #fff; border: 0; line-height: 30px; padding: 0 20px; border-radius: 5px; float: right; } .ecomment { border: #dedcdc 1px solid; padding: 10px; margin-bottom: 10px; } span.ecommentauthor { color: #b5b5b5; font-size: 14px; margin-bottom: 5px; display: block; } .gbook .fb ul { margin: 10px 10px; padding: 10px 10px 10px 70px; border-bottom: #ececec 1px solid; } .gbook .fb:nth-child(8n-7) ul { background: url(../../../e/tool/images/tx10.jpg) no-repeat top 20px left 10px; } .gbook .fb:nth-child(8n-6) ul { background: url(../../../e/tool/images/tx9.jpg) no-repeat top 20px left 10px; } .gbook .fb:nth-child(8n-5) ul { background: url(../../../e/tool/images/tx8.jpg) no-repeat top 20px left 10px; } .gbook .fb:nth-child(8n-4) ul { background: url(../../../e/tool/images/tx7.jpg) no-repeat top 20px left 10px; } .gbook .fb:nth-child(8n-3) ul { background: url(../../../e/tool/images/tx6.jpg) no-repeat top 20px left 10px; } .gbook .fb:nth-child(8n-2) ul { background: url(../../../e/tool/images/tx5.jpg) no-repeat top 20px left 10px; } .gbook .fb:nth-child(8n-1) ul { background: url(../../../e/tool/images/tx4.jpg) no-repeat top 20px left 10px; } .gbook .fb:nth-child(8n) ul { background: url(../../../e/tool/mages/tx3.jpg) no-repeat top 20px left 10px; } .gbook .fb:first-child ul { background: url(../../../e/tool/images/tx2.jpg) no-repeat top 20px left 10px; } .gbook .fb:last-child ul { background: url(../../../e/tool/images/tx1.jpg) no-repeat top 20px left 10px; }


6、将压缩包下载,分别传到/e/tool/images/   (没有目录就创建目录)
 

头像.zip
touxiang.zip
67002541fae3ad7fe6d1cb235d36304e.zip (53.92 KB)

7、修改内容模板

复制代码
  1. <div class="whitebg gbook">
  2.   <h2 class="htitle">文章评论</h2>
  3.   <ul>
  4. <script src="[!--news.url--]e/pl/more/?classid=[!--classid--]&id=[!--id--]&num=20"></script>
  5. [!--temp.pl--]
  6.   </ul>
  7. </div>
  8.  

8、修改完以后,刷新内容页,动态页面

 

暂无评论

当前仅支持登录后发布评论