النص بجانب الشعار في الخطاب مرتبط بكليهما

الدعم
1

مرحباً،

أردت إضافة نص بجانب الشعار على نسخة Discourse الخاصة بي وهذا الموضوع نجح معي في هذا الشأن:

ومع ذلك، النص غير مرتبط. كيف يمكنني ربط النص بعنوان URL للمنتدى تمامًا كما هو الشعار؟

سأكون ممتنًا لإرشاداتك في هذا الشأن.

2

يبدو أن الطريقة التي يتم بها ذلك في هذا الموقع هي وجود شعار عريض يتضمن النص. ماذا عن فعل ذلك؟

إعجابَين (2)
3

بشكل أساسي، يعرض شعار discourse الافتراضي بالطريقة التي تم تعيينه بها في إعدادات الموقع. ثم يضيف محتوى :after لتضمين النص. لذا يأتي النص من CSS.

هذا هو الكود:

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Some text after logo";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after {
    display:none;
}

وهذا هو السكريبت:

<script>
$(document).ready(function() {
	$(window).scroll(function(){
		checkScroll()
    }); 

	function checkScroll() {
		var y = $(window).scrollTop();		
		if (y > 55) {
            document.getElementById("main").classList.add('no-text');
        } else {
            document.getElementById("main").classList.remove('no-text');
        }
	}
	checkScroll();
});
</script>

الآن ما أريده هو تعيين رابط المنتدى للنص اللاحق أيضًا. (الشعار يحتوي على رابط الموقع كما هو مقصود من قبل discourse)

4

أولاً، هناك خطأ إملائي في السطر الأول من CSS (تمت كتابة “:” مرتين).
ثم، إذا قمت بتغيير المحدد لاستهداف الرابط الفعلي الذي يحتوي على الشعار:

.d-header .title a:after {

بعد ذلك، سيتم احتواء النص في الوسم <a> وسيكون له الرابط أيضًا.

image

يبدو أن الطريقة التي يتم بها ذلك على هذا الموقع هي وجود شعار واسع يتضمن النص. ماذا عن فعل ذلك؟

من الغريب أن روبرت طرح نفس السؤال في الموضوع المرتبط ولم يتلق ردًا أيضًا :upside_down_face:

إعجاب واحد (1)
5

إذا فهمت بشكل صحيح… هل يمكن أن يساعد هذا؟ :slightly_smiling_face:

سيضيف هذا عنصر HTML هذا بعد الشعار <a>After logo text</a>

الرأس

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('home-logo:after', helper => {
    return helper.h('a.after-logo', {
      href:'/',
      text: 'After logo text'
    });
  });
</script>
إعجابَين (2)
6

يبدو الأمر سيئًا على الهواتف المحمولة. يمكنني إخفاء النص باستخدام CSS على الشاشات الصغيرة ولكنني أريد عرض الشعار في جميع الأوقات.

7

هذا ممتاز. شكراً لك @Don

إعجاب واحد (1)
8

لهذه الحالة الاستخدام، أعتقد أنه قد يكون من الأفضل استخدام شعار مختلف على الهاتف المحمول؟ يوجد إعداد للموقع لهذا يسمى mobile logo ضمن branding.

yoursite/admin/site_settings/category/branding

إعجاب واحد (1)
9

أنت على حق. لم أكن أعرف بوجود هذا. أنا من كبار السن. لم أختبر الكثير من الميزات الجديدة. شكرا لك

الآن هذا منطقي أكثر.

3 إعجابات
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.