Dudaevskiy
10/17/2019 - 9:27 AM
Grav создание темы
Формы
Ссылка в учебнике:
https://learn.getgrav.org/16/forms/blueprints/fields-available
Перевод строк
Ссылка на мультиязычность в объеме самой CMS
https://learn.getgrav.org/16/content/multi-language
Дополнительная ссылка касаемо переводов в теме https://learn.getgrav.org/16/themes/twig-filters-functions#translate
Отображение на фронте:
Допустимв файле languages.yaml имеется строка
ru:
SDS_SEARCH_BTN_TEXT: Поиск
Значит выводим так:
{{ 'SDS_SEARCH_BTN_TEXT'|t }}
Настройки сайта на одном языке (RU)
Ниже настройки мыдьтитязычности в файде \user\config\system.yaml
languages:
supported:
- ru
default_lang: ru
include_default_lang: false
pages_fallback_only: false
translations: true
translations_fallback: false
session_store_active: false
http_accept_language: false
override_locale: false
** FAQ по созданию переводов **
- Создаем в корне темы файл
languages.yaml - Наполняем его к примеру вот таким содержимым:
en: SITE: TITLE: My Blog DESCRIPTION: Blogging about stuff COPYRIGHT: © Copyright %s Your Company SUBSCRIBE: Subscribe TWEET: Tweet SHARE: Share MONTHS_OF_THE_YEAR: [January, February, March, April, May, June, July, August, September, October, November, December] DAYS_OF_THE_WEEK: [Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday] READ_MORE: Read More SEARCH: Search RANDOM_ARTICLE: Random Article POPULAR_TAGS: Popular Tags LATEST_RECIPES: Latest Recipes RELATED_POSTS: Related SEARCH_FIELD: Type and press enter... NEXT: Next PREVIOUS: Previous TOPICS: topics ru: SITE: TITLE: Мой блог DESCRIPTION: Блог о разном COPYRIGHT: © Все права защищены %s Ваша компания SUBSCRIBE: Подписаться TWEET: Твит SHARE: Поделиться MONTHS_OF_THE_YEAR: [Январь, Февраль, Март, Апрель, Май, Июнь, Июль, Август, Сентябрь, Октябрь, Ноябрь, Декабрь] DAYS_OF_THE_WEEK: [Понедельник, Вторник, Среда, Четверг, Пятница, Суббота, Воскресенье] READ_MORE: Подробнее - Пример применения даты
datetime="{{ 'MONTHS_OF_THE_YEAR'|ta(post.date|date('n') - 1) }} - Пример простого отображения текста
<h2 class="widget-title">{{ 'POPULAR_TAGS'|t }}</h2> - Пример отображения в зависимости от наличия значения
{% if site.copyright %} {{ site.copyright }} {% endif %} - Более подробней по работе с типами форм здесь https://learn.getgrav.org/16/forms/blueprints/fields-available#common-fields-attributes
- После того как пользователь заполнил данные они будут добавлены здесь:
user\config\themes\sdstudio-foresttime.yamlданный файлsdstudio-foresttime.yamlсогласно названию темы
Отображение данных
Допустим в нашем файле sdstudio-foresttime.yaml (который лежит здесь: user\config\themes\sdstudio-foresttime.yaml)имеется данная строка:
social_menus: Привет бро, я твой текст из Yaml файла значит в шаблоне мы его будем выводить так:
{{ theme.social_menus }}
Если нужно что-то перебрать значит так:
{% for sociallink in theme.header.sdstudio_sociallinks %}
{{print_r(sociallink.url|raw)}}
{% endfor %}
Условия
{#{{ Выводим иконки }}#}
{% if theme.header.sdstudio_sociallinks is not sameas(false) %}
{% for sociallink in theme.header.sdstudio_sociallinks %}
<a href="{{sociallink.url|raw}}" data-toggle="tooltip" target="_blank" data-placement="bottom" title="{{sociallink.text|raw}}"><i class="fa {{sociallink.icon|raw}}"></i></a>
{% endfor %}
{% endif %}
Изображение
Если мы добавляем изображение через данную форму добавления изображений: https://learn.getgrav.org/16/forms/blueprints/fields-available#icon-of-the-fieldset
Тогда выводить его нужно так:
{% set logo_dark = '' %}
{% for imagesuploaded in theme.custom_logo_dark_logo %}
{% set logo_dark = imagesuploaded.path %}
{% endfor %}
Или вот так:
{% if header.sdstudio_sidebaryoutubechanels is not sameas(false) %}
{% for youtubeitem in theme.header.sdstudio_sidebaryoutubechanels %}
<div class="trend-videos">
<div class="blog-box">
<div class="post-media">
<a href="{{ youtubeitem.url|raw }}" title="">
{% for imagesuploaded in youtubeitem.image %}
{% set image_url = imagesuploaded.path %}
<img src="{{image_url}}" alt="" class="img-fluid">
{% endfor %}
<div class="hovereffect">
<span class="videohover"></span>
</div><!-- end hover -->
</a>
</div><!-- end media -->
<div class="blog-meta">
<div class="h6"><a href="{{ youtubeitem.url|raw }}" title="">{{ youtubeitem.chanel_name|raw }}</a></div>
</div><!-- end meta -->
</div><!-- end blog-box -->
<hr class="invis">
{% endfor %}
{% endif %}
Отображение изображений не из страниц
Полный код :
{% for imagesuploaded in youtubeitem.image %}
{% set image_name = imagesuploaded.name %}
<img src="{{media['user://__images/'~image_name].cropResize(367, 245).grayscale.url }}" alt="" class="img-fluid">
{% endfor %}
соответственно для форм в \user\themes\sdstudio-foresttime\blueprints.yamlадминки указываем нужный путь:
# Картинка подложка на видео
.image:
type: file
label: SDS_SIDEBAR.SDS_SIDEBAR_YOUTYBE_BEST_IMAGE_LABEL
# destination: 'user/plugins/admin-pro/assets'
destination: 'user/__images'
accept:
- image/*
Несколько размеров изображений полностью автоматически
БОлее подробней здесь:
https://learn.getgrav.org/16/content/media#sizes-with-media-queries-using-derivatives
{{ page.media['retina.jpg'].derivatives(320,1600,300).sizes('(max-width:26em) 100vw, 50vw').html() }}
Список страниц
Перебор в нутри другой страницы с учетом количества возвращяемых элементов:
Код ниже для главной страницы, переберет все страницы, страницы блог. И отобразит первых 6 шт.
{% for pageblog in page.find('/blog').children %}
{% if loop.index < 6 + 1 %}
{{ pageblog.title }}<br>
{% endif %}
{% endfor %}
Пример вывода с обработкой изображения
{# Сделаем перебор в дочерних постах страницы блог #}
{% for pageblog in page.find('/blog').children %}
{# Отобразим только первых 6 шт. #}
{% if loop.index < 6 + 1 %}
<div class="col-md-2">
<div class="masonry-box post-media">
{# Изображение - возьмем и применем к нему фильтр #}
{% set image = pageblog.media.images|first.cropZoom(280,245) %}
{# image.url - Выведем url обработанного изображения #}
<img src="{{ image.url }}" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-aqua"><a href="blog-category-01.html" title="">{{ pageblog.date }}</a></span>
<h4><a href="garden-single.html" title="">{{ pageblog.title }}</a></h4>
<small><a href="garden-single.html" title="">{{ pageblog.date }}</a></small>
{# <small><a href="#" title="">by Jessica</a></small>#}
</div><!-- end meta -->
</div><!-- end shadow-desc -->
</div><!-- end shadow -->
</div><!-- end post-media -->
</div><!-- end right-side -->
{% endif %}
{% endfor %}
Пример вывода с таксономией и дайтой (месяц даты из айла перевода)
{% for pageblog in taxonomy.findTaxonomy({'category':'WordPress'}).order('date', 'desc') %}
{% if loop.index < 2 %}
<div class="first-slot">
<div class="masonry-box post-media">
{# Изображение - возьмем и применем к нему фильтр #}
{% set image = pageblog.media.images|first.cropZoom(788,443) %}
{# image.url - Выведем url обработанного изображения
src="{{ image.url }}" alt="" class="img-fluid
#}
<img src="{{ image.url }}" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-orange">
{# Таксономия - Вывод в посте #}
{% for category in pageblog.taxonomy.category %}
<a href="{{ base_url }}/category:{{ category }}" rel="category tag">{{ category }}{% if not loop.last %}, {% endif %}</a>
{% endfor %}
</span>
<h4><a href="{{ pageblog.url }}" title="{{ pageblog.title }}">{{ pageblog.title }}</a></h4>
<small>{{ 'MONTHS_OF_THE_YEAR'|t(pageblog.date|date('n') - 1) }} {{ pageblog.date|date("d, Y") }} </small>
{# <small><a href="tech-author.html" title="">by Amanda</a></small>#}
</div><!-- end meta -->
</div><!-- end shadow-desc -->
</div><!-- end shadow -->
</div><!-- end post-media -->
</div><!-- end first-side -->
{% endif %}
{% endfor %}
Таксономии
Для вывода виджета категорий устанавливаем плагин taxonomylist
https://github.com/getgrav/grav-plugin-taxonomylist/blob/master/README.md
Далее копируем партиалс в тему и добавляем код куда нужно:
<div class="widget">
<div class="h2 widget-title">{{ 'SDS_SIDEBAR.SDS_SIDEBAR_CATEGORIES_POSTS'|t }}</div>
<style>
span.tags a {
margin-right: 15px;
}
</style>
{% if config.plugins.taxonomylist.enabled %}
{% include 'partials/taxonomylist/taxonomylist.html.twig' with {'base_url': '/blog','taxonomy':'category'} %}<br>
{% endif %}
</div>
Дебагинг
Для Array:
{{print_r(sociallink.url|t)}}
Реализация пагинации
Плагин здесь: https://github.com/getgrav/grav-plugin-pagination
1. Настройка страницы для вывода
Первое что нужно сделать это установить вид, захват от куда, и отображение в хедере той страницы на которой отображается список постов.
Отображение дочерних страниц текущей страницы
content:
items: '@self.children'
order:
by: date
dir: desc
limit: 10
pagination: true
2. Добавляем шаблон в тему:
Вставка:
{% include 'partials/pagination.html.twig' with {'base_url': page.url, 'pagination':collection.params.pagination} %}
Код шаблона
{#{% for page in page.find('/blog').children %}#}
{% set page = page.find('/blog') %}
{#{% endfor %}#}
{% set pagination = pagination|default(page.collection.params.pagination) %}
{% set base_url = base_url|default(page.url) %}
{% if pagination|length > 1 %}
<ul class="pagination">
{% if pagination.hasPrev %}
{% set url = (base_url ~ pagination.params ~ pagination.prevUrl)|replace({'//':'/'}) %}
<li><a rel="prev" href="{{ url }}">«</a></li>
{% else %}
<li><span>«</span></li>
{% endif %}
{% for paginate in pagination %}
{% if paginate.isCurrent %}
<li><span class="active">{{ paginate.number }}</span></li>
{% elseif paginate.isInDelta %}
{% set url = (base_url ~ pagination.params ~ paginate.url)|replace({'//':'/'}) %}
<li><a href="{{ url }}">{{ paginate.number }}</a></li>
{% elseif paginate.isDeltaBorder %}
<li class="gap"><span>…</span></li>
{% endif %}
{% endfor %}
{% if pagination.hasNext %}
{% set url = (base_url ~ pagination.params ~ pagination.nextUrl)|replace({'//':'/'}) %}
<li><a rel="next" href="{{ url }}">»</a></li>
{% else %}
<li><span>»</span></li>
{% endif %}
</ul>
{% endif %}
3. Вывод пагинации, основной шаблон вывода
{% embed 'partials/base.html.twig' %}
{% block slider %}
{% include 'partials/slider.html.twig' %}
{% endblock %}
{% set collection = page.collection() %}
{% set base_url = page.url %}
{% set feed_url = base_url %}
{% if base_url == '/' %}
{% set base_url = '' %}
{% endif %}
{% if base_url == base_url_relative %}
{% set feed_url = base_url~'/'~page.slug %}
{% endif %}
{% block content %}
<div id="posts" class="posts posts-list clearfix">
{% for child in collection %}
{# И здесь вывод данных поста #}
{{ child.title }}<br>
{# {% include 'partials/blog_item.html.twig' with {'page':child, 'truncate':true} %}#}
{% endfor %}
</div>
{% if config.plugins.pagination.enabled and collection.params.pagination %}
{% include 'partials/pagination.html.twig' with {'base_url': page.url, 'pagination':collection.params.pagination} %}
{% endif %}
{% endblock %}
{% endembed %}
Пример обрезки массива:
То есть |slice(0,4) обрезаем до первых 4 объектов
{% for image in images|slice(0,4) if image.type == 'image' %}
I am an image
{% endfor %}
Вставить свой контент через каждых 3 элемента в переборе for
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<div class="page-wrapper">
<div class="blog-top clearfix">
<h4 class="pull-left">{{ 'SDS_RECENT_NEWS'|t }} <i class="fa fa-pencil"></i></h4>
</div><!-- end blog-top -->
{% embed 'partials/base.html.twig' %}
{% block slider %}
{% include 'partials/slider.html.twig' %}
{% endblock %}
{% set collection = page.collection() %}
{% set base_url = page.url %}
{% set feed_url = base_url %}
{% if base_url == '/' %}
{% set base_url = '' %}
{% endif %}
{% if base_url == base_url_relative %}
{% set feed_url = base_url~'/'~page.slug %}
{% endif %}
{% block content %}
{# {{ page.content }}#}
{# ######################################################################### #}
<section id="posts" class="posts posts-list clearfix">
<h1 class="blog-list clearfix">
<style>
.wrapper {
margin: 0 0rem;
}
</style>
{% for child in collection %}
{% set pageblog = child %}
{#=========================================================================================#}
<div class="blog-box row">
<div class="col-md-5">
{% set image = pageblog.media.images|first.cropZoom(400,250) %}
<img src="{{ image.url }}" alt="{{ pageblog.title }}" class="img-fluid">
</div>
<div class="blog-meta big-meta col-md-7">
<h4>{{ pageblog.title }}</h4>
</div>
</div>
<hr class="invis">
{# Указываем правило для вставки в массиве#}
{# Вставляем блок через каждых 3 элемента в цикле перебора#}
{% if loop.index % 3 == 0 %}
{# Блок для вставки в переборе #}
<h1>Привет 2</h1>
<h2>{{ loop.index }}</h2>
<h2>До конца осталось {{ loop.revindex }}</h2>
{% endif %}
{#=========================================================================================#}
{% endfor %}
</h1>
</section><!-- end blog-list -->
{# ######################################################################### #}
Основная часть кода отвеающая за вставку блока в цикле находится здесь:
{# Указываем правило для вставки в массиве#}
{# Вставляем блок через каждых 3 элемента в цикле перебора#}
{% if loop.index % 3 == 0 %}
{# Блок для вставки в переборе #}
<h1>Привет 2</h1>
<h2>{{ loop.index }}</h2>
<h2>До конца осталось {{ loop.revindex }}</h2>
{% endif %}
Вывод рекламного блока ADSence
ПРИ ОТЛАДКЕ ОТКЛЮЧИ ADDBLOCK!!!!!!!!!
Для реализации нужен плагин: https://github.com/clemdesign/grav-plugin-adsense
Далее добавляем в цикл данный код:
{# Если плагин AdSence включен отобразим рекламный блок #}
{% if config.plugins['adsense'].enabled %}
{# Указываем правило для вставки в массиве#}
{# Вставляем блок через каждых 3 элемента в цикле перебора#}
{% if loop.index % 3 == 0 %}
{# Блок для вставки в переборе #}
<style>
img.sandy {
min-width: 100%;
}
</style>
{% include 'partials/adsense/adsense-horizontal.html.twig' %}
<hr class="invis">
{% endif %}
{% endif %}
Настройки плагина:
Для того что бы рекламный блок отображался в нем обязательно должен быть указан ca-pub
Особенности работы с циклом FOR
Райан Ирелан
Twig предлагает специальные loopпеременные, которые позволяют легко узнать, к какой итерации for-loop, например, мы применяем. Это позволяет нам делать разные стили, разметку или другие условные вещи.
В Craft мы обычно перебираем записи нашего раздела следующим образом:
{% for entry in craft.entries.section('news') %}
{{ entry.title }}
{% endfor %}
Twig просматривает данные Craft и отображает каждую запись, полученную из раздела News.
Чтобы проверить, является ли это первой итерацией цикла, мы можем использовать условное выражение и проверить loop.firstпеременную из Twig.
Условное в Craft позволяет нам контролировать поток в шаблоне. Мы используем ifтег в Twig, чтобы это произошло. Мы можем проверить, является ли выражение истинным:
{% for entry in craft.entries.section('news') %}
{% if loop.first %}
First!
{% endif %}
{{ entry.title }}
{% endfor %}
В этом примере мы проверяем, является ли loop.firstвыражение истинным. loop.firstявляется одной из шести специальных переменных цикла, доступных нам от Twig (не Craft). Это оценивает true, если это первая итерация for-loop. В противном случае это будет оцениваться как ложное.
Мы не ограничены только loop.firstпеременной. Мы можем проверить текущий счетчик, сколько итераций, пока мы не достигнем конца цикла (очень удобно!), И многое другое.
Вот другие варианты loop:
- loop.index - Это счетчик текущей итерации, начиная с 1. Удобно, если вы привыкли начинать с 1 для счетчиков или вам нужно вывести его для чего-то вроде строк таблицы.
- loop.index0- Добавьте 0, и вы получите счет текущей итерации, начиная с 0, а не с 1. Это более традиционный способ подсчета итераций и того, как вы хотите использовать его для for-loops.
- loop.revindex- Сколько петель до конца? Эта переменная выведет количество оставшихся итераций, начиная с 1. Если вы хотите начать с нуля, используйте следующую переменную.
- loop.revindex0 - То же, что и предыдущая переменная, но начинается с 0 вместо 1.
- loop.last- Хороший способ узнать, что твой цикл подходит к концу. Может быть, вы хотите закрыть тег HTML или сделать что-то еще до окончания цикла. loop.lastоценивает true, если это последняя итерация цикла.
- loop.length- Сколько предметов в цикле? Эта переменная выведет общее количество элементов, чтобы вы знали общее количество циклов, которые произойдут.
С loopвариациями переменных вам необходимо настроить счетчик при переборе наборов данных в Twig. Даже если вам нужно начать с 0 или 1, loopвы покрыли.
Готовы узнать больше о Craft CMS?
My Craft Starter Pack - это 4,5 часа обучения, которое поможет вам начать создавать сайты с Craft для себя, своей компании или своих клиентов.