Обезъян (obezzyann) wrote,
Обезъян
obezzyann

Category:

Кат и спойлер. Как скрыть под ними часть поста?

Мои друзья kopuha и pirop просили меня рассказать про кат и спойлер. Рассказ получился длинный, поэтому сразу предупреждаю, не читайте всё подряд, выбирайте только то, что вам интересно.

Сейчас в ЖЖ существует два способа скрыть часть поста, они называются "Кат" и "Спойлер".
Кат перезагружает страницу, его можно открывать в новой вкладке или в новом окне.
Спойлер открывает скрытое содержимое без перезагрузки, поэтому в новом окне (вкладке) открыть его невозможно.
В комментариях можно использовать только спойлер.
При нажатии на ссылку ката или спойлера сама ссылка исчезает.
Чтобы вернуть ссылку на кат и снова скрыть часть поста, необходимо направить браузер на предыдущую страницу.
Чтобы вернуть ссылку на спойлер и скрыть часть поста под ним, надо перезагрузить страницу.
При просмотре записи перед отправкой в журнал кат выглядит так, как будто ссылку на кат уже нажали, проверить его невозможно, а спойлеры выглядят так же, как они будут выглядеть в журнале.
При размещении нескольких катов или спойлеров на странице, каждый спойлер открывается отдельно, но все каты открываются вместе при нажатии на любой из них.
При открытии ката все спойлеры закрываются.


[Как отличить кат от спойлера на странице?]
Как отличить кат от спойлера на странице?


По умолчанию ссылка на кат гласит "Читать дальше... ", а ссылка на спойлер - "Нажмите, чтобы прочитать", если же автор меняет текст, сами ссылки выглядят одинаково, но вы можете различать их по скобкам.


Ссылки на кат заключены в круглые скобки, а ссылки на спойлер - в квадратные скобки.




[В каких случаях лучше использовать кат?]
В каких случаях лучше использовать кат?


Если вы установили на своей странице счетчики и хотите, чтобы они быстрее крутились, ставьте кат, ведь каждое нажатие на него прибавляет единичку к загрузкам страницы.
Если ваш материал очень велик, содержит много иллюстраций или иллюстрации большого объёма, лучше поместить большую часть материала под кат, тогда она не будет загружаться в компьютеры тех, кого не интересует.



[Как добавить кат в визуальном редакторе?]
Как добавить кат в визуальном редакторе?

Для редактирования поста выберите "Визуальный редактор".

В меню редактора нажмите кнопочку "Кат".

Появится окошко с текстом ссылки на кат по умолчанию.

Если хотите, введите свой текст.

Нажмите кнопку "OK".
В редактируемом поле появятся две полоски с двумя половинками ножниц.
Введите между ними всё, что должно находиться под катом.

После сохранения ваш пост будет выглядеть примерно вот так:

А после нажатия ссылки на кат, вот так:



[Как добавить спойлер в визуальном редакторе?]
Как добавить спойлер в визуальном редакторе?

Для редактирования поста выберите "Визуальный редактор".

В меню редактора нажмите кнопочку "Спойлер".

Появится окошко с текстом ссылки на спойлер по умолчанию.

Если хотите, введите свой текст.

Нажмите кнопку "OK".
В редактируемом поле появятся две полоски с двумя стрелочками.
Введите между ними всё, что должно находиться под спойлером.

После сохранения ваш пост будет выглядеть примерно вот так:

А после нажатия ссылки на спойлер, вот так:



[Как добавить кат в редакторе HTML?]
Как добавить кат в редакторе HTML?

Для редактирования поста выберите режим "HTML".

Для того, чтобы скрыть часть текста под катом, достаточно добавить тег:
<lj-cut>ТЕКСТ ПОД КАТОМ</lj-cut>
Текст под катом может содержать любой допустимый ЖЖ- и HTML-код, включая картинки, спойлеры, мультимедиа и т. д., но вы не можете размещать один кат внутри другого.
Вы можете скопировать код тега из окошка ниже, заменив кириллицу своим кодом.

Предположим, вы ввели следующий код:

После сохранения ваш пост будет выглядеть примерно вот так:

