روابط الرأس المخصصة

[Discourse]

	Summary	Custom Header Links allows you to easily add custom text-based links to the header.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-custom-header-links
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

Desktop

Mobile

(due to very limited space I don’t recommend adding more than one link on mobiles)

---

Settings

Name	Description
custom header links	Custom links to be displayed in the header
links position	Note that when links are displayed on the left, they’re automatically hidden while scrolling within topics to make room for the title

Adding links is straightforward. Every link needs 6 items. You enter comma delimited values in this order:

link text, link title, URL, view, target, hide on scroll

Link text: the text for the link.
Link title: the text that shows when the link is hovered.
URL: The path for the link (can be relative).
View: vdm = desktop and mobile, vdo = desktop only, vmo = mobile only.
Target: blank = opens in a new tab, self = opens in the same tab.
Hide on scroll: remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages.

If you’re not sure what hide on scroll does, here’s an example:

Most Liked and Privacy are set to keep and so they remain visible. The other links are set to remove, and so are hidden when the title expands in the header. This only affects topic pages.

Links position: This setting allows you to change the default layout so links will appear on the left near the logo instead of on the right. Note that when positioned to the left, links will automatically be hidden when scrolling within topics to make room for the topic title.

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T20:31:00Z

Check document

Perform check on document:

[rolando]

don’t know if this has been suggested, tried reading back but couldn’t find it.

was thinking that maybe adding the ability to create “sub-links” thus creating the idea of a list that you could edit (text color, background hover etc.) to get results similar to what zoom has

[rolando]

the links that have the arrow to the right like developer means that it has “sub-links”

[bekircem]

Is it possible to add some basic dropdown menu to an any item?

I couldn’t create a dropdown menu with “Custom header links”. It seems Zoom did that. I reviewed their dropdown menu via console, but I couldn’t figure out how they interfere with the html of this component for adding dropdown to any item.

Is there a way to add this dropdown to item? @Johani

<div id="dropdown">
  <a title="Zoom Developer Documentation" href="https://marketplace.zoom.us/docs" target="_blank">Developer</a>
  <span class="caret"></span>
  <div class="dropdown-content">
    <a title="Zoom API Docs" href="https://marketplace.zoom.us/docs/api-reference/introduction" target="_blank">API</a>
    <a title="Zoom SDK Docs" href="https://marketplace.zoom.us/docs/sdk/native-sdks/introduction" target="_blank">SDK</a>
    <a title="Zoom Developer Blog" href="https://medium.com/zoom-developer-blog" target="_blank">Blog</a>
    <a title="Zoom Developer Changelog" href="https://marketplace.zoom.us/docs/changelog" target="_blank">Changelog</a>
    <a title="Zoom Developer Survey" href="https://docs.google.com/forms/d/e/1FAIpQLSeJPLhNuxjtkxyyV276R8S_nYz99fpMbbS8VWkC8Hwi7-2Byg/viewform" target="_blank">Survey</a>
  </div>
</div>

[shréa (Shreya)]

Has anyone run into any issues with links not opening when setting links position to “left”?

Links work on Preview but not when I apply it to a theme.
Right alined links work fine though.

[sok777 (sok)]

Hi! Thanks for creating this.
Is it possible to add an SVG before the text link? If so - how?

[jrgong]

@bekircem

Is it possible to add some basic dropdown menu to an any item?

Have you found a solution for this? I am look for the same solution.

[Zup]

how can the title convert **formatting code** into actual formatting? also how about Font Awesome icons before the text?

[satonotdead]

Could be possible to add a flag to show or hide links as specific groups of users?

[AntiMetaman]

Is there a way this theme component can allow for dropdown navigation? That means, when I hover over a header link, it has sub-items that appear underneath it. I know that this can be done via html/css as shown here:

Add a custom header with a dropdown menu

I recently made a dropdown navigation menu for Envato’s new forums, so I’ll share some code to implement something similar on your own site. We’ll be implementing a black header with one link that reveals a menu of more links, like this: [image] In Admin > Customize > CSS/HTML, create a new customization. Remember that you can have multiple customizations active at the same time, so it’s a good idea to use many of them instead of one giant one for everything. For this custom header, create a…

[tjot (Tomasz)]

Thank you for creating this component!
One question and potentially a feature request: can we show a specific link for a specific group?
For example, if a user is in group customers I’d like to show a link to the customer’s control panel, if a user is in group workers I’d like to add a link to a different panel.
I think this would be a very useful feature.
The group name could be the last (optional) parameter.

[Nick_Chomey]

شكراً لك على هذا! لقد وجدته للتو بعد تجربة لافتات ومكونات أخرى مختلفة. إنه بالضبط ما أحتاجه!

طلب/اقتراح واحد: القدرة على إعادة ترتيب الروابط. لقد أنشأت للتو مجموعة منها وأدركت أنني أرغب في إضافة رابط في الأعلى. الآن سأضطر إلى نسخها ولصقها يدويًا، وهو أمر مرهق في الواقع نظرًا لأنها تستمر في المزامنة/تحديث الإدخالات الأخرى أثناء نسخها لأسفل.

