Демоверсия системы Rapido.su
Администраторам Оптимизаторам Разработчикам Rapido.SDK Новости

Главная  Разработчикам  Твики, трюки, советы  Ссылки на соцсети

Ссылки на соцсети

Частая задача при создании сайта это вывод ссылок на социальные сети. Рассмотрим подробнее как это сделать, не изобретая велосипед и не создавая для этого лишний модуль с таблицей в БД.

Шаг 1: Создать опцию в настройках сайта.

Для этого открываем в Rapido.SDK настройки сайта, нажимаем "добавить настройку" и выбираем шаблон "socials".

Шаг 2: Сконфигурировать социальные сети.

Конфигурация производится в поле настройки "socials". В этом поле каждая строка это одна соцсеть. В строке, разделением точкой с запятой, указываются название соцсети и ссылка на группу/канал/аккаунт в соцсети.  Создаваемая по-умолчанию конфигурация позволяет получить представление о том, как составлять конфигурацию:

vk;https://vk.com
facebook;https://facebook.com
odnoklassniki;https://ok.ru/
instagram;https://www.instagram.com/
twitter;https://twitter.com

Позже администраторы смогут править ссылки на свои соцсети, а так же добавлять и удалять соцсети. Названия соцсетей превратятся в классы для иконок в коде сайта, поэтому если вы используете иконки fontawesome, называйте соцсети в соответствии с названиями иконок в наборе http://fontawesome.io/icons/#brand

Шаг 3. Скачать библиотеку иконок.

Этот шаг не обязателен, если вы будете использовать собственные иконки. Иконки fontawesome можно скачать по ссылке http://fontawesome.io/assets/font-awesome-4.7.0.zip, этот же архив можно загрузить в папку /tpl/default/ и распаковать его там средствами Rapido.SDK. В архиве много лишнего, стоит подчистить каталог, оставив в нем только папку css и fonts.

Шаг 4. Подключить иконки к шаблону.

Этот шаг также не обязателен в случае использования своих иконок. Для подключения просто пропишите подключение css файла в tpl_async.js следующим образом:

loadCss(tplPath + "fa/css/font-awesome.min.css");

Шаг 5. Подключить html-шаблон.

В шаблоне сайта, как правило это делается в футере, пропишите подключение файла-шаблона {FILE "socials.htm"}. Исходный код этого файла по-умолчанию такой:

<!-- BEGIN: socials -->
<div class="socials">
	<!-- BEGIN: i -->
	<a href="{f.url}" target="_blank"><span class="socials-wrap fa-stack fa-lg">
		<i class="fa fa-circle fa-stack-2x"></i>
		<i class="socials-icon fa fa-{f.net} fa-stack-1x fa-inverse"></i>
	</span></a>
	<!-- END: i -->
</div>
<!-- END: socials -->

 Классы fa- это зарезервированные классы для fontawesome, а классы socials- вы можете свободно применять для кастомизации в less/css

Если у вас более старая версия Rapido.CMS, и в ней нет обработки поля socials по-умолчанию, то добавьте в файл tpl.php функцию и ее вызов:

parseSocials("page.socials", $opt['socials'], $xtpl);

/**
 * Парсит блок с сылками на социальные сети
 *
 * @param string $block Xtpl-блок, который содержит ссылки на соцсети
 * @param string $settings Строка с конфигурацией.
 * @param pointer $xtpl Ссылка на управляющий xtpl-объект
 */
function parseSocials( $block, $settings, &$xtpl ){
	if( !$settings ){
		return false;
	}
	$settings = explode("\n", $settings);
	foreach( $settings as $i ){
		$f = array();
		list( $f['net'], $f['url'] ) = explode(";", trim($i));
		$xtpl->insert_loop("{$block}.i", "f", $f);
	}
	$xtpl->parse( $block );
}