Настройка меню домена [wiki.qeng.org]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Настройка меню домена ======

Меню домена — та самая полоса наверху страницы: кнопки разделов, справа выбор языка и вход.

{{ :admin_main:domain_navbar.png?800 |Навбар домена: пункты меню, выбор языка и вход}}

В блок меню в разделе Дизайн надо скопировать:

<code>
<script>

// https://wiki.qeng.org/doku.php?id=admin_main:domain_menu&lang=auto
add_navbar({ 
  classes: 'navbar-expand-lg navbar-light bg-light mb-2',
  items: [
    // Новые кнопки добавлять в этот список
    {name: 'ИГРЫ', url:'index.php'},
    {name: 'АРХИВ', url:'archive.php'},
    {name: 'РЕЙТИНГ', url:'ratings.php'},
  ],
  langs: {'EN':'en', 'UA':'uk', 'RU':'ru'}, // Выбор языка. Если не нужен можно удалить эту строчку.
  username: '!username!',
});

</script>
</code>


===== Настройка кнопок в меню =====
Кнопки перечислены в разделе **items** - одна строка - одна кнопка.

Первые две кнопки видно всегда: на узком экране остальные уезжают под бургер, а эти две — нет.

{{ :admin_main:domain_navbar_mobile.png |Он же на узком экране: меню сворачивается в бургер}}


Кнопка профиль добавляется автоматически.

===== Локализация кнопок в меню =====
Подписи кнопок переводятся словарём домена. Чтобы движок их увидел, оберните каждую в ''gt()'':

<code>
  items: [
    {name: gt('ИГРЫ'), url:'index.php'},
    {name: gt('АРХИВ'), url:'archive.php'},
    {name: gt('РЕЙТИНГ'), url:'ratings.php'},
  ],
</code>

Дальше подписи появятся в таблице на экране «Перевод» — см. [[admin_main:domain_localization|Перевод домена]]. Перевод подставляется на сервере, до того как страница уедет зрителю. Подпись без ''gt()'' в таблицу не попадёт вовсе, и никто об этом не предупредит.

==== Старый способ ====

Раньше перевод писался тут же, в блоке меню:

<code>
<script>
addTranslation('en', 'АВТОРАМ', 'ABOUT');
addTranslation('uk', 'ТЕСТ ДВИЖКА', 'ТЕСТ ДВИГУНА');
</script>
</code>

Это работает как работало, но покрывает только кнопки меню — ни шапку, ни подвал, ни страницы, — и не говорит, что ещё не переведено.

==== Ссылки на страницы домена ====

Например, страничка с часто задаваемыми вопросами - надо заполнить самостоятельно. Можно указать другой 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>