制作了一个简单的表情包和静态网站生成器

发表于 分类于 Artalk： loading...
Nunjucks js 表情包 模板

为了能更加方便地在Artalk评论系统引入表情包

Memes Json Generator

memes-generator-json

这是什么？

一个基于Nunjucks模板引擎的表情包Json文件生成器，Github仓库地址

生成的Json文件可用于Artalk、Twikoo等评论系统，增加发送表情包功能

另外，运行app.js后还会 自动生成 用于展示表情包的静态网站，相关文件在/static中

我搭建的表情包展示网站

为什么？

为了减少重复工作

最近在个人博客中引入了Artalk评论系统，该系统支持自定义表情包，可以在发送评论时使用。

Artalk以特定的Json格式导入表情包，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
emoticons: [{
    "name": "颜表情",
    "type": "emoticon", // 字符类型
    "items": [
        { "key": "Hi", "val": "|´・ω・)ノ" },
        { "key": "开心", "val": "ヾ(≧∇≦*)ゝ" },
        //...
    ]
}, {
    "name": "滑稽",
    "type": "image", // 图片类型
    "items": [
        {
            "key": "原味稽",
            "val": "<图片 URL>"
        },
        //...
    ]
}],

为了减少工作量，我编写了这个简单的生成器，可以一键生成受支持的Json文件

如何使用？

第零步，克隆下来本仓库，执行npm i安装依赖

第一步，将需要引入的一组表情包放在imgs文件夹下。示例：imgs/huaji/*

第二步，在配置文件config.js中增加引入的表情包信息

name: 表情包的名字

path: 相对于imgs的路径，建议设为拼音或者英文缩写，例如：imgs/huaji

baseUrl: 表情包的url链接前缀，例如：https://meme-repo.pages.dev

第三步，执行node src/app.js，会在/memes/文件下生成Json文件

也可使用npm run gen命令

输出：

1
2
3
4
5
./memes
└── huaji
    ├── huaji_artalk.json
    ├── huaji_owo.json
    └── index.html

如果你希望生成用于展示表情包的静态网站，可以在配置文件config.js中开启: "isGenStatic": "true

执行node src/app.js后，会在static目录下生成网站文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
./static
├── 404.html
├── imgs
│   └── huaji
│       ├── huaji.gif
│       ├── huaji1.jpg
│       ├── huaji10.png
│       └── ...
├── index.html
└── memes
    └── huaji
        ├── huaji_artalk.json
        ├── huaji_owo.json
        └── index.html

然后直接将static文件夹部署到服务器，或者Netlify, Cloudflare Pages, Vercel, Weblify, Aliyun OSS等托管服务上即可

首页效果

主页

具体表情包页面

表情包页面

项目结构

该项目结构比较简单，主要由一个模板目录、一个代码目录和一个配置文件组成

注意：本项目展示用的表情包来自于@2X-ercha/Twikoo-Magic

1
2
3
4
5
6
7
8
9
10
11
12
./src
├── app.js  // 主程序
└── utils
    └── index.js    // 工具类
./template
├── 404.html    // 404 页面
├── child_index.html // 具体表情包主页的模板
├── json
│   ├── artalk.json // Artalk格式的json文件模板
│   └── owo.json    // owo格式的json文件模板
└── root_index.html // 网站主页的模板
config.js   // 配置文件

配置文件

baseUrl中填写表情包存储的「根路径」

如果将/static文件夹上传到Cloudflare pages，域名为https://meme-repo.pages.dev，则

"baseUrl": "https://meme-repo.pages.dev"

而相应滑稽表情包的存储路径为 https://meme-repo.pages.dev/memes/huaji/xxx.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    "isGenStatic": true,
    "memes": [
        {
            path: 'huaji',
            // 表情包的根路径
            baseUrl: 'https://meme-repo.pages.dev', // 结尾不要带'/'
            // 表情包名称
            name: '滑稽'
        },
        ...    
    ]
}

进阶

自定义模板

本项目基于Nunjucks模板引擎开发，具体使用参照官方文档，简单易上手

Ps: Hexo的Next主题就是基于Nunjucks编写的

用Artalk官方支持的格式举例：

1
2
3
4
5
6
7
8
9
10
11
{
    "name": "滑稽",
    "type": "image", // 图片类型
    "items": [
        {
            "key": "原味稽",
            "val": "<图片 URL>"
        },
        //...
    ]
}

njk模板长这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "name": "{{ memeName }}",
    "type": "image",
    "items": [
        {% set comma = joiner() %}  // joiner 参见文档 https://mozilla.github.io/nunjucks/templating.html#joiner-separator
        {% for item in imageUrlList %}  // 循环
        {{ comma() }}   // 引入
        {
            "key": "{{ item.split('.')[0] }}",
            "val": "{{ baseUrl }}/imgs/{{ memePath }}/{{ item }}"
        }
        {% endfor %}
    ]
}

njk模板有四个传入参数:

  • memeName：表情包名称
  • imageUrlList：该组表情包下的「图片名字列表」（带拓展名）
  • baseUrl：图片的url链接前缀
  • memePath：表情包存储的路径。例如，滑稽表情包为huaji

后话

这是我第一次使用javascript，不太熟练，若有指教，欢迎提issue或者发邮件讨论，感谢赐教！