1700+ Emoji 怎么找？我花 2 天做了个搜索站 (已开源)

在线体验

项目起源

故事始于一次偶然的浏览。在小红书上看到一款设计出众的应用，其中的分类图标让我眼前一亮------这些精致可爱的 3D 风格图标，正是来自微软开源的 Fluent Emoji 表情库。

作为开发者，我立刻想到要在未来的项目中使用这套图标。但现实问题摆在眼前：这个表情库包含超过 1700 个表情，如何高效地找到需要的那一个？比如我需要一个表示"设置"的图标时，要如何快速定位？

深入研究后发现，Unicode 官方的 emoji 数据列表为每个表情提供了名称和关键词标注，这给搜索功能的实现提供了可能。

既然数据结构清晰、图片资源齐全，加上如今 AI 编程的强大能力，何不直接动手搭建一个专门的 Emoji 搜索站点？

技术架构

考虑到开发效率和运营成本，我选择了当下最流行的技术栈：

前端框架：Next.js（React 18）
托管平台：Vercel（在低流量情况下完全免费）
图片存储：CloudFlare R2（避免 Vercel 的流量费用）

这套方案的最大优势在于"零成本快速上线"------对于个人项目来说，这正是理想选择。

开发实战

1. 数据准备

首先从 GitHub 克隆微软的 Fluent Emoji 仓库，将 assets 资源文件夹整合到项目中。

接下来的关键步骤是生成结构化的索引数据。在 AI 的协助下，我快速生成了 emoji-index.json 文件，格式如下：

json 复制代码

{
  "id": "1st-place-medal",
  "name": "1st place medal",
  "glyph": "🥇",
  "group": "Activities",
  "keywords": ["1st place medal", "first", "gold", "medal"],
  "unicode": "1f947",
  "tts": "1st place medal",
  "styles": {
    "3d": "assets/1st-place-medal/3d/1st_place_medal_3d.png",
    "color": "assets/1st-place-medal/color/1st_place_medal_color.svg",
    "flat": "assets/1st-place-medal/flat/1st_place_medal_flat.svg",
    "high-contrast": "assets/1st-place-medal/high-contrast/1st_place_medal_high_contrast.svg"
  }
}

2. 核心功能实现

基于上述数据结构，AI 帮助我快速实现了两个核心功能：

分类筛选 ：基于 group 字段实现分类导航
关键词搜索 ：通过 name 和 keywords 字段实现全文检索

3. 资源上传

将本地 assets 文件夹批量上传到 CloudFlare R2 时遇到了小插曲。起初尝试在控制台直接拖拽上传，发现单次限制 100 个文件。在 AI 的指导下，最终使用 AWS CLI 工具完成了批量上传任务。

这个过程再次验证：只要需求明确、技术路线清晰，AI 完全可以成为得力助手。完整的开发细节可以查看 GitHub 开源仓库。

功能升级

国际化支持

作为面向全球用户的工具网站，多语言是标配。借助 AI 的能力，国际化功能的实现出乎意料地顺畅。

多平台样式对比

仅展示 Fluent Emoji 似乎过于单薄。为了丰富内容维度，我整合了：

Fluent Emoji（微软设计，3D 风格）
Noto Emoji（Google 设计）
Apple Emoji（需在苹果设备上查看原生效果）

用户可以直观对比同一表情在不同平台的设计风格。

上线部署

将代码推送到 GitHub 后，在 Vercel 后台关联仓库，整个 CI/CD 流程自动配置完成。此后每次提交代码，都会自动触发构建和部署。

关于域名选择，我花了不少心思。与 emoji 相关的优质域名基本被抢注一空，最终确定了 emojidir.com------Emoji Directory 的缩写，简洁且语义清晰。

未来计划

这只是起点，后续的迭代方向包括：

内容扩充：持续同步最新 emoji，补充使用场景说明和组合搭配建议
智能搜索：引入模糊匹配、相似表情推荐等增强功能
社区功能：添加用户收藏夹、一键复制、社交分享等互动特性
知识沉淀：为每个 emoji 添加释义、文化内涵等百科内容

关于 SEO 和长期运营

从 0 开始做 SEO 是个有趣的实验。哥飞说过："做一个网站养老"，这个理念值得品味。

投入一个域名的成本（每年约 10 美元），借助免费的开源工具和平台，就能搭建一个长期运营的网站。即使每天只有几十个访问量，假以时日也可能产生意想不到的价值。

更重要的是，这个过程本身就很有意思 ------ 从 0 到 1 创造一个产品，学习新技术，优化用户体验，观察数据增长。这比最终结果更有价值。

如果你也有一个想法，不妨试试看。毕竟，成本只是一个域名而已。🚀

项目开源地址 ：GitHub
在线访问 ：emojidir.com