如何为评论系统快速添加表情

项目特点

即使预览图片

一键复制图片链接、img标签、markdown格式

提供Twikoo格式的表情格式

提供Valine格式的表情格式

提供Waline格式的表情格式

表情存放在多个位置，不仅仅在GitHub

包含大多数表情包，且支持用户自己添加

项目地址：表情速查

适配 Twikoo

Twikoo 的表情使用OwO，表情的配置为一个 json 文件。例如：

{
  "Heo": {
    "type": "image",
    "container": [
      {
        "text": "Heo-亲亲",
        "icon": "<img src='https://cdn.jsdelivr.net/gh/Dreamy-TZK/iemotion-pic@latest/img/Heo/亲亲.png'>"
      }
    ]
  }
}

json 文件对格式要求很严格，例如键与值都需要使用双引号进行包裹，如果是最后一项那么结尾不能包含逗号。。。。

当你适配 Twikoo 评论时，请注意每种表情的末尾是否需要添加逗号。例如我想添加biliTV和阿鲁两种表情到我的OwO.json。那么我应该复制下来的内容如下：

{
  "bilibili_tv_gif": {
    "type": "image",
    "container": [
      {
        "text": "bilibili_tv_gif-doge",
        "icon": "<img src='https://cdn.jsdelivr.net/gh/Dreamy-TZK/iemotion-pic@latest/img/bilibili_tv_gif/doge.gif'>"
      }
    ]
  },
  "阿鲁": {
    "type": "image",
    "container": [
      {
        "text": "aru-1",
        "icon": "<img src='https://cdn.jsdelivr.net/gh/Dreamy-TZK/iemotion-pic@latest/img/aru/1.png'>"
      }
    ]
  }
}

以上代码仅仅是一个示例。具体请自己喜欢的表情包进行添加。

最后附上作者的OwO.json供各位博主参考。

Valine、Waline

这种评论添加表情的方式是一个对象格式，且不支持表情分类。格式如下：

{
  "图片名": "图片链接"
}

可能部分主题（例如 butterfly）会将添加表情的方式修改为创建valine.json文件，这样的情况就相当于编辑 JSON 文件了。

因此对于这种评论添加biliTV和阿鲁两种表情格式是这样的。

{
  "哔哩-doge": "https://bu.dusays.com/2021/01/15/3de5568861758.gif",
  "阿鲁-1": "https://bu.dusays.com/2021/01/15/3c76dffbc08a5.png"
}

如果键名重复，则会导致后边的覆盖前边的。

如何快速生成对应的格式

进入表情速查
选择你要查看的表情分类后即可看到该分类下的表情包预览以及各种评论的表情包格式

如何添加表情包

此项目所使用的表情包仓库，如果想要添加自己的表情包可以任选下方所述方法其中一种即可。

通过提交 Pull Request：将表情包放入此仓库img目录下即可，注意按照格式。
适合提交图片的用户
通过提交 Pull Request：将你的表情包 JSON 文件放入仓库user_json目录下即可，注意按照格式
适合自己存储表情包的用户
直接将表情包发送给作者
适合懒人

快速生成 JSON

注意，这里的 JSON 不是指的评论系统所需要的 JSON，而是指你向表情速查提供表情包的 JSON。

表情速查需要的 JSON 格式如下：

{
  "name": "表情包的分类名",
  "power": "你的版权链接",
  "common": [],
  "all": [
    {
      "name": "这个表情的名称（不可重复）",
      "url": "该表情的地址"
    }
  ]
}

你可以通过自己写脚本生成该格式的 JSON 文件，也可以使用作者提供的几个脚本生成。

TXT 文件

根据 TXT 文件生成 JSON 脚本，txt 文件格式：

表情包名|表情包地址

创建一个文件夹，名为user_text，将以下脚本保存为js文件，并与user_text文件夹放在同一级目录。user_text存放你的 txt 文本。

/**
 * @description: 根据用户的txt文本生成json文件，生成的name字段为文件名
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2021-01-14 20:26:31
 * @LastEditTime: 2021-01-14 20:26:31
 * @LastEditors: 小康
 */
const fse = require('fs-extra')

async function generateJsonByText(fileBasePath, fileName) {
  const content = await fse.readFile(fileBasePath + fileName, 'utf-8')
  const contentList = content.split('\n')
  const obj = {
    name: fileName.split('.')[0],
    common: [],
    all: []
  }
  contentList.forEach((item) => {
    const imageObj = item.split('|')
    obj.all.push({
      name: imageObj[0],
      url: imageObj[1].replace('/r', '')
    })
  })
  const flag = await fse.pathExists('./user_text_temp/')
  if (!flag) {
    await fse.mkdir('./user_text_temp/')
  }
  await fse.writeJSON(`./user_text_temp/${fileName.split('.')[0]}.json`, obj)
}