ستكون أزرار السحب والإفلات أو الأزرار لأعلى/لأسفل مفيدة جدًا للمستخدمين المستقبليين (أو التعديلات المستقبلية).

[dax (Daniela)]

@Nick_Chomey

السحب والإفلات أو أزرار للأعلى/للأسفل ستكون مفيدة جدًا للمستخدمين المستقبليين (أو التعديلات المستقبلية).

يمكنك بالفعل معالجة الترتيب بسهولة شديدة ببضعة أسطر من CSS نظرًا لأننا نستخدم خاصية flex.

على سبيل المثال:

• الترتيب الافتراضي
  

• ترتيب مخصص
  

مثال CSS:

.custom-header-links li {
  &:nth-child(1) {
    order: 3;
    background: red;
  }

  &:nth-child(2) {
    order: 1;
    background: green;
  }

  &:nth-child(3) {
    order: 2;
    background: yellow;
  }
}

[keegan (Keegan George)]

@Nick_Chomey

ستكون أزرار رفع/خفض مفيدة جدًا للمستخدمين المستقبليين (أو التعديلات المستقبلية).

@Nick_Chomey غالبًا ما وجدت نفسي بحاجة إلى القيام بذلك، ليس فقط لمكون السمة هذا ولكن للعديد من مكونات السمات الأخرى التي تستخدم إعداد type: list. كنت أخطط لتقديم طلب ميزة من قبل، لكنني نسيت تمامًا، ولكن بما أنك ذكرتني، فقد أضفت واحدًا هنا:

[Feature Request] Ability to adjust order of list type settings

Background Adding a list type settings to a Discourse theme/plugin is nice and convenient with: custom_setting: type: list list_type: simple description: en: "my description." However, I’ve often found that whenever I create these types of settings, at one point or another I end up needing to adjust the order of the items. I usually either use flexbox’s order property to resolve this or manually edit the settings. I was reminded about this with @Nick_Chomey comment on the Custom He…

[Nick_Chomey]

@dax شكرًا! لم أكن أعرف أن هذا ممكن!

@keegan يبدو رائعًا، نأمل أن تتم إضافته في مرحلة ما!

[hrayner (Harley Rayner)]

أبحث عن نفس الحل، هل اكتشفت كيف فعلوا ذلك بعد؟
شكرا!

[andreas_can (Andreas)]

مرحباً @Johani
شكراً لك على إنشاء مثل هذا المكون الرائع!

هل من الممكن أن يكون الرابط مرئياً فقط إذا كان المستخدم مسجلاً دخوله؟
سيكون رابطاً خارجياً.

[Johani (Joe)]

أهلاً بك @andreas_can في ميتا

تضيف هذه المكونة فئة CSS إلى كل رابط بناءً على نصه. الفئة المضافة هي نفسها النص الذي تعطيه للرابط باستثناء أن المسافات تُستبدل بشرطة (-) ويتم تحويل النص إلى أحرف صغيرة. ثم تُلحق السلسلة -custom-header-links في النهاية.

لذلك، إذا أضفت رابطًا بالنص

privacy

فإن عنصر الرابط سيحتوي على الفئة

privacy-custom-header-links

إذا كان نص رابطك هو

Visit Shop

فستكون فئة CSS هي

visit-shop-custom-header-links

لذلك، أنت تعرف الآن الفئة المضافة إلى كل رابط. بالعودة إلى سؤالك.

@andreas_can

هل من الممكن أن يكون الرابط مرئيًا فقط إذا كان المستخدم مسجلاً دخوله؟

يضيف Discourse فئة CSS إلى الوسم <HTML> عندما لا يكون المستخدم مسجلاً دخوله. هذه الفئة هي

anon

لذلك، يمكنك استخدام ذلك لإخفاء روابط معينة للمستخدمين الذين لم يسجلوا دخولهم. لنفترض أن لدي رابطًا بالنص

Customer Support

ولا أريده أن يظهر للمستخدمين الذين لم يسجلوا دخولهم.

سأضيف بعد ذلك هذا CSS

.anon {
  .customer-support-custom-header-links {
    display: none;
  }
}

في علامة التبويب common > CSS في السمة الرئيسية الخاصة بي.

سيؤدي هذا إلى إخفاء هذا الرابط المحدد للمستخدمين الذين لم يسجلوا دخولهم.

[andreas_can (Andreas)]

شكرا لك على رد سريع وشامل!
هذا بالضبط ما كنت أبحث عنه.

سأجرب ذلك

[Alon1 (Alon)]

@andreas_can

هذا بالضبط ما كنت أبحث عنه.

لاحظ أن خاصية CSS display: none; تخفي الرابط فقط من عرض المتصفح ولكنه دائمًا مرئي بالكامل لأي شخص ينظر إلى مصدر الصفحة، ولزواحف الويب ومحركات البحث.