S2, Expressive и немного занудства
Этот туториал объясняет тем, кто новичок в общении с S2, как создаются собственные темы и слои и для чего они используются. Я не буду вдаваться в детали кода самого S2. Внимание, от вас требуется платный или спонсируемый аккаунт.
1. Основы
Итак, S2 - это язык (назовем его так), на котором создаются страницы LiveJournal. Это тот же HTML, который можно вызвать, кликнув правой кнопкой по странице и выбрав "Просмотр кода", он изменяет внешний вид страницы. Структуру страницы мы будем называть "Слой" (layer). Слой - это тот же Expressive, Component, Flexible Squares и так далее.
Слои имеют Темы (themes): для Expressive примерами тем являются Hills Green, Urban Sunset, проч. Если у вас платный или постоянный аккаунт, вы можете сами создавать слои и темы, но для этого придется поковыряться в S2 и хоть как-то в нем разобраться. S2 схож с язками программирования, такими, как PHP и Java. В основе своей код состоит из переменных (цвета, названия ссылок) и функций. Но об этом более подробно расскажут разработчики LJ, мы не будем вдаваться в детали.
2. Какая разница между Своими Темами и Своими Слоями?
Собственный слой - тот, что вы создаете на примере уже имеющегося слоя жж, так сказать, на его каркасе. Когда вы создаете собственный слой, он пуст, в нем нет кодов - вы можете переделать его так, что он не будет похож ни на один другой журнал.
Преимущества собственного слоя в том, что туда можно копировать только нужные куски кода из уже существующего слоя (Expressive), если нужно, и преобразовывать их. Таким образом, ненужные элементы просто отпадут.
Собственная тема создается на уже имеющемся слое. То есть это Expressive, но вы можете добавить свои фичи, используя S2, и изменить внешний вид: поменять местами ссылки, переписать их названия, заменить фон и так далее. Исходный код лежит тем здесь - кликаете на стиль, а потом на его темы, выбираете Syntax Highlighted или Raw Source Code, чтоб посмотреть, как они сделаны.
Словом, основное различие между слоем и темой в том, что в первом случае у вас чистый лист и возможность работать, как хочется; во втором - можно просто раскрасить имеющийся набросок.
Разобрались? Поехали дальше.
3. Создаем свою тему
Чтобы создать свою тему идем сюда: Edit Journal Styles - Advanced - Your Layers.
Прокручиваем страницу, находим Create Layout Specific Layer. Выбираем Theme из выпадающего меню и Expressive (если мы меняем тему Expressive) из Layout menu, нажимаем Create. Теперь у вас есть своя тема, ура. Теперь она должна появиться в списке тем Expressive. Безымянная пока. Кликаем на Edit и попадаем на страницу изменения темы.
Теперь вы видите три окна. Левое - это перечень функций, классов и вариант для навигации. Можете пока не трогать. Нижнее окно показывает, есть ли ошибки. Главное окно - оно самое, туда мы пишем код в S2. Обратите внимание, что порядок, в котором вы пишете код, ни на что не влияет.
Есть несколько вещей, которые вам надо вписать прежде всего. Во-первых, задайте имя.
layerinfo "name" = "Название Темы на английском";
Во-вторых, вам понадобится указать цвет темы по дефолту. Например, раньше вы использовали Urban Green, сейчас пишете:
set base_theme = "urban-green";
После того, как изменения проведены, все, что вы хотели, вписано, нажимайте на Save & Compile в левой верхней части главного окна и проверьте, нет ли ошибок (об этом, если помните, написано в нижнем окне).
4. Создаем собственный слой
Действия во многом похожи на создание темы. Идем Edit Journal Styles - Advanced - Your Layers.
Прокручиваем страницу вниз до слов Create Top Level Layer и выбираем layer из выпадающего меню. Он должен появиться в списке, безымянный. Выбираем его, кликаем на Edit и редактируем. Снова три окна. Те же самые и с теми же функциями.
Задайте название слою.
Если вы хорошо разбираетесь в S2, то это ваш шанс сделать жж неповторимым. Для остальных хотелось бы сказать: оно вам надо? Наши англоязычные оптимисты говорят, что свернули головы, пока довели дизайн жж до конца.
Для среднестатистического юзера лучший способ создать свой слой - это копировать куски уже существующих слоев (Expressive). Исходники можно найти здесь.
Кликаете на стиль, который хотите скопировать, потом на Syntax Highlighted или Raw Source Code - и смотрите, что там и как. Copy-paste в свой слой.
Когда вы сделали все, что хотели, измените название темы, как было описано выше, а также имя автора. Выглядит оно так:
layerinfo author_name = "Author Name";
Укажите имя автора, чьи куски кода вы брали - он старался все-таки.
Также, если у вас в коде есть следующие строки, удалите их:
layerinfo redist_uniq = "voxhtml/layout";
layerinfo previews = "voxhtml/layout.jpg";
Нажимаем Save & Compile, смотрим ошибки...
5. Используем созданные темы и слои
Дело за малым. Идем на страницу изменения оформления, находим Edit Journal Style - Look And Feel. Если вы создавали тему, убедитесь, что выбран нужный слой под базу. Выберите свою Тему из имеющихся в выпадающем меню.
Если вы создавали Слой, проделайте то же с выпадающим меню слоев.
Сохраните настройки.
Ура.
Документация, откуда можно черпать вдохновение и знания:
Existing Layers' Source Code
S2 Code Documentation
Статья написана не мной, а nimoloth,
1. Основы
Итак, S2 - это язык (назовем его так), на котором создаются страницы LiveJournal. Это тот же HTML, который можно вызвать, кликнув правой кнопкой по странице и выбрав "Просмотр кода", он изменяет внешний вид страницы. Структуру страницы мы будем называть "Слой" (layer). Слой - это тот же Expressive, Component, Flexible Squares и так далее.
Слои имеют Темы (themes): для Expressive примерами тем являются Hills Green, Urban Sunset, проч. Если у вас платный или постоянный аккаунт, вы можете сами создавать слои и темы, но для этого придется поковыряться в S2 и хоть как-то в нем разобраться. S2 схож с язками программирования, такими, как PHP и Java. В основе своей код состоит из переменных (цвета, названия ссылок) и функций. Но об этом более подробно расскажут разработчики LJ, мы не будем вдаваться в детали.
2. Какая разница между Своими Темами и Своими Слоями?
Собственный слой - тот, что вы создаете на примере уже имеющегося слоя жж, так сказать, на его каркасе. Когда вы создаете собственный слой, он пуст, в нем нет кодов - вы можете переделать его так, что он не будет похож ни на один другой журнал.
Преимущества собственного слоя в том, что туда можно копировать только нужные куски кода из уже существующего слоя (Expressive), если нужно, и преобразовывать их. Таким образом, ненужные элементы просто отпадут.
Собственная тема создается на уже имеющемся слое. То есть это Expressive, но вы можете добавить свои фичи, используя S2, и изменить внешний вид: поменять местами ссылки, переписать их названия, заменить фон и так далее. Исходный код лежит тем здесь - кликаете на стиль, а потом на его темы, выбираете Syntax Highlighted или Raw Source Code, чтоб посмотреть, как они сделаны.
Словом, основное различие между слоем и темой в том, что в первом случае у вас чистый лист и возможность работать, как хочется; во втором - можно просто раскрасить имеющийся набросок.
Разобрались? Поехали дальше.
3. Создаем свою тему
Чтобы создать свою тему идем сюда: Edit Journal Styles - Advanced - Your Layers.
Прокручиваем страницу, находим Create Layout Specific Layer. Выбираем Theme из выпадающего меню и Expressive (если мы меняем тему Expressive) из Layout menu, нажимаем Create. Теперь у вас есть своя тема, ура. Теперь она должна появиться в списке тем Expressive. Безымянная пока. Кликаем на Edit и попадаем на страницу изменения темы.
Теперь вы видите три окна. Левое - это перечень функций, классов и вариант для навигации. Можете пока не трогать. Нижнее окно показывает, есть ли ошибки. Главное окно - оно самое, туда мы пишем код в S2. Обратите внимание, что порядок, в котором вы пишете код, ни на что не влияет.
Есть несколько вещей, которые вам надо вписать прежде всего. Во-первых, задайте имя.
layerinfo "name" = "Название Темы на английском";
Во-вторых, вам понадобится указать цвет темы по дефолту. Например, раньше вы использовали Urban Green, сейчас пишете:
set base_theme = "urban-green";
После того, как изменения проведены, все, что вы хотели, вписано, нажимайте на Save & Compile в левой верхней части главного окна и проверьте, нет ли ошибок (об этом, если помните, написано в нижнем окне).
4. Создаем собственный слой
Действия во многом похожи на создание темы. Идем Edit Journal Styles - Advanced - Your Layers.
Прокручиваем страницу вниз до слов Create Top Level Layer и выбираем layer из выпадающего меню. Он должен появиться в списке, безымянный. Выбираем его, кликаем на Edit и редактируем. Снова три окна. Те же самые и с теми же функциями.
Задайте название слою.
Если вы хорошо разбираетесь в S2, то это ваш шанс сделать жж неповторимым. Для остальных хотелось бы сказать: оно вам надо? Наши англоязычные оптимисты говорят, что свернули головы, пока довели дизайн жж до конца.
Для среднестатистического юзера лучший способ создать свой слой - это копировать куски уже существующих слоев (Expressive). Исходники можно найти здесь.
Кликаете на стиль, который хотите скопировать, потом на Syntax Highlighted или Raw Source Code - и смотрите, что там и как. Copy-paste в свой слой.
Когда вы сделали все, что хотели, измените название темы, как было описано выше, а также имя автора. Выглядит оно так:
layerinfo author_name = "Author Name";
Укажите имя автора, чьи куски кода вы брали - он старался все-таки.
Также, если у вас в коде есть следующие строки, удалите их:
layerinfo redist_uniq = "voxhtml/layout";
layerinfo previews = "voxhtml/layout.jpg";
Нажимаем Save & Compile, смотрим ошибки...
5. Используем созданные темы и слои
Дело за малым. Идем на страницу изменения оформления, находим Edit Journal Style - Look And Feel. Если вы создавали тему, убедитесь, что выбран нужный слой под базу. Выберите свою Тему из имеющихся в выпадающем меню.
Если вы создавали Слой, проделайте то же с выпадающим меню слоев.
Сохраните настройки.
Ура.
Документация, откуда можно черпать вдохновение и знания:
Existing Layers' Source Code
S2 Code Documentation
Статья написана не мной, а nimoloth,