domain_menu

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия
Предыдущая версия
domain_menu [2021/08/17 10:41]
admin
domain_menu [2021/10/19 13:00]
phaust удалено
Строка 1: Строка 1:
 ====== Настройка меню домена ====== ====== Настройка меню домена ======
  
-В блок меню в разделе Дизайн надо ​прописать: +В блок меню в разделе Дизайн надо ​скопировать:
  
 <​code>​ <​code>​
Строка 11: Строка 10:
   classes: '​navbar-expand-lg navbar-light bg-light mb-2',   classes: '​navbar-expand-lg navbar-light bg-light mb-2',
   items: [   items: [
-    ​{name: '​АВТОРАМ',​ url:'​authors.php'​},​ +    ​// Новые кнопки добавлять в этот список 
-    {name: 'ТЕСТ ДВИЖКА', url:'​index.php?'}, +    {name: 'ИГРЫ', url:'​index.php'​},​ 
-    {name: 'WIKI', url:'https://​wiki.qeng.org',​ target: '​_blank'}, +    {name: 'АРХИВ', url:'archive.php'}, 
-    {name: 'СТАТИСТИКА', url:'qeng_stats.php'​},​+    {name: 'РЕЙТИНГ', url:'ratings.php'​},​
   ],   ],
   username: '​!username!',​   username: '​!username!',​
Строка 20: Строка 19:
  
 </​script>​ </​script>​
 +</​code>​
 +
 +
 +===== Настройка кнопок в меню =====
 +Кнопки перечислены в разделе **items** - одна строка - одна кнопка.
 +
 +Первые две кнопки видно всегда. ​
 +
 +Кнопка профиль добавляется автоматически.
 +
 +==== Ссылки на страницы домена ====
 +
 +Например,​ страничка с часто задаваемыми вопросами - надо заполнить самостоятельно. Можно указать другой id, если надо несколько подобных страниц.
 +<​code>​
 +  {name: '​F.A.Q.',​ url:'​page.php?​id=faq'​},​
 +</​code>​
 +
 +==== Ссылки на внешние страницы ====
 +
 +Например,​ ссылка на telegram чат или канал. **target:'​_blank'​** - означает,​ что надо открывать в новой вкладке.
 +<​code>​
 +  {name: '​TELEGRAM',​ url:'​https://​t.me/​qeng_authors',​ target:'​_blank'​},​
 +</​code>​
 +
 +===== Настройка классов =====
 +Можно менять набор классов в строке
 +<​code>​
 +classes: '​navbar-expand-lg navbar-light bg-light mb-2',
 +</​code>​
 +
 +Классы указываются через пробел.
 +
 +==== Авто-сворачивание тулбара ====
 +
 +Для того, чтобы на широких экранах было видно все кнопки,​ то можно добавить **один из этих классов**
 +  * **navbar-expand-xl** - все кнопки на одной строке,​ если экран шире 1200 пикселей.
 +  * **navbar-expand-lg** - все кнопки на одной строке,​ если экран шире 992 пикселей.
 +  * **navbar-expand-md** - все кнопки на одной строке,​ если экран шире 768 пикселей.
 +  * **navbar-expand-sm** - все кнопки на одной строке,​ если экран шире 576 пикселей.
 +
 +==== Цветовой стиль ====
 +Для светлого тулбара надо добавить классы **navbar-light bg-light**
 +
 +Для темного тулбара надо добавить классы **navbar-dark bg-dark**
 +
 +==== Отступ под тулбаром ====
 +Для отступа под тулбаром надо добавить один из классов **mb-1 mb-2 mb-3 mb-4 mb-5**. Чем цифра больше,​ тем отступ больше.
 +
 +===== Логотип =====
 +На тулбар слева можно добавить логотип.
 +
 +Для этого надо добавить секцию **logo** после **classes**
 +
 +Вот так можно добавить картинку
 +<​code>​
 +  logo: '<​img style="​height:​36px;"​ class="​mr-3"​ src="​https://​qeng.org/​apple-touch-icon.png"></​img>',​
 </​code>​ </​code>​