Нужно включить PGN (нотация шахматной партии) в пост

Я пытаюсь встроить PGN-файл в тему. Для этого необходимо включить CSS и JavaScript в тему. Не могли бы вы, пожалуйста, подсказать, как использовать CSS и JavaScript в теме?

5 лайков

Это невозможно в Discourse. Что такое PGN-файл? Можете ли вы немного подробнее описать свою цель?

4 лайка

PGN означает Portable Game Notation. Обычно все ходы шахматной партии можно экспортировать в текстовый формат и прочитать с помощью PGN-ридера, чтобы воспроизвести партию.
Обычно это выглядит так:

[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]

1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
4 лайка

Определённо получится увеселительный плагин! Добавляю тег «pull request welcome» к этой теме.

5 лайков

Не могли бы вы разместить заметки о партии на chess.com, а затем использовать код для встраивания, который они предоставляют для вашего сайта?

6 лайков

Не только Chess.com.
Я могу играть партию на любой онлайн-платформе для шахмат. Я должен иметь возможность скопировать свой PGN и опубликовать его на своём форуме.

Привет @codinghorror,
Было бы здорово иметь такой плагин :slight_smile:

2 лайка

Вы понимаете, насколько это нишевая тема? Это НЕ должно быть функцией Discourse, так как 98% форумов никогда не будут её использовать.

У вас есть три варианта:

  • Написать код самостоятельно
  • Нанять кого-то для написания кода
  • Использовать решение, которое я предоставил 13 часов назад и которое решает вашу проблему
1 лайк

Привет, @Monkey

Да, я понимаю, что вы абсолютно правы.

Мы 15 лет вели очень технический форум (Unix, Linux), и у нас было много участников, играющих в шахматы (включая меня), но в самих форумах никто не проявлял интереса к шахматам (мы за эти годы установили несколько плагинов, связанных с шахматами).

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

Так что я могу подтвердить, что это очень узкая ниша — играть в шахматы на форумах, из-за обилия отличных альтернатив.

Я согласен, что встраивание кода с одного из самых популярных онлайн-сайтов по шахматам было бы отличным шагом вперёд.

4 лайка

Привет @neounix,

Вы ведете технический форум, поэтому ваша аудитория, возможно, не интересуется шахматами.
Я могу организовать форум по спорту и играм, где много шахматистов и энтузиастов, которые тратят много времени на обсуждение и споры о шахматных ходах. Всё зависит от того, кто ваша целевая аудитория. Очень узколобо с вашей стороны проверять и подтверждать мои требования, учитывая, что вы никогда не вели спортивный форум, и ваша проверка не имеет отношения к моему запросу.

Привет @Monkey,

Уже существует множество встроенных решений на основе JavaScript для размещения PGN. Однако Discourse в настоящее время не поддерживает встроенные элементы JavaScript в постах, разрешены только iFrame. Поэтому, если Discourse заинтересован в создании плагина для PGN, я уверен, что это привлечёт множество спортивных форумов.
Я не считаю, что плагины, связанные с шахматами, являются узкоспециализированной функцией, если в списке клиентов Discourse много спортивных и игровых форумов.

Предложенное вами решение позволит нам использовать только потоки с chess.com. Однако это не поможет нам выделиться, так как многие игроки просто размещают ежедневные задачи с Chess.com. Следовательно, ваше предложение на самом деле не решает мою проблему.

3 лайка

Я увлечённый шахматист и пытаюсь убедить финский шахматный форум перейти на Discourse. Поэтому я недавно изучил этот вопрос и поэкспериментировал. Моя главная рекомендация — использовать встроенную функцию iframe в Discourse, как кто-то уже упоминал. Вам нужно просто найти в настройках администратора раздел «Разрешённые iframe» и добавить в белый список chess.com, lichess.org, возможно, и другие сайты. Все они поддерживают iframe на своей стороне. После этого пользователь может просто скопировать и вставить строку вроде:

iframe src="https://lichess.org/embed/jYSkjcuG?theme=auto&bg=auto" width=600 height=397 frameborder=0></iframe>

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

6 лайков

Привет, @rizka,

У меня здесь очень необычный случай.


