织梦评论表情图标如何修改？

第一步：在后台上传和管理表情图标

这是最基础也是最关键的一步,织梦默认的表情存放在特定的目录下。

1. 登录织梦后台：使用你的管理员账号登录网站后台。

2. 进入表情管理：

   • 在左侧菜单栏找到 “评论” -> “表情管理”。
   • 点击进入后,你会看到默认的表情列表，如 [微笑]、[撇嘴] 等。

3. 上传新表情：

   • 你有两种方式添加新表情：
     • 单个上传（推荐少量添加）
       • 点击页面底部的 “增加新表情” 按钮。
       • 在弹出的窗口中,填写 “表情代号”（xin）和 “表情图片”。
       • 点击 “浏览...” 选择你本地电脑上的表情图片（通常是 .png 或 .gif 格式）。
       • 点击 “上传” 或 “确定” 即可。
     • 批量上传（推荐大量添加）
       • 在 “表情管理” 页面，直接点击底部的 “批量上传” 按钮。
       • 你会看到一个FTP上传路径的提示,/data/emotion/。
       • 使用FTP工具（如 FileZilla）连接到你的服务器。
       • 进入网站根目录下的 /data/emotion/ 文件夹。
       • 将你准备好的所有表情图片（最好是统一格式和尺寸）直接上传到这个文件夹里。
       • 上传完成后,回到织梦后台的 “表情管理” 页面，点击 “刷新列表”，系统会自动识别新上传的图片并生成表情列表，你只需要为每个新图片手动填写对应的“表情代号”即可。

4. 编辑或删除表情：

   
   （图片来源网络，侵删）
   • 在表情列表中,你可以直接修改表情的代号，或者点击 “删除” 按钮来移除不需要的表情。

第二步：修改前台评论区的表情显示代码

上传好表情后,还需要修改前台的模板文件，让系统能正确调用这些新表情，这个过程的核心是替换掉旧的表情路径。

你需要修改的文件是：/templets/default/feedback.htm

注意：default 是默认模板文件夹，如果你的网站使用的是其他模板（如 pc、mobile 等），请找到对应的文件夹。

简单替换（最常用）

这种方法适用于你只是想更换一套表情,但保持原有的显示方式。

1. 使用FTP工具，打开你的网站文件管理器。

2. 找到并打开文件：/templets/default/feedback.htm。

3. 在文件中搜索 face/ 关键词，你会找到类似下面这样的代码片段：

   <!-- 表情 -->
   <div class="dface">
       <span class="dface-title">表情:</span>
       <ul class="dfaceul">
           <li><img src="{dede:field name='phpurl'/}/img/face/smiley.gif" width="25" height="25" title="微笑"/></li>
           <li><img src="{dede:field name='phpurl'/}/img/face/sad.gif" width="25" height="25" title="伤心"/></li>
           <!-- ... 更多默认表情 ... -->
       </ul>
   </div>

4. 修改路径：

   • 你会发现,默认表情的路径是 {dede:field name='phpurl'/}/img/face/。
   • 而我们在第一步上传的表情,存放在 /data/emotion/ 目录下。
   • 你需要将上述代码中 src 属性里的路径从 .../img/face/ 修改为 .../emotion/。

   修改后的代码示例：

   <!-- 表情 -->
   <div class="dface">
       <span class="dface-title">表情:</span>
       <ul class="dfaceul">
           <li><img src="/data/emotion/smiley.gif" width="25" height="25" title="微笑"/></li>
           <li><img src="/data/emotion/sad.gif" width="25" height="25" title="伤心"/></li>
           <!-- ... 其他表情 ... -->
       </ul>
   </div>

   注意：这里的路径可以直接使用 /data/emotion/，因为这是相对于网站根目录的绝对路径，更稳定。

5. 更新表情列表：

   • 你需要将后台“表情管理”中所有你启用的表情，都用 <li> 标签的形式，按照上面的格式，手动添加到 <ul class="dfaceul"> 和 </ul> 之间，确保图片文件名和后台设置的“表情代号”一致。