А после нажатия ссылки на кат, вот так:

Если же вы хотите ввести свой текст ссылки на кат, надо добавить тег:
<lj-cut text="ВАШ ТЕКСТ ССЫЛКИ НА КАТ">ТЕКСТ ПОД КАТОМ</lj-cut>
Текст под катом может содержать любой допустимый ЖЖ- и HTML-код, включая картинки, спойлеры, мультимедиа и т. д., но вы не можете размещать один кат внутри другого.
Вы можете скопировать код тега из окошка ниже, заменив кириллицу своим кодом.

Предположим, вы ввели следующий код:

После сохранения ваш пост будет выглядеть примерно вот так:

А после нажатия ссылки на кат, вот так:



[Как добавить спойлеры в комментарий или в пост в редакторе HTML?]
Как добавить спойлер в комментарий или в пост в редакторе HTML?

Для добавления спойлера в комментарий, просто вводите код спойлера в поле комментария. Если же вы редактируете пост, выберите режим "HTML".

Для того, чтобы скрыть часть текста под спойлером, достаточно добавить тег:
<lj-spoiler>ТЕКСТ ПОД СПОЙЛЕРОМ</lj-spoiler>
Текст под спойлером может содержать любой допустимый ЖЖ- и HTML-код, включая картинки, спойлеры, каты, мультимедиа и т. д.
Вы можете скопировать код тега из окошка ниже, заменив кириллицу своим кодом.

Предположим, вы ввели следующий код:

После сохранения ваш пост будет выглядеть примерно вот так:

А после нажатия ссылки на спойлер, вот так:

В комментарии спойлер будет выглядеть точно так же.
Если же вы хотите ввести свой текст ссылки на спойлер, надо добавить тег:
<lj-spoiler title="ВАШ ТЕКСТ ССЫЛКИ НА СПОЙЛЕР">ТЕКСТ ПОД СПОЙЛЕРОМ</lj-spoiler>
Текст под спойлером может содержать любой допустимый ЖЖ- и HTML-код, включая картинки, спойлеры, каты, мультимедиа и т. д.
Вы можете скопировать код тега из окошка ниже, заменив кириллицу своим кодом.

Вы можете размещать в посте и в комментарии несколько спойлеров.
Предположим, вы ввели следующий код с тремя спойлерами:

После сохранения ваш пост будет выглядеть примерно вот так:

Так пост будет выглядеть после открытия первого спойлера:

Так пост будет выглядеть после открытия второго спойлера:

А так пост будет выглядеть после открытия третьего спойлера:



[Вложение спойлеров.]
Вложение спойлеров.

Мы не только можем размещать несколько спойлеров в одном посте или комментарии, но и вкладывать их друг в друга.
Рассмотрим конструкцию, где второй спойлер вложен в первый, третий и четвёртый вложены во второй, пятый вложен в четвёртый, а шестой размещён рядом с первым. Код будет выглядеть так:

А в Визуальном редакторе он будет выглядеть так:

После сохранения ваш пост будет выглядеть примерно вот так:

Так пост будет выглядеть после открытия первого спойлера:

А так после открытия шестого спойлера:

Так после открытия второго:

Так после открытия третьего:

Так после открытия четвёртого:

И вот так после открытия пятого:

Вот так можно создавать из спойлеров любые комбинации.
Скачки строк говорят нам о том, что линки на спойлеры исчезают всё-таки не бесследно, и за дизайном надо следить внимательнее.



[Сокрытие ката под спойлером]
Сокрытие ката под спойлером

Мы можем размещать сколько угодно спойлеров под катом, ничего необычного при этом не произойдёт.
Но мы можем и каты прятать под спойлеры. При этом надо помнить о том, что при открытии ката все спойлеры закрываются, так что текст, скрытый под катом, который скрыт под спойлером, сразу при открытии ката не откроется, а окажется закрытым спойлером.
Попробуем разместить под первым спойлером текст и кат, а под вторым просто текст. Код у нас получится такой:

А в Визуальном редакторе он будет выглядеть так:

После сохранения ваш пост будет выглядеть примерно вот так:

