محرر التنقل: تخصيص قائمة المواقع الإلكترونية

توفر لك هذه الوثيقة تفاصيل حول كيفية بناء شريط التنقل (تنقل الموقع) في نظام إدارة المحتوى بلوتروكس وكيفية تعديلها. ستتعرف على الهيكل، والنماذج النصية، وقائمة التنقل المحمولة والجانبية وكذلك محرر التنقل.

ملحوظة: الملف /bx_Header.html مرئي فقط في وضع المطور (تسجيل الدخول كـ AAdmin).

مكان التخزين والظهور

بشكل افتراضي، يقع شريط التنقل في الدليل الرئيسي تحت الصفحات → /bx_Header.html. يمكنك إجراء التغييرات على التنقل في هذا الملف.

مثال كود: /bx_Header.html

<div style="display:__​DB​_GB_DesktopHTML1_Display__" class="bx-DesktopHTML1"><!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->
   __​DB​_GB_DesktopHTML1__     
</div>   


<div class="bx-nav-outer">
   <nav class="bx-nav">

      <!-- left Icon logo -->
      <div class="bx-navbar-left">
         <div style="display:__​DB​_GB_DesktopNavIcon_Display__">
			   <button class="bx-nav-icon" id="BxMobileBarToggle">__​DB​_GB_DesktopNavIcon_SVG__</button>    
         </div>

         <div style="display:__​DB​_GB_DesktopLogo_Display__;">
            <a href="/index.html"><img src="__​DB​_GB_DesktopLogo_Src__" class="bx-nav-brand"></a>                 
         </div>  
      </div>


      <!-- center buttons -->
      <div class="bx-navbar-center" id="bxNavPoints">

         <!-- zusatz icon Menue-Editor - display:none -->
         <div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>

         <ul style="display:__​DB​_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item __​DB​_Nav_CSSclass__"><a class="bx-nav-link" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link __​DB​_Nav_CSSclass__" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__​DB​_GB_NavIconChevron_SVG__</span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item __​DB​_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
         </ul>
      </div>

      <!-- icons right -->
      <div class="bx-navbar-right">
         <div style="display:__​DB​_GB_DesktopIconSearch_Display__ ">    
         	<button class="bx-nav-icon" onclick="BlueSearchBar();">__​DB​_GB_DesktopIconSearch_SVG__</button>
         </div>         

         <div style="display:__​DB​_GB_DesktopIconLight_Display__">      
         	<button class="bx-nav-icon" onclick="BlueLightDdark();">__​DB​_GB_DesktopIconLight_SVG__</button>            
         </div>  

         <div style="display:__​DB​_GB_DesktopIconLogin_Display__">          
         	<button class="bx-nav-icon" onclick="BlueLoginBar();">__​DB​_GB_DesktopIconLogin_SVG__</button>                   
         </div>   

         <div style="display:__​DB​_GB_DesktopIconLang_Display__">                  
         	<button class="bx-nav-icon" onclick="BlueLangBar();">__​DB​_GB_DesktopIconLang_SVG__</button>                   
         </div>   

         <div style="display:__​DB​_GB_DesktopIconBasket_Display__">      
         	<button class="bx-nav-icon" onclick="BlueBasketBar();">__​DB​_GB_DesktopIconBasket_SVG__<div class="WKGBAnzDiv"><div class="WKGBAnzDivInner" id="WKGBAnz"></div></div></button>  
         </div>
                         
         <div style="display:__​DB​_GB_DesktopIconSide_Display__"> 
            <button class="bx-nav-icon" id="BxSideBarToggle">__​DB​_GB_DesktopIconSide_SVG__</button>               
         </div> 
      </div>

   </nav>
</div>

<!-- Mobile Menü -->
<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:__​DB​_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__​DB​_GB_MobilHTML1__</div>  
   <div id="bxNavPointsMobile" style="display:__​DB​_GB_MobilNav_Display__"></div>
   <div style="display:__​DB​_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__​DB​_GB_MobilHTML2__</div>  
</div>

<!-- Sidebar -->
<div class="bx-side-bar" id="BxSideBar">
   <div style="display:__​DB​_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__​DB​_GB_SideHTML1__</div>  
   <div id="bxNavPointsSide" style="display:__​DB​_GB_SideNav_Display__"></div>
   <div style="display:__​DB​_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__​DB​_GB_SideHTML2__</div>  
</div>


<div style="display:__​DB​_GB_DesktopHTML2_Display__" class="bx-DesktopHTML2"><!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->
   __​DB​_GB_DesktopHTML2__       
</div> 

بناء شريط التنقل

• Left Icon & Logo: Menü-Icon und Logo.
• Center Buttons: Menü-Buttons und Untermenüs.
• Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).

فهم النماذج النصية

يتم استبدال نماذج HTML تلقائيًا عند الحفظ في نظام إدارة المحتوى:

• __​DB​_GB_DesktopHTMLxxx_Display__: Steuert die Sichtbarkeit (Aktiv/Inaktiv) über CMS → Webseite → Kopfzeile.
• __​DB​_GB_DesktopHTMLxxx__: Wird durch Inhalte (z. B. HTML, Bild-URL, SVG) ersetzt, die Du in Kopfzeile hinterlegst.
• __​DB​_Nav_xxx__: Werte aus der Navigationstabelle (z. B. Link, Name, Ziel, CSS-Klasse).
• __​DB​_GB_xxx_SVG__: SVG-Code des jeweiligen Icons.

