/sページに導入テキストを挿入しますか？

開発
1

サポートに属さない内容でしたら申し訳ありません。

現在、メインの /s サブスクリプションページには、サブスクリプション/支払いオプションのみが表示されています。そして、各サブスクリプション/支払いオプションには、含めることができるテキスト文字数に限りがあります。

私の目的としては、/s ランディングページを単なる「ビジネス専用」ではなく、もう少し歓迎的で情報量の多いものにしたいと考えています。

現在のサブ/支払いオプションの上に、/s ページに何らかの紹介文や情報テキストを追加することは可能でしょうか？あるいは、これは（いつか）オプションとして実装される予定のあるものなのでしょうか、それとも範囲外のことなのでしょうか？

基本的に、現在のオプションの上に、標準的な書式設定オプションを備えたユーザー編集可能なテキストボックスが欲しいだけです。

私はまだ Discourse の CSS 編集オプションにあまり詳しくないので、ページやプラグイン、コンポーネントの編集に関して何が可能か不確かです。そのため、私の無知についてはご容赦ください。

何かご意見をいただけると幸いです。

ありがとうございます。

2

CSSでこれができると思います。テキストを追加したい場所のスクリーンショットを送っていただけますか？ありがとうございます。

「いいね！」 2
3

プラグインのアウトレットがどこにあるかを確認できます。

次に、カスタムコンポーネント - 任意のプラグインアウトレットにボタンまたはテキストを追加するを使用して、任意のテキストを任意のプラグインアウトレットに挿入できます。

「いいね！」 1
4

はい。私はこのように考えています…

変更前/変更後。サブスクリプション以上のものを提供しているため、「Subscriptions」のデフォルトテキストを「make a payment」に変更する必要があったことに注意してください。ただし、そのテキストはページタイトルにも関連付けられているようです。したがって、私の場合は、既存のページタイトルの下部よりも上部にテキストブロックを追加する方が理にかなっています。

image
image1302×1079 112 KB

5

これは素晴らしく強力に見えます。

ホストされている場合でも、これを利用できますか？新規のDiscourseユーザー向けの指示が少し不足しているため、現時点では私が利用するのに理想的な候補ではないかもしれませんが、できるだけ早く追いつこうとしており、これは非常に便利そうに見えます。

これに関する参照情報を見つけるために、Githubページにアクセスする必要がありました。

プラグインアウトレットを見つけるには、JavaScriptコンソールでenableDevTools()を実行します。

私の質問に答えていただきありがとうございます。感謝します。

6

はい。テーマコンポーネントです。（少なくともほとんどのプランでは、好きなテーマコンポーネントをインストールできます）。「このテーマコンポーネントをインストールする」と書かれた大きな青いボタンをクリックしてみましたか？

それはもっともなご意見ですね！

プラグインのアウトレットの場所を見つけられるように、https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215 へのリンクを追加しました。

あなたのメッセージのこの部分を読む前に、そのリンクを追加しましたよ！ :slight_smile:

おっと、/s でプラグインのアウトレットを見ると、アウトレットがないようです。 「支払いを行う」という見出しの上にテキストを挿入したい場合は、うまくいきます！

image

（「サービスへの支払い」を「支払いを行う」と仮定してください）top-notices または above-main-container のどちらかに配置できますが、残念ながら、支払いページだけでなくすべてのページにコンテンツが追加されてしまいます。他のすべてのページで非表示にするCSSを見つけられない限りは、という条件付きです。辛抱強く待てるなら、https://ask.discourse.com/ でその方法を尋ねてみるのが妥当な見込みです。

一方で、そのページにプラグインアウトレットを追加するようリクエストするのは妥当なことですが、それはまた別の学習事項になります。

「いいね！」 1
7

はい。テーマコンポーネントは問題なくインストールできるレベルにあります。

批判のつもりは全くありませんでした。そのように伝わったのであればお詫び申し上げます。単なる新規ユーザーとしての所見でした。

はい、そのリンクは以前の検索で見つけました。問題は、Discourseを開発環境で実行する方法（またはブラウザコンソール経由でアクセスする方法）をまだ知らないことです。

したがって、あなたのコンポーネントを活用できるかどうかの質問は、コンポーネントのインストール自体についてではなく、それを使用するために開発者ツールへのアクセスが必要であることについてでした。混乱させて申し訳ありません。

このリソースがあることは知りませんでした、ありがとうございます。

配置については、実際の「購読」コンテンツのすぐ上に簡単に収まる場所であればどこでも構いません。ただし、すべてのページに表示されないようにしたいです。

ご丁寧なご返信に感謝いたします。

8

いえいえ。そう、その通りだと示唆したかったのです。ドキュメントは改善されるべきです。だからこそ「もっともだ」と言ったのです！

その必要はありません。ブラウザで開発者ツールを開くだけで（MacでなければF12で動作します。Macの場合は、すぐ隣にMacがあっても毎回調べなければならず、「mac open dev tools browser」のようなものをググります）、コンソールプロンプトに enableDevTools() と入力します。今すぐ、このサイトで実行できます。

