Custom Hamburger Menu Links

لاحظت هذا أيضًا ويبدو أنه لا يظهر إلا الروابط الخارجية تحت المزيد.

3 إعجابات

أستخدم روابط داخلية في هذا المكون، على سبيل المثال، لدي رابط يفتح دعوات المستخدم: /my/invited/pending/

عند فتح الرابط من الشريط الجانبي، أحصل على: عفوًا! هذه الصفحة غير موجودة أو خاصة.

يعمل الرابط عند الوصول إليه من شريط عنوان URL.

عند إدخال عنوان URL الكامل (https://domain.com/my/invited/pending/)، يتم فتح عنوان URL على النحو التالي:
https://domain.com/https://domain.com/my/invited/pending/

إعجابَين (2)

نعم. مشكلة معروفة.

إعجابَين (2)

مرحباً،
يجب أن يعمل هذا مع: Chat,/chat/browse/open :slightly_smiling_face:

إعجابَين (2)

نعم، أعرف. ربما أرسلت تعليقي بسرعة كبيرة. حسنًا، بالتأكيد بسرعة كبيرة، لأنني يجب أن أقول إنه يجب استخدام المسار بدلاً من عنوان URL الكامل.

رابط إضافي للمحادثة… حسنًا، الشريط الجانبي الجديد غيّر الملعب تمامًا ولم يعد هناك حاجة إليه.

إعجابَين (2)

ألقيت نظرة على كود الشريط الجانبي لـ Discourse و @manuel إضافة أيقونات.

يبدو أنه في الوقت الحالي، لا يمكن تخصيص الروابط المخصصة للأيقونة لأن طريقة تزيين قائمة الهامبرغر لا تأخذ في الاعتبار الثابت prefixValue (الذي يحتوي على اسم الأيقونة) أو شيء من هذا القبيل…

يبدو لي أيضًا أن تزيينات قائمة الهامبرغر باستخدام api.decorateWidget سيتم إيقافها. انظر:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534

أيضًا، حقيقة أن الروابط الخارجية لم تعد تعمل قد تأتي من هذا:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524

لذلك يجب أن تكون هناك بعض التغييرات في النواة لجعل هذا متاحًا.

:warning: معرفتي بكيفية عمل Discourse تكاد تكون معدومة لذلك قد أكون مخطئًا جدًا.

هل أنا على حق في اكتشافاتي؟

3 إعجابات

لقد قمت بتثبيت مكون السمة هذا من مستودع github. أقوم بتشغيل 3.0.0.beta15 على discourse الخاص بي وحتى على الرغم من أنني يبدو أنني أضفته، فإن قائمة الهامبرغر لا تعرض الرابط الخاص بي… أي أفكار؟

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

قد يكون مرتبطًا بـ:

حتى يومنا هذا، لا تزال الروابط الخارجية لا تعمل.
ويجب أن تبدأ الروابط الداخلية بمسار نسبي، وليس بمسار كامل.

3 إعجابات

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

إعجابَين (2)

أعتقد أن الأمر يتجاوز ما يمكن أن يحققه CSS. لدى فريق discourse هذا في خارطة طريقهم، لكنه لا يحدث بسرعة (أعتقد):

6 إعجابات

أنا أستخدم:

<script>
  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> Rechtliches </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // Create the links
    const links = [
      { title: "Impressum", src: "/impressum" },
      { title: "Datenschutz", src: "/privacy" },
    ]

    // Mobile
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // Force to wait until navigation has been loaded
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.append(customHeader)
          if (bool) return;
          // Get the customNav Id
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

يمكنك رؤية النتيجة على https://forum.courservio.de/
النسخة الأصلية من هذا الكود مأخوذة من https://meta.discourse.org/t/add-custom-links-to-sidebar/246848. ربما يمكن أن تساعدك.

6 إعجابات

@hosch رائع، جميل جداً، هذا بالضبط ما كنت أبحث عنه! شكراً جزيلاً.

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

@hosch هل من الممكن نقله إلى الأعلى؟ أود أن يظهر بعد قسم المجتمع، أو ربما قبله.\n\n------------\n\nتعديل: يبدو أنه ممكن مع تغيير على هذا:\nRearrange Existing Hamburger Menu Items - #3 by awesomerobot {\n display: flex; / Setup a flex layout so you can reorder things */\n flex-direction: column;\n .sidebar-section-community {\n order: -1;\n }\n}\n```\n\nأتساءل عن نقله إلى أعلى موضع؟

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

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


تعديل: تم الحل هنا:

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

شكراً @hosch و @Olivier_Lambert على إنجاز هذا.
هل يمكنك أن تشرح لهذا المبتدئ أين يجب أن أدرج هذا؟ :pray:

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

كيف يمكنني إعادة ترتيب العناصر في قسم الشريط الجانبي / قائمة الهامبرغر؟

على سبيل المثال، أريد وضع “جميع الفئات” فوق الفئات في قسم “الفئات”، ونفس الشيء مع “جميع العلامات”.

شكرا لك!

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

هل تعرف الآن كيفية استخدام مكون لـ CSS، أليس كذلك؟ أضف ذلك في قسم الرأس.

لا يمكنك ذلك بسهولة. على الأقل في الوقت الحالي. لم يتم الانتهاء منه وصقله بالكامل في الوقت الحالي.

إعجابَين (2)

لقد جربت هذا، وأعطاني خطأ عند استخدام فاصلة منقوطة بالقرب من src.

دعنا نحاول مرة أخرى. شكرًا.

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

هذا لا يزال موجودًا، والحلول التي تلت ذلك لم تعالج المشكلة.

الإعداد: Invite friends,/my/invited/pending/,f

خارج الموضوع:

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

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

يمكنك استخدام CSS هذا:

#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}

:slight_smile:

8 إعجابات