إذا كنت لا ترغب في استخدام الخيارات من رأس نظام إدارة المحتوى (CMS)، يمكنك إزالة العلامات __​DB​_GB_xxx__ و__​DB​_GB_xxx_Display__ من HTML. إنها اختيارية.

القسم: شريط التنقل العلوي

تقوم الشريط الإضافي فوق القائمة بالتمرير (الهاتف المحمول وسطح المكتب) لأعلى خارج مجال الرؤية. يبقى شريط التنقل الفعلي مرئيًا في الجزء العلوي "ملتصق". وهكذا يمكن أن تظهر المعلومات المهمة (مثل "تحميل التطبيق ...") في الأعلى دون حجز مساحة دائمة.

• __​DB​_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
• __​DB​_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.
• <!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.

القسم: شريط التنقل السفلي

يتم أيضًا تمرير الشريط الإضافي تحت القائمة (الهاتف المحمول وسطح المكتب) لأعلى.

• __​DB​_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
• __​DB​_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.
• <!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.

قائمة الهاتف المحمول

تدخل شريط الهاتف المحمول من الجانب الأيمن في وضع الهاتف. عند تحميل الصفحة، يتولى JavaScript (/bx_script/BxScript_own_min.js) محتوى القائمة من bxNavPoints إلى شريط الهاتف المحمول (BxMobileBar). بالإضافة إلى ذلك، يمكنك إضافة كتل HTML خاصة فوق وتحت القائمة (على سبيل المثال، شعارات كبيرة).

<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:__​DB​_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__​DB​_GB_MobilHTML1__</div>  
   <div id="bxNavPointsMobile" style="display:__​DB​_GB_MobilNav_Display__"></div>
   <div style="display:__​DB​_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__​DB​_GB_MobilHTML2__</div>  
</div>

شريط جانبي

تظهر شريط الجانبي من الجانب الأيسر عند استخدام وضع الهاتف. هنا أيضًا يمكنك وضع كتل HTML خاصة بك فوق/تحت القائمة (مثل الشعارات الكبيرة). يمكن عرض قائمة التنقل أيضًا في الشريط الجانبي كخيار.

<div class="bx-side-bar" id="BxSideBar">
   <div style="display:__​DB​_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__​DB​_GB_SideHTML1__</div>  
   <div id="bxNavPointsSide" style="display:__​DB​_GB_SideNav_Display__"></div>
   <div style="display:__​DB​_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__​DB​_GB_SideHTML2__</div>  
</div>

ملاحظة تخطيط: يمكنك إظهار قائمة الهاتف أو شريط الجانبي على اليمين/اليسار وتغيير الأيقونات عبر CMS → الموقع → رأس الصفحة.

أزرار القائمة والقائمة الفرعية

         <ul style="display:__​DB​_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item __​DB​_Nav_CSSclass__"><a class="bx-nav-link" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link __​DB​_Nav_CSSclass__" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__​DB​_GB_NavIconChevron_SVG__</span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item __​DB​_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__​DB​_Nav_Link__" __​DB​_Nav_NewZiel__>__​DB​_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
         </ul>

يتم بناء هيكل القائمة باستخدام UL/LI ويتم تعبئته من جدول قاعدة البيانات 00_Menue. يمكنك أيضًا تحديد جدول مختلف عبر العلامة <!--bxNV_DB 00_Menue bxNV_DB-->.

بين <!--bxNV_Navi--> توجد قوالب HTML للنقاط الرئيسية والفرعية. يتم ملء العلامة <!--bxNV_Next_Sub_Button--> تلقائيًا بمدخلات القائمة الفرعية.

مهم: يتم إنشاء الاتصال بوظيفة التنقل في CMS عبر علامات النص. يمكن ربط القوالب المخصصة بشكل كامل بهذه الطريقة. يمكنك تعديل التنقل في قائمة CMS الفرعية (تحت الحدود). يقوم النظام بإنشاء الصفحات والمجلدات تلقائيًا - مما يلغي الحاجة إلى إنشاء الروابط يدويًا.

تكوين أيقونات SVG

تقوم بتعديل كود SVG للأيقونات في وضع المطور من CMS → الموقع → رأس الصفحة في الجزء السفلي.

تحكم CSS وترتيب

يمكنك تغيير ترتيب الأيقونات باستخدام CSS. يمكن عرض شريط الهاتف بناءً على التخطيط سواء على اليمين أو اليسار.

نصائح وحيل

• In Kombination mit der Systemtabelle 00_Menue und CSS legst Du je Button fest, ob er in der Desktop-Navigation, der Mobile-Bar und/oder in der Side-Bar erscheint.
• In 00_Menue kann jedem Button eine CSS-Klasse in der Spalte CSSclass zugewiesen werden.
• Über CSS und die IDs bxNavPoints, BxMobileBar, BxSideBar bestimmst Du, welche Buttons wo gerendert werden. So baust Du auch komplexe Navbar-Strukturen, die der Endkunde später selbst mit der CMS-Navigation verändern kann.

زر إضافي لمحرر التنقل

<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>

بهذه الطريقة، يمكنك إظهار زر تحرير إضافي في وضع التعديل. يمكنك تحديد جدول تنقل آخر عن طريق استبدال 00_Menue. يستخدم محرر التنقل الافتراضي دائمًا 00_Menue.

أفضل الممارسات: احتفظ بجميع عناصر التنقل مجمعة في /bx_Header.html. بهذه الطريقة، يبقى شريط الهاتف والشريط الجانبي وشريط التنقل على سطح المكتب متسقة، ويكون تبديل مصدر البيانات (مثل جدول آخر غير 00_Menue) سريعًا.