Landing Pages ブログ 🛩

最新の安定版 Discourse (3.2.x) と更新されたランディングページコンポーネント (プラグイン、ブログページ、ブログテーマ) を使用して、画像背景と投稿コンテナサイズの表示上の問題のみを再現できました。可能であればテーマを少し更新しますが、フォークで修正したい場合は簡単に修正できます。

クリーンインストールでデフォルト設定を使用した場合、投稿/購読ボタンはページの下部にあり、どちらも機能します。モバイル版のパスはデスクトップ版と同じように動作し、投稿日に関する問題は確認できません。ただし、「最終更新」はブログカテゴリを設定すると変更されます (そのカテゴリのすべての投稿に「ブログ投稿」タグが付けられます)。

モバイル版のハンバーガーメニューは、ランディングページ設定の「メニュー」設定で何も構成されていない限り空になります。インターフェースを簡素化するために、その状況ではメニューを完全に非表示にするようにコードを更新する可能性があります。

ブログにアクセスしたところ、いくつかデバッグできる点が見つかりました。

  • ボタンが機能しない件については、厳格なコンテンツセキュリティポリシー(CSP)設定が有効になっており、必要なスクリプトが読み込まれていないようです。

  • リンクについては、Android搭載のFirefoxでサイトにアクセスしたところ、全く問題ありませんでした。ブラウザやDiscourseの特定の構成によるものでしょうか?

  • CSSの修正については、多くの選択肢があります。例えば、背景画像については、common.scss内の.title-containerクラスにbackground: no-repeat center/cover fixed;を設定できます。投稿内の「小さなコンテナ」については、同じファイル内の.post-contentクラスにmin-width: 100%;を追加できます。

  • メニュー設定については、現在、ドキュメントで述べられているように、グローバルなpages.jsonファイルに追加するしかありませんが、この点に関する情報はあまり多くありません。ただし、pavilion-landing-pagesリポジトリで例を確認できます。

やあ!それで、あなたが画面録画したビデオでは、直接のURLは問題なく機能します。しかし、ホームブログページに移動してからブログのタイトルをクリックすると、「ページが見つかりません」というエラーが表示されます。直接のURLは問題なく機能しますが、誰もそれらをすぐに利用できるわけではなく、明らかに現実的ではありません。

CSSの修正をすぐに試して、この編集を行うか、結果を添えて再度返信します。ありがとうございます!

コンテンツセキュリティポリシーに関する非常に興味深い発見です…。それを操作した記憶すらありません。うーん。どうすれば修正できますか?

編集:設定で「コンテンツセキュリティポリシー」を無効にすることで、購読ボタンを修正しました。しかし、これを有効にしたままボタンを機能させる方法はありますか?おそらく、それをトリガーしないようにボタンの動作を変更しますか?

CSP設定については分かりません、申し訳ありません。ビデオでは、約26秒から27秒のところで、まさにそれ(ブログのタイトルをクリックする)を行っており、問題なく動作しましたので、こちらでさらにテストする方法は分かりません。

編集した投稿は以下の通りです。「設定でcontent security policyを無効にすることでSubscribeボタンを修正しました。しかし、これを有効にしたままボタンを機能させる方法はありますか?あるいは、それをトリガーしないようにボタンの動作を変更することは可能でしょうか?」

そして、私のミスでした!うーん、それは本当に奇妙ですね。複数のブラウザやいくつかの電話でも試しましたが、同じ問題が発生しています…。

ところで、モバイルで画面上に表示される「Posts」アイコンと同じサイズになるように、Subscribeボタン/テキストを大きくすることは可能ですか?アカウントにサインインしているときはアイコンは適切なサイズですが、サインアウトしている、ゲストの場合はそうではありません。これはあなたのビデオでも確認できます。

それ以外では、プロフィール写真/著者名、日付、「Forum Topic」エリアをモバイルで水平に配置したいです。これは縦に積み重ねると見栄えが悪いためです(少なくとも日付とTopicエリアを並べて、プロフィール写真の下に中央揃えにするか、何か)。。。

ああ、そしてあなたのCSSコードは機能しました!本当にありがとうございます。

