تغيير وجهة رابط الشعار

الدعم
1

لدي موقع توجد فيه مجموعات متعددة، ولكل مجموعة فئاتها الخاصة، وهناك رغبة في تخصيص هذه الفئات بشعار صاحب المجموعة.

لكل فئة يوجد كود مثل:

.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

المشكلة تكمن في أنه عند النقر على الشعار، يتم التوجيه إلى الصفحة الرئيسية للموقع بدلاً من صفحة الفئة. وقد تم حل هذه المشكلة (إلى حد كبير) باستخدام الكود التالي:

<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // منع الانتقال إلى الرابط الأساسي
    event.preventDefault();
    
    // الحصول على الفئة النشطة من معرف div
    div = $("body[class*='category-']")[0];

    // استخراج الاسم المختصر (slug) من الفئة التي تبدأ بـ category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // تعيين الرابط ليكون رابط الاسم المختصر
    document.location = "/c/" + slug + "/";
  })
});
</script>

إذا نقرت على الشعار سواء في صفحة فئة أو صفحة موضوع، ستنتقل إلى صفحة الفئة. رائع!

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

(لقد استخدمت Custom Header Links لإضافة رابط للصفحة الرئيسية. ولا أعتقد أن لهذا أي علاقة بالسلوك المذكور أعلاه.)

ولا يمكنني مشاركة الموقع لأن فئات كل وحدة مرئية فقط لأعضاء المجموعة.

2

أعتقد أن ما يحدث هو أنك تضغط على جزء صغير من الرابط الذي يحتوي على #site-text-logo؟

البنية هي: div.title a #site-text-logo وأنت تلتقط النقرات على #site-text-logo تحديدًا، وليس على الرابط a الذي يُغلفه.

يمكنك على الأرجح استخدام event.preventDefault(); لمنع الرابط .title a داخل كود JavaScript الخاص بك، أو ربما تجربة .title a {pointer-events: none;} في CSS؟

3

أنت رائع. أقدر ذلك حقًا. ساعدني في حل مشكلة مفتاح مكرر في PostgreSQL، بالتأكيد، لكن فقط أبسط تنسيقات CSS تبدو منطقية، وأنا بالكاد أفهم حتى بناء جملة JavaScript.

لكن انتظر.

بمناسبة أخرى لا علاقة لها بالموضوع، لقد قمت للتو بجعل النقر على شعار الموقع في موقع Kanban الخاص بزوجتي ينقلك إلى فئة TODO. لقد أنشأت مكونًا للسماح بتعيين الصفحة الرئيسية إلى رابط مخصص. قمت بذلك على النحو التالي:

<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

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

تعديل: هاه، لكنني لا أستطيع معرفة كيفية تحديد الفئة للصفحة الحالية داخل <script type="text/javascript"> لتغيير setDefaultHomepage بشكل انتقائي.

هل يبدو ذلك أسهل؟

لكن عودًا إلى الحل الأصلي

أعتقد أن هذا يبدو صحيحًا بالنسبة لي، لكن هذا لا يعني الكثير.

أعتقد أن الأمر يتعلق بأن عنصر <h1> يقوم بالشيء الصحيح بطريقة ما، بينما ينتقل عنصر <a> إلى الصفحة الرئيسية للموقع؟

أنا مجرد إنسان بدائي. لا أعرف تمامًا ما يعنيه ذلك. هناك بعض الأشياء التي تبدو مشابهة جدًا لذلك في جافا سكريبت بالفعل. هل يجب أن أنشئ واحدًا آخر كاملًا من تلك الأشياء $(document).ready(function() {؟ أم أضيف فقط $(".title #site-text-logo").click(function(event){ هناك بطريقة ما؟

لم يبدو أن الشيء الذي جربته يفعل أي شيء مختلف.

فهمت هذا بشكل أفضل إلى حد ما وقمت بذلك:

/* إبقاء الشريط الصغير بالقرب من الشعار دون ربطه بالصفحة الرئيسية */
.title a {pointer-events: none;}

هذا التغيير أحدث فرقًا! وأرى أنه نجح لأنه الآن لن يفعل الشعار أي شيء.