Fakebook テーマ

こんにちは、Jordan さん、

新しいユーザーが登録した際にエラーが発生しています。右側のサイドバーには、名前が表示されないまま、歓迎メッセージとサブヘッダーしか表示されません。いいねの数やバッジも表示されるはずです。このサイドバーに、いいねとバッジの情報を表示するように修正することは可能でしょうか?具体的には、0 :heart: 受け取り0 :heart: 送信、そして「バッジなし」といった表示です。バッジがない場合は、「まだバッジがありません… バッジの獲得方法を確認してください…」といったテキストやリンクを表示させたいです。

ありがとうございます!:slight_smile:

バッジに関するエラーコードは以下の通りです:

以下のように変更したいと考えています。
ただし、モバイル画面では動作しません。
どのようにすればよいか、ご教示いただけますでしょうか。

トピックの抜粋と画像に対してリンクが機能するようにしたいです。

{{~raw-plugin-outlet name="topic-list-after-title"}}
{{#unless topic.image_url}}
  {{#if topic.hasExcerpt}}
    <a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
      <div class="topic-excerpt-box">
        {{raw "list/topic-excerpt" topic=topic}}
      </div>
    </a>
  {{/if}}
{{/unless}}
{{#if topic.image_url}}
<a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
<div class="topic-image">
  <img src="{{topic.image_url}}" />
</div>
</a>
{{/if}}

テストに使用しているサイトは以下の通りです。
https://today16.com/

モバイルヘッダーで以下を使用してください :point_down:
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'> . . . </script>

iPhone 6S

Xcode シミュレータで iPhone 6S を使用してテストしていますが、この問題は発生していません。

いくつか質問があります:

このスクリーンショットは meta.discourse.org を使用しているものですか?
使用している iOS のバージョンは何ですか?
使用しているウェブブラウザは何ですか?

ありがとうございます

「いいね!」 1

Facebook テーマの iOS 端末で、Discourse に直接アップロードしたショート動画を再生しようとした方はいますか?

設定を見落としているのでしょうか?スマホではアップロードした動画が再生できませんが、パソコンでは問題なく動作しています。

YouTube の埋め込み動画は正常に再生されます。

エラーや警告も表示されないため、何が起きているのか分かりません。

ご教示をお願いします。

はい、どのデバイスでも完璧に動作しています。テーマが原因でこの問題が発生しているとは考えにくいです。
セーフモードで再生を試みましたか?
動画のトピックを投稿していただければ、確認いたします。

こんにちは @Don
はい、以下のリンクでお試しください:
Making sure you're not a bot!

実際にテストしましたが、私の iOS 11 環境では動作しないことを確認しました。

「いいね!」 1

iOS 11はかなり古いため、そのことが問題の原因となっています。iOS 14では動画を問題なく再生でき、非常にうまく動作します。

「いいね!」 4

@Don 承知いたしました。

ありがとうございます

「いいね!」 1

素晴らしいですね!

それにしても…サイドバーの導入部分にリンクを追加することは可能でしょうか?

テーマを追加するリンクはどこですか?

「いいね!」 4

Discourse のテーマやプラグイン開発を学んでいます。Fakebook テーマが非常に気に入っており、理解を深めるために利用していますが、いくつか質問があります。

「javascripts/discourse/templates/mobile/list/topic-list-item.hbr」には、「common/header.html」のコードが 100% 重複しています。

質問です:

  1. hbr ファイルを HTML ファイルにインクルードする仕組みはないでしょうか?もしあれば、コードを二箇所に重複させる代わりに、topic-list-item.hbr を common/header.html にインクルードするだけで済むはずです。
  2. そもそもなぜ topic-list-item.hbr が必要なのでしょうか?common フォルダ内のファイルは、デスクトップとモバイルの両方に適用されるべきではないでしょうか?
「いいね!」 1

ないと思います…通常なら、1 つのテンプレートを使用するコンポーネントを作成し、そのコンポーネントを両方のオーバーライドで含めることができます。しかし、トピックリストアイテムはパフォーマンスのために特別に構築されたテンプレート(hbr = Handlebars raw template)であり、raw テンプレートはコンポーネントを使用できません(以前の議論:Mounting widget in raw template? - #7 by angus

Discourse の CSS の構造(およびヘッダーやフッターなどのテーマ用の一部の特別な HTML ファイル)はそうなっていますが、javascripts/discourse/templates ディレクトリ内では、それらのテンプレートは Discourse のデフォルトの直接オーバーライドです(オーバーライドがない場合は、デフォルトのテンプレートが使用されます)。

Discourse には 2 つのテンプレートがあります:/templates/list/topic-list-item.hbr/templates/mobile/list/topic-list-item.hbr。つまり、テンプレートが 2 つあるため、オーバーライドも 2 つ必要になります。

もしかしたら、JS 側でモバイルを非モバイルのテンプレートに指し示す簡単な方法があるかもしれませんが、もしあるとしても私は知りません!

「いいね!」 1

早とちりしました!上記の返信を投稿した直後に、実際にはこの問題を解決できました。時には、書き出すことで解決策が見えてくることもあります。

更新を行いましたので、現在はテンプレートが一つだけになりました。デフォルトでは topic-list-item.js に以下のようなコードがあります。

  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

つまり、テーマ内で const template をオーバーライドすれば…

  renderTopicListItem() {
    const template = findRawTemplate("list/custom-topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

これで別のテンプレートを指すようになり、同じ名前のモバイル用の対応テンプレートが存在しないため、モバイル側でもこのテンプレートが使用されるようになります。質問を通じてこの変更のきっかけを作ってくださった @hyd504 さん、ありがとうございます!

「いいね!」 4

それは本当に素敵ですね!:blush: 私のサイトも Fakebook Modern テーマに変更しました :slightly_smiling_face: ありがとうございます!:heart:

@awesomerobot @Don

このテーマが実際にどのように機能しているか確認できるサンプルフォーラムのリンクを共有してもらえますか?

こんにちは、

はい、テーマクリエイターで「Fakebook」テーマを確認できます。

私のテーマは比較的多くの修正を加えていますが、こちらで確認できます。

「いいね!」 1

@Don さん、ありがとうございます。

念のため確認ですが、プレビューは GitHub - discourse/fakebook-modern · GitHub のテーマを指していますか?