上記の返信に加えて、@cabidopさん、私のパートナーがブログページ/テーマの件を数時間かけてじっくり見てくれました。なぜなら、デフォルト設定について、技術に詳しくない一般の人の意見を聞きたかったからです。もしブログ関連に組み込みたいものがあれば、ここに言及しておきます。

  • サインアウトしている状態で、ブログのランディングページにある「購読」ボタンをクリックしてサイトでアカウントを作成した後、ユーザーをブログのランディングページに戻すようにしてください。

    • 私自身、それがそのように機能していることに気づきませんでした。しかし、ゲストが「購読」をクリックするとフォーラムの登録ページに移動し、アカウントを作成すると、ブログページがどこにあるのか分からなくなってしまいます。なぜなら、フォーラムに留まるからです。しかし、サインインした状態でブログのランディングページに戻っても、購読されておらず、サインインした状態で再度ボタンをクリックする必要があります。
  • 実際に購読したことの確認メールを受け取れるようにしてください。

    • 現在は、購読ポップアップボックスの小さなポップアップ以外に、メールで購読したことを確認する実際の確認方法がありません。
  • 購読したら、サインインしている間はボタンを完全に削除するか、デスクトップでは「購読」ではなく「購読済み」と表示されるようにしてください。さらに、ボタンがスクロール中に画面に表示され続けないように、つまりスクロール中に消えるようにしてください。

  • ブログ投稿ページの大きなヘッダー写真は、モバイルでは引き継がれません。ほとんど表示されないか、時々全く表示されないことがあります(デスクトップ対モバイルのこの件に関する写真は以下)。

    これらの変更は、たとえそのままのデフォルト設定であっても、非常に素晴らしいものになると思います。

フィードバックありがとうございます、@45thj5ej。将来的に提案の一部をデフォルトで実装するかもしれません。CSPの問題がすでに解決されたかどうかはわかりませんが、機能全体を無効にすることなく、ケースに合わせて機能する可能性のあるcontent security policy script srcオプションがあるようです(ただし、これについては完全には確信がありません)。

テーマが他のページで機能しない件については、スタイルで.blogおよび.blog-postクラスが使用されているため、これは期待される動作です。各ランディングページは、独自のスラッグをボディのHTMLクラスとして追加するため、CSSスタイルがそれらのクラスにのみ適用される限り、それぞれ「ブログ」および「ブログ投稿」ページにのみ影響します。

その他のコメント/問題については、コンポーネントの実際の問題というよりは一般的なCSSの質問であるため、他のトピックで言及した、ユースケースに固有であることについて繰り返すだけです。とはいえ、最終的にはそれらを確認するかもしれませんが(ただし、当然のこととは思わないでください)。

「いいね!」 1

大変なことになっています…
Nginx で mysite.comhttps://forums.mysite.com/home にリダイレクトするように設定し、DNS の A レコードをドメインプロバイダーから設定しました(これをサイトのメインページにしたいからです)。

奇妙なことに気づきました。リダイレクトからブログ記事にアクセスすると(つまり、私のサイトにアクセスする人は誰でもこうなります)、URL に /home が二重に追加されます。しかし、直接の URL、https://forums.mysite.com/home からブログのホームページにアクセスすると、そうはなりません。

できるだけ早く修正する方法はありますか?または、教えていただければ自分でできます。これは、先日モバイルのみで発生していた類似の問題とは別です。そしてもちろん、ブログのホームページでリンクにカーソルを合わせると、次のように二重に表示されます。
https://forums.mysite.com/home/home/blog-test-one-million

しかし、繰り返しますが、リダイレクトからではなく、URL に直接アクセスすると問題なく動作します。

「ダブルパス」の問題は、ブログページのみで発生しますか、それともランディングページや、Discourseの任意のページ(例:「/latest」)で発生しますか?

ブログのホーム/ランディングページ、ブログ投稿のタイトルをクリックするところです。

**編集:以下は無視してください。**修正は以下の通りです。
ブログテーマのcommon.scssの約172行目あたりにある以下の1行をコメントアウトしました。

body.blog {
/*   padding-top: 8em; */

また、サイトのヘッダーを編集するにはどうすればよいですか?どのような場合でもヘッダーがそこに配置され、まったく編集できないようです。上部のナビバー/メニュー/ロゴエリアです。

例:デフォルトのヘッダーを短くするためにカスタムヘッダーを作成しました。そして、次を使用しても

.landing-header {
display:none
}

それでも上部に大きな隙間ができます。この隙間を削除するにはどうすればよいですか?

@angus これはまだ機能しますか? 私にとって完璧な解決策のように思えます。

@cabidop@merefield が最近ランディングページプラグインをメンテナンスしているので、彼らに尋ねるのが一番良いでしょう。

「いいね!」 1

@merefield これは、Discourse の現在のバージョンでもサポートされていますか?

わかりません。ブログ拡張機能には詳しくありません。使用していません。

エラーメッセージがあれば共有していただけますか?

エラーはありません。互換性があるかどうか気になっただけです。

NateDhaliwalさん、回答が少し遅くなってしまいましたが、ブログ拡張機能に問題はないはずです(もしあればお知らせください)。

「いいね!」 2