Так пост будет выглядеть после открытия первого спойлера:

Так после открытия второго:

А вот как пост будет выглядеть после открытия ката:

Точно так же, как он выглядел изначально. Казалось бы ничего не изменилось, но попробуем нажать на первый спойлер ещё раз. Откроется вот такая картина:

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

В Визуальном редакторе этот трюк не получится.
Итак, изначально наш пост выглядит так:

После нажатия на спойлер, вот так:

А после нажатия на кат, так:

Спойлер, конечно, закрылся, но текст под катом стал виден сразу.
На всякий случай даю для копирования код невидимого ката:
(Замените кириллицу своим кодом)
<span style="display:none"><lj-cut></span>ТЕКСТ ПОД КАТОМ<span style="display:none"></lj-cut></span>




[Зачем размещать несколько катов в одном посте? Меню из катов.]
Зачем размещать несколько катов в одном посте?

Каждый кат не только открывает весь скрытый под катами текст, но и является меткой того места, где он размещён. Если у вас длинный пост, каты позволят перейти к нужной теме, ведь при открытии ката вверху экрана окажется имено та часть страницы, над которой стоял тег ката.
Попробуем сделать длинный пост из пустых строк. Код будет выглядеть так:
Текст над катами<br /><br />
<lj-cut text="Кат 1">Начало текста скрытого катом 1
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 1<br /></lj-cut>
<lj-cut text="Кат 2">Начало текста скрытого катом 2
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 2<br /></lj-cut>
<lj-cut text="Кат 3">Начало текста скрытого катом 3
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 3<br /></lj-cut>
<lj-cut text="Кат 4">Начало текста скрытого катом 4
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 4<br /></lj-cut>
<lj-cut text="Кат 5">Начало текста скрытого катом 5
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 5<br /></lj-cut>
Текст ниже ката 5
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец страницы


Но мы знаем, что меню из катов исчезнет при нажатии на любой из них. Давайте продублируем это меню под катами. Известно, что катам присваиваются нумерованные метки.
Начало текста под первым катом имеет метку cutid1
Конец текста под первым катом имеет метку cutid1-end
Начало текста под вторым катом имеет метку cutid2
Конец текста под вторым катом имеет метку cutid2-end
И так далее.
Достаточно добавить ссылку, например, <a href="#cutid3">Кат 3</a> - и она приведёт на начало текста под третьим катом.
Теперь код будет выглядеть так:
Текст над катами<br /><br />
<lj-cut text="Кат 1">Начало текста скрытого катом 1
<a href="#cutid2">Кат 2</a>
<a href="#cutid3">Кат 3</a>
<a href="#cutid4">Кат 4</a>
<a href="#cutid5">Кат 5</a>
<a href="#cutid5-end">Текст под катами</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 1<br /></lj-cut>
<lj-cut text="Кат 2">Начало текста скрытого катом 2
<a href="#cutid1">Кат 1</a>
<a href="#cutid3">Кат 3</a>
<a href="#cutid4">Кат 4</a>
<a href="#cutid5">Кат 5</a>
<a href="#cutid5-end">Текст под катами</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 2<br /></lj-cut>
<lj-cut text="Кат 3">Начало текста скрытого катом 3
<a href="#cutid1">Кат 1</a>
<a href="#cutid2">Кат 2</a>
<a href="#cutid4">Кат 4</a>
<a href="#cutid5">Кат 5</a>
<a href="#cutid5-end">Текст под катами</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 3<br /></lj-cut>
<lj-cut text="Кат 4">Начало текста скрытого катом 4
<a href="#cutid1">Кат 1</a>
<a href="#cutid2">Кат 2</a>
<a href="#cutid3">Кат 3</a>
<a href="#cutid5">Кат 5</a>
<a href="#cutid5-end">Текст под катами</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 4<br /></lj-cut>
<lj-cut text="Кат 5">Начало текста скрытого катом 5
<a href="#cutid1">Кат 1</a>
<a href="#cutid2">Кат 2</a>
<a href="#cutid3">Кат 3</a>
<a href="#cutid4">Кат 4</a>
<a href="#cutid5-end">Текст под катами</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец текста скрытого катом 5<br /></lj-cut>
Текст ниже ката 5
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Конец страницы