6. 保存文件：保存 feedback.htm 文件，然后刷新你的网站前台评论页面，就能看到新表情了。

完全自定义（更灵活）

如果你想拥有更自由的控制,比如使用不同的图标库（如Emoji One、Twemoji等），或者想通过JS动态加载表情，可以采用这种方法。

1. 准备表情资源：

   • 从网上下载一套你喜欢的表情图标包（Emoji One 的 PNG 图标）。
   • 将这些图标上传到你网站的一个新目录,/images/emoji/。

2. 修改模板文件：

   • 打开 /templets/default/feedback.htm。
   • 删除原有的表情显示部分（<div class="dface">...</div>）。
   • 在你希望显示表情的位置,添加新的HTML结构，这里提供一个更现代、可扩展的示例：

   <!-- 自定义表情 -->
   <div class="custom-emoji-picker">
       <span class="emoji-title">表情:</span>
       <div class="emoji-list">
           <!-- 使用循环或手动列出所有表情 -->
           <img class="emoji-item" src="/images/emoji/1f600.png" data-alias="smile" title="微笑" />
           <img class="emoji-item" src="/images/emoji/1f604.png" data-alias="smiley" title="笑脸" />
           <img class="emoji-item" src="/images/emoji/1f622.png" data-alias="cry" title="哭泣" />
           <img class="emoji-item" src="/images/emoji/1f60a.png" data-alias="blush" title="脸红" />
           <!-- ... 添加更多表情 ... -->
       </div>
   </div>

3. 添加交互功能（点击插入表情）：

   • 为了让点击表情后能插入到评论框,你需要一点JavaScript代码，在 feedback.htm 文件的底部，</body> 标签之前，添加以下JS代码：

   <script type="text/javascript">
   document.addEventListener('DOMContentLoaded', function() {
       // 获取评论框
       var commentTextarea = document.getElementById('msg');
       // 获取所有表情元素
       var emojiItems = document.querySelectorAll('.emoji-item');
       // 为每个表情添加点击事件
       emojiItems.forEach(function(item) {
           item.addEventListener('click', function() {
               // 获取表情的src
               var emojiSrc = this.src;
               // 获取表情的别名（用于在评论中显示文本）
               var emojiAlias = this.getAttribute('data-alias');
               // 创建一个img标签
               var emojiImg = '<img src="' + emojiSrc + '" title="' + emojiAlias + '" style="height:24px;width:24px;" />';
               // 在评论框光标位置插入表情
               if (document.selection) {
                   // For IE
                   commentTextarea.focus();
                   var sel = document.selection.createRange();
                   sel.text = emojiImg;
                   commentTextarea.focus();
               } else if (commentTextarea.selectionStart || commentTextarea.selectionStart == '0') {
                   // For modern browsers
                   var start = commentTextarea.selectionStart;
                   var end = commentTextarea.selectionEnd;
                   var scrollTop = commentTextarea.scrollTop;
                   commentTextarea.value = commentTextarea.value.substring(0, start) + emojiImg + commentTextarea.value.substring(end);
                   commentTextarea.focus();
                   commentTextarea.selectionStart = start + emojiImg.length;
                   commentTextarea.selectionEnd = start + emojiImg.length;
                   commentTextarea.scrollTop = scrollTop;
               } else {
                   commentTextarea.value += emojiImg;
                   commentTextarea.focus();
               }
           });
       });
   });
   </script>

   • 这段JS代码会找到所有带有 emoji-item 类的图片，并为它们绑定点击事件，点击后，会将图片的HTML代码插入到评论框中。

4. 添加CSS样式（可选）：

   • 为了让表情列表更美观,你可以在模板的CSS文件中添加一些样式，或者在 <head> 标签内添加 <style>

   <style>
   .custom-emoji-picker { margin-bottom: 10px; }
   .emoji-list { display: flex; flex-wrap: wrap; gap: 5px; }
   .emoji-item { cursor: pointer; border-radius: 3px; padding: 2px; }
   .emoji-item:hover { background-color: #f0f0f0; }
   </style>