Про слои
Сегодня речь пойдет про слои, которые предоставляют обширные возможности в оформлении журналов и доступны только пользователям платных аккаунтов.
ВНИМАНИЕ
Урок для продвинутых пользователей.
Подразумевается, что вы знакомы с Html и Css и вас не пугает программный код. В идеале иметь хотя бы небольшие навыки программирования.
Для экспериментов обязательно иметь платный аккаунт (можно купить за 5$ на 2 месяца, если что).
Итак, слои.
Какие типы слоев существуют?
Core - родительский слой.
- i18nc - языковые слои.
- layout - слои стилей.
- - i18n - языковые слои для слоев стилей.
- - theme - темы.
- - user - слои настроек.
Описание
Core - родительский слой для всех прочих типов слоев. Недоступен для редактирования, но содержит массу полезной информации
Содержание слоя
Код слоя
- i18nc - языковые слои, так же недоступны для редактирования. Они применяются, когда вы в настройках оформления выбираете язык для надписей в своем журнале.
Пример слоя
- layout - слои стилей. Именно они отвечают за разметку страниц и возможности стилей из конкретных групп. Всего таких слоев 35, интерес представляют лишь некоторые из них, потому что часть дублируется, а большинство безнадежно устарело. Minimalism, Expressive, Flexible Squares - это именно слои стилей.
Примеры:
* Expressive
* Minimalism
- - i18n - языковые слои для слоёв стилей. Также применяются при выборе языка в настройках оформления.
- - theme - конкретные темы. Именно их вы выбираете в каталоге стилей.
Пример слоя
- - user - слой, в котором хранятся ваши настройки дизайна. Практически всё, что вы меняете вот тут сохраняется в этом слое.
При каждом изменении настроек этот слой перезаписывается, поэтому никогда не храните там то, что не хотите потерять.
Как пользоваться слоями?
Общий принцип такой: вы создаете новый слой, копируете в него отдельные функции или слой стилей целиком, затем подключаете свой слой к журналу.
Все полезные ссылки есть на странице Расширенные возможности оформления
Для того, чтобы увидеть как это работает, давайте попробуем создать слой и добавить с его помощью на страницу какой-нибудь текст.
1. Зайдите в Ваши слои, найдите внизу страницы форму и выберите значения как на картинке:
Нажмите Создать
Затем в таблице ваших слоев найдите такую строчку:
Цифра будет другой, но тип слоя будет theme и слой пока не имеет названия.
2. Нажмите Правка, чтобы перейти к редактированию. Откроется вот такой редактор кода (поля будут пустыми):
Увеличить
Свежесозданный слой в поле для кода содержит только две строчки кода:
layerinfo "type" = "theme";
layerinfo "name" = "";
Это объявление типа темы и её название.
Назовите как-нибудь свою тему, а затем ниже вставьте такой код:
function Page::print () { var string lay = get_layout(); var string body_layout_class = body_class($lay); var string[] wide_themes = []; # These are the wide themes, which look better when the hbox_top is below the banner var bool print_below_banner = false; foreach var string theme ($wide_themes) { if ($theme == $*base_theme) { $print_below_banner = true; } } """http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" id="sixapart-standard"> """; $this->print_head(); $this->print_stylesheets(); print safe """""" + $this->title() + """ \n""";
"""
Это фунция для вывода страницы в Expressive - Page::print ().
Нажмите Save & Compile - она наверху, над полем для редактирования.
В поле с результатами компиляции должно появиться собщение Compiled with no errors. (как у меня на скриншоте).
3. Теперь можно посмотреть что у нас получилось. Зайдите в каталог стилей и в левой колонке найдите пункт Собственные слои.
В этом разделе должен находиться ваш новый слой с именем, которое вы ему задали:
Вы можете отважно применить слой к журналу (внимание!!! ваше текущее оформление слетит!) либо нажмите на лупу, чтобы посмотреть, что получилось, не надевая слой на журнал.
Должно получиться вот так:
на скрине только верхняя часть страницы
Это дефолтная тема Expressive, голубая с цветком, и текст, который я вставила в функцию вывода страницы - Привет, мир! : )
Если верх вашего журнала выглядит как на скриншоте - значит у вас всё получилось!
А дальше?
Теперь вы можете сами создавать и редактировать слои.
Вам следует выбрать удобный способ работы с ними.
Я показала как можно не трогая основной слой стиля отредактировать только нужную функцию. Это удобно, код короткий и в нём только то, что нужно вам.
Но есть ограничения: в слое типа theme нельзя создавать свои настройки (property) и функции.
Если нужны все возможности слоя стиля - вам потребуется скопировать его код целиком и вставить его в слой типа layout (слой макета).
Плюсы - вам не нужно будет копировать функции по одной, в вашем распоряжении сразу будут все возможности слоя.
Минусы - очень длинный код.
Где брать код?
Самому написать слой конечно можно, но смысла особого нет : ) Проще и удобнее скопировать код уже имеющегося слоя и перекраивать его.
Список всех слоев можно найти на странице Общедоступные слои
Как отлаживаться?
Если в коде есть проблема, при компиляции в нижнем поле вывалится ошибка, и слой не скомпилируется.
На вашем журнале это никак не отразится - последние изменения не применятся к журналу, пока слой не будет исправлен и скомпилирован без ошибок.
В сообщении об ошибке будет указана строка с проблемой.
Что почитать?
На русском:
Какие виды слоёв в системе стилей S2?
Как мне создать новый стиль S2?
На английском:
S2 Manual
Содержание Core
s2layers
Хозяйке на заметку
* Важно знать, что слои никак не затрагивают ваши записи - они лишь способ вывести их на страницу. Так что экспериментируйте сколько угодно - содержимое журнала не пострадает.
* Напоминаю, что вся приведённая информация рассчитана на достаточно продвинутых товарищей, которые не падают в обморок от простыней программного кода и могут хоть как-то в нём соориентироваться.
Пользуйтесь поиском по коду.
ВНИМАНИЕ
Урок для продвинутых пользователей.
Подразумевается, что вы знакомы с Html и Css и вас не пугает программный код. В идеале иметь хотя бы небольшие навыки программирования.
Для экспериментов обязательно иметь платный аккаунт (можно купить за 5$ на 2 месяца, если что).
Итак, слои.
Какие типы слоев существуют?
Core - родительский слой.
- i18nc - языковые слои.
- layout - слои стилей.
- - i18n - языковые слои для слоев стилей.
- - theme - темы.
- - user - слои настроек.
Описание
Core - родительский слой для всех прочих типов слоев. Недоступен для редактирования, но содержит массу полезной информации
Содержание слоя
Код слоя
- i18nc - языковые слои, так же недоступны для редактирования. Они применяются, когда вы в настройках оформления выбираете язык для надписей в своем журнале.
Пример слоя
- layout - слои стилей. Именно они отвечают за разметку страниц и возможности стилей из конкретных групп. Всего таких слоев 35, интерес представляют лишь некоторые из них, потому что часть дублируется, а большинство безнадежно устарело. Minimalism, Expressive, Flexible Squares - это именно слои стилей.
Примеры:
* Expressive
* Minimalism
- - i18n - языковые слои для слоёв стилей. Также применяются при выборе языка в настройках оформления.
- - theme - конкретные темы. Именно их вы выбираете в каталоге стилей.
Пример слоя
- - user - слой, в котором хранятся ваши настройки дизайна. Практически всё, что вы меняете вот тут сохраняется в этом слое.
При каждом изменении настроек этот слой перезаписывается, поэтому никогда не храните там то, что не хотите потерять.
Как пользоваться слоями?
Общий принцип такой: вы создаете новый слой, копируете в него отдельные функции или слой стилей целиком, затем подключаете свой слой к журналу.
Все полезные ссылки есть на странице Расширенные возможности оформления
Для того, чтобы увидеть как это работает, давайте попробуем создать слой и добавить с его помощью на страницу какой-нибудь текст.
1. Зайдите в Ваши слои, найдите внизу страницы форму и выберите значения как на картинке:
Нажмите Создать
Затем в таблице ваших слоев найдите такую строчку:
Цифра будет другой, но тип слоя будет theme и слой пока не имеет названия.
2. Нажмите Правка, чтобы перейти к редактированию. Откроется вот такой редактор кода (поля будут пустыми):
Увеличить
Свежесозданный слой в поле для кода содержит только две строчки кода:
layerinfo "type" = "theme";
layerinfo "name" = "";
Это объявление типа темы и её название.
Назовите как-нибудь свою тему, а затем ниже вставьте такой код:
function Page::print () { var string lay = get_layout(); var string body_layout_class = body_class($lay); var string[] wide_themes = []; # These are the wide themes, which look better when the hbox_top is below the banner var bool print_below_banner = false; foreach var string theme ($wide_themes) { if ($theme == $*base_theme) { $print_below_banner = true; } } """http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" id="sixapart-standard"> """; $this->print_head(); $this->print_stylesheets(); print safe """
Привет, мир! : )
"""; $this->print_control_strip(); container_open("container"); if (viewer_sees_hbox_top()) { if ($print_below_banner) { container_open("page"); $this->lay_print_header_links(); container_open("ad-leaderboard"); $this->print_hbox_top(); container_close(); } else { container_open("ad-leaderboard"); $this->print_hbox_top(); container_close(); container_open("page"); $this->lay_print_header_links(); } } else { container_open("page"); $this->lay_print_header_links(); } container_open("content"); render_layout($this, $lay); container_close(); """"""; container_open("footer"); if (viewer_sees_hbox_bottom()) { container_open("ad-5linkunit"); $this->print_hbox_bottom(); container_close(); } container_close(); """"""; container_close(); """"""; container_close(); """"""; """\n"""; }Это фунция для вывода страницы в Expressive - Page::print ().
Нажмите Save & Compile - она наверху, над полем для редактирования.
В поле с результатами компиляции должно появиться собщение Compiled with no errors. (как у меня на скриншоте).
3. Теперь можно посмотреть что у нас получилось. Зайдите в каталог стилей и в левой колонке найдите пункт Собственные слои.
В этом разделе должен находиться ваш новый слой с именем, которое вы ему задали:
Вы можете отважно применить слой к журналу (внимание!!! ваше текущее оформление слетит!) либо нажмите на лупу, чтобы посмотреть, что получилось, не надевая слой на журнал.
Должно получиться вот так:
на скрине только верхняя часть страницы
Это дефолтная тема Expressive, голубая с цветком, и текст, который я вставила в функцию вывода страницы - Привет, мир! : )
Если верх вашего журнала выглядит как на скриншоте - значит у вас всё получилось!
А дальше?
Теперь вы можете сами создавать и редактировать слои.
Вам следует выбрать удобный способ работы с ними.
Я показала как можно не трогая основной слой стиля отредактировать только нужную функцию. Это удобно, код короткий и в нём только то, что нужно вам.
Но есть ограничения: в слое типа theme нельзя создавать свои настройки (property) и функции.
Если нужны все возможности слоя стиля - вам потребуется скопировать его код целиком и вставить его в слой типа layout (слой макета).
Плюсы - вам не нужно будет копировать функции по одной, в вашем распоряжении сразу будут все возможности слоя.
Минусы - очень длинный код.
Где брать код?
Самому написать слой конечно можно, но смысла особого нет : ) Проще и удобнее скопировать код уже имеющегося слоя и перекраивать его.
Список всех слоев можно найти на странице Общедоступные слои
Как отлаживаться?
Если в коде есть проблема, при компиляции в нижнем поле вывалится ошибка, и слой не скомпилируется.
На вашем журнале это никак не отразится - последние изменения не применятся к журналу, пока слой не будет исправлен и скомпилирован без ошибок.
В сообщении об ошибке будет указана строка с проблемой.
Что почитать?
На русском:
Какие виды слоёв в системе стилей S2?
Как мне создать новый стиль S2?
На английском:
S2 Manual
Содержание Core
s2layers
Хозяйке на заметку
* Важно знать, что слои никак не затрагивают ваши записи - они лишь способ вывести их на страницу. Так что экспериментируйте сколько угодно - содержимое журнала не пострадает.
* Напоминаю, что вся приведённая информация рассчитана на достаточно продвинутых товарищей, которые не падают в обморок от простыней программного кода и могут хоть как-то в нём соориентироваться.
Пользуйтесь поиском по коду.