ログインポップアップを開くか、ボタン押下時にイベントをトリガーする

以下のような簡単な方法があります:ボタンに sign-up-button クラスを付与します。

クリックすると登録ポップアップが開きます。a: href はサインアップ を使用する代わりにです。


api.decorateWidget('post: after', helper を使用しました。

ただし、記事の末尾にコードスニペットを挿入するには、NAME:LOCATION が一意である必要があります。

あるいは、NAME:LOCATION を探す場所です。

post:afterは、投稿の下部に新しい要素を追加したい場合に機能します。ただし、post:after の間にスペースが入っている点にご注意ください。

これは、あなたが行おうとしていることに関連していると思います。

まだ問題がある場合は、使用中のコードの残りを投稿してください。

ご協力ありがとうございます(特に初心者の方には)
これがコード全体です

<script type="text/discourse-plugin" version="0.8.25">
    const user = api.getCurrentUser();
    if (!user) {
    api.decorateWidget('post:after', helper => {
	let h = helper.h, attrs = helper.attrs;
	// console.log(attrs);
	return helper.h('div.fixed-bottom-bar.d-none.d-lg-block',
		[
		    helper.h('div.wrapper',
		        [
		        	helper.h('div.logo',
			        	helper.h('img', {
		                    src: 'https://thuvienmuasam.com/uploads/default/original/1X/776142524c0d5c0430a603fde63a8bad2f77b267.svg',
		                    alt: 'ThuVienMuaSam'
		                })
		        	),
		            helper.h('div.content.d-flex.justify-content-between.ml-1',
		            	[

			        		helper.h('div.float-left',
			         		[
			        			helper.h('span.title','ようこそ、Thư Viện Mua Sămへ!'),
								helper.h('br'),
								helper.h('span.text',
			         			[
			         				helper.h('span','まずは '),
									helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
										helper.h('strong','TVMS アカウントの登録')
									),
									helper.h('span','をして、より多くの面白い投稿を '),
									helper.h('a',{ href: '/u/'+helper.attrs.username },
										helper.h('strong',""+helper.attrs.username),
									),
								])
							]),
							helper.h('div.float-right.d-flex.align-items-center',
								helper.h('button.btn-primary.btn',{type:'button'},
									helper.h('a', { href: '/signup'},
										helper.h('span.d-button-label','参加する')
									),
								)

							),
						]
			        ),
		        ]
		    )
		]
	);
    });
}
</script>

私は helper.h(‘a’, { href: ‘/signup’} を使用しましたが、ボタンをクリックするとページが再読み込みされ、すぐに登録フレームが表示されません。

コードを共有いただきありがとうございます :+1:

ログイン/サインアップモーダルを直接表示させたい場合は、組み込みの showLogin および showCreateAccount アクションを使用する必要があります。

そのため、以下のような記述の代わりに

helper.h(
  "button.btn-primary.btn",
  { type: "button" },
  helper.h(
    "a",
    { href: "/signup" },
    helper.h("span.d-button-label", "参加する")
  )
)

サインアップモーダルには以下のような記述を使用してください

helper.attach("button", {
  label: "sign_up",
  className: "btn-primary btn-small sign-up-button",
  action: "showCreateAccount"
})

ログインモーダルを表示させたい場合は以下のようにしてください

helper.attach("button", {
  label: "log_in",
  className: "btn-primary btn-small login-button",
  action: "showLogin",
  icon: "user"
})

また、匿名ユーザー向けに各投稿の下部にサインアップ/ログインボタンを含むバナーを追加することは、ユーザーにとって非常に不親切だと考えられますので、这种做法はお勧めしません。ただし、あなたのユースケースについては詳しく存じ上げていません。各投稿にバナーや画像を追加する代わりに、サイトの上部にバナーや画像を追加することを検討されてはいかがでしょうか?

ご回来いただき、すべての質問に答えていただきありがとうございます:smile:

現在、新規ユーザーの体験を向上させたいと考えており、具体的なアクションが必要です。
現在はPCでのみ動作します。
ユーザーが「非表示」をクリックした際にクッキーを非表示にするための方法を、関連記事を探して確認しています。

私のミントテーマのどこにこのコードを配置すればよいですか?

新しいテーマコンポーネントを作成し、テーマにアタッチできます。

  • 管理画面 → カスタマイズ に移動します。

  • 「インストール」ボタンをクリックします。

  • 次に、テーマにアタッチして「CSS/HTMLの編集」ボタンをクリックします。

  • 「Head」セクションにコードを追加します。

お役に立てれば幸いです。:+1:

ミントテーマでは、このコードをどこに配置すればよいですか?

@Arkshine が提供した手順を試しましたか?
リモートテーマは編集できないため、独自のテーマコンポーネントを作成し、それをミントテーマに追加するのが最善です。

console.error(“API または showLogin 関数が利用できません。”);

ログインページに到達してもモデルが自動的に開かないのですが、手順に従いました。

<script type="text/discourse-plugin" version="0.8.25">
    // 現在のページがログインページかどうかを確認する関数
    function isLoginPage() {
        return window.location.pathname === "/login";
    }

    // ページ読み込み時にログインアクションをトリガーする
    document.addEventListener("DOMContentLoaded", function() {
        console.log("DOMContentLoaded イベントが発生しました。");
        
        // 現在のページがログインページかどうかを確認する
        if (isLoginPage()) {
            console.log("現在のページはログインページです。");
            
            // ログインアクションをトリガーする
            if (typeof api !== "undefined" && typeof api.showLogin === "function") {
                console.log("API と showLogin 関数が利用可能です。");
                api.showLogin();
            } else {
                console.error("API または showLogin 関数が利用できません。");
            }
        } else {
            console.log("現在のページはログインページではありません。");
        }
        
        // ログインボタン要素を取得する
        const loginButton = document.getElementById("loginButton");

        // ログインモーダルを開くためにログインボタンのクリックイベントをトリガーする
        if (loginButton) {
            loginButton.click();
        }
    });
</script>

コンソールで「API または showLogin 関数が利用できません。」というエラーが出ています。