教程：教程：分步详解新的区块注释设计
发布者： alain01于 2013/2/19 21:40:00 7820次阅读
我与您分享关于新式新闻的经验：一个分步教程。在本期中，我将向您展示如何修改注释块。该块的默认设计相当过时，因此让我们进行一些小而巧的设计更改，以使显示更实用。请在这里查看一个示例 这里（非XOOPS网站）。首先，您应该理解主题是如何过载的（主题过载）。这方面的最佳教程是XOOPS France上的这个（法语）。我们将一步一步地进行，以便向您解释这是如何可能的，最后，您应该练习对这些更改进行其他区块。我会邀请您逐步上传文件，这样您会更清楚。所以，现在，让我们开始吧！
我们需要： - 来自系统模块的注释模板文件 - 来自您的主题的CSS文件（style.css） 1 - 将注释模板文件复制到过载的主题中 将文件 /www/modules/system/templates/system_comment*.html 复制到 /www/themes/mytheme/modules/system - system_comment.html - system_comments_flat.html - system_comments_net.html - system_comments_thread.html 2 - 定制化 
2a Head 现在，我们在 /www/themes/mytheme/modules/system 的文件上工作。我们从删除顶部头部开始。编辑 3 个文件 system_comments_*.html 并将这些行注释掉（或删除这些行）
找到这些行 - 在 system_comments_net.html 和 system_comments_thread.html 中各 2 次 - 在 system_comments_flat.html 中 1 次 
2b - 删除发布者的信息 - 只保留头像 现在，所有更改都将在 system_comment.html 文件中进行（对于下一个也是如此）从用户中删除信息： - 等级 - 注册日期 - 位置 - 贡献数量 - 状态 只保留头像 <div class="comUserRank">
<div class="comUserRankText"><{$comment.poster.rank_title}>div>
<img class="comUserRankImg" src="<{$xoops_upload_url}>/<{$comment.poster.rank_image}>" alt="" />
div>
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
<div class="comUserStat"><span class="comUserStatCaption"><{$lang_joined}>:span> <{$comment.poster.regdate}>div>
<div class="comUserStat"><span class="comUserStatCaption"><{$lang_from}>:span> <{$comment.poster.from}>div>
<div class="comUserStat"><span class="comUserStatCaption"><{$lang_posts}>:span> <{$comment.poster.postnum}>div>
<div class="comUserStatus"><{$comment.poster.status}>div>
现在变为了 <img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
2c - 移动海报名称、日期和风格 让我们简化显示评论日期：因此，替换 <tr>
<td class="head"><a id="comment<{$comment.id}>">a> <{$comment.poster.uname}>td>
<td class="head"><div class="comDate"><span class="comDateCaption"><{$lang_posted}>:span> <{$comment.date_posted}> <span class="comDateCaption"><{$lang_updated}>:span> <{$comment.date_modified}>div>td>
<tr>
由 <tr>
<td><a id="comment<{$comment.id}>">a<td>
<td><{$comment.poster.uname}> 说了<$comment.date_posted}> ($lang_updated>:$comment.date_modified>>)td>
<tr>
2d - 相同日期的注释和修改注释？ 我们不希望在同一个日期看到两次日期，所以替换之前的代码为 <tr>
<td><a id="comment<{$comment.id}>">a<td>
<td><{$comment.poster.uname}> 说了<$comment.date_posted>
<{if $comment.date_posted!= $comment.date_modified>
(修改于<$comment.date_modified>>)
<{/if}>
td>
<tr>
2e - 将按钮移动到顶部 现在，我们希望将按钮移动到顶部。首先，获取文章底部文件中的测试代码，并删除所有包含 < td > et < /td > 的行。所以现在的部分代码看起来像这样，并带上正确的样式 CSS <div style="float:right;">
<{if $xoops_iscommentadmin == true}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$deletecomment_link}>&com_id=<{$comment.id}>" title="<{$lang_delete}>"><img src="<{$xoops_url}>/images/icons/delete.gif" alt="<{$lang_delete}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true && $xoops_userid == $comment.poster.id}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true || $anon_canpost == true}>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{/if}>
div>
请在注释日期“Now”之后直接复制此代码，然后删除底部的按钮。只需删除从最后一个 < tr >< /tr > 之间的所有行，并删除 < tr >< /tr > 标签。 
2f - 样式 - 删除标题和图片标题：删除该行 <div class="comTitle"><{$comment.image}><{$comment.title}>div>
- 在左侧列添加固定宽度 <td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
- 删除放置海报头像的'td'中的类"odd"，然后使图片居中定位 <td style="text-align:center;">
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
td>
2g - 添加箭头 我们需要在style.css文件、mytheme主题中创建这个箭头。对于我的主题，它位于 /www/themes/mytheme/css/style.css 在style.css中添加以下代码 .arrow-left {
width: 0px;
height: 0px;
border-style: solid;
border-width: 25px 20px 25px 0;
border-color: transparent #ECE9D8 transparent transparent;
}
您可以更改箭头颜色，此颜色与 "odd" 类颜色相同。添加 1 列。将新箭头放在评论左边。 - 添加标签 <td>td>
之后 <td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
- 添加标签 <td>td>
之前 <td class="odd"><div class="comText"><{$comment.text}>div>td>
在第二个标签中插入此代码 <div class="arrow-left">div>
并设置固定宽度 20 像素样式：因此，我们得到了 <td style="width:20px;"><div class="arrow-left">div><td>
2f - 样式 添加 2 个换行以清除显示。将它放在名字海报前。 <td><br /><br /><{$comment.poster.uname}>
这样就完成了... 3 - 完整系统_comment.html 文件 对于想要完整文件系统_comment.html 的网站管理员，它就在这里，可供使用
<tr>
<td style="width:120px;"><a id="comment<{$comment.id}>">a>td>
<td>td>
<td><br /><br /><{$comment.poster.uname}> a dit le <{$comment.date_posted}>
<{if $comment.date_posted != $comment.date_modified}>
(modifié le <{$comment.date_modified}>)
<{/if}>
<div style="float:right;">
<{if $xoops_iscommentadmin == true}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$deletecomment_link}>&com_id=<{$comment.id}>" title="<{$lang_delete}>"><img src="<{$xoops_url}>/images/icons/delete.gif" alt="<{$lang_delete}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true && $xoops_userid == $comment.poster.id}>
<a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" />a>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{elseif $xoops_isuser == true || $anon_canpost == true}>
<a href="<{$replycomment_link}>&com_id=<{$comment.id}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" />a>
<{/if}>
div>
td>
tr>
<tr>
<{if $comment.poster.id != 0}>
<td style="text-align:center;">
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
td>
<{else}>
<td class="odd"> td>
<{/if}>
<td style="width:20px;"><div class="arrow-left">div>td>
<td class="odd">
<div class="comText"><{$comment.text}>div>
td>
tr>
<tr><td>td><td>td><td>td>tr>
当然，我知道这并不完美，我们可以做得更多： - 删除“table”并将其替换为“div”， - 不要在代码中定义CSS样式，而使用类。 - 圆角， - ... 但这里的目的是不是编写完美的代码。而是为了理解主题负载，并逐步展示如何修改评论块的布局。 结论：希望这个消息能让您更清楚地了解如何修改主题中块和模板的布局。如果您觉得这个消息有用，请在评论块中告诉我您的感受 !!! hahahahaha ! 
关于：教程：分步展示注释块的新设计