async function init() {
  const fileList = await fse.readdir('./user_text/')
  fileList.forEach((file) => {
    generateJsonByText('./user_text/', file)
  })
}
init()

通过命令npm i安装脚本后，即可运行。

本地图片文件

/*
 * @description: 通过图片生成json
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2021-01-16 09:25:29
 * @LastEditTime: 2021-01-16 09:25:34
 * @LastEditors: 小康
 */

const fse = require('fs-extra')
const path = require('path')
// 图片地址前缀修饰
const imgPrefix = 'https://twikoo-magic.oss-cn-hangzhou.aliyuncs.com/'
// 版权
const power = 'https://noionion.top/'

/**
 * 获取文件列表
 * @author 小康
 * @param {string} 图片目录的父级目录
 * @returns {Object} 所有图片对象
 * {
 *    图片目录名:[’图片名‘]
 * }
 */
async function getFilesList(filePath) {
  const obj = {}
  // 图片目录列表
  const picDirs = await fse.readdir(filePath)
  for (var i = 0; i < picDirs.length; i++) {
    obj[picDirs[i]] = await fse.readdir(path.join(filePath, picDirs[i]))
  }
  return obj
}

// 入口函数
async function init(filePath) {
  const fileObj = await getFilesList(filePath)
  for (let category in fileObj) {
    const obj = {
      name: category,
      power,
      common: [],
      all: []
    }
    for (let i = 0; i < fileObj[category].length; i++) {
      obj.all.push({
        name: fileObj[category][i].split('.')[0],
        url: `${imgPrefix}${category}/${fileObj[category][i]}`
      })
    }

    fse.writeJson('./user_json_temp/' + category + '.json', obj)
  }
  console.log('生成完毕')
}
init('./user_img')

创建文件夹user_img、user_json_temp和 js 文件，并写入上述脚本。
将你的表情放入user_img。注意存放位置。
运行命令npm i后运行脚本即可。

上传去不图床

/**
 * @description: 将图片上传到图床并生成JSON
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2021-01-14 21:13:20
 * @LastEditTime: 2021-01-14 21:13:20
 * @LastEditors: 小康
 */

const axios = require('axios')
const fs = require('fs')
const fse = require('fs-extra')
const path = require('path')
const FormData = require('form-data')
// 图床TOKEN
const token = ''
// 上传后json输出位置
const outpath = 'user_json_temp'
// 上传地址
// const url = 'https://pic.alexhchu.com/api/upload'
const url = 'https://7bu.top/api/upload'
/**
 * 获取文件列表
 * @author 小康
 * @param {string} 图片目录的父级目录
 * @returns {Object} 所有图片对象
 * {
 *    图片目录名:[’图片名‘]
 * }
 */
async function getFilesList(filePath) {
  const obj = {}
  // 图片目录列表
  const picDirs = await fse.readdir(filePath)
  for (var i = 0; i < picDirs.length; i++) {
    obj[picDirs[i]] = await fse.readdir(path.join(filePath, picDirs[i]))
  }
  return obj
}
/**
 * 将图片上传到图床
 * @author 小康
 * @param {object} 图片对象
 * @returns {any}
 */
async function uploadImg(filePath, imgObj) {
  for (let item in imgObj) {
    const obj = {
      name: item,
      power: 'https://emotion.xiaokang.me/',
      common: [],
      all: []
    }
    for (let i = 0; i < imgObj[item].length; i++) {
      const data = await upload(path.join(filePath, item, imgObj[item][i]))
      obj.all.push({
        name: imgObj[item][i].split('.')[0],
        url: data.url
      })
    }
    // 保存json文件
    await fse.writeJson(`./${outpath}/${item}.json`, obj)
  }
}

// 入口函数
async function init(imgPath) {
  const imgObj = await getFilesList(imgPath)
  await uploadImg(imgPath, imgObj)
}

init('./upload_img')

async function upload(imgPath) {
  var localFile = fs.createReadStream(imgPath)

  var formData = new FormData()
  formData.append('image', localFile)
  formData.append('path', 'test')

  var headers = formData.getHeaders() //获取headers

  return new Promise((resolve, reject) => {
    //获取form-data长度
    formData.getLength(async function (err, length) {
      if (err) {
        return
      }
      //设置长度，important!!!
      headers['content-length'] = length
      headers['token'] = token

      await axios
        .post(url, formData, { headers })
        .then((res) => {
          console.log(`${imgPath}上传成功=>`, res.data.data.url)
          // obj = res.data.data
          resolve(res.data.data)
        })
        .catch((res) => {
          console.log(res)
        })
    })
  })
}