クイックプロフィールリンクメニュー

:information_source: 概要 クイックプロファイルリンクメニュー
:eyeglasses: プレビュー https://discourse.theme-creator.io/theme/Don/quick-profile-links-menu
: hammer_and_wrench: リポジトリ GitHub - VaperinaDEV/quick-profile-links-menu
: question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
: open_book: Discourseテーマ初心者の方へ Discourseテーマ使用の初心者ガイド

このテーマコンポーネントをインストール

こんにちは :wave:

ユーザー設定画面は、特に新規ユーザーにとって、時々少し分かりにくいことがあります。このテーマコンポーネントを使用すると、ユーザーページにいくつかの重要な設定リンクを追加したり、カスタムユーザーメニュープロファイルタブを追加したりできます…

ユーザーページメニューリンク

このメニューボタンは、ユーザープロフィールのコントロールボタンセクションに配置されます。



メニュー項目をクリックすると、目的のフィールドにリダイレクトされます。これを実現するために、各フィールドに id 属性を追加しました。これは [data-setting-name] 属性と同じ値です。したがって、これをアンカーとして使用できます。例: /u/username/preferences/profile#user-bio

これを右クリックして設定タイトルを選択し、id を確認することで検査できます。この場合、setting の値は user-username である必要があります。この設定はオプションフィールドなので、空のままにするとページにリダイレクトされ、設定にはリダイレクトされません。


ユーザーページメニューリンク設定

profile links 設定で、これらのクイックリンクを追加できます。

  1. アイコン (fontawesome アイコン) 必須
  2. ラベル (リンクのラベル) 必須
  3. ページ (リダイレクトしたいページ)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. 設定 (リダイレクトしたい設定フィールド) オプション
ここにいくつかの設定フィールドがあります。
  • account

    • user-username
    • user-avatar
    • user-email
    • user-associated-accounts
    • user-name
    • user-title
    • user-flair
    • user-data-export
  • profile

    • user-bio
    • user-timezone
    • user-location
    • user-website
    • user-profile-bg
    • user-card-bg
    • user-featured-topic
  • interface

    • user-theme
    • user-color-scheme
    • user-text-size
    • user-locale
    • user-home
    • user-other-settings

ユーザーメニューカスタムプロファイルタブ

enabled user menu tab 設定で、このカスタムプロファイルタブを有効にできます。このタブは、デフォルトのプロファイルタブの再作成です。

何をするのか?

  • ユーザーメニューのデフォルトのプロファイルタブを非表示にする
  • カスタムプロファイルタブをユーザーメニューの上部に追加する
    • タブアイコンは user menu tab icon 設定で変更可能
  • 設定ボタンの下にカスタム項目を追加する
    • これらの項目は profile menu preference items 設定で変更可能
  • ログアウトボタンの前にカスタム追加項目を追加する
    • これらの項目は profile menu extra items 設定で変更可能

カスタムプロファイルタブ設定

設定項目(設定ボタンの下にあるもの)については、profile_menu_preference_items を使用して、追加/削除…

  1. アイコン (fontawesome アイコン) オプション
  2. ラベル (リンクのラベル) 必須
  3. ページ (リダイレクトしたいページ)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. 設定 (リダイレクトしたい設定フィールド) オプション
ここにいくつかの設定フィールドがあります。
  • account

    • user-username
    • user-avatar
    • user-email
    • user-associated-accounts
    • user-name
    • user-title
    • user-flair
    • user-data-export
  • profile

    • user-bio
    • user-timezone
    • user-location
    • user-website
    • user-profile-bg
    • user-card-bg
    • user-featured-topic
  • interface

    • user-theme
    • user-color-scheme
    • user-text-size
    • user-locale
    • user-home
    • user-other-settings

追加項目は profile menu extra items 設定でログアウトボタンの上に配置できます。

  1. アイコン (fontawesome アイコン) オプション
  2. ラベル (リンクのラベル) 必須
  3. URL (リダイレクトしたいURL) 必須
「いいね!」 17

ハレルヤ!ついに誰かがこれに取り組んでくれた。私の意見では、これはDiscourseの新規ユーザーにとって最大の課題の1つだ。

1つ気づいたのは、右上にあるアバターからそこへ行くには、まだ数回のクリックが必要なことだ。ここは新規ユーザーが直感的にアクセスする場所だ。

「いいね!」 5

@nathank さん、こんにちは :wave: より迅速なパスを見つけるのは素晴らしいアイデアだと思います。ユーザーメニュータブに追加しました。

「いいね!」 4

素晴らしい!よくできました!

しかし、アバターメニューのコア/標準の焦点を「通知(プロフィールは後付け)」から「プロフィール+通知」(私が思うべき姿)に変更するという点で、さらに進めることができると思います。すでにプロフィールタブはありますが、あまり目立っていません。

これを実現する方法の1つです。

  1. アバターメニューの既存のプロフィールタブを利用する
  2. そのタブを一番上(つまり、クイックプロフィールのリンク編集アイコンがある場所)に配置する
  3. 管理者がプロフィールタブのメニューをカスタマイズできるようにする

