Изменение класса css на основе URL-слагов в OctoberCMS - PullRequest
Новая
       33

Изменение класса css на основе URL-слагов в OctoberCMS

0 голосов
/ 22 января 2020

Так что я пытаюсь работать над темой OctoberCMS для моего собственного проекта. Цель состоит в том, чтобы весь заголовок навигации был другого цвета в зависимости от страницы, на которой находится пользователь. Кажется довольно простым, но после нескольких часов попыток я все еще не мог справиться.

Поэтому моя идея заключалась в том, чтобы добавить другой класс css на основе страницы, на которой находится пользователь. Для https://example.com/foo/bar должен отображаться такой класс: navbar-foo

Я обнаружил, что у OctoberCMS Twig есть опция с именем this.param.tab который должен вернуть ровно "foo" , поэтому я подумал об этом: 

{% if this.param.tab == 'foo' %}
    <nav class="navbar-foo">
{% if this.param.tab == 'bar' %}
    <nav class="navbar-bar">

И так далее. Дело в том, что это заняло бы много места, и я не думал, что это было так чисто. Также класс должен быть на нескольких элементах, что сделало бы его немного нечитаемым. Поэтому я подумал, что просто решу это так: 

{% set slug = this.param.tab %}
<nav class="navbar-{ slug }">
    <div class="navbar-menu-{ slug }

Это не сработало. Сначала я подумал, что это не сработало, потому что я не вставил веточку правильно, чтобы она считалась строкой в ​​html. Другая вещь, которую я решил сделать неправильно, это то, что this.param.tab возвращает массив, а не строку. Поэтому я попробовал разные идеи, чтобы вставить его в атрибут класса и изменить его с массива на строку, когда понял, что this.param.tab пусто. Поэтому я попытался обернуть его в div и просто отобразить его вот так. Но это оказалось пустым. Я попытался {{ dump(this.param.tab) }}, который также оказался пустым.

Так что мне казалось, что this.param.tab на самом деле ничего не вернул. Поскольку код находится в header.htm , я подумал, что, возможно, он должен быть в основном вызываемом файле, так как header.htm - это просто часть, которая вставляется. Поэтому я попробовал layout.htm и попробовал home.htm (layout - это файл, который определяет макет страницы, куда вставляются partials / page и home.htm это файл, который на самом деле содержит слаг и другой код страницы, которую посещает пользователь). Но это тоже ничего не сделало.

Так что я не совсем уверен, что здесь не так. this.param.tab вообще реально работает? или есть лучший способ, которым я должен сделать это?

Если вам нужна дополнительная информация, спросите, но я подумал, что это не имеет значения, потому что это просто базовая c октябрьская установка, а тема просто ветка, javascript и с css.

1 Ответ

2 голосов
/ 22 января 2020

если вам просто нужно url для вашего состояния, вы можете сделать это следующим образом 

{% set slug = this.page.settings.url|replace({'/': '-'} %}
    <nav class="navbar{{ slug }}">
        <div class="navbar-menu{{ slug }}

Теперь, если вы установите url = "/foo/bar", ваше имя класса будет navbar-foo-bar, если вы установите ваш url = "/test" ваше имя класса будет navbar-test, если вы установите url = "/bla/ok/test" ваше имя класса будет navbar-bla-ok-test.

с параметрами

вы Вам нужно установить свой URL => /foo/:tab, а затем вы можете получить значение tab в {{ this.param.tab }}

, поэтому, как только вы установите URL, вы можете получить значения, подобные этому

, если вы используете URL http://example.com/foo/bar -> {{ this.param.tab }} будет foo

<nav class="navbar-{{ this.param.tab }}"> -> will be  -> <nav class="navbar-foo">

, если вы используете URL http://example.com/foo/test - > {{ this.param.tab }} будет test 

<nav class="navbar-{{ this.param.tab }}"> -> will be  -> <nav class="navbar-test">

, если есть сомнения, прокомментируйте.

...