Я создал закладку для создания оглавления сообщений форума

[ShunS (Shun Sakurai)]

Содержание:

Краткое описание
Как использовать
    Установка
          Что делает код
    Создание оглавления
    Использование оглавления
Технические заметки для технических специалистов
Скриншоты

Я создал закладку для генерации сворачиваемого оглавления (ToC), похожего на то, что показано выше.

Надеюсь, это поможет активным участникам сообщества, которые пишут длинные тексты!

Краткое описание

Иногда я пишу длинные темы/посты и мне нужно было оглавление для удобства чтения.
Я нашел несколько существующих решений, например DiscoTOC - automatic table of contents, но мне нужен был инструмент только для личного использования, без необходимости установки чего-либо для всего сообщества.

После публикации структурированного поста нажмите на закладку, и оглавление будет скопировано в буфер обмена. Отредактируйте пост и вставьте оглавление в начало!

Как использовать

Установка

1. Сохраните страницу как закладку.
2. Измените имя, например, “ Скопировать оглавление форума в буфер обмена”.
3. Измените URL и вставьте следующий код. При необходимости настройте код — см. два пункта “Опционально” ниже.

javascript:(function() {
	const copyForumTocToClipboard = function() {
		const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/);
		if (!urlMatch) return;

		const postIndex = urlMatch ? urlMatch[1] : 1;
		const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6>a.anchor,h5>a.anchor,h4>a.anchor,h3>a.anchor,h2>a.anchor,h1>a.anchor');
		if (!anchors) return;

		let toc = '';
		anchors.forEach(anchor => {
			toc +=
				' '.repeat((anchor.parentNode.nodeName[1] - 1) * 4) +
				`<a href="${anchor.href}">${anchor.parentNode.textContent}</a><br>\n`;
		});
		if (!toc) return;

		navigator.clipboard.writeText('<details open><summary>Содержание: </summary><ul>\n' + toc + '</ul></details>');
	};

	copyForumTocToClipboard();
})();

Что делает код

1. Проверяет, является ли URL постом сообщества: https://{domain}/t/{title}/{topicID}(/{postIndex}).
2. Проверяет наличие якорей (заголовков, таких как <h1> и # ) в посте.
3. Генерирует HTML-код для оглавления.
4. Копирует код в буфер обмена.

Создание оглавления

1. Опубликуйте пост со структурой (HTML <h1>, <h2>, … и Markdown # , ## , …). Discourse присвоит якоря каждому заголовку.
2. Убедитесь, что выбран ваш пост, посмотрев на индикатор прогресса (например, 1/22) или URL (например, /1).
3. Нажмите на закладку в панели закладок.
4. Оглавление будет скопировано в буфер обмена.

Использование оглавления

1. Нажмите на значок карандаша, чтобы отредактировать пост.
2. Вставьте код в начало.
3. Проверьте, правильно ли отображаются пункты оглавления (Известная проблема: закладка может пропускать некоторые эмодзи).
4. (Опционально) Измените/переведите “Содержание”.
5. (Опционально) Удалите open, если хотите, чтобы оглавление было свернуто по умолчанию.
6. Нажмите “Сохранить редактирование”. Если сделать это через несколько минут после публикации поста, значок карандаша “отредактировано” не появится.

Технические заметки для технических специалистов

• Вы также можете скопировать и вставить код JavaScript в консоль разработчика.
  • Я обернул код в функцию, потому что return; не работает при использовании вне функций.
• Подход с ' '.repeat() выглядит неаккуратно при предварительном просмотре темы, но, на мой взгляд, лучше всего смотрится в самом посте (по сравнению с использованием <li></li>).
• При тестировании querySelectorAll почему-то первый элемент в h6>a.anchor,h5>a.anchor, ... не находился. Я поставил h6 в начало, так как он, вероятно, используется реже всего.
• Закладка может перестать работать, если Discourse изменит свой UI/DOM. Пожалуйста, напишите мне, если найдете ошибки.

Скриншоты

Как новый пользователь meta.discourse.org, я не могу добавить несколько изображений, поэтому я объединил все скриншоты в одно изображение:

[anderer]

О, здорово! Можно ли расширить это, чтобы создать оглавление для всего поста со всеми ответами?

[Lhc_fl (Linca)]

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

[mcwumbly (Dave McClure)]

Очень круто! Спасибо, что поделились, @ShunS!

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

[ShunS (Shun Sakurai)]

Спасибо за ответы

Как отмечает @Lhc_fl, подход на основе DOM (HTML/JavaScript) ограничен в количестве элементов, которые мы можем обрабатывать. Для таких задач может помочь API Discourse.
Другая проблема при создании оглавления для ответов заключается в том, что сложно определить заголовок для каждого ответа. Мы могли бы использовать информацию, например, автора и дату, но я не уверен, что это будет полезнее существующей полосы прокрутки.

Спасибо, @mcwumbly!

[Lilly (Lillian)]

@ShunS это очень круто, спасибо, что поделились. Также добро пожаловать в Meta

[RBoy]

Это просто великолепно и именно то, что я искал. Похоже, это решает проблему:

Automatic TOC inline/top of post

here is an alternative solution that’s very cool and outside the box

Почему бы не отправить это в Discourse, чтобы включить его как официальный плагин или функцию? Его можно было бы добавить в панель инструментов редактора, чтобы автоматически вставлять оглавление в пост.

[RBoy]

У меня есть одно предложение: можно ли добавить маркер в начало строки оглавления? В моём случае каждый заголовок занимает длинную строку, поэтому маркер помогает различать одно вхождение от другого.

[ShunS (Shun Sakurai)]

Привет, @RBoy, спасибо за обратную связь и предложение!

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

Даже такой (на первый взгляд) простой плагин, как Spoiler Alert, представляет собой большой репозиторий, а у меня нет достаточного времени, чтобы полностью посвятить себя его разработке. Поэтому я надеюсь, что Discourse сможет в приоритетном порядке рассмотреть такие запросы, как Automatic Table of Contents generation, и в то же время разработать нативную функцию

---

Ниже представлена версия с маркерами списка. Расстояния между тегами <ul> и <ul> оказались слишком большими, поэтому я предпочёл исходный вариант без маркеров.

Скриншот:

Код:

javascript:(function() {
	const copyForumTocToClipboard = function() {
		const urlMatch = window.location.href.match(/\/t\/[^\/]*\/\d+\/?(\d*)/);
		if (!urlMatch) return;

		const postIndex = 1;
		const anchors = document.querySelectorAll('#post_' + postIndex + ' div.cooked h6>a.anchor,h5>a.anchor,h4>a.anchor,h3>a.anchor,h2>a.anchor,h1>a.anchor');

		let toc = '';
		let currentLevel = 1;
		anchors.forEach(anchor => {
			newLevel = anchor.parentNode.nodeName[1];
			levelChange = newLevel - currentLevel;
			toc +=
				((levelChange >= 0) ? '<ul>'.repeat(levelChange) : '</ul>'.repeat(levelChange * -1)) +
				`<li><a href="${anchor.href}">${anchor.parentNode.textContent}</a></li>`;
			currentLevel = newLevel;
		});
		if (newLevel > 1) toc += '</ul>'.repeat(newLevel - 1);
		toc = '<details open><summary>Table of contents: </summary><ul>\n' + toc + '</ul></details>';

		navigator.clipboard.writeText(toc);
	};

	copyForumTocToClipboard();
})();

[supermathie (Michael Brown)]

@RBoy

официальный плагин или функция

У нас уже есть плагин ToC, и ему не нужно поддерживать оглавление в теле поста.

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

Однако этот инструмент выглядит отлично, когда DiscoToC недоступен. Отличная работа!

[Lhc_fl (Linca)]

Это можно сделать с помощью компонента темы. Посмотрите на метод decorateCookedElement в api — он должен оказаться полезным.

[ShunS (Shun Sakurai)]

Привет @supermathie, спасибо за ответ.

когда DiscoToC недоступен

Да, это и есть различие. Я создал закладку, потому что не могу решить, какой «компонент темы» установить на форум, где я обычно бываю, и лишь немногие пишут длинные тексты, требующие оглавления.

---

Спасибо @Lhc_fl, это очень полезно!

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

Однако, если в сообщество можно добавить компонент темы, то уже существует DiscoTOC, как сказал @supermathie

[RBoy]

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

Automatic TOC inline/top of post

Is it possible to have the TOC within the post itself at the very top (kind of like what Word does with generating an automatic TOC). The issue is that it’s making the side look very cluttered because the heading are actually long sentences in our case and that’s making the whole page unreadable. Having it embedded within the topic itself at the very top would solve this issue and still allow us easy updates to the Wiki while having the plugin automatically update the TOC and not clutter the si…

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