Discourse Spoiler-Alert

:discourse2: Summary Discourse Spoiler Alert provides the ability to hide content marked with a [spoiler] tag in posts.
:open_book: Install Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately.

Enabling Spoiler Alert

This plugin is default enabled once installed but can be disabled/enabled from its settings, accessed from your admin/plugins page:

enable spoiler

Features

Once enabled it adds a ‘Blur Spoiler’ option to the :gear: menu in the composer’s formatting bar. Simply highlight the text you’d like to blur and select ‘blur spoiler’ and it will wrap the selected text in the necessary [spoiler] tags:

Examples:

Inline:

[spoiler]This is a spoiler[/spoiler] 

This is a spoiler

Multiline:

[spoiler]

I wanna be your vacuum cleaner
Breathing in your dust
I wanna be your Ford Cortina
I will never rust
If you like your coffee hot
Let me be your coffee pot
You call the shots
I wanna be yours

https://johncooperclarke.com/poems/i-wanna-be-yours

[/spoiler]

I wanna be your vacuum cleaner
Breathing in your dust
I wanna be your Ford Cortina
I will never rust
If you like your coffee hot
Let me be your coffee pot
You call the shots
I wanna be yours

https://johncooperclarke.com/poems/i-wanna-be-yours

Clicking on the blur will reveal the hidden text, and clicking again will re-blur it.

It also works for images:
(to re-blur an image that is large enough to generate a lightbox, you can click on the adjacent white space or refresh the page)

Settings

Name Description
spoiler enabled Enable the spoiler plugin. If you change this, you must rebake all posts with: “rake posts:rebake”[1]

:discourse2: Hosted by us? This plugin is available on all of our hosting tiers Spoiler Alert | Discourse - Civilized Discussion


  1. :discourse2: If you’re a hosted customer of ours, please contact team@discourse.org if you have any questions about needing to ‘rebake’ due to a setting change ↩︎

48 лайков

Перенесено в ядро:

3 лайка

:information_source: Предупреждение о спойлерах Discourse теперь включено в ядро Discourse, поэтому этот плагин больше не нужно устанавливать отдельно. :partying_face:

Если вы размещаете свой собственный сервер, вы увидите на своей панели управления информацию об удалении его из app.yml.

:discourse2: Размещено нами? Это изменение никак не повлияет на вас. :+1: Вы можете продолжать пользоваться этим плагином и ни о чём не беспокоиться.

1 лайк

Не понимаю, почему этот плагин включён по умолчанию. Разве он полезен только для форумов о кино?

Причин скрыть текст гораздо больше, чем просто спойлеры к фильмам. Их даже больше, чем панчлайны шуток.

2 лайка

Можно ли добавить функцию, чтобы контент спойлера отображался после нажатия на «лайк» в сообщении?

Вы с радостью можете создать тему с тегами #feature и spoiler-alert :wink:

2 лайка

:wink:, я уже в пути.

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

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

Любой, кто знаком с игрой, которую я упомянул, сразу поймёт, что изображено.

Изображение с моего форума Discourse ниже.

Есть ли способ это исправить?

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

Как вы планируете это сделать? Сделать более размытым? Изменить цвет размытия?

1 лайк

Если бы я мог, я бы либо сделал его полностью чёрным, либо размыл сильнее.

Вот CSS по умолчанию для эффекта размытия:

.spoiler-blurred img {
  filter: blur(1em);
}

Измените 1em на более значимое значение:

.spoiler-blurred img {
  filter: blur(5em);
}

Если вы хотите увеличить размытие при наведении курсора на изображение, добавьте следующие строки и измените 0.5em (на значение меньшее, чем предыдущее):

.spoiler-blurred {
  .discourse-no-touch & {
    &:hover, &:focus {
      img {
        filter: blur(0.5em);
      }
    }
  }
}
5 лайков