Embed Discourse comments on another website via Javascript

Пост был разделён на новую тему: Встраивание Discourse с использованием external_id

Для сценария использования документации (сотни/тысячи страниц) возможно ли не создавать тему в Discourse при посещении страницы пользователем, а генерировать её только тогда, когда пользователь захочет оставить комментарий, как это работает Giscus?

Теперь это «Список разрешённых».

Теперь это «Имя пользователя для создания темы».

Помимо этого, есть ли способ протестировать интеграцию с http://localhost? В консоли я получаю эту ошибку из-за отсутствия https:

Отказано во встраивании ‘https://forum.weaviate.io/’, так как предок нарушает следующую директиву политики безопасности контента: “frame-ancestors ‘self’ https://localhost:3000”.

1 лайк

Привет! Спасибо за сообщение. Я обновил некоторые части руководства, но, возможно, потребуется его тщательная проверка, чтобы убедиться, что всё актуально и работает корректно.

Возможно, вам потребуется использовать такой сервис, как ngrok.

2 лайка

Редакция: оказалось, что использование url_escape для URL встраивания (поскольку я использую Liquid для автоматического вставки правильного URL) ломает встраивание. Ой :upside_down_face:

Привет! Я планировал использовать программное обеспечение для форумов в качестве раздела комментариев для своего блога, поэтому, когда я узнал, что у вас есть способ сделать это и что это уже работает на чьем-то сайте, мой разум взорвался :exploding_head:

Однако при попытке внедрить эту систему на мой сайт на нём отображается сообщение об ошибке, и в логах ошибок моего форума появилось следующее:

Сообщение об ошибке
Сообщение (2 сообщения)

