Как легко создать содержание для вашей статьи

1656672010 kak legko sozdat soderzhanie dlya vashej stati

Адам Келли

В этой статье я расскажу, как вы можете создать содержание для своей публикации Medium, и я покажу вам, как я создал эту функцию.

Содержание

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

Ну, вы можете сделать что-нибудь лучшее. Вот как автоматически создать содержимое для вашей статьи Medium.

1. Получите URL-адрес

Во-первых, вам нужен URL-адрес вашей средней статьи. Если он был опубликован, просто возьмите ссылку с адресной строки

FbUV0O6cwmoi23LHvzz2NrKX2MuiSju8xMVQ

Если вы все еще пишете, нажмите кнопку «поделиться» в правом верхнем углу и скопируйте ссылку оттуда

VaWdhwfh2lPCB8GLINGsV4G4dgYpvVl9akgK

2. Создайте свое содержание

Теперь легкое. Перейдите на сайт www.mediumtoc.com, вставьте свой URL-адрес в строку ввода и нажмите «перейти».

SeFydbL76uBcTWxPJBlP0hmWot5mc6li8H2f

Затем он должен предоставить вам содержимое, которое вы можете скопировать и вставить в свою среднюю статью!

eEoCmfNhuAvDpM1-72E5vu6ZJ42NpZAPsU1w

Вы можете увидеть это в действии в верхней части публикации.

Как я это сотворил

Дизайн:

Сначала я создал сайт в Sketch. Я решил взять некоторые дизайнерские подсказки с веб-сайта Medium со шрифтом с засечками для заголовка, а также использовал тот же дизайн кнопки.

Я решил использовать панель ввода, поскольку дизайн функциональный и минималистичный, стиль, к которому я стремился.

развитие:

Архитектура этой программы в значительной степени базируется на стеке JAM. Это основано на идее наличия Javascript на стороне клиента, многократного использования API и предварительно созданной разметки. Это позволяет сайтам переходить на CDN.

Архитектура сайта такова:

Интерфейс: React и Preact (легкая виртуальная реализация DOM) в производстве

Задняя часть: Express работает на Now, хотя я планирую перейти на AWS Lambda, поскольку есть только 1 конечная точка API. Версия сканирует заголовки из статьи Medium и возвращает их ссылки.

Интерфейсный хостинг / CDN: Сайт работает на Netlify, который имеет бесплатную интеграцию SSL и автоматически разворачивается с главной ветви на GitHub.

Если кого-то заинтересовала любая из этих тем, оставьте комментарии и я напишу о них больше!

Сайт создавался и разрабатывался в течение двух дней. Первый день был сосредоточен на задней части сайта и дизайне. Второй день был разработкой. Есть только 4 компонента react, и я решил не использовать redux, потому что состояние не очень сильно меняется.

Получить источник!

Это открытый код, так что вы можете получить весь код на github.com/adamisntdead/medium-toc. ✨

Большая благодарность сообществу freeCodeCamp за отличную публикацию!

Если вам понравилась эта статья, оставьте аплодисменты! ? Хотите больше подобных статей? Следуй за мной.

Добавить комментарий

Ваш адрес email не будет опубликован.