В предварительном просмотре я вижу встраивание iFrame. Но при сохранении поста встраивание iFrame не отображается. Не упустил ли я что-то?
Скриншот после сохранения поста:

Вы видите какие-либо ошибки в консоли браузера? (возможно, связанные с CSP)

У меня возникла следующая ошибка:

Файл cookie, связанный с ресурсом между сайтами по адресу https://lichess.org/, был установлен без атрибута `SameSite`. Он был заблокирован, так как Chrome теперь доставляет файлы cookie для межсайтовых запросов только в том случае, если они установлены с `SameSite=None` и `Secure`. Вы можете просмотреть файлы cookie в инструментах разработчика в разделе Application > Storage > Cookies и узнать больше деталей по ссылкам https://www.chromestatus.com/feature/5088147346030592 и https://www.chromestatus.com/feature/5633521622188032.

Я установил настройку в значение SameSite=None.
Однако это не помогло.

Я думаю, что сайт, который вы встраиваете (https://lichess.org/), должен добавить эту настройку в cookie (предполагая, что они хотят разрешить другим сайтам использовать их cookie). Тем не менее, я не знаю, не отображается ли iframe из-за этого (обычно cookie используются для сессий или рекламы, поэтому, даже если у iframe нет сессии, я думаю, он всё равно загрузится).

Обновление

Похоже, они разрешают.

Кроме того, вы можете увидеть предварительный просмотр, и если я добавлю iframe здесь, на meta discourse (напрямую в HTML, через инспектор браузера), он работает, как на изображении ниже:

Вы можете попробовать добавить его напрямую на своей странице, используя инспектор браузера. Если это не сработает, то возможно, это какое-то правило CSP или Discourse блокирует iframes (если это CSP, вы должны увидеть ошибку или предупреждение в консоли браузера).

Здесь, на meta, если я пытаюсь включить iframe, я также получаю пустой пост (хотя я даже не могу увидеть предварительный просмотр):

<iframe src="https://lichess.org/tv/frame?theme=wood&bg=light" style="width: 400px; height: 444px;" allowtransparency="true" frameborder="0"></iframe>

Обновление 2

Настройка сайта allowed_iframes может быть тем, что вам нужно (чтобы разрешить iframes с этого домена):

Я временно включил поддержку iframe с lichess.org на try.discourse.org, чтобы любой мог протестировать это поведение:

Это будет доступно до ежедневного сброса.

Выглядит лучше в Firefox:

чем в Chrome:

5 лайков

Привет @supermathie,

Вместо использования iframe-встраивания у меня есть такой JavaScript-код:

<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />

<div class="cbreplay">

[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]

1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>

Можно ли использовать такой код для встраивания в посты? Многие мои пользователи предпочитают простое копирование таких скриптов вместо перехода на сторонние сайты для генерации iframe.

Да!

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

Далее вам предстоит либо написать код самостоятельно, либо нанять кого-то для выполнения этой работы, как предложил @Monkey.

(Я бы с радостью взялся за это, чтобы изучить компоненты темы, но в данный момент у меня нет на это времени).

5 лайков

Да, вы можете взять за основу проект вроде этого:

На GitHub есть несколько подобных проектов, но этот — один из самых передовых.

Объедините его с кастомным BBCode: Developer's guide to Markdown extensions

Вам просто нужно быть внимательным к подводным камням, связанным с интеграцией этого в конвейер рендеринга Ember…

@supermathie прав — вам нужно найти энтузиаста, готового освоить основы и потратить время на реализацию, или нанять кого-то в канале Marketplace.

4 лайка

Привет, @merefield,

Я настроил свою тему так, чтобы она включала следующий скрипт:

<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />

Я добавил CSS-файл “https://pgn.chessbase.com/CBReplay.css” в белый список для разрешённых встраиваемых элементов.
Однако при копировании и вставке этого кода в моём посте тег

игнорируется, и отображается только текст:

<div class="cbreplay">

[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]

1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>

Нужно ли мне сделать что-то ещё, чтобы этот скрипт работал в моих постах? Буду благодарен за советы.

У меня сейчас нет времени на это. Пожалуйста, сделайте так, как я предлагаю.