Тогда исходная страница будет выглядеть так:


[После клика на первый кат, она будет выглядеть так:]

Обратите внимание, что заголовок поста уже не показывается.

[После клика на второй кат, она будет выглядеть так:]

И точно так же она будет выглядеть после клика на "Кат 2" в нашем меню.

[После клика на третий кат, она будет выглядеть так:]

И так далее.

[А вот так она будет выглядеть после клика на &quot;Текст под катами&quot; в нашем меню:]

На всякий случай даю код.
(Замените кириллицу своим кодом)
Вот код линка на место начала первого ката на странице:
<a href="#cutid1">ТЕКСТ ССЫЛКИ</a>

А это код линка на место окончания первого ката на странице:
<a href="#cutid1-end">ТЕКСТ ССЫЛКИ</a>

Для ссылки на последующие каты просто меняйте цифру.

Конечно не обязательно создавать меню именно из катов, вы и сами прекрасно можете расставить метки на своей странице и дать на них ссылки, но к нашей теме это не относится.



[Замена и удаление видимого материала при открытии ката.]
Замена и удаление видимого материала при открытии ката.

Бывают ситуации, когда видимая часть поста выглядит несуразно, а то и неуместно после открытия ката. Например, вы написали длинный пост и убрали его под кат, оставив только первый абзац, но этот абзац вы дали крупным шрифтом да ещё и красным цветом, чтобы привлечь внимание. Понятно, что после открытия ката красный абзац будет выглядеть не слишком красиво.
Возьмём для примера такой код:
<span style="color:#ff0000; font-size: x-large;"><lj-cut text="
Спешите прочитать"></lj-cut>
Эта удивительная история начиналась так...</span>
<lj-cut><span style="font-size:larger;">
А здесь следует продолжение удивительной истории обычным шрифтом.
</span></lj-cut>

В ленте ваш пост будет привлекать внимание:

Но после открытия ката крупный красный текст совершенно неуместен.

Как это исправить? Оказывается, мы можем менять стиль видимой части поста после открытия ката.
Для этого вставим под кат закрытие старого стиля и открытие нового. Получим такой код:
<span style="color:#ff0000; font-size: x-large;"><lj-cut text="
Спешите прочитать"></span>
<span style="font-size:larger;"></lj-cut>
Эта удивительная история начиналась так...</span>
<lj-cut><span style="font-size:larger;">
А здесь следует продолжение удивительной истории обычным шрифтом.
</span></lj-cut>

В ленте пост выглядит так же:

А вот после открытия ката первый абзац становится таким же, как и весь последующий текст.

Вот код замены стиля:
(Замените кириллицу своим кодом)
<span style="СТИЛЬ ДО ОТКРЫТИЯ КАТА"><lj-cut text="ТЕКСТ ССЫЛКИ НА КАТ"></span><span style="СТИЛЬ ПОСЛЕ ОТКРЫТИЯ КАТА"></lj-cut>
ВИДИМЫЙ ТЕКСТ</span>
<lj-cut>ТЕКСТ ПОД КАТОМ</lj-cut>



Но возможна и такая ситуация, что вы захотите полностью заменить видимый изначально текст, заменив его текстом под катом. Например, вы разместили на виду текст первого куплета песни, а под катом у вас вся песня с аккордами. В этом случае повтор первого куплета совсем ни к чему, лучше удалить текст без аккордов.
Для замены исходного текста текстом под катом попробуем следующий код (второй кат мы скроем):
<lj-cut text="ТЕКСТ ССЫЛКИ НА КАТ"><span style="display:none"></lj-cut>
ВИДИМЫЙ ТЕКСТ<span style="display:none"><lj-cut></span></span>ТЕКСТ ПОД КАТОМ
<span style="display:none"></lj-cut></span>

В ленте мы видим один текст:

А после открытия ката совершенно другой:

Вот код замены видимого текста на текст под катом:
(Замените кириллицу своим кодом)

Tags: livejournal, совет
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 55 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →