Jump to content

Обновление тем на IPS 4.2

Разработчики постарались максимально возможно сохранить совместимость тем для Invision Community 4.1 и 4.2. Однако, учитывая множество изменений в темах и новые функции в 4.2, вам придётся внести некоторые изменения вручную.  

Обновление шаблонов темы

Самый простой и эффективный способ обновления шаблонов темы для совместимости с 4.2 это простой возврат его к исходному состоянию (при просмотре шаблона темы в редакторе, нажмите кнопку "Оригинал"). Это приведёт к сбросу всех его модификаций и проблем с устареванием этого шаблона. Соответственно после этого вы должны снова внести все изменения в данный шаблон.

Другой способ - вручную обновить тем шаблоны, которые вызывают ошибки. Это не совсем правильно, т.к. перед этим необходимо выяснить причину ошибки и убедиться, что после внесения изменений в шаблон ошибка полностью устранена.

Следуйте данному руководству

В этом руководстве описаны основные области, которые должны быть обновлены для достижения совместимости. Однако оно не является полным, т.к. в зависимости от степени кастомизации вашей темы, могут быть не описанные здесь правки. Кроме того, в этом руководстве не описаны изменения для обновления ваших шаблонов к новым возможностям 4.2. Цель руководства попытаться избежать фатальных ошибок и визуальных проблем после обновления. Мы по-прежнему рекомендуем следовать сравнению всех исправленных вами шаблонов, чтобы внести изменения. 

Однако, перечисленные в данном руководстве области позволят минимизировать ошибки в последствии обновления.

Изменение структуры основной навигации

HTML структура бара основной навигации была немного переработана, чтобы позволить ему быть в полную ширину страницы. Тег <nav> больше не содержит класс ipsLayout_container. Вместо него данный класс приобретает элемент ipsNavBar_primary. Таким образом:

Отрывок кода шаблона 4.1.19:

{{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}
	<nav class='ipsLayout_container' data-controller='core.front.core.navBar'>
		<div class='ipsNavBar_primary {{if !count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} ipsClearfix'>

Отрывок кода шаблона 4.2:

{{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}
	<nav data-controller='core.front.core.navBar' class='{{if !count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}}'>
			<div class='ipsLayout_container ipsNavBar_primary {{if !count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} ipsClearfix'>

Не забывайте, что это отрывок кода, соответственно закрывающие теги тоже присутствуют.

Бар основной навигации также имеет отрицательное верхнее значение в 4.2, чтобы способствовать новому позиционированию. Таким образом, в кастомных темах это может привести к завышенному расположению навигационного бара, чем там, где он должен быть. Если в вашей теме наблюдается данная проблема, вы можете сбросить верхнее позиционирование:

.ipsNavBar_primary {
	top: 0;
}

Ну и наконец, в стандартной теме установлен фон к #ipsLayout_header (используется настройка темы main_nav_tab). На кастомных темах это может вызвать цветной блок, отображающийся за навигационным баром. Вы можете исправить это путём добавления этого CSS:

#ipsLayout_header nav {
	background: transparent;
}

Нет цвета у фона контента

Стандартная тема 4.2 более не имеет фонового цвета у элемента #ipsLayout_contentWrapper. Если ваша тема использует цветной фон страниц и опирается на фон contentWrapper, вы можете добавить цвет для фона обратно, путём добавления стиля в ваш custom.css файл:

#ipsLayout_contentWrapper {
	background-color: #ffffff;
}

Нет внешнего отступа у #ipsLayout_mainArea, бокового блока или хлебных крошек

Если вы столкнулись с проблемой выше с #ipsLayout_contentWrapper, скорее всего, у вас также возникнет и эта проблема. Стандартная тема 4.2 больше не включает отступы у #ipsLayout_mainArea, элементов в боковом блоке, или хлебных крошек. Если вы применили фоновый цвет к #ipsLayout_contentWrapper, вы, скорее всего, увидите контент, касающийся сторон фоновой области. Вы можете изменить это путём добавления отступов:

