Скрипт для добавления оглавления в ваши сообщения среднего размера

TL; DR

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

Фон

Обычно я стараюсь, чтобы статьи были небольшими. По возможности, не более 1000 слов, так как статьи такого размера легче писать. Но бывают случаи, когда вы предпочитаете длинные статьи, когда этого требует тема. Например, моя статья Руководство для начинающих по инвестированию в криптовалюты содержит около 8000 слов. Так что добавление указателя было удобно, так как я мог перейти к любой части статьи, а также помогло мне поделиться ссылкой на соответствующий вопрос, когда у кого-то были сомнения. Помните, что обмен микроконтекстом станет более важным в ближайшие несколько лет.

Сценарий

Вы также можете проверить сценарий на https://gist.github.com/nkgokul/2690b1c7a11c6a9de5d177ae11bcf293.

  1. Скрипт работает только с опубликованными постами.
  2. Поэтому после публикации сообщения скопируйте следующий скрипт и запустите его в консоли javascript браузера.
  3. Оглавление создается вверху вашего сообщения.
  4. Скопируйте созданное оглавление, отредактируйте свой пост и вставьте его в нужное место.
getTOCHtml();
function getTOCHtml() {
let TOCHtml = ""
$$("h2,h3,h4,h5").forEach(function(ele){
                TOCHtml += `<a href='#${ele.id}'>${ele.innerText}</a><br/>` ;
                //console.log(ele.innerText);
            })
            //console.log(TOCHtml);
           
            var parentElement = $('.postArticle-content');
            // Get a reference to the first child
            var theFirstChild = parentElement.firstChild;
// Create a new element
            var newElement = document.createElement("div");
            newElement.innerHTML = TOCHtml
// Insert the new element before the first child
            parentElement.insertBefore(newElement, theFirstChild);
    
}

Для технарей

Medium хорошо добавляет идентификаторы ко всем абзацам, а также теги h1-h6. Приведенный выше скрипт просто берет идентификаторы тегов h2 - h5 и генерирует для них ссылки.

Пост скрипт

Мы работаем над набором инструментов, которые помогут вам организовать все ваши онлайн-чтения. Используя наш первый инструмент, вы сможете выделять текст, добавлять заметки и теги ко всему, что вы читаете в Интернете. Если вы хотите попробовать, оставьте свой адрес электронной почты на https://learningpaths.io/. Мы свяжемся с вами, когда будем готовы дать вам возможность попробовать.

TOC для этого сообщения

В качестве POC я создал следующий index. Просто нажмите на любую из ссылок, чтобы понять, что я имею в виду.

TL; DR
Фон
Сценарий
Для технарей
Сценарий поста
СОДЕРЖАНИЕ для этого поста