hokod
(hokod)
06.Январь.2022 09:41:20
1
Suppose I have 3 images posted by 3 links, and 3 captions for these 3 images.
How to make a slide post like in the 4th image (in this topic)
iMage1:
image2:
image3:
=================
image4:
Thanks!
It’s not possible to achieve this on the Topic List because only one image is serialized per Topic.
However, on a single Topic you could look at: Slick Image Gallery
1 лайк
hokod
(hokod)
06.Январь.2022 10:59:06
3
Thank you for your support.
As you say is not feasible.
So if I just want to create a slide for the content (no images),
then how can i create slide for conent in post.
You can embed a Google presentation as a slideshow in an iframe:
You need to permit this source for iframes in allowed iframes
Once you’ve made your presentation, go to File -> Publish to Web and copy the link at the end of the short wizard.
2 лайка
Same thing also works with PowerPoint Sign in to your Microsoft account
Use Office 365 online, access Powerpoint and once ready go to File -> Share -> Embed to get the iframe link
1 лайк
hokod
(hokod)
06.Январь.2022 11:16:31
6
I’m worried, this will affect SEO,
because the content is not in the discourse editor.
Instead, the content is in Powerpoint (google , or Microsoft)
I think it’s a lot to expect Discourse to be a fully featured presentation tool
Perhaps you can include Markdown versions of the slides in the following posts.
2 лайка
hokod
(hokod)
06.Январь.2022 11:21:14
8
I hope, there is a way to create a slide for the content in the post (discourse).
jrgong
(jrgong)
23.Февраль.2026 15:21:56
9
Сейчас тоже изучаю варианты. Должно быть возможно реализовать это как компонент темы, верно?
Например, существуют библиотеки для преобразования Markdown в слайды, которые можно использовать:
Вот лучшие репозитории GitHub для этой задачи, ранжированные по простоте адаптации под компонент темы Discourse.
1. Remark.js (Настоятельно рекомендуется для Discourse)
GitHub: gnab/remark
Как это работает: Remark разработан специально для работы исключительно в браузере. Вы передаете ему строку Markdown (где слайды разделены ---), и он динамически генерирует необходимый HTML/CSS для презентации на лету.
Почему это подходит для Discourse: Поскольку не требуется никаких этапов сборки, вы можете легко загрузить скрипт remark.min.js через компонент вашей темы Discourse. Вы можете извлечь Markdown из сообщения пользователя и передать его непосредственно в движок Remark.
2. Reveal.js
GitHub: hakimel/reveal.js
Как это работает: Reveal.js — это мощное решение для веб-презентаций. Хотя это прежде всего фреймворк для HTML-презентаций, у него есть встроенный плагин для Markdown.
Почему это подходит для Discourse: Он чрезвычайно функционален (заметки докладчика, экспорт в PDF, анимации, математическая верстка). Он может работать на стороне клиента, но он значительно тяжелее, чем Remark.js. Вам потребуется загрузить основную библиотеку Reveal, плагин Markdown и тему CSS Reveal в ваш компонент Discourse.
3. Marp (Markdown Presentation Ecosystem)
GitHub: marp-team/marp
Как это работает: Marp — это современный стандарт для слайдов в Markdown, использующий концепцию «Директив» для обработки темизации CSS непосредственно внутри заголовка (frontmatter) Markdown.
Почему это подходит для Discourse: Marp сильно зависит от инструментов CLI и Node.js для рендеринга. Однако они предлагают Marpit (@marp-team/marpit) — базовый фреймворк, который может парсить Markdown и выдавать HTML/CSS. Реализация этого в Discourse потребует упаковки Marpit в клиентский JavaScript-файл с помощью инструмента вроде Webpack или Rollup перед загрузкой в качестве компонента темы.
Как реализовать это как компонент темы Discourse
Чтобы переделать один из этих инструментов (например, Remark.js) в компонент темы Discourse, вам следует использовать API плагинов Discourse для перехвата определенных блоков Markdown перед их отображением на странице.
Вот высокоуровневый план того, как вы можете это реализовать:
Определите триггер: Решите, как пользователи будут указывать Discourse на необходимость рендеринга слайдов. Отличный способ — использовать специальный язык для блоков кода, например ```slides или обертку Discourse BBCode вида [wrap=slides].
Загрузите библиотеку: В файле about.json вашего компонента темы укажите внешний скрипт для Remark.js или Reveal.js, чтобы он загружался при посещении пользователем форума.
Обработайте обработанный контент: Используйте JavaScript API Discourse (api.decorateCookedElement), чтобы искать ваши блоки-триггеры при рендеринге каждого сообщения.
Рендеринг: Когда API находит блок ```` ```slides ``, он скрывает блок кода по умолчанию, создает новый контейнер <div> и инициализирует библиотеку слайдов внутри этого контейнера, используя необработанный текст из блока кода.