「いいね！」 1
9

私はMacを全く使いませんが、「J」は以下のおかげで覚えています

「いいね！」 2
10

ああ、ブラウザの開発者コンソールですね。Discourse依存のコンソールではないと。物事が分かり始めてきました。ありがとうございます。

カスタムコンポーネントを有効にし、ブラウザコンソールで開発者ツールを有効にしました。そして、プラグインコンポーネントを見るために開発者ツールバーをアクティブにしました。

そして、サブスクリプション用のプラグインコンポーネントがないため、その特定のランディングページにテキストを配置する簡単な方法がない、ということですね。分かりました。

*簡単な方法とは、ステップ1、ステップ2、ステップ3で成功するような方法であり、何時間もの調査やCSSの学習などを必要としないという意味です。

image

最近のサブスクリプションに関する検索（今すぐリンクがなくてすみません）で、いずれ刷新される予定だとどこかで読みました。将来の開発で、私の提案した紹介/テキストエリアが検討されることを願っています。

このスレッドでの助けに感謝します。ありがとうございます。

「いいね！」 2
11

サブスクリプションページでのみ適用されるボディクラスがあるはずなので、それを使って、サブスクリプションページ以外のすべてのページに追加したものをCSSで非表示にできます。

はい、サブスクリプションには class="above-main-container-outlet subscriptions-campaign ember-view" があるので、追加したクラスを非表示にし、subscriptions-campaign の中にある場合は再表示するようにします。そんな感じです。

「いいね！」 2
12

GoogleやSOで少し調べた後、純粋なCSSバージョンをでっち上げました：

.above-main-container-outlet.subscriptions-campaign::after {
  content: "ここに挿入したいテキスト！ \A これは新しい行です！ \A";
  white-space: pre;
}

改行文字として\Aを使用しています。

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

「いいね！」 2
13

ありがとうございます。ご協力に感謝いたします。

現在外出中のため、明日までPC（作業しやすい環境）に戻れません…

しかし、新しいコンポーネントを作成し、あなたのCSSを貼り付けました。コンポーネントを有効にしたところ、すべてのページにテキストが表示されるようになりました。

これで機能しました。これは素晴らしいことです。ありがとうございます。

あとは、これをどうやるかを見つけるだけです…

…時間を見つけたときに。

それと、CSS内でテキストをどのようにフォーマットするかについてもです。例えば…

ヘッダーテキスト

コンテンツそのもの。そして、もしかしたら少し凝った表現にするかもしれません。

これはCSSの問題で、いずれGoogleで調べて解決できると確信しています。試行錯誤しながら学んでいます。

助けてくれて感謝しています。ありがとうございます。

14

これをサブスクリプションページでのみ、ほとんど正しくフォーマットされた状態で動作させることができました。

/* パート 1: ヘッダー（ネイティブの H1 のようにスタイル設定） */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
  content: "これは見出しです"; 
  display: block;
  
  /* 'title-wrapper' ヘッダーに合わせるためのスタイル設定 */
  font-family: var(--heading-font-family);
  font-size: var(--font-up-5);
  font-weight: bold;
  line-height: var(--line-height-small);
  color: #DDDDDD;
  
  /* この見出しと下のテキストとの間のスペース */
  margin-bottom: 8px; 
}

/* パート 2: 本文テキスト（下にスペースあり） */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
  content: "これは見出しの下に表示されるプレーンテキストです。\A ここでもバックスラッシュAを使用して改行できます。";
  display: block;
  
  /* 標準の本文テキストに合わせるためのスタイル設定 */
  font-family: var(--font-family);
  font-size: var(--font-0);
  line-height: var(--line-height-medium);
  color: #DDDDDD;
  white-space: pre-wrap;
  
  /* テキストの下に空のスペース（復帰）を作成します */
  margin-bottom: 40px; 
}

Screenshot_20251206_200020_Firefox
Screenshot_20251206_200020_Firefox1080×1283 114 KB

「いいね！」 2
15

また、右クリックして INSPECT（検証）でも構いません。PC/Mac

「いいね！」 1
16

PRを開きました。マージされるといいな :crossed_fingers::

「いいね！」 3
17

おお。それはとても巧妙ですね。私のCSSの理解は、実用性よりも理論的なものに偏っています。

「いいね！」 1
18

@ZeroDean PRがマージされました！お役に立てれば幸いです！

「いいね！」 3
19

@ZeroDeanさん、これは、購読ページでのみ利用可能なこの新しいプラグインアウトレットを使用して、CSSを簡略化できることを意味します。

「いいね！」 2
20

素晴らしい。対応していただき感謝します！@NateDhaliwalさん、ありがとうございます。

ありがとうございます。ホストされているサービスを利用しているのですが、これは次のサーバーアップデートまで待つ必要があるということでしょうか？

「いいね！」 1