Understanding user interface elements in Discourse

:bookmark: This resource covers the names for each element of the Discourse user interface.

:person_raising_hand: Required user level: All users

Here’s what Discourse’s interface looks like most of the time. Themes, theme components, and plugins may affect this layout.

Let’s break down the main parts, and then the main parts into smaller parts.

  1. Header
  2. Sidebar
  3. Main content

Header

Header

  1. Sidebar button/toggle (or Hamburger)
  2. Logo
  3. Top right icons:
    a. Search
    b. Chat toggle
    c. Notifications Menu / Avatar menu

Sidebar

  1. Sections
  2. New Section Button
  3. Keyboard Shortcuts

Main Content

  1. Navigation / Nav bar
    a. Category Selector
    b. Tag selector
    c. Navigation buttons
  2. Topics list headers
  3. Topics list

Topic

  1. Title
  2. Category
  3. Tags
  4. Avatar
  5. Username and Name
  6. Edit History Button
  7. Post Date
  8. Post Actions
  9. Reply to Post button
  10. Topic Map
  11. Topic Actions Buttons
  12. Reply to Topic Button
  13. Admin Wrench
  14. Timeline
  15. Reply to Topic Button
  16. Notification State Button

User Card

  1. Location
  2. Badge list
  3. Avatar
  4. Username
  5. Name
  6. Bio
  7. Last Activity Stats
  8. Website
  9. Cakeday (Registration Anniversary)
  10. New Personal Message Button
  11. New Personal Chat Button

Notifications menu

  1. Notifications
  2. All notifications
  3. Replies and Mentions
  4. Likes
  5. Personal Messages
  6. Bookmarks
  7. Chat Notifications
  8. Reviewable Items
  9. Other Notifications
  10. User Menu
  11. See All Notifications Button
  12. Dismiss Notifications Button

Composer

  1. Post Type Selector
  2. Topic Title
  3. Topic Category Selector
  4. Topic Tags Selector
  5. Formatting Toolbar
  6. Text Area
  7. Post Creation/Edition Button
  8. Discard Button
  9. Resizing Grip
  10. Fullscreen Toggle
  11. Minimize Toggle
  12. Preview Panel
  13. Preview Panel Toggle

Last edited by @hugh 2024-06-28T00:04:48Z

Last checked by @hugh 2024-06-28T00:04:11Z

Check documentPerform check on document:
70 лайков

Кто-то создал или сейчас создает похожее руководство для Discourse 3.x с навигацией в боковой панели?

2 лайка

Это просто находка :raised_hands:

3 лайка

Думаю, нам стоит немного освежить это. Подождите немного, и мы посмотрим, сможем ли мы что-то для вас подготовить. :slight_smile:

5 лайков

Гид был очень устаревшим, поэтому я обновил его новыми скриншотами :slight_smile:
Его можно улучшить, поэтому предложения приветствуются!

6 лайков

Это действительно здорово :hugs: Спасибо @Canapin :heart:

Маленькое предложение: можно ли добавить туда композитор и чат? :slightly_smiling_face:

3 лайка

Пункты 11 и 12 в меню уведомлений отсутствуют.

Кроме того, я заметил, что в заголовке оно называется «меню аватара», но отдельный заголовок гласит «меню уведомлений».

3 лайка

Меня очень беспокоит, что подобные руководства, какими бы благими ни были намерения, быстро устаревают из-за тщательно подготовленных скриншотов и аннотаций. Насколько мне известно, то же самое пытались делать для Facebook, YouTube и других платформ, но уже через несколько месяцев пользователи не могут найти упомянутые элементы. У меня, к сожалению, нет лучшего решения.

2 лайка

Поскольку это вики, каждый может внести свой вклад, когда требуется обновление. И даже если некоторые элементы изменятся, всё равно полезно знать, как называются остальные элементы.
В конечном счёте любая документация может устареть. Если вы не пишете документацию по этой причине, у вас её вообще нет.

4 лайка