簡単な方法としては、既存のプロフィールタブを非表示にして、TC(テーマコンポーザー)を使用して再作成することだと思います。ログアウトボタンは少し難しいかもしれませんが、コードが必要になる可能性があります(既存のTCがあります)。オンラインと一時停止通知の部分も少し凝っています。

しかし、タブを移動させて、そこから追加/削除する方が簡単かもしれません。どう思いますか?

「いいね!」 4

素晴らしい、ドン。素晴らしい追加です。ありがとう! :slight_smile: :clap:

「いいね!」 2

これのようなコンセプトがあります。
設定を分離するのは良い考えだと思います。

  1. プロフィールを一番上に移動
  2. 「設定」を非表示
  3. 上部の境界線を削除

  1. カスタムタブのアイコンをデフォルトで歯車に変更
  2. 通知と区別するために下部に境界線を追加
  3. 下部に「すべての設定を表示」ボタンを追加(/my/preferences/accountにリダイレクト)

どう思いますか?

「いいね!」 4

しかし、ユーザー設定はあまり使用されず、まれにしか使用されません。デフォルトで何が選択されていても、それが最初に配置されるべきかどうかはわかりません。

「いいね!」 2

あなたが開発するコンポーネントは、毎回見るたびに感嘆させられますね(笑)

「いいね!」 5

setting の適切な値を見つけるにはどうすればよいですか?

それはそれを整理するのに非常に良い方法です!クリーンでシンプルに保ちます。

しかし、私はそれをすべて1つのプロフィールタブにまとめることを(かなり強く)好むでしょう。サマリーとアクティビティはどちらもプロフィールリンクなので、これはユーザーに関連するリンクを少し不必要に2つのタブに分割することになります。

プロフィールタブにフックすることは可能ですか?

「いいね!」 3

OP で見つけることができます。また、設定タイトルを右クリックして id を確認することで検査することもできます。この場合、setting の値は user-username になるはずですが、設定を追加せずにページにリダイレクトできるように、オプションフィールドにするつもりです。


ここで少しアップデートがあります。

あなたに同意します。

  1. プロフィール タブを再作成し、クイックリンクを追加しました。
  2. デフォルトのプロフィール タブを非表示にします。
  3. カスタム タブのアイコンをユーザーに変更します。

現在の様子はこちらです。


テーマクリエーターでこれのプレビューを有効にしました: https://discourse.theme-creator.io/theme/Don/quick-profile-links-test

「いいね!」 4

そのページプランは気に入りました。なぜなら、それを使うからです。さて、プロフィール写真は別の話です。

右クリックのあれが怖かったです😂 私はほとんどすべて言葉で仕事をしているので、昨年5月以来ラップトップを使っていません。しかし、それはできません。それは私の選択です。ただし、iPadにはコンソールがあります。何を探せばいいのか分からなかっただけです。今、分かります。ありがとう!

「いいね!」 2

実際の見た目はこうなので、かなりタイトになりませんか?

「いいね!」 1

ボタンのパディングを変更し、設定のサブアイテムのフォントサイズを小さくしました。これにより、アイテムの高さが以前よりも低くなり、タブコンテンツをスクロール可能にしました。これをアップデートとマージします…

「いいね!」 2

更新 :tada:
OPも更新しました。

このアップデートでは、デフォルトのプロフィールタブを非表示にし、ユーザーメニューにカスタムプロフィールタブを追加します。このタブでは、設定の下にカスタムアイテムを追加したり、ログアウトボタンの前にカスタムアイテムを追加したりできます。

ユーザーメニューのカスタムプロフィールタブ

enabled_user_menu_tab設定で制御されます。

  • ユーザーメニューのデフォルトプロフィールタブを非表示にする
  • ユーザーメニューのカスタムプロフィールタブを一番上に追加する
    • タブアイコンは user_menu_tab_icon 設定で変更可能
  • 設定ボタンの下にカスタムアイテムを追加する
    • これらのアイテムは profile_menu_preference_items 設定で変更可能
  • ログアウトボタンの前にカスタム追加アイテムを追加する
    • これらのアイテムは profile_menu_extra_items 設定で変更可能

設定

  • profile_menu_preference_items および profile_menu_extra_items のアイコンフィールドはオプションになりました。
  • profile_links および profile_menu_preference_items の設定フィールドはオプションになりました。これは、設定ではなくページにリダイレクトするリンクを追加できることを意味します。


「いいね!」 3

これはモバイルおよびすべてのタッチスクリーンで大きなUXの問題になります🤷‍♂️

これを言うのは嫌ですが、デスクトップ専用の方向に向かっています.

その懸念については間違っていました。確かに、現在は完全に表示されていますが、問題なく動作します。

「いいね!」 3

しかし、enabled user menu tab を無効にするとどうなるのでしょうか?以前の鉛筆タブが表示されると思いましたが、そうではありませんでした。

「いいね!」 2

ユーザーメニューのカスタムプロファイル機能全体です。無効にすると、ユーザーメニューでは何も行われなくなります。

「いいね!」 2

はい、有効にした場合です。しかし、無効にした場合は、コンポーネント全体を無効にするのとほぼ同じことになりますね :thinking:

いいえ、無効にした場合、ユーザーページのクイックリンクメニューのみが表示されます。

「いいね!」 2