Addressable::URI::InvalidURIError (Невозможно собрать строку URI с неоднозначным путем: 'https://eleboog.com/posts/jekyll-to-gemini/')
lib/url_helper.rb:157:in `normalize_with_addressable'
lib/url_helper.rb:94:in `normalized_encode'
app/models/embeddable_host.rb:40:in `url_allowed?'
app/controllers/embed_controller.rb:84:in `comments'
app/controllers/application_controller.rb:418:in `block in with_resolved_locale'
app/controllers/application_controller.rb:418:in `with_resolved_locale'
lib/middleware/omniauth_bypass_middleware.rb:74:in `call'
lib/content_security_policy/middleware.rb:12:in `call'
lib/middleware/anonymous_cache.rb:369:in `call'
config/initializers/100-quiet_logger.rb:20:in `call'
config/initializers/100-silence_logger.rb:29:in `call'
lib/middleware/enforce_hostname.rb:24:in `call'
lib/middleware/request_tracker.rb:228:in `call'

Трассировка стека

addressable (2.8.4) lib/addressable/uri.rb:2337:in `to_s'
addressable (2.8.4) lib/addressable/uri.rb:856:in `initialize'
addressable (2.8.4) lib/addressable/uri.rb:697:in `new'
addressable (2.8.4) lib/addressable/uri.rb:697:in `normalized_encode'
lib/url_helper.rb:157:in `normalize_with_addressable'
lib/url_helper.rb:94:in `normalized_encode'
app/models/embeddable_host.rb:40:in `url_allowed?'
app/controllers/embed_controller.rb:84:in `comments'
actionpack (7.0.4.3) lib/action_controller/metal/basic_implicit_render.rb:6:in `send_action'
actionpack (7.0.4.3) lib/abstract_controller/base.rb:215:in `process_action'

Окружение

HTTP HOSTS: forums.eleboog.com

Я использую Jekyll для размещения своего блога и размещаю форумы рядом с ним с помощью виртуальных хостов nginx. У меня eleboog.com указан как разрешённый хост, а /posts/.* — как мой разрешённый список путей. Есть какие-нибудь идеи, что может вызывать эту проблему? Большое спасибо!

Я застрял, но после некоторых изменений всё получилось. Я работаю с блогом Ghost и Discourse.
Вот что я добавил в файл post.hbs для всех своих публикаций:

{{#post}}
                    
                    <div class="row">
                        <div class="col-sm-10 offset-sm-1">
                            {{> "comments"}}
                            {{!-- {{#has tag="25"}} --}}
                            <div id='discourse-comments'></div>
                            <meta name='discourse-username' content='eviltrout'>
                            <script type="text/javascript">
                                DiscourseEmbed = {
                                    
                                    discourseUrl: 'https://discourse-1-0.cloudclusters.net/',
                                    discourseEmbedUrl : 'https://www.mydomain.com{{ post.url }}',
                                    discourseReferrerPolicy: 'strict-origin-when-cross-origin'
                                    //topicId: '25'
                                };
                                (function () {
                                    console.log("DiscourseEmbed", DiscourseEmbed);
                                    var d = document.createElement('script');
                                    d.type = 'text/javascript';
                                    d.async = true;
                                    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
                                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
                                })();
                            </script>
                            {{!-- {{/has}} --}}
                        </div>
                    </div>
                    {{/post}}

                </div>
            </section>
 

Код файла Ghost post.hbs приведён под комментарием: Screenshot by Lightshot
А вот мои настройки встраивания: Screenshot by Lightshot

=====

Я получаю самый первый комментарий как список ( Screenshot by Lightshot ).
Как его убрать?

В теме Discourse нет никаких публикаций, кроме ссылки на оригинальный пост: Screenshot by Lightshot

Кто-нибудь знает, как можно опубликовать содержимое моего блога в эту тему? Как в оригинальном посте (OP).

Что делать, если постоянно отображается «Загрузка обсуждения»?

Попробуйте открыть веб-инспектор вашего браузера на вкладке «Консоль» и проверить, нет ли там ошибок. Если вы опубликуете эти ошибки здесь, кто-то сможет помочь.

Также попробуйте открыть веб-инспектор вашего браузера на вкладке «Элементы» и найти ‘discourse-comments’. Это должно выделить один элемент в разметке. Прямо под элементом <div id="discourse-comments"> должен находиться тег script. Проверьте содержимое этого тега на наличие очевидных ошибок.

Возможно, первое, что стоит проверить, — убедиться, что запись хоста, которую вы настроили для домена в Discourse, публикует посты в публичную категорию.

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

2 лайка

Спасибо, Саймон, за помощь.

Консоль начинала пустой, но через некоторое время появилась эта ошибка:

Редактирование:
После множества попыток устранения неполадок я понял, что мне нужно было добавить «www.» в discourseEmbedUrl.

3 лайка

Всем привет! У меня несколько вопросов:

  1. Есть ли идеи, почему опция «Импортированные темы будут скрыты, пока не появится ответ» постоянно сбрасывается в активное состояние каждый раз при нажатии «Сохранить настройки встраивания», даже после того, как я её снял?

  1. При просмотре записи блога в Chrome я вижу следующее там, где должны отображаться встроенные комментарии Discourse:

А в Safari в этом месте просто пустой/белый блок без какого-либо сообщения.

При тестировании я авторизован в установке Discourse в обоих браузерах. Блог находится на другом домене, чем установка Discourse.

Заранее спасибо!

Я не знаю, почему это происходит. Что произойдет, если вы перейдете на страницу настроек вашего сайта и измените значение настройки сайта embed unlisted?

Эта настройка и настройка «Импортированные темы будут скрыты…» должны синхронизироваться друг с другом.

Пока вы не встраиваете темы в частную категорию Discourse, нахождение блога на другом домене, чем Discourse, не должно вызывать проблем.

Ошибка, которую я вижу в этой записи блога (Break Out Of Your Workout Rut With 8 AMRAP Fitness Challenges), следующая:

Refused to frame 'https://community.irla.co/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://antsylabs.com https://antsylabs.com".

Указан ли полный домен (включая www) в записи Host на вашем сайте Discourse? Похоже, вы добавили только antsylabs.com в эту настройку.

2 лайка

Именно в этом была проблема, спасибо!

Вы абсолютно правы. Я omitted «www» из этой записи, и добавление его в запись хоста привело к тому, что встроенные комментарии отображаются идеально.

Огромное спасибо за вашу помощь! Я искренне это ценю.

1 лайк

Возможно ли отображать встроенные комментарии в обратном хронологическом порядке (сначала новые, потом старые)?

В настоящее время это невозможно. Было бы здорово, если бы встроенные комментарии поддерживали выборочные опции фильтрации. Например: «все», «новые», «лучшие».

2 лайка

Возможно, что краулер не может обрабатывать немецкие умлауты, такие как Ä, Ö, Ü? Заголовки вроде “Ich würde” превращаются в “Ich würde”.

У меня довольно много вопросов, и я был бы признателен, если бы кто-нибудь мог помочь.

Я пытаюсь внедрить комментарии на сайт NextJS со статическим экспортом, то есть к моменту запуска сайта все страницы уже сгенерированы. Поэтому, хотя я видел упоминания о том, что Discourse не может обрабатывать SPA, я полагаю, что он должен справляться с моим сайтом.

Предположим, что мой форум находится по адресу forum.domain.com, а сайт, куда я хочу внедрить комментарии, — по адресу site.domain.com. Мы добавили все скрипты, связанные с комментариями, но в iframe вечно отображается «Загрузка обсуждения».

Если открыть сайт в Safari, в консоли появляется следующая ошибка:

Unable to post message to https://forum.domain.com. Recipient has origin https://site.domain.com.

Кажется, это проблема CORS, но я уже добавил и site.domain.com, и www.site.domain.com в настройки встраивания на своём экземпляре Discourse.

По какой-то причине в консоли Firefox этой ошибки я не вижу, там только:

И наконец, если перейти по адресу https://forum.domain.com/embed/comments?embed_url=https%3A%2F%2Fsite.domain.com%2Fpath%2Fto%2Fpage, там тоже вечно висит «Загрузка обсуждения». Это заставляет меня думать, что проблема где-то на стороне Discourse, а не на моём сайте. Если я что-то неправильно понимаю в механизме встраивания, буду очень благодарен за любые советы.

Что интересно, и, возможно, связано с этим: я добавил встраивание на два типа страниц: site.domain.com/path/to/page и site.domain.com/longer/path/to/page, но не добавил тег комментариев на главную страницу. Однако в Discourse я вижу тему, посвящённую главной странице site.domain.com, которая, по какой-то причине, обновляется каждый раз, когда пользователь посещает сайт.

image

Теперь у неё огромное количество правок. Часть встроенного текста содержит адрес электронной почты, который в Discourse отображается как [email protected], и все правки показываются так, будто изменяется именно эта часть.

1 лайк

Привет!

Хотел бы узнать ваше мнение по поводу этой «ошибки»: Embed: dates are not localized - #9 by weber-s

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

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

Какое решение подойдет для скрытия изображений в постах, которые встроены на стороннем сайте?

1 лайк

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

1 лайк