网站添加 Twemoji 表情教程

boonkiong

1、进入后台\全局\SEO设置\其他\其他头部信息（也可以添加到 header 模板），添加下边的代码：

1. <!-- 引入 Twemoji JS 库 -->
   
2. <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js" crossorigin="anonymous"></script>

复制代码

2、还是在后台\全局\站点信息\网站第三方统计代码（也可以添加到 footer 模板），添加下边的代码：

1. <!-- 初始化脚本 -->
   
2. <script>
   
3.   window.addEventListener('DOMContentLoaded', (event) => {
   
4.     twemoji.parse(document.body, {
   
5.       folder: 'svg',
   
6.       ext: '.svg'
   
7.     });
   
8.   });
   
9. </script>
   

复制代码

3、打开 template\你正在用的模板\common\common.css，在最下面添加：

1. /*样式调整（让表情大小和文字完美对齐）*/
   
2.     img.emoji {
   
3.     height: 1em;
   
4.     width: 1em;
   
5.     margin: 0 .05em 0 .1em;
   
6.     vertical-align: -0.1em;
   
7.   }

复制代码

4、另外还要在手机版添加 css 代码，
X3.5 打开 static\image\mobile\style.css
X5 打开 template\default\touch\common\common.css

1. /*样式调整（让表情大小和文字完美对齐）*/
   
2.     img.emoji {
   
3.     height: 1em;
   
4.     width: 1em;
   
5.     margin: 0 .05em -.1em .1em !important;
   
6.     vertical-align: -0.1em;
   
7.   }

复制代码

按照前面的方法配置好 Twemoji 后，你不需要改变平时的写作习惯。
它的核心原理是：在发帖和回复照常输入或粘贴普通的 Emoji 表情（例如：😀、🚀、🔥、❤️），Twemoji 会在网页加载时自动把它们变成好看的图片。

具体使用方法
1. 在内容中直接输入 Emoji
无论你是在文章编辑器、Markdown 文件、HTML 源码还是后台文章里，直接通过手机键盘、系统快捷键（Mac: Control + Command + Space，Windows: Win + .）输入你需要的 Emoji 即可。

示例代码：

1. <p>欢迎来到我的网站！今天天气真不错 ☀️，祝你有个愉快的一天 🎉！</p>

复制代码

当访客打开网页时，Twemoji 会自动把 ☀️ 和 🎉 替换成统一的 Twitter 风格矢量图标。

检查是否生效
如果添加后发现 Emoji 没有被替换，可以按以下步骤排查：

• 检查浏览器控制台：按 F12 打开开发者工具，看 Console（控制台）里有没有报错。
• 确认 JS 是否加载成功：查看网页源代码，确认 <script> 引入的 CDN 链接可以正常访问。
• 强制刷新缓存：如果你开启了网站 CDN（如 Cloudflare）或缓存插件，请记得清空缓存后再访问网页。