Discourseステッカー

Don · 2023 年 10 月 3 日午前 11:19


	概要	ステッカーを追加
	プレビュー	Theme Creator
	リポジトリ	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers.
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマ初心者の方へ	Discourseテーマ使用の初心者向けガイド

このテーマコンポーネントをインストール

こんにちは

このテーマコンポーネントを使用すると、投稿やチャットメッセージにステッカーを追加できます…

仕組みは？

コンポーザーにボタンが配置され、ステッカーモーダルが開きます。

ステッカーモーダル

ステッカーをクリックすると、コンポーザーに追加されます。
画像マークダウンコードは [wrap=sticker] img [/wrap] の中に配置されるため、ステッカー画像は他の画像とは別にターゲット指定できます。

ステッカーは常に新しい行に配置され、タイトルとサイズが含まれます。サイズは現在180x180pxに固定されています。各ステッカーには影があり、画像をよりステッカーらしく見せています…
コンポーザーと投稿では、ホバー時のメタ情報がCSSで非表示になります。

設定方法

まず、ステッカーとして使用したい画像をアップロードする必要があります。これらの画像をトピック投稿にアップロードするだけです。
画像URLとマークダウンURLが必要になります。

例：
画像を投稿にアップロードしました。画像URLのoptimizedバージョンを使用します。これは以下で見つかりますが、画像の任意のURLを使用できます。

ブラケット内のマークダウンアップロードURL

設定

ステッカー画像
ステッカー画像設定でステッカーを設定できます…

タイトル: これは画像のタイトルとaltテキストです。マークダウンコードのタイトルにもなります。

絵文字: 各ステッカーの右上隅のステッカーモーダルに表示されます。

previewUrl: これはステッカーモーダルに表示される画像です。

markdownUrl: これは以前にアップロードされた画像のマークダウンURLです。

Canapin · 2023 年 10 月 3 日午前 11:52

こんにちは、ドン

素晴らしい仕事です！ちょっと見てみました :)\n\nステッカーの管理は少し面倒です – 特にプレビューの部分 – アバターやカスタム絵文字のような、これ専用のレイアウトや機能がないためですが、もっと大変な作業になることは理解しています。\n\nドロップシャドウフィルターはGIFが停止しているときは無効になり、ここにある中央の画像（ライトボックスをトリガーする長方形のJPG）には四角い背景として表示されません。\n\n chrome_k71dGHbeLH \n\nフィルター効果は本当に素晴らしいですが、オプション設定にするのが良いと思います \n\nステッカーピッカーは次のような均等配置を使用しています。\n\n\nXXX\n X \n\nしかし、右揃えの方が好みかもしれません。\n\nXXX\nX \n\n\nもちろん、これは非常に個人的な意見です

Don · 2023 年 10 月 3 日午後 2:10

フィードバックありがとうございます @Canapin

これのために新しい設定を追加しました…
Screenshot 2023-10-03 at 16.04.17

これも完了しました…ずっと良くなりました

Don · 2023 年 10 月 3 日午後 4:54

更新: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · 2023 年 10 月 28 日午後 3:53

特定のカテゴリに限定することは可能でしょうか？（また、カテゴリごとに異なるステッカーを設定することは可能でしょうか？）

hoangphuctran93 · 2023 年 10 月 28 日午後 4:37

管理者がスタンプグループを作成できるようにし、ユーザーが好きなトピックの各グループに合わせてスタンプの選択をカスタマイズできるようにします。
さらに、ユーザーが記事でアイコンを使用する際に、インストールされているアイコンに基づいて推奨しますが、これは難しい機能だと思います。

deltaR · 2023 年 11 月 9 日午後 2:12

テキスト行にステッカーを配置するにはどうすればよいですか？新しい行ではなく。(このリポジトリをフォークしました)

Don · 2023 年 11 月 9 日午後 4:31

こんにちは

はい、この行の先頭と末尾から \n を削除する必要があります。

github.com/deltaR-3k/discourse-stickers

javascripts/discourse/components/modal/sticker.js

main


      
          @tracked stickerImages = JSON.parse(settings.sticker_images);
          @service site;
          @service capabilities;
          
          @action
          pick() {
            let stickerImage = document.querySelectorAll(".sticker-pack span.sticker-holder img.sticker:hover");
            stickerImage.forEach((sticker) => {
              sticker.classList.add("picked");
              sticker.addEventListener("animationend", () => {
                let markupComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                let markupChatComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                if (this.args.model?.customPickHandler) {
                  this.args.model.customPickHandler(markupChatComposer);
                } else {
                  getOwner(this).lookup("service:app-events").trigger("composer:insert-text", markupComposer);
                }
                this.args.closeModal();
              });
            });
          }

@mattdm 返信が遅れてすみません。はい、カテゴリごとにコンポーザーにボタンを表示することは可能だと思います。確認が必要です。

このコンポーネントはすでにセットアップが少し複雑です。これについてはよくわかりません。

こんにちははい、これは別のレベルですね。現在のビルドで可能かどうかはわかりません。

deltaR · 2023 年 11 月 9 日午後 5:03

返信ありがとうございます！
しかし、変更後、ステッカーが表示されなくなりました。以下のようになります。

Don · 2023 年 11 月 9 日午後 5:13

すみません、[wrap=sticker] と [/wrap] も削除した方が良いと思います。そうすれば画像がインラインで表示され、欠落することはないでしょう。

[wrap=sticker] はステッカー画像にスタイルを追加するためだけのものです。

github.com/deltaR-3k/discourse-stickers

common/common.scss

f28fb4b9c


      
          .d-wrap[data-wrap="sticker"] {
            @include user-select(none);
            img {
              width: 75px !important;
              height: 65px !important;
              aspect-ratio: 75 / 65 !important;
              @if $stickers_shadow == "true" {
                filter: drop-shadow(2px 2px 2px rgba(var(--always-black-rgb), 0.8));
              }
            }
            .button-wrapper {
              display: none;
            }
            a.lightbox {
              .discourse-touch & {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                transition: filter 200ms;
                &:active {
                  filter: brightness(0.8);
                }

This file has been truncated. show original

deltaR · 2023 年 11 月 9 日午後 5:23

インライン表示では [wrap=sticker] は使えないということですか？
うまくいきました、ありがとうございます！

ps: Composer で markdownUrl を非表示にすることは可能でしょうか？長い URL でスペースを取りすぎるためです。

トピック		返信	表示
Telegram-like stickers? Feature	9	1891	2024 年 1 月 25 日
Permanent/stickied note on Discourse Support	1	272	2023 年 9 月 30 日
What are good plugins or theme components for a forum emphasizing pictures? Community	12	1765	2025 年 8 月 4 日
MD Composer extras Theme component	70	8699	2025 年 7 月 8 日
Welcome Link Banner theme-component with photos Feature welcome-link-banner	10	833	2023 年 6 月 14 日

Discourseステッカー

関連トピック