Pinboard、シンプルなUIテーマ

:dizzy: 概要 Pinboard は、シンプルなユーザーインターフェースを持つテーマです。フラットな分類(カテゴリやタグのプレーンなリストなど)によく合います。
:hammer_and_wrench: リポジトリ GitHub - nolosb/discourse-theme-pinboard
:open_book: Discourseテーマ初心者ですか? Discourseテーマ使用の初心者ガイド

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

:woman_factory_worker:t5: インストール後のセットアップ

このテーマは、いくつかの追加コンポーネントをインストールします。テーマの外観を微調整するために設定を変更する必要があるものもあります。

  • ダーク/ライト切り替え

    • 切り替えを機能させるには、テーマ設定でライトカラースキームを設定する必要があります。また、一般設定(default dark mode color scheme id)でダークカラースキームを選択してください。
      -切り替えアイコンをヘッダーに表示するかどうかを選択できます。デフォルトではサイドバーのフッターに表示されます。
  • Rounded
    -レイアウト要素を丸くするためのスタイルコンポーネント。私のプレビューサイトでは、デフォルトの半径は10px、ボタンの半径は4pxに設定されています。

  • Panels
    -リストコンテナをパネルとしてレンダリングするための別のスタイルコンポーネント。このテーマにはパネルのシャドウスタイルが定義されています。この --shadow 変数を使用して有効にできます。

image

:art: テーマの機能

カテゴリまたはタグのみで使用

インターフェースからタグまたはカテゴリを非表示にして、どちらか一方のみを使用できます。

カスタムホームページ

プレビューのようなカスタムホームページレイアウトを作成できます。

  • テーマ設定で custom homepage オプションを選択します。

  • 管理設定でホームページを選択します。例:ここではトップルートに設定されています。

  • 専用のホームページクラスを追加するには、このヘルパーコンポーネントをインストールします。コンポーネント設定でホームページを設定します。

    image

  • インストールされている Panels コンポーネントで、注目のリストにパネルをレンダリングすることを選択します。
    image

  • Featured Lists コンポーネントをインストールし、そのアウトレット位置を discovery-list-container-top に設定します。

「いいね!」 35

これはとても素敵なテーマですね。シンプルさが気に入りました!

「いいね!」 12

素晴らしい仕事だよ、兄弟.. :heart_eyes:

「いいね!」 6

うわー!これは素晴らしい美学を持っています

「いいね!」 6

テーマは素晴らしいですね!良い意味でミニマルです。サイドバーの作り込みが気に入りました。

素晴らしい仕事です @manuel :+1:

「いいね!」 7

@manuel
設定で何が足りないのか教えていただけますか。ホームページには、トピックが下にあるアウターラッパーが表示されます。ピンボードごとではなく。

ありがとうございます。

「いいね!」 2

ユーザーインターフェースのおかげで多くの時間を節約できる、優れたシンプルさを備えた生産的なテーマのようです。

「いいね!」 3

上記に説明されているオプションを確認しましたか?

「いいね!」 3

はい。そのオプションを選択しました。

「いいね!」 3

ホームページとしてトップトピックも設定する必要があります。ホームページはカテゴリリストに設定されています。これは、このテーマ設定がピンボードリストのみを表示し、下のコンテンツを非表示にするためです。これはトップルートでのみ機能します。必要に応じて、トップトピックのピンボードリストでトップトピックを置き換えることができます。フォーラムを機能させるためには、通常、カテゴリリストまたは最新トピックが必要です。

管理設定のトップメニューリストの最初の項目にすることで、トップページをホームページに設定します。

「いいね!」 3

@manuel ありがとうございます。
これはまさに欠けていたものです。これで大丈夫です。

「いいね!」 3

このテーマは、トップメニュー(最新、トップなど)を非表示にするものですか?それを元に戻す方法はありますか?

「いいね!」 1

はい、これらの項目は非表示になっています。サイドバーから「最新」「新規」「未読」がすでに利用可能であり、「トップ」はランディングページに使用されているため、このテーマについては私の意見があります。

このテーマを使用し、かつそれらの項目をナビゲーションバーに表示したい場合は、テーマのスタイル宣言を手動でオーバーライドする必要があります。

「いいね!」 1

サイドバーに「最新」「新規」「未読」が表示されません。テーマのインスタンスでも、テストサイトでも、この投稿のスクリーンショットでも表示されません。どこを見ればよいか教えていただけますか?

「いいね!」 2

サイドバーの「Latest」はデフォルトで「Everything」と呼ばれます。私のスクリーンショットでは「All」という名前になっています。

しかし、未読と新規が現在サイドバーに表示されないのは事実です。ハンバーガーメニューのドロップダウンにあったように、以前はそこに表示されていたと思っていました。私の記憶違いか、変更されたのかもしれません。サイドバーには常に更新が続いています。

サイドバーの新しいコンテンツに関するコンテキスト情報は、ログインユーザーにとって新しいコンテンツを保持しているすべてのメニュー項目に続く通知ドットです。

「いいね!」 2

このテーマの大ファンです。

なぜかヘッダーにダーク/ライトトグルテーマコンポーネントが表示されません。

「いいね!」 2

ありがとうございます :sunny:

デフォルトのテーマでも表示されないので、おそらくコンポーネントに関連していると思われます。

こちらをご覧ください: Dark/Light Mode Toggle - #88 by RGJ 現在、トグルはユーザーが自動カラーモード切り替えを有効にしている場合にのみ表示されます。

「いいね!」 1

@manuel 本当に、本当によくできました。フォントサイズは意図的にこの大きさ(私にとっては大きい)なのですか?

これは15インチのラップトップからのスクリーンショットです。バランスが悪いように見えますか?

カテゴリをボックス形式のリストではなく、タブ形式で表示することを検討しましたか?例えば、「feedback」を「Welcome to Pinboard」の隣のタブにするなどです。

:warning: このテーマのリファクタリングをプッシュしました。UIにはわずかな変更しかありませんが、テーマコードが再編成され、いくつかの新しいコンポーネントが含まれています。

以前にテーマをインストールした場合、コンポーネントと、その上に適用したスタイル宣言を再調整する必要があります。現時点でこれを希望しない場合は、v1ブランチからテーマをプルして、以前の設定を維持することもできます。

参考までに、v1のインストール後の詳細を以下に示します:

テーマの機能

  • カテゴリまたはタグのみで使用
    インターフェースからタグまたはカテゴリを非表示にして、いずれか一方のみを使用できます。

  • カスタムランディングページ
    プレビューと同様のカスタムランディングページを作成できます。

    • Versatile Showcase コンポーネントをインストールし、そのアウトレット位置を discovery-list-container-top に設定します。
    • ホームページを top ルートに設定します。
    • テーマで custom top page オプションを選択します。

コンポーネントの機能

テーマは、いくつかの追加コンポーネントを自動的にインストールします。

  • ダーク/ライト切り替え
    テーマ設定でライトカラー スキームを設定します。一般設定でダークカラー スキームを選択します。

  • ヘッダー検索

  • クリック可能なトピック

  • タグ スタイル
    タグのカラースタイルを選択します。

「いいね!」 4

素晴らしいテーマ、とてもきれいです!

このテーマはデスクトップとモバイルのどちらに適していますか?

「いいね!」 1