When building a blog with the Typecho program, the OwO library is generally used to provide a sticker feature, like this:

The integration method provided by the OwO library is more in line with traditional front-end development patterns. However, the current open-source version of the Shiro theme is developed based on the NextJS framework, which is not suitable for direct integration into the theme. Therefore, it is necessary to develop a simplified version of the sticker feature on your own.

Create Sticker Data File

In OwO, sticker data is obtained through the OwO.json file. For the Shiro theme, we can create an owo.ts file in the src/lib directory to define sticker data. In this file, we create an owo object and keep its content consistent with the structure of OwO.json to inherit the sticker data from the previous Typecho theme.

Add Sticker Button

The Shiro theme uses the Emoji Picker library as the sticker selector

However, since there is frame dropping when scrolling this selector on my computer, I want to replace the original Emoji Picker with my own sticker selector component directly. Also, to avoid branch conflicts, I will avoid modifying the original sticker selector component EmojiPicker.

1. Introduce the custom sticker selector component:

First, in src\components\modules\comment\CommentBox\UniversalTextArea.tsx, replace the originally imported EmojiPicker component with our own sticker selector component Stickers:

2. Replace the original EmojiPicker component:

Replace <EmojiPicker onEmojiSelect={handleInsertEmoji} /> in the return of the UniversalTextArea component with <Stickers handleInsertEmoji={handleInsertEmoji} />:

3. Modify the sticker button:

Finally, modify the sticker button at the bottom left of the text box:

In this way, we have completed the modification of the comment box text area.

Sticker Selector Component

Next, we need to write the sticker selector component Stickers that we just introduced. This component will be responsible for rendering the sticker selector and handling user click events.

We go into the src\components\modules\shared directory and create a new file named Stickers.tsx.

Inside the component, we use useState to manage the current sticker category currentCategory (i.e., Emoticons, Emoji, or other miscellaneous categories), and use useMemo to cache the sticker categories and the currently selected sticker data.

It is important to note that, considering the varying lengths of emoticons, we need to use a Grid layout to align elements when the current sticker pack is Emoticons:

Otherwise, it will look uneven like this:

The complete code for Stickers.tsx is as follows:

Finally, just rebuild the project, and you can use the sticker feature in Shiro😊.