Что такое оффсеты?

Оффсеты — это, прежде всего, способ перенести читателя на другую страницу, не теряя голоса и комментарии на основной. Это может быть очень полезными для создания многоуровневых страниц, нескольких ревизий статьи, руководств (вроде этого) или изменений в CSS. Нажмите сюда, чтобы посмотреть, как это работает!

Оффсеты являются встроенным функционалом движка и работают с использованием модуля ListPages. Для создания дополнительных страниц используется специально выделенная категория страниц «fragment:». Эти фрагменты невидимы по умолчанию без наличия прямых ссылок; они не отображаются в списке недавно созданных страниц и не видны в списках рейтинга. Фрагменты — это тоже встроенный функционал движка, который чаще всего используется для оффсетов, но может так же применяться для включений и т.п.

Как использовать оффсеты?

Теперь, когда у вас есть примерное понимание того, что такое оффсеты, давайте разберёмся, как же их на своих страницах применять. Первое, что вам нужно сделать — это создать родительскую страницу. На родительской странице читатель будет оставаться всё время, в то время как фрагменты будут сменять друг друга.

Создание родительской страницы

Чтобы создать родительскую страницу, вам нужно просто создать самую обыкновенную страницу. Например, вы сейчас находитесь на странице https://www.backroomswiki.ru/offset-guide.

Теперь, когда вы создали родительскую страницу, вам нужно правильно её заполнить. Помните, что основное содержание будет располагаться не на родительской странице, а на фрагменте (мы перейдём к этому позже). Для форматирования родительской страницы воспользуйтесь шаблоном:

(ЕСЛИ ВЫ ХОТИТЕ ИСПОЛЬЗОВАТЬ ТЕМУ НА ВСЕХ ВАШИХ СТРАНИЦАХ, ТО ВСТАВЬТЕ ЕЁ СЮДА. ЕСЛИ ЖЕ ВЫ ХОТИТЕ, ЧТОБЫ НА ВАШИХ СТРАНИЦАХ ТЕМЫ РАЗЛИЧАЛИСЬ, ТО НЕ НУЖНО ДОБАВЛЯТЬ ТЕМУ НА РОДИТЕЛЬСКУЮ)
[!--
В этом комментарии желательно указать все фрагменты, которые вы сделаете.
--]
[[module css]]
CSS отсюда будет применяться ко всем дочерним страницам.
[[/module css]]

[[>]]
[[module rate]]
[[/>]]

[[module ListPages  category="fragment" parent="." limit="1" order="name" offset="@URL|0"]]
%%content%%
[[/module]]

