Примеры работы со стилями

Навигация с помощью стрелок

Эта возможность уже включена в стиль по умолчанию zeta, приведенное описание преследует методические цели.

В шаблонах S2 есть метка , предназначенная для вставки в секцию <head> тегов <link> со ссылками на соседние страницы. Например, на странице http://example.com/blog/2011/08/ теги могут иметь такой вид:

<link rel="up" href="/blog/2011/" />
<link rel="prev" href="/blog/2011/07/" />
<link rel="next" href="/blog/2011/09/" />

Такие ссылки не отображаются браузерами (хотя Опера использует их и активирует соответствующие кнопки на панели навигации).

С помощью тегов <link> легко назначить клавиатурные комбинации Ctrl + ←, Ctrl + → и Ctrl + ↑ на переходы между страницами. Эта идея описана технологами Студии Лебедева. Вы можете взять адаптированный вариант скрипта и добавить его в имеющийся js-файл или поместить в новый. После этого клавиатурные сокращения заработают.

(function ()
{
	var focusInInput = false, upLink, nextLink, prevLink, started = false;

	function NavigateThrough (event)
	{
		if (window.event)
			event = window.event;

		if (!(event.ctrlKey || event.altKey) || focusInInput)
			return;

		var link = false;
		switch (event.keyCode ? event.keyCode : event.which ? event.which : null)
		{
			case 0x27:
				link = nextLink;
				break;
			case 0x25:
				link = prevLink;
				break;
			case 0x26:
				link = upLink;
				break;
		}

		if (link)
		{
			document.location = link;
			if (window.event)
				window.event.returnValue = false;
			if (event.preventDefault)
				event.preventDefault();
		}
	}

	function Init()
	{
		if (started || !document.getElementsByTagName || !document.getElementById)
			return;

		started = true;
		var e, i, ae = document.getElementsByTagName('LINK');
		for (i = ae.length; i-- ;)
		{
			e = ae[i];
			if (e.rel == 'next')
				nextLink = e.href;
			if (e.rel == 'prev')
				prevLink = e.href;
			if (e.rel == 'up')
				upLink = e.href;
		}

		if (bIE)
		{
			document.attachEvent('onkeydown', NavigateThrough);

			ae = document.getElementsByTagName('INPUT');
			for (i = ae.length; i-- ;)
			{
				e = ae[i];
				if (e.type == 'text' || e.type == 'search')
				{
					e.attachEvent('onfocus', function () {focusInInput = true});
					e.attachEvent('onblur', function () {focusInInput = false});
				}
			}

			ae = document.getElementsByTagName('TEXTAREA');
			for (i = ae.length; i-- ;)
			{
				e = ae[i];
				e.attachEvent('onfocus', function () {focusInInput = true});
				e.attachEvent('onblur', function () {focusInInput = false});
			}
		}
		if (bFF)
		{
			document.addEventListener('keydown', NavigateThrough, true);

			ae = document.getElementsByTagName('INPUT');
			for (i = ae.length; i-- ;)
			{
				e = ae[i];
				if (e.type == 'text' || e.type == 'search')
				{
					e.addEventListener('focus', function () {focusInInput = true}, true);
					e.addEventListener('blur', function () {focusInInput = false}, true);
				}
			}

			ae = document.getElementsByTagName('TEXTAREA');
			for (i = ae.length; i-- ;)
			{
				e = ae[i];
				e.addEventListener('focus', function () {focusInInput = true}, true);
				e.addEventListener('blur', function () {focusInInput = false}, true);
			}
		}
	}

	var bFF = document.addEventListener != null;
	var bIE = !bFF && document.attachEvent != null;

	if (bIE)
		attachEvent('onload', Init);
	if (bFF)
	{
		document.addEventListener('DOMContentLoaded', Init, false);
		addEventListener('load', Init, true);
	}

})();

Я опишу процесс добавления на сайт кнопок, генерируемых сервисом share42.com. Идем туда и выбираем кнопки нескольких самых популярных социальных сетей. Указываем кодировку UTF-8, горизонтальное расположение кнопок и скачиваем архив. В архиве лежит небольшой скрипт share42.js, добавляющий кнопки, и иконки icons.png. Их нужно добавить в ваш стиль. Я расскажу, как это делается, на примере стандартного стиля zeta.

Сделаем новый стиль на основе zeta, чтобы не потерять изменения при обновлении движка. Копируем всё содержимое папки _styles/zeta в _styles/my_zeta и переименовываем файл _styles/my_zeta/zeta.php в _styles/my_zeta/my_zeta.php.
Стиль zeta не переопределяет стандартные шаблоны. Для переопределения достаточно их скопировать из _include/templates в _styles/my_zeta/templates.
Копируем файл icons.png из архива в папку _styles/my_zeta.

Открываем файл _styles/my_zeta/templates/site.php в текстовом редакторе и перед меткой  добавляем примерно такой код:

<script type="text/javascript">
function share42(f,u,t){if(!u)u=location.href;if(!t)t=document.title;u=encodeURIComponent(u);t=encodeURIComponent(t);var s=new Array('"http://www.facebook.com/sharer.php?u='+u+'&t='+t+'" title="Поделиться в Facebook"','"http://www.livejournal.com/update.bml?event='+u+'&subject='+t+'" title="Опубликовать в LiveJournal"','"http://twitter.com/share?text='+t+'&url='+u+'" title="Добавить в Twitter"','"#" onclick="window.open(\'http://vkontakte.ru/share.php?url='+u+'\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=554, height=421, toolbar=0, status=0\');return false" title="Поделиться В Контакте"');for(i=0;i<s.length;i++)document.write('<a rel="nofollow" style="display:inline-block;width:16px;height:16px;margin:0 7px 7px 0;background:url('+f+'icons.png) -'+16*i+'px 0" href='+s[i]+' target="_blank"></a>')}
share42('/_styles/my_zeta/');
</script>

Первую сточку с определением функции share42 нужно взять из файла share42.js в архиве, а во второй нужно указать путь к файлу icons.png относительно корня сайта (выше я разместил код, который получился у меня). Не забывайте, что файл нужно сохранить в кодировке UTF-8 без метки порядка байт (BOM). Если редактор сохранит файл в другой кодировке, сайт работать не будет.

Заходим в панель управления и изменяем стиль с zeta на my_zeta. На страницах с шаблоном site.php должны появиться социокнопки.

Вы можете добавить социокнопки в нужные места других шаблонов, например, на главную страницу. Если в вашем стиле уже есть js-файлы, перенесите туда определение функции share42 из шаблонов.

Это зашифрованы не ссылки на картинки, а непосредственно сами картинки. Сделано для уменьшения накладных расходов, связанных с дополнительными подключениями к серверу.

Примеры работы со стилями

Навигация с помощью стрелок

Кнопки социальных сетей

Комментарии