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

· / , · 阅读· 喜欢

关键洞察

本文介绍了在基于 NextJS 的 Shiro 主题中集成自定义表情选择器的过程。首先在 src/lib/owo.ts 中创建与 OwO.json 结构一致的表情数据对象。接着替换评论组件 UniversalTextArea 中的 EmojiPicker 为自定义 Stickers 组件，并修改表情按钮。最后在 shared 目录下编写 Stickers.tsx 组件，使用 useState 管理类别、useMemo 缓存数据，并针对颜文字采用 Grid 布局对齐。构建后即可使用表情包功能。

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

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

创建表情数据文件

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

CodeBlock Loading...

添加表情按钮

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

但是因为在我的电脑上滑动这个选择器会有掉帧的情况出现，所以我想要将自己编写的表情包选择器组件直接替换掉 Emoji Picker。同时为了避免分支冲突，还将会避免在原来的表情包选择器组件 EmojiPicker 中进行修改。

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

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

CodeBlock Loading...

2. 替换原有的 EmojiPicker 组件：

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

CodeBlock Loading...

3. 修改表情按钮：

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

CodeBlock Loading...

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

表情包选择器组件

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

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

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

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

CodeBlock Loading...

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

Stickers.tsx 的完整代码如下：

CodeBlock Loading...

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

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

创建表情数据文件

TypeScript

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",
      },
      //...
    ],
  },
};

CodeBlock Loading...

添加表情按钮

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

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

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

TSX

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

CodeBlock Loading...

2. 替换原有的 EmojiPicker 组件：

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

TSX

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"
            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"
          >
            <EmojiPicker onEmojiSelect={handleInsertEmoji} />
            <Stickers handleInsertEmoji={handleInsertEmoji} />
          </FloatPopover>
      )}
      </>
    </CommentBoxSlotPortal>
  </TextArea>
);

CodeBlock Loading...

3. 修改表情按钮：

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

TSX

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

CodeBlock Loading...

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

表情包选择器组件

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

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

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

TSX

<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>

CodeBlock Loading...

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

Stickers.tsx 的完整代码如下：

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'

CodeBlock Loading...

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