------
[[>]]
[[collapsible show="Автор(ы)" hide="Скрыть автора(ов)"]]
Написал (написала) [[*user XX]]
* «XXX» от YYY распространяется по условиям лицензии [*https://creativecommons.org/licenses/by-sa/xx/deed.ru CC-BY-XX]
[[/collapsible]]
[[/>]]

(КАРУСЕЛЬ УРОВНЕЙ/СУЩНОСТЕЙ/ОБЪЕКТОВ ДОЛЖНА РАСПОЛАГАТЬСЯ ЗДЕСЬ)

Теперь давайте разберём содержимое этого шаблона:

1. В самом верху страницы должна располагаться тема, которую вы хотите применить ко *всем* вашим дочерним страницам. Запомните, если вы хотите, чтобы на разных страницах были разные темы, то не нужно добавлять их на родительскую. О том, как изменить тему на той странице, которую первой увидит читатель, мы поговорим позднее.
2. Ниже идёт CSS-модуль и здесь всё то же самое: если не вы хотите, чтобы этот CSS применялся сразу ко всем дочерним страницам, то не добавляйте его сюда.
3. Далее идёт модуль рейтинга и он должен располагаться только здесь. Вы не должны включать модуль рейтинга на дочерних страницах, он располагается только на главной.
4. Чуть ниже располагается модуль ListPages и именно он создаёт тут всю магию. Этот модуль обязателен для функционирования всей системы. Подробнее о его функционале вы можете прочитать тут.
5. В самом конце находится авторский спойлер и карусель статей, если она вам, конечно, нужна. И спойлер, и карусель, подобно модулю рейтинга не должны добавляться на дочерние страницы.

Когда вы закончили с форматированием родительской страницы, можете начинать работать с фрагментами.

Создание фрагментов

Название фрагмента должно соответствовать шаблону:

fragment:название-родительской-страницы-N

Вместо «N» должен быть номер фрагмента. Отсчёт идёт с нуля, поэтому вашим первым фрагментом будет «0», а не «1». Например, первый фрагмент этого руководство называется: fragment:offset-guide-0, второй, соответственно: fragment:offset-guide-1 и так далее.
Фрагменты нужно привязывать к родительской странице. Чтобы сделать это, вам нужно пролистать в самый низ страницы фрагмента, нажать на «+ Опции», затем «Родитель» и указать название родительской страницы в отведённом для этого поле.

Теперь, когда вы создали фрагмент, вы можете начать писать само содержание. Всё, что вы напишите внутри фрагмента-0 будет первым, что увидит читатель, открывая вашу статью. Поэтому добавляйте внутрь него только то, что читатель должен увидеть до перехода на другие оффсеты. По этой же схеме вам нужно создать все фрагменты, которые вам нужны. Не забудьте поставить тег «фрагмент» на всех созданных вами фрагментах.

Правильная ссылка на оффсеты

Теперь, как же мы отправим читателя на другой оффсет? Для этого вам нужно использовать ссылку особого формата:

/название-родительской-страницы/offset/N

ВАЖНО: Слэш {/} в начале ссылке должен стоять обязательно, иначе всё сломается.
Вместо «N», аналогично, должен быть номер фрагмента, на который вы хотите отправить читателя. Например, чтобы попасть на первый оффсет этого руководства, вам нужно перейти по ссылке https://www.backroomswiki.ru/offset-guide/offset/1. То есть, вот эта гиперссылка выполнена в таком формате: [[[/offset-guide/offset/1|вот эта гиперссылка]]].
Если вы будете использовать не ссылку данного формата, а прямую ссылку на фрагмент, то никакой магии не произойдёт и читатель просто окажется на другой странице с другим рейтингом и комментариями. В отличие от викидота, гиперссылки такого формата: [[[тут-название-страницы-цели|а тут текст]]], позволяют ссылаться на оффсеты, поэтому вам не нужно использовать для этого прямые ссылки вида [*www.example.com отображаемый текст].

Много букв, не осилил

Давайте суммируем всё по пунктам:

1. Создайте родительскую страницу по шаблону. На ней будет общая тема и/или CSS, модуль рейтинга, авторский спойлер и список фрагментов в спрятанном комментарии.
2. Создайте нулевой фрагмент, назовите его fragment:название-страницы-0 и вставьте туда всё содержимое, которое читатель должен увидеть впервые зайдя на страницу.
3. Пролистайте вниз и нажмите на «+ Опции» ⇒ «Родитель» ⇒ укажите название родительской страницы.
4. Поставьте тег «фрагмент» на всех созданных вами фрагментах.
5. Повторите нужное количество раз, пока не создадите все необходимые фрагменты.
6. Используйте специальные ссылки на оффсеты, чтобы перенести читателя на нужную страницу.
7. Убедитесь, что вы всё сделали правильно.

Небольшой список советов и хитростей, которые вы можете применять, используя оффсеты.

Применение тем

Самое крутая фишка оффсетов заключается в том, что на каждой новой странице вы можете использовать разную тему!

Пример

Как правильно применить тему на родительскую страницу?

Если вы хотите, чтобы на первой странице, которую увидит читатель, были тема, то включайте её в fragment:название-страницы-0. Почему? Потому что тема, применённая напрямую на родительскую страницу будет распространяться на все фрагменты и приведёт к наложению.

Переключение шрифтов

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

Пример

Пароль

Ещё один популярный вариант использования оффсетов — это «запароливание» страниц. MyranFox написала для этого специальный JavaScript код, который приведёт вас на нужную страницу, если вы введёте код.

[[html]]
<head>
<script language="javascript">

function LogIn(){
let loggedIn = false;
let passWord = "ПАРОЛЬ";
let passWord2 = prompt("ТЕКСТ");
passWord2 = passWord2.toLowerCase();
                <!-- Чтобы добавить больше паролей, просто используйте функцию let: let passWord4 = "новый пароль"; -->
                <!-- Здесь замените ПАРОЛЬ паролем, который вы хотите использовать и ТЕКСТ текстом, который должен отображаться вверху всплывающего окошка. Не используйте заглавные буквы в пароле, иначе код сломается. -->
    if (passWord2 === passWord) {
          loggedIn = true;
          window.open('ССЫЛКА');
    }
              <!-- Замените ССЫЛКА ссылкой на оффсет, на который вы хотите отправить пользователя. НЕ НА ФРАГМЕНТ. -->
    else if (passWord2 === passWord3) {
          loggedIn = true;
          window.open('ССЫЛКА');

    }
                <!-- Уберите эту часть, если вам нужен только один допустимый правильный вариант ответа. Добавьте больше, есил вам их нужно больше двух. Только не забудьте заменить цифры. -->
    else {
          alert("ТЕКСТОШИБКИ");
                <!-- Замените ТЕКСТОШИБКИ текстом, который отображается в случае введения неправильного пароля. -->
    }
}

</script>
</head>

                <!-- Здесь вы можете поиграться с дизайном кнопки, в идеале, чтобы она совпадала с темой. Меняйте параметры цветов, как захотите. Код ниже сделает цветами оранжевый и чёрный. -->
<style type="text/css">
input[type=button] {
border-color: rgb(229, 140, 36);
color: rgb(229, 140, 36);
background: rgb(29, 18, 7);
}

input[type=button]:focus {
border-color: rgb(229, 140, 36);
color: rgb(229, 140, 36);
background: rgb(29, 18, 7);
}

input[type=button]:hover {
color: rgb(29, 18, 7);
background: rgb(229, 140, 36);
}
</style>

                <!-- Эта часть центрирует кнопку. Удалите её, если хотите, чтобы она была слева. -->

<body style="text-align: center;">
<form><input type=button value="(Введите пароль)" onClick="LogIn()" align=center></form>
</body>
[[/html]]

Теперь вы знаете об оффсетах всё (ну, почти)! Не стесняйтесь использовать их в своих статьях.

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