Avid Reader テーマ

:warning: 2023 年 6 月 7 日以前にテーマをインストールされた場合は、GitHub の新しいリポジトリリンクを使用して再インストールする必要があります。

:discourse2: 概要 Avid Reader は、Pocket のデザインに触発された、読みやすさに焦点を当てたテーマです。
:hammer_and_wrench: リポジトリリンク https://github.com/discourse/avid-reader
:open_book: Discourse テーマが初めての方へ Discourse テーマの使い方に関する初心者ガイド

このテーマをインストール

機能

より良い読書体験のために、フォントサイズを大きくし、見出し間のサイズコントラストを強化し、行間を広げ、背景色をニュートラルにしました。また、いくつかのカスタムアイコンも実装されています。

スクリーンショット

テーマコンポーネント

このテーマには、以下のテーマコンポーネントが含まれています:

Versatile Banner については、ホームページでのみ簡単な歓迎メッセージと説明を表示するために、いくつかの機能のみを使用しています。以下のスクリーンショットを確認して、設定を再現してください:

Versatile Banner の完全な設定を表示

以下は、歓迎メッセージと説明に使用したコードです:

<h2 class="x-title">
  あなたの歓迎メッセージ
</h2>
<div class="description">
  <p>
    Discourse の概要についての簡単な説明
  </p>
</div>

推奨設定

ライブプレビューと同じように Discourse を表示させたい場合は、上記の Versatile Banner の設定を実装するほか、いくつかの管理設定で以下の選択を行いました。

カテゴリスタイル

デフォルトの箇条書きではなく、バー形式のカテゴリスタイルを推奨しています。これは以下の変更が可能です:

管理 > 設定 > 基本設定 > カテゴリスタイル > バー

デスクトップカテゴリページスタイル

カテゴリページには「ボックス」オプションを選択しました。これは以下の変更が可能です:

管理 > 設定 > 基本設定 > デスクトップカテゴリページスタイル > サブカテゴリ付きボックス

カテゴリカラー

テーマ全体と調和するカテゴリカラーのパレットを作成しました。

HEX カラー値を表示
#8ECEA0
#20A9AB
#946F96
#CF9D2B
#366B80
#F69A9B
#9FD8DF
#00917C
#F27072
#C1CEBF
#6B7AA1
#F4D6A2
#F0C928
#C6B4CE
#65516B
#C56183

これらの HEX 値は以下で追加できます:

管理 > 設定 > 基本設定 > カテゴリカラー

ユーザーカード背景の非表示設定

このテーマには、少し議論を呼ぶ可能性がある設定が一つあります。「ユーザーカード背景を非表示」という設定で、ユーザーカードの背景を白にするものです。デフォルトで Discourse が使用する強いオーバーレイにもかかわらず、ユーザーカードの背景が時に少し雑然として見えると感じたためです。

ただし、これによりユーザーの自己表現の側面が制限されることになります。そのため、この設定は管理者が判断できるように残すことにしました。


これは私たちの最初のテーマであり、コーディング面での最初の実際の取り組みです。皆様にお楽しみいただければ幸いです。コミュニティからのフィードバックを聞くことを大いに歓迎します。この活動を支援してくれた Discourse に感謝します!


:discourse2: 当方でホストされていますか? テーマは、スタンダード、ビジネス、エンタープライズプランで利用可能です。

「いいね!」 26

素敵なテーマで、目に優しいですね。

「いいね!」 2

トピックを開いても、色が灰色などに変化しません。すべてが同じ黒だと、未読トピックをすぐに見つけるのが難しいです。CSSの問題でしょうか?

「いいね!」 2

@Jagster ご指摘ありがとうございます。ログアウトした状態で Safari と Chrome でテストしたところ、問題なく動作していました。


しかし、テストのためにブラウザの履歴をクリアしたところ、動作しなくなりました。閲覧後にトピックの色が変更されません。本日遅くか明日早朝に調査いたします。ありがとうございます!

「いいね!」 1

CSS を更新しましたので、これで動くはずです。最初期に書いた古い CSS ルールで、すっかり忘れていたんですよ、はは。

「いいね!」 2

おっと、気に入りました!

https://bunqueer.jaquerespeis.org/ のデフォルトテーマとして採用してみます。

現在のロゴは少し見栄えが良くないので、後で変更します。

@zavorio さん、@senioritapolyester さん、ありがとう <3

「いいね!」 1

ダークモードはありますか?

「いいね!」 1

@CamilleRoux 後で一つ作る可能性はありますが、まずは現在のカラーテーマを少し暗くしたバリエーションを実装したいと考えています。ただし、これは「ダークモード」と呼ばれるものとは異なります。Standard Notes の Titanium テーマに近いものです:

一般的なライト/ダーク UI は、私にとってコントラストが強すぎて目が疲れてしまいます。@P2W が上記で述べたように、私たちの目標は目に優しいものを作ることでした。従来のダークモードはやりすぎかもしれません。でも、私たちの考えが変わるかもしれませんね🤠

「いいね!」 2

このカラーテーマについては、進展はありましたか?本当に完璧です!

「いいね!」 1

こんにちは!実はまだですが、今年中には公開予定です。ちょっと忙しくってね😅

「いいね!」 2

このテーマは気に入っていますが、私のインスタンスで新しいサイドバー機能が追加されたところ、通知メニューが壊れてしまいました。他にこの問題が発生した人はいますか、それとも私だけでしょうか?

このCSSのためです。

.widget-component-connector {
    display: none;
}

このテーマでこのルールが元々何のためにあったのか分かりません。

「いいね!」 2

チャットアイコンも表示されません。以前はこのテーマを使用していましたが、他にも問題があったため削除しました。申し訳ありませんが、他にどのような問題があったかはもう覚えていません。しかし、このテーマが壊れていることはわかります。

Discourseのコードから見たところ、原因は上記の私のメッセージと同じだと考えられます。

「いいね!」 2

@zavorio、GitHubにあなた宛てのプルリクエストがいくつかあります。テーマを修正するために承認してください。

今後もこのテーマの更新を続けるおつもりですか、それとも別のテーマに移りたいですか?

「いいね!」 1

テーマはGitHub上の組織に移動され、修正されました。

2023年6月7日より前にテーマをインストールした場合は、GitHubの新しいリポジトリリンクを使用して再インストールする必要があります。

(OP更新)

「いいね!」 3