给 Shiro 加上一个简单的表情包功能

在使用 Typecho 程序搭建博客的时候，一般会使用 OwO 库来为博客提供表情包功能，Like this:

OwO 的表情包功能

OwO 库提供的集成方式更符合传统的前端开发模式，而目前的 Shiro 开源版的主题是基于 NextJS 框架开发的，并不适合直接集成到主题里。因此，需要自己动手开发一个简化版的表情包。

创建表情数据文件#

在 OwO 中，表情数据是通过 OwO.json 文件获取的。对于 Shiro 主题，我们可以在 src/lib 目录下创建一个 owo.ts 文件来定义表情数据。在这个文件中，我们创建一个 owo 对象，并使其内容与 OwO.json 中的结构保持一致，以便继承之前 Typecho 主题中的表情数据。

export const owo = {
  颜文字: {
    type: "emoticon",
    container: [
      {
        icon: 'OωO',
        text: 'OωO',
      },
      //...
    ],
  },
  Emoji: {
    type: "emoji",
    container: [
      {
        icon: '😂',
        text: 'Face with Tears of Joy',
      },
      //...
    ],
  },
  图片表情: {
    type: "image",
    container: [
      {
        icon: "https://raw.githubusercontent.com/url8/CDN-EMOTE/main/2233/chijing.png",
        text: "face1",
      },
      //...
    ],
  },
};

添加表情按钮#

Shiro 主题使用的是 Emoji Picker 库作为表情包选择器

但是因为在我的电脑上滑动这个选择器会有掉帧的情况出现，所以我选择将自己编写的表情包选择器组件直接替换掉 Emoji Picker。

1. 引入自定义表情包选择器组件：

首先，在 src\components\modules\comment\CommentBox\UniversalTextArea.tsx 中，将原来引入的 EmojiPicker 组件替换成我们自己的表情包选择器组件 Stickers ：

const Stickers = dynamic(() =>
  import('../../shared/Stickers').then((mod) => mod.Stickers),
)

2. 替换原有的 EmojiPicker 组件：

将 UniversalTextArea 组件返回里的 <EmojiPicker onEmojiSelect={handleInsertEmoji} /> 替换为 <Stickers handleInsertEmoji={handleInsertEmoji} />：

return (
  <TextArea
    bordered={false}
    wrapperClassName={className}
    ref={taRef}
    defaultValue={value}
    onKeyDown={handleKeyDown}
    onChange={(e) => setter('text', e.target.value)}
    placeholder={placeholder}
    onCmdEnter={(e) => {
      e.preventDefault()
      sendComment()
    }}
  >
    <CommentBoxSlotPortal>
      <>
        {/* {!isMobile && (
          <FloatPopover
            mobileAsSheet
            trigger="click"
            TriggerComponent={EmojiButton}
            headless
            popoverClassNames="pointer-events-auto"
          >
            <EmojiPicker onEmojiSelect={handleInsertEmoji} />
          </FloatPopover>
        )} */}
        <FloatPopover
          mobileAsSheet
          trigger="click"
          TriggerComponent={EmojiButton}
          headless
          popoverClassNames="pointer-events-auto shadow-perfect relative z-[2] rounded-xl border border-zinc-400/20 bg-white/80 p-4 outline-none backdrop-blur-lg dark:border-zinc-500/30 dark:bg-neutral-900/80 max-w-lg"
        >
          <Stickers handleInsertEmoji={handleInsertEmoji} />
        </FloatPopover>
      </>
    </CommentBoxSlotPortal>
  </TextArea>
)

3. 修改表情按钮：

最后，修改文本框左下角的表情按钮：

const EmojiButton = () => {
  return (
    <div className="ml-4 text-base md:text-xs" role="button" tabIndex={0}>
      <span>OwO</span>
    </div>
  )
}

这样，我们就完成了对评论区文本框的修改。

表情包选择器组件#

接下来我们需要编写刚才引入的表情包选择器组件 Stickers。这个组件将会负责渲染表情包选择器并且处理用户的点击事件。

我们进入 src\components\modules\shared 目录，创建一个名为 Stickers.tsx 的新文件。

在组件内部，我们使用 useState 来管理当前的表情类别 currentCategory（即 颜文字、 Emoji 或者其他乱七八糟的类别），并且使用 useMemo 来缓存表情类别以及当前选中的表情数据。

需要注意的是：考虑到颜文字的长度不一，我们需要判断当前表情包为 颜文字 的时候采用 Grid 布局对齐元素：

<div
  className={`max-h-80 gap-4 overflow-x-hidden overflow-y-scroll pb-4 md:pb-0 ${
    currentCategory === '颜文字'
      ? 'grid grid-cols-4'
      : 'flex flex-wrap'
  }`}
>
  { ... }
</div>

不然就会像下面这样参差不齐：

不使用 Grid 布局

Stickers.tsx 的完整代码如下：

import { memo, useCallback, useMemo, useState } from 'react'
import type { FC } from 'react'

import { owo } from '~/lib/owo'

type EmojisType = typeof owo
type CategoryKey = keyof EmojisType

export const Stickers: FC<{
  handleInsertEmoji: (emoji: string) => void
}> = memo(({ handleInsertEmoji }) => {
  const [currentCategory, setCurrentCategory] = useState<CategoryKey>('颜文字')

  const emojis: EmojisType = owo

  const handleClickEmoji = useCallback(
    (emoji: { icon: string; text: any }) => {
      if (emoji.icon.startsWith('http')) {
        handleInsertEmoji(`![${emoji.text}](${emoji.icon})`)
      } else {
        handleInsertEmoji(emoji.icon)
      }
    },
    [handleInsertEmoji],
  )

  const categories = useMemo(
    () => Object.keys(emojis) as CategoryKey[],
    [emojis],
  )

  const currentEmojis = useMemo(
    () => emojis[currentCategory]?.container || [],
    [emojis, currentCategory],
  )

  return (
    <>
      {emojis ? (
        <>
          <div className="mb-2 flex flex-wrap gap-4 text-xs">
            {categories.map((category) => (
              <button
                key={category}
                className={`rounded-md px-2 py-1 ${
                  currentCategory === category ? 'text-accent' : 'opacity-50'
                }`}
                onClick={() => setCurrentCategory(category)}
              >
                {category}
              </button>
            ))}
          </div>
          <div
            className={`max-h-80 gap-4 overflow-x-hidden overflow-y-scroll pb-4 md:pb-0 ${
              currentCategory === '颜文字'
                ? 'grid grid-cols-4'
                : 'flex flex-wrap'
            }`}
          >
            {currentEmojis.map((item: { icon: string; text: string }) => (
              <button
                key={item.text}
                title={item.text}
                onClick={() => handleClickEmoji(item)}
                style={{
                  backgroundImage: item.icon.startsWith('http')
                    ? `url(${item.icon})`
                    : '',
                }}
                className={
                  item.icon.startsWith('http')
                    ? 'h-10 w-10 bg-cover bg-center bg-no-repeat'
                    : ''
                }
              >
                {!item.icon.startsWith('http') && item.icon}
              </button>
            ))}
          </div>
        </>
      ) : (
        <div>Loading Emojis...</div>
      )}
    </>
  )
})

Stickers.displayName = 'Stickers'

最后，只需要重新构建项目，就可以在 Shiro 中使用表情包功能了😊。

此文由 Mix Space 同步更新至 xLog
原始链接为 https://www.vinking.top/posts/codes/integrating-stickers-into-shiro-theme