Typecho プログラムを使用してブログを構築する際には、通常 OwO ライブラリ を使用してブログにスタンプ機能を提供します。このような感じです：

OwO ライブラリが提供する統合方法は、従来のフロントエンド開発パターンに適していますが、現在の Shiro オープンソース版のテーマは NextJS フレームワークに基づいて開発されており、テーマに直接統合することは適していません。そのため、自分自身で簡素版のスタンプを作成する必要があります。

スタンプデータファイルを作成する

OwO では、スタンプデータは OwO.json ファイルから取得されます。Shiro テーマでは、src/lib ディレクトリに owo.ts ファイルを作成してスタンプデータを定義できます。このファイルでは、owo オブジェクトを作成し、OwO.json の構造と一致させて、以前の Typecho テーマのスタンプデータを引き継ぐことができます。

スタンプボタンを追加する

Shiro テーマでは、Emoji Picker ライブラリがスタンプピッカーとして使用されています。

しかし、私のコンピュータでこのピッカーをスクロールするとフレームレートが低下するため、自分で作成したスタンプピッカーコンポーネントを直接 Emoji Picker に置き換えたいと考えています。また、ブランチの競合を避けるために、元のスタンプピッカーコンポーネント EmojiPicker を修正することはありません。

1. カスタムスタンプピッカーコンポーネントを導入する：

まず、src\components\modules\comment\CommentBox\UniversalTextArea.tsx で、もともと導入されていた EmojiPicker コンポーネントを私たち自身のスタンプピッカーコンポーネント Stickers に置き換えます：

2. 既存の EmojiPicker コンポーネントを置き換える：

UniversalTextArea コンポーネントの返り値にある <EmojiPicker onEmojiSelect={handleInsertEmoji} /> を <Stickers handleInsertEmoji={handleInsertEmoji} /> に置き換えます：

3. スタンプボタンを修正する：

最後に、テキストボックス左下のスタンプボタンを修正します：

これで、コメント欄のテキストボックスの修正が完了しました。

スタンプピッカーコンポーネント

次に、先ほど導入したスタンプピッカーコンポーネント Stickers を作成します。このコンポーネントは、スタンプピッカーをレンダリングし、ユーザーのクリックイベントを処理する責任があります。

src\components\modules\shared ディレクトリに、Stickers.tsx という新しいファイルを作成します。

コンポーネント内部では、useState を使用して現在のスタンプカテゴリ currentCategory（つまり 顔文字、Emoji、またはその他の様々なカテゴリ）を管理し、useMemo を使用してスタンプカテゴリと現在選択されているスタンプデータをキャッシュします。

注意点：顔文字の長さが異なるため、現在のスタンプが 顔文字 の場合に Grid レイアウトを使用して要素を整列する必要があります：

さもなくば、以下のように不揃いになります：

Stickers.tsx の完全なコードは以下の通りです：

最後に、プロジェクトを再構築するだけです。これで Shiro でスタンプ機能を使用できるようになります😊。