 |
الملخص | تتيح لك روابط الرأس المخصصة (Custom Header Links) إضافة روابط نصية مخصصة إلى رأس الصفحة بسهولة. |
 |
المعاينة | المعاينة على منشئ سمات ديسكورس |
 |
رابط المستودع | GitHub - discourse/discourse-custom-header-links · GitHub |
 |
جديد في سمات ديسكورس؟ | الدليل التمهيدي لاستخدام سمات ديسكورس |
تثبيت مكون السمة هذا
الميزات
سطح المكتب
الجوال
(بسبب المساحة المحدودة للغاية، لا يوصى بإضافة أكثر من رابط واحد على الهاتف المحمول)
الإعدادات
| الإعداد | الوصف |
|---|---|
custom_header_links |
القائمة المنظمة للروابط المراد عرضها في رأس الصفحة. يتم تكوين كل رابط من خلال نموذج يحتوي على حقول فردية (انظر أدناه). |
links_position |
يتحكم فيما إذا كانت الروابط تظهر على الجانب الأيمن (الافتراضي) أو الأيسر من رأس الصفحة بالقرب من الشعار. عند تعيينه على left، يتم إخفاء جميع الروابط تلقائيًا في صفحات الموضوعات لإفساح المجال لعنوان الموضوع - بغض النظر عن إعدادات hide_on_scroll الفردية للرابط. |
إضافة الروابط
يتم تكوين الروابط من خلال نموذج منظم في إعدادات مكون السمة. انقر على إضافة لإضافة رابط جديد. يحتوي كل رابط على الحقول التالية:
| الحقل | مطلوب | الوصف |
|---|---|---|
| النص (Text) |  نعم |
التسمية المرئية للرابط. 100 حرف كحد أقصى. يحدد أيضًا فئة CSS المطبقة على الرابط (انظر تخصيص CSS أدناه). |
| العنوان (Title) |  لا |
نص التلميح الذي يظهر عند تمرير الماوس فوق الرابط. 1000 حرف كحد أقصى. |
| الرابط (URL) | نعم |
عنوان URL الذي يشير إليه الرابط. يمكن أن يكون مسارًا نسبيًا (على سبيل المثال، /faq) أو عنوان URL كاملاً. 2048 حرفًا كحد أقصى. |
| العرض (View) | لا |
يتحكم في الجهاز الذي يظهر عليه الرابط. إذا تُرك فارغًا، يظهر الرابط على جميع الأجهزة (نفس vdm). انظر القيم أدناه. |
| الهدف (Target) | لا |
يتحكم في كيفية فتح الرابط. إذا تُرك فارغًا، فإنه يفتح بشكل افتراضي في علامة تبويب جديدة (نفس blank). انظر القيم أدناه. |
| الإخفاء عند التمرير (Hide on scroll) | لا |
يتحكم فيما إذا كان الرابط يختفي عندما يصبح عنوان الموضوع مرئيًا في رأس الصفحة في صفحات الموضوعات. الإعداد الافتراضي هو keep. ينطبق فقط عندما يتم تعيين links_position على right - انظر الملاحظة أدناه. انظر القيم أدناه. |
| المنطقة اللغوية (Locale) | لا |
إذا تم تعيينه، يتم عرض الرابط فقط عندما تتطابق لغة موقع الويب مع هذه القيمة. اتركها فارغة لعرض الرابط على جميع المناطق اللغوية. انظر التفاصيل أدناه. |
\u003cbr\u003e
قيم العرض:
| القيمة | السلوك |
|---|---|
vdm |
مرئي على سطح المكتب والجوال معًا |
vdo |
مرئي على سطح المكتب فقط |
vmo |
مرئي على الجوال فقط |
| (فارغ) | نفس vdm - مرئي على جميع الأجهزة |
قيم الهدف:
| القيمة | السلوك |
|---|---|
blank |
يفتح في علامة تبويب جديدة |
self |
يفتح في علامة التبويب نفسها |
| (فارغ) | الافتراضي هو الفتح في علامة تبويب جديدة (نفس blank) |
قيم الإخفاء عند التمرير:
| القيمة | السلوك |
|---|---|
keep |
يظل الرابط مرئيًا حتى عند ظهور عنوان الموضوع في رأس الصفحة (افتراضي) |
remove |
يختفي الرابط عندما يصبح عنوان الموضوع مرئيًا في صفحات الموضوعات |
\u003e 
ينطبق hide_on_scroll فقط عندما يكون links_position هو right. عندما يكون links_position هو left، يتم إخفاء جميع الروابط معًا في صفحات الموضوعات بغض النظر عن إعداد hide_on_scroll الفردي الخاص بها.
إليك مثال على عمل hide_on_scroll (عندما يتم تعيين links_position على right):
تم تعيين الأكثر إعجابًا (Most Liked) و الخصوصية (Privacy) على keep، لذلك يظلان مرئيين عندما يتوسع العنوان. تم تعيين الروابط الأخرى على remove، لذا تختفي عندما يصبح العنوان مرئيًا. هذا السلوك يؤثر فقط على صفحات الموضوعات.
تصفية المنطقة اللغوية
يسمح لك حقل المنطقة اللغوية (Locale) بعرض رابط فقط عندما يتم تعيين الموقع على لغة محددة. هذا مفيد للمجتمعات متعددة اللغات التي تريد روابط رأس مختلفة لكل لغة.
- قم بتعيين الحقل على رمز منطقة لغوية مثل
enأوdeأوfrأوzh_CN، وما إلى ذلك. - التطابق غير حساس لحالة الأحرف، ويتم التعامل مع فواصل
-و_بنفس الطريقة - لذا فإنen-USوen_USوen_usكلها تتطابق بنفس القدر. - إذا تُرك حقل المنطقة اللغوية فارغًا، يظهر الرابط في جميع المناطق اللغوية. هذا هو الإعداد الموصى به لمعظم المواقع ذات اللغة الواحدة.
- تتم أيضًا إضافة فئة CSS
headerLink--{locale}إلى عنصر الرابط، والتي يمكن استخدامها لاستهداف CSS إضافي.
\u003e 
مشكلة شائعة: إذا لم تظهر روابطك، فتحقق مما إذا كنت قد قمت عن طريق الخطأ بتعيين قيمة locale لا تتطابق مع لغة موقعك المحددة. ترك حقل المنطقة اللغوية فارغًا آمن وسيؤدي دائمًا إلى عرض الرابط.
تخصيص CSS
يحصل كل رابط تلقائيًا على فئة CSS مشتقة من قيمة النص (Text) الخاصة به: يتم استبدال المسافات بشرطات، ويتم تحويل النص إلى أحرف صغيرة، ويتم إلحاق -custom-header-links.
على سبيل المثال:
- الرابط الذي نصه
Privacyيحصل على الفئةprivacy-custom-header-links - الرابط الذي نصه
Visit Shopيحصل على الفئةvisit-shop-custom-header-links
تنسيق جميع روابط الرأس:
.custom-header-links .headerLink a {
font-size: var(--font-up-1);
color: var(--header_primary);
}
تنسيق رابط معين (على سبيل المثال، رابط نصه “Privacy”):
.custom-header-links .headerLink.privacy-custom-header-links a {
color: var(--tertiary);
}
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: var(--tertiary-high);
}
إظهار أو إخفاء رابط بناءً على حالة تسجيل الدخول:
يضيف ديسكورس فئة anon إلى علامة \u003chtml\u003e للمستخدمين غير المسجلين. يمكنك استخدام هذا لإظهار الروابط أو إخفائها بشكل مشروط:
/* إخفاء "لوحة التحكم" من المستخدمين غير المسجلين */
html.anon .dashboard-custom-header-links {
display: none;
}
/* إخفاء "التسجيل" من المستخدمين المسجلين */
html:not(.anon) .sign-up-custom-header-links {
display: none;
}
\u003e إخفاء CSS display: none هو آلية إخفاء مرئية فقط. يظل HTML الخاص بالرابط موجودًا في مصدر الصفحة. لا تستخدم هذا لحماية عناوين URL حساسة أو تخضع للتحكم في الوصول.
إعادة ترتيب الروابط باستخدام CSS (باستخدام خاصية order في flexbox):
.custom-header-links li {
\u0026:nth-child(1) { order: 3; }
\u0026:nth-child(2) { order: 1; }
\u0026:nth-child(3) { order: 2; }
}
استخدم المسار /my للروابط الخاصة بالمستخدم، لتجنب الترميز الثابت لاسم المستخدم:
/my/messages ← صندوق البريد الخاص بالمستخدم الحالي
/my/activity ← نشاط المستخدم الحالي
\u003e مستضاف من قبلنا؟ مكونات السمة متاحة للاستخدام في خطط Pro و Business و Enterprise الخاصة بنا.
\u003e أبرز التغييرات:
\u003e
\u003e * تم ترحيل الإعداد custom_header_links من تنسيق قائمة مفصولة بفواصل إلى واجهة مستخدم نموذج type: objects منظم. إذا كنت قد قمت سابقًا بتكوين الروابط باستخدام حقل النص القديم المفصول بفواصل، فيجب أن يكون الترحيل قد حافظ على بياناتك تلقائيًا.