https://discuss.codecademy.com/ が本当に気に入っています!
当社のサイトは https://community.tillerhq.com/ です。
当社は「ジョブズ・トゥー・ビー・ドン(進捗としてのモデル)」を大まかに参考にしながら、製品と体験を構築しています。
Codecademy はこの点をよく捉えていると思います。会員がサイトを訪れる際、最終的に現在の状況を改善するために何を実現しようとしているのでしょうか?当社もこれを実現し、シンプル化を目指しています。
Codecademy のサイトのような形式で実験してみたいと考えていますが、ライブサイト上で実験することで会員に混乱を招くのは避けたいと考えています。レイアウトに影響する変更を「プレビュー」する方法はありますか?
また、いくつかの minor なフォーマットや見た目の変更が、現在使用している目次(TOC)プラグインに問題を引き起こしていることに気づきました。これはおそらくレイテンシが原因で、変更後に正常に追従して再読み込みするまでに約 1 分ほどかかるためではないかと考えています。そのため、当社はドキュメントにおいてこの機能に大きく依存しているため、微調整はほとんど行っていません。
さらに、当社のサイトのレイアウトや構成に関するフィードバックがあれば、それも大変歓迎します。新鮮な視点からの意見をいただくのは非常に役立ちます!
素晴らしい製品を提供してくださり、ありがとうございます @sam @codinghorror
「いいね!」 5
osioke
(Osioke Itseuwa)
2019 年 12 月 19 日午後 5:39
2
ヘザーさん、こんにちは
はい、あります!コミュニティの管理設定にあるカスタマイズセクション を使って、変更を行ったりプレビューしたりできます。その仕組みを詳しく説明している素晴らしいガイドはこちらです:
これは Discourse テーマの基礎を学ぶ速習コースです。対象読者は Discourse テーマに不慣れなすべての人です。すでに Discourse テーマやテーマコンポーネントを使用した経験がある場合は、このガイドを読む必要はないでしょう。
テーマとテーマコンポーネントとは?
テーマやテーマコンポーネントは、Discourse の外観を変更したり、新しい機能を追加したりするために設計され、パッケージ化されたファイルのセットです。
まずはテーマから始めましょう。
テーマ
一般的に、テーマは互いに互換性を持たないようになっています。なぜなら、それらは本質的に異なるスタンドアロンのデザインだからです。テーマは、Android におけるスキンやランチャーのようなものと捉えてください。複数のランチャーをインストールすることはできますが、同時に2つを使用することはできません。デフォルトの Discourse インストールには、Foundation と Horizon の2つのテーマが付属しています。
Foundation はクリーンでクラシックな Discourse の外観を提供し…
あなたが Codecademy のテーマに関心があるようなので、これも共有しておきます:
「いいね!」 13
いくつかの変更を加えた後、この件を再開します。
まず、カテゴリのレイアウトを別のものでプレビューすることは、私の知る限り不可能です。カテゴリの表示方法を「ボックスで注目のトピック」から「カテゴリで注目のトピック」に変更したかったのですが、この設定を更新するとライブサイトが即座に変更されました。他の人の参考になればと思い共有しました。
もし可能であれば、次の質問です。これらのリンクとテキストの色を編集する方法はありますか?何がリンクで何がそうではないのかが視覚的にわかりにくく、リンクが多すぎるためです。ユーザーが実際に必要とするものや、さらに詳しく探索したいものをクリックできるよう、特定のリンクの色をカスタマイズしたいと考えています。
「いいね!」 1
HAWK
(Hawk)
2020 年 5 月 18 日午前 12:26
5
はい。管理ダッシュボードの「カスタマイズ」タブに移動し、現在のテーマの CSS を編集するか、変更を加えたテーマコンポーネントを追加することで、あらゆるものの色や外観を変更できます。
適切な CSS クラスを特定するには、Chrome のインスペクターを使用してください。
「いいね!」 3
ありがとうございます!サブカテゴリから「未読」や「新規」の数を非表示にする方法はありませんか?色は調整済みですが、見た目がごちゃごちゃするので隠したいと考えています。設定で見つけられませんでした。現在は Light テーマのみを使用しています。
「いいね!」 1
osioke
(Osioke Itseuwa)
2020 年 5 月 19 日午後 4:59
7
上記で Hawk が共有したのと同じ提案です。ブラウザのインスペクタを使用して、対象とする CSS クラスを見つけ、テーマコンポーネントを使用して変更を加えてください。
「いいね!」 4
余計な話かもしれませんが、もしカスタムホームページバナーを使って discuss.codeacademy.com に似た見た目を実現する方法に興味がある方がいたら、共有しておきます。最終的には、@awesomerobot さんのこのガイドを使って、ホームページのみに表示されるバナーを実装しました。あちらほど凝ったものではありませんが、目的は達成できました!
テーマ開発者としてよく直面する状況の一つに、コミュニティのホームページでのみ表示されるコンテンツを作成する必要があるケースがあります。
テーマの「ヘッダー後」セクションに HTML を追加すると、すべてのページに表示されてしまいます。CSS で工夫してホームページ以外では非表示にすることもできますが、代わりに Discourse テーマを使用して、ホームページでのみ表示されるコンポーネントを作成しましょう。
Discourse テーマに不慣れな場合は、以下のガイドをご覧ください:
Discourse テーマでは、以下のディレクトリ構造を設定する必要があります:
javascripts/discourse/components/
javascripts/discourse/connectors/
ここから Ember コンポーネントを作成します。Ember コンポーネントの詳細については、公式ドキュメントをご覧ください: Ember.js Guides - Guides and Tutorials - Ember G…
その後、カテゴリバナー機能も利用しました。
CSS の調整は、未読数の色 scheme などにも役立ちました。
ありがとうございました!
「いいね!」 6