#ipsLayout_mainArea {
 	padding: 0 20px;
}
.ipsBreadcrumb {
	margin-left: 20px;
	margin-right: 20px;
}
#ipsLayout_sidebar {
	padding-left: 0;
  	padding-right: 0;
}
	html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarleft,
	html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarright {
		padding-left: 20px;
	}
	html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarright,
	html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarleft {
		padding-right: 20px;
	}

По умолчанию цвет фона основной навигации не задан

Из-за нового стиля заголовка и навигации в 4.2, бар основной навигации больше не использует цвет фона, определённого в настройках темы (вместо этого он прозрачный, а цвет заголовка окружает навигацию). Если ваш дизайн темы зависит от этого цвета фона, вы можете добавить его обратно с помощью CSS:

.ipsNavBar_primary {
	background: {theme="main_nav"};
	padding: 5px 5px 40px 5px;
}

Необязательные заголовки теперь скрыты по умолчанию

Чтобы скрыть лишние элементы дизайна со страницы, 4.2 скрывает множество заголовков (так же называемые 'maintitle'), которые расположены над таблицами/областями контента. Почти по всех случаях разработчики оставили разметку для этих заголовков в коде темы, что позволяет вам включить их отображение, если в этом есть необходимость. 

.ipsApp .ipsType_sectionTitle.ipsHide {
	display: block;
}

Изменён параметр подключении шаблона хлебных крошек

Мы рассмотрим изменённые параметры в следующей области, но мы должны рассмотреть важный параметр в шаблоне хлебных крошек, т.к. он встречается в глобальном шаблоне globalTemplate. Ранее первым параметром шаблона было boolean значение. Это изменено, соответсвенно вам нужно обновить все вызовы данного шаблона с:

{template="breadcrumb" app="core" group="global" params="FALSE, 'top'"}

на

{template="breadcrumb" app="core" group="global" params="'top'"}

Тоже самое применено для второго вызова хлебных крошек в этом шаблоне, который отображает нижние хлебные крошки - просто удалите первый параметр.

Изменена логика ссылки Обратная связь

Если ваша тема имеет изменённый шаблон футера, вы, скорее всего, получите внутреннюю ошибку на каждой странице вашего сообщества из-за вызова метода, который больше не существует. Этот вызов оборачивает ссылку Обратная связь и проверяет разрешение пользователей. Вы должны обновить код:

{{if \IPS\core\modules\front\contact\contact::canUseContactUs() and !( \IPS\Dispatcher::i()->application->directory == 'core' and \IPS\Dispatcher::i()->module and \IPS\Dispatcher::i()->module->key == 'contact' )}}

должен быть:

{{if \IPS\Member::loggedIn()->canUseContactUs() and !( \IPS\Dispatcher::i()->application->directory == 'core' and \IPS\Dispatcher::i()->module and \IPS\Dispatcher::i()->module->key == 'contact' )}}

Обратите внимание на новый метод canUseContactUs.

Изменены параметры шаблонов

Некоторые шаблоны имеют новые или изменённые параметры, передаваемые из PHP фреймворка. Проверьте список шаблонов ниже, если вы изменили один из этих шаблонов, вы должны вручную изменить параметры шаблона, чтобы избежать фатальных ошибок. Это делается путём перехода в окно редактирования кода шаблона и нажатием на кнопку "Параметры". Возможно, вам также потребуется обновить контент шаблона, чтобы использовать новую переменную.

  • Core > Global > Forms > address;
  • Core > Front > Forms > editContentForm;
  • Core > Global > Forms > editorAttachmentsPlaceholder;
  • Core > Global > Forms > node;
  • Core > Global > Forms > nodeCascade;
  • Core > Front > Global > breadcrumb;
  • Core > Global > Global > pollForm;
  • Core > Front > Global > reputationMini;
  • Core > Global > Login > mfaRecovery;
  • Core > Front > System > searchResult;
  • Core > Front > System > settingsOverview;
  • Core > Front > System > settingsProfileSync;
  • Forums > Front > Forums > forumPasswordPopup;
  • Forums > Front > Index > indexButtons;
  • Blog > Front > Submit > submit;
  • Calendar > Front > Submit > submitPage;
  • Calendar > Front > View > view;
  • Gallery > Front > Browse > album;
  • Gallery > Front > Global > embedAlbums;
  • Nexus > Front > Global > embedProduct;
  • Nexus > Admin > Support > request.

В репутацию добавлены реакции

Invision Community 4.2 включает в себя Реакции как обновление и дополнение к текущей системы репутации. В результате этого появились новые дополнения к шаблонам и устаревшие методы, влияющие не темы. Это изменение повлияет на любой шаблона, вызывающий метод $content->reputation(), включая:

  • Forums > Front > Topics > postContainer;
  • Forums > Front > Topics > post;
  • Blog > Front > Widgets > blogCommentFeed;
  • Pages > Display > Database > comment;
  • Pages > Display > Database > commentContainer;
  • Core > Front > Global > comment;
  • Core > Front > Global > commentContainer;
  • Core > Front > Statuses > statusReply;
  • Downloads > Front > Widgets > downloadsCommentFeed.

Эти шаблоны необходимо обновить для корректной проверки/отображения реакций на контент с использованием нового метода. Разработчики добавили обратную совместимость для метода reputation(), где это возможно, чтобы предотвратить ошибки. Однако, старый метод reputation() уже устарел и будет удалён в следующем обновлении, поэтому вам необходимо при первой же возможности обновить любые пользовательские шаблоны, вызывающие метод reputation(). 

В дополнение к этому новому методу, изменился способ проверки шаблонов, в которых поддерживается репутация/реакции, т.к. реакции используют PHP трейты.

Вместо такого:

{{if $comment instanceof \IPS\Content\Reputation and settings.reputation_enabled}}
    {template="reputation" group="global" app="core" params="$comment, 'ipsPos_right ipsResponsive_noFloat'"}
{{endif}}

Код теперь выглядит так:

{{if \IPS\IPS::classUsesTrait( $comment, 'IPS\Content\Reactable' ) and settings.reputation_enabled}}
    {template="reputation" group="global" app="core" params="$comment"}
{{endif}}

Если вы определили, что один из ваших пользовательских шаблонов требует обновления в связи с использованием реакций, мы рекомендуем воспользоваться инструментом сравнения шаблонов, чтобы корректно применить новый код.

Новые настройки тем

В 4.2 добавлены некоторые новые настройки. Хотя они не должны оказать существенное влияние на существующие пользовательские темы, вы можете увидеть, что добавились некоторые цвета, не вписывающиеся в ваш дизайн темы, т.к. они контролируются новыми настройками темы. Вы можете просмотреть цвета, установленные этими настройками, и настроить их в соответствии с вашими требованиями.

  • тег (цвет фона тега);
  • префикс (цвет фона префикса);
  • widget_title_font (цвет текста строки заголовка виджетов);
  • comment_count (фоновый цвет кол-ва комментариев, иногда показываемый вместе с контентом);
  • comment_count_font (цвет текста выше);
  • featured (цвет, используемый для определения рекомендуемого / популярного контента);
  • pagination_active (цвет фона активной страницы в постраничной навигации);
  • link_button (обводка и цвет текста кнопок ссылок).

Просмотр форума сеткой теперь не настройка темы

В 4.1 и ниже, опция просмотра форума в виде сетки была выполнена в виде отдельной настройки в теме. В 4.2 теперь это системная настройка, которая связана с новым Отзывчивым видом форума. Если вы делали проверку на просмотр сеткой в шаблонах темы, вы должны обновить конструкцию проверки. Вместо:

{{if theme.forum_layout === 'grid'}}
	//....

нужно

{{if \IPS\forums\Forum::getMemberView() === 'grid'}}
	//...

Админцентр теперь менее зависит от пользовательской темы

Разработчики решили уйти от концепции темизации админцентра на равне с темизацией сайта. Это значит, что в 4.2 админцентр по-прежнему загружает тему в том же порядке, что был в 4.1, однако теперь не может быть изменён. - многие области темы админцентра теперь жёстко закодированы в своих собственных CSS файлах и не будут наследовать настройки темы сайта. В следующих версиях админцентр нельзя будет кастомизировать, его тема будет использоваться как есть на всех сайтах.