Как сделать содержание в статье ВК

Допустим, вы написали большую статью. В ней много разделов и заголовков — так нужно по смыслу.

Чтобы читатель как-то ориентировался в вашей статье, вы решаете сделать оглавление: из него можно перейти к любому разделу в статье, как в Википедии.

Вы собираете оглавление вручную, публикуете, а потом решаете поменять местами пару разделов или добавить новые. Оглавление тоже придётся переделать. Ну уж нет!

Сегодня напишем скрипт, который сам соберёт оглавление для ваших эпических лонгридов.

Задача скрипта

1. Найти все подзаголовки на странице
2. Собрать их в одном месте
3. Сделать из них ссылки

Подготовка

Возьмём стандартный шаблон страницы и заполним его текстом из нашей статьи про чужой код:

Автооглавление

Ситуация

Вам нужно решить задачу, с которой вы ещё не сталкивались, например, вывести данные в виде красивого графика.

Можно с нуля погрузиться в графическую систему языка и за 3–4 дня разобраться, как это сделать. Это полезно, если дальше вам нужно будет постоянно, каждый день рисовать новые графики. Вы освоите все возможности графической системы и в дальнейшем будете рисовать графики легко и быстро.

Статьи ВКонтакте: Ссылка на конкретное место в статье или перекрестные ссылки

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

Решение

За 10 минут найти в интернете уже готовый код, который делает что нужно, адаптировать под свой проект и спокойно продолжить работу. Код может быть неидеальным, не очень красиво написан, но:

✔️ вы потратили в разы меньше времени;
✔️ проект движется дальше, а не стоит на месте;
✔️ вы примерно поняли, как это сделано, и если что — сможете повторить в другом проекте.

Как сделать этот подход ещё лучше

Выучить английский. Большинство справочников разработчика и форумов с готовыми решениями — на английском. Чтобы понять, что там написано, что делает код и для каких ситуаций он подходит, нужно знать английский хотя бы на базовом уровне (а лучше — владеть техническим английским).

Что может пойти не так

Бывает, что разработчик без разбора копипастит код с форумов. Он не разбирается в том, что за код он использует, а просто вставляет его в свой проект. Работает — и ладно.

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

Добавляем место для оглавления

Мы будем делать оглавление в виде маркированного списка с буллетами, но вы можете сделать его каким угодно. Главное — понимать принцип работы.

Чтобы из скрипта мы смогли обратиться к этому элементу и работать с ним напрямую, сразу дадим ему название — nav. Можно дать любое другое и просто указать это в скрипте.

Пишем скрипт

Скрипт должен делать вот что:

1. Найти все подзаголовки .
2. Добавить к ним id с каким-то именем, чтобы можно было переходить к нему из оглавления.
3. Добавить новый элемент в оглавление с таким же названием, как и подзаголовок.
4. Сделать из него внутреннюю ссылку, чтобы можно было перейти в нужную часть статьи.

Немного о внутренних ссылках

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

Но есть и такая штука: с помощью специальной метки можно заставить браузер показать нам не верх страницы, а какое-то её конкретное место. Такая метка называется якорем.

Чтобы якорь сработал, нужно две вещи:

1. Дать специальное имя какому-то объекту на странице. Для этого используют свойство тега , где name — любое название.
2. В адресе страницы в конце добавить маркер #name — что означает «доскролль до объекта с ».

Получается, что, если браузер видит в адресе #name, он находит нужный объект на странице и сразу мгновенно доскролливает до него.

Например, нам нужно, чтобы страница сразу открылась на форме оплаты. Пишем в адресе page.html#payment, а в самой странице говорим форме оплаты: — и всё, она проскроллится до нужного места. И потом можно скроллить, как нам нужно. Ссылка должна выглядеть так:

А если нужно перекинуть на нужное место в странице, то просто:

Боевой скрипт

Теперь посмотрим на скрипт, который делает именно то, что нам нужно. Читайте комментарии в коде, чтобы понять, что происходит:

Вся магия здесь в двух моментах:

Эта команда взяла порядковый номер этого подзаголовка (нулевой, так как считается с нуля), добавила его в ссылку, потом взяла текст самого заголовка, добавила его в текст ссылки и из всего этого сделала кусок HTML-кода. Теперь, когда последняя команда добавит его на страницу, браузер сможет его прочитать и обработать как нужно.

Добавим наш скрипт в самый конец страницы. Теперь, если мы что-то поменяем в структуре страницы, добавим или уберём какие-то подзаголовки, оглавление само найдёт все изменения и сделает правильные ссылки.

Если его поставить в начало, то он не будет работать — на момент запуска скрипта на странице не успеет появиться ни одного подзаголовка.

Что дальше

У нас простое, но не самое универсальное решение — скрипт не обращает внимания на более мелкие подзаголовки — , и так далее. Но, владея знаниями из этой статьи, вы сможете без проблем это исправить.

Получите ИТ-профессию

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

Источник: thecode.media

Как сделать статью в вк – Раздел «Статьи» ВКонтакте: как поставить в главный блок группы

Как создать статью Вконтакте, отредактировать и опубликовать

Этот инструмент появился в Вконтакте не так давно и пришел на смену wiki-страницам. Wiki-страницы было сложно создавать, их внешний вид и читабельность контента были далеки от идеала. Теперь у нас есть редактор статей.

Статьи можно создавать абсолютно из любого места: из группы, из личной страницы, из паблика.

Видео-инструкция:

Как создать статью

Мы переходим на стену, нажимаем поле «Добавить запись». Тоже самое можно делать с личной страницы. Здесь у нас находятся виды контента, который можно приложить к записи. Среди них есть и нужный нам вид — статья. Нажимаем на иконку и открывается редактор.

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

Редактирование контента

Давайте посмотрим, как будет происходить редактирование контента. Скопирую статью с блога и вставлю в редактор. Что мы можем делать с текстом? — Выделяем любой фрагмент…

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

Между текстом можно вставлять медиа-файлы. Это, например, фотографии, видео, gif-ки или обычные звездочки для разбивки текста. Для этого сделайте абзац (клавиша Enter).

Когда статья готова, мы можем добавить обложку. Помимо этого, необходимо указать адрес ссылки, по которой будет доступна статья, поскольку статьи без ссылки публиковать нельзя. Нажмите в правом углу кнопку «публикация». Далее нажимаем сохранить, и редактор выдает нам ссылку, по которой мы разместили статью.

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

Для того чтобы статья опубликовалась, нам нужно скопировать ссылку и вставить ее на стену.

Как сделать статью в ВК вконтакте опубликовать – INFO-EFFECT

На чтение 2 мин. Опубликовано 31.05.2018

Привет! Сегодня я покажу вам как сделать и опубликовать статью в ВК. Вы можете создать статью и добавить её на свою страницу ВКонтакте. Функция Статья появилась недавно, она очень удобная, можно сохранять черновики. Можно добавить фото, видео, гиф в статью и т.д. Всё очень просто!

Смотрите далее!

Как опубликовать статью в ВК

Зайдите на свою страницу. На вашей стене, в поле Что у вас нового, нажмите на значок Статья.

Далее, у вас откроется окно. Здесь вы можете написать статью. Можно указать заголовок.

Вверху справа, нажав на вкладку Публикация, в открывшемся окне, вы можете загрузить изображение, обложку для вашей статьи. Можно создать уникальную ссылку для вашей статьи. Нажмите на кнопку Сохранить.

Далее, у вас появится уведомление Статья опубликована и доступна по вашей ссылке. Размер обложки для статьи, рекомендуется размером более 540×300 пикселей.

Всё готово! Статья будет опубликована на вашей странице и в новостной ленте ВК. Её увидят ваши друзья и подписчики.

Вот так просто и быстро вы можете писать статьи в ВК с помощью нового инструмента!

Как сделать историю в ВК с телефона

Остались вопросы? Напиши комментарий! Удачи!

Редактор статей Вконтакте. Как сделать сайт прямо ВК?

В популярной социальной сети «Вконтакте» был запущен новый редактор статей 23 января 2018 г. Платформа работает на всех современных устройствах с поддержкой операционных систем iOS, Android.
Редактор статей ВК

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

Редактор с современными технологиями

Внешний вид платформы схож с редакторами, выпущенными ранее такими социальными сетями, как Facebook и Telegram. Редактор статей «Вконтакте»полностью отошел от стандартной Wiki-разметки, используемой ранее для работы с большими текстовыми файлами.

Одно из нововведений – использование технологии Accelerated Mobile Pages (AMP), позволяющей открывать, просматривать и создавать в мобильных приложениях текстовые файлы крупного размера. Созданные тексты автоматически адаптируются под любые устройства, с которых будут открыты.

Функционал платформы

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

Написание статей, запуск платформы начинается со специальной кнопки «статья»:

Кнопка статья доступна как и при личной публикации, так и при публикации в сообществе.

• Форматирование и изменение текста с использованием обширного набора инструментов:
  

• Ускорение работы с помощью горячих клавиш, частично повторяющих панель инструментов для форматирования.
• Добавление к тексту медиафайлов (изображений, звуковых дорожек, GIF-анимаций), весь дополнительный контент можно оснащать описанием.
  

• Удобная функция автосохранения через каждые 2 сек. С момента внесения изменений в статье.
• Оформление текста для публикации изображениями и заголовками для быстрого просмотра пользователями.
  

Так выглядит опубликованная статья на стене.

• Автоматическое сохранение удаленных статей в черновики для возможности последующего восстановления без потери содержания.
• Ночной и дневной режимы, используемые читателями и создателями статей для снижения раздражения и усталости глаз.
• Функция «поделиться с друзьями» готовой публикацией.
• Отслеживание статистики просмотров и количеств прочтений статьи:

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

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

Как пользоваться редактором «Вконтакте»

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

После сохранения статьи, она будет доступна по ранее указанному адресу, опубликовав который на стене, автоматически подгружается обложка и кнопка «Читать».

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

Как сделать сайт с помощью редактора статей?

Сделать привлекательный заголовок, сам сайт сделать в виде загруженных фотографий, видео отзывов, оформить ссылки, сделать раздел контакты, описать схему работы. Таким образом получается по сути полноценный сайт, который можно использоваться для привлечения клиентов.

Зачем и кому пригодится новый редактор

Текстовая составляющая занимает колоссальное пространство в социальных сетях и на просторах интернета. К созданию и оформлению текстов на основе собственных мыслей, описания происходящих событий, приходят все пользователи. Чаще всего созданием собственного контента занимаются администраторы сообществ.

Все пользователи, уже разобравшиеся, как сделать запись в редакторе статей «Вконтакте», оценили простой интерфейс и продуманный функционал платформы. Нововведение нельзя назвать полноценным прорывом, однако размещение и просмотр текстового контента с помощью технологии AMP обещает быть удобным для всех пользователей.

Источник: russia-dropshipping.ru

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

В любом случае постараюсь объяснять, ориентируясь на начинающих и еще мало знающих пользователей (сам таким был и во многих вопросах остаюсь до сих пор).

Для чего и как можно создать оглавление статьи в Html

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

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

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

Давайте с якорей и начнем. Я расставляю их у промежуточных заголовков в статье. Раньше это можно было делать с помощью вот такой вот конструкции:

В атрибуте name прописывается уникальная для этой статьи метка. Однако сейчас такой метод вставки якорей считается невалидным (нежелательным) и в качестве якорей предлагается использовать значения атрибута ID, который можно будет прописать, например, в тегах H1-H6 тех самых промежуточных заголовков в статье.

Про это я писал в статье про Создание якорей и хеш-ссылок (кстати, перейдя по ней вы как раз и переместитесь в нужное место статьи, а не в ее начало, как было бы при обычной не хеш-ссылке).

Давайте для примера рассмотрим статью про Гогетлинкс, где первый подзаголовок выглядит в коде примерно так:

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

Как видите, там у меня стоит уникальный идентификатор ID с уникальным для этой статьи значением ggl. Для наглядности приведу код и второго подзаголовка:

Думаю, что логика понятна. Теперь на эти места в Html коде страницы можно ссылаться, чтобы статья открывалась или же прокручивалась (в случае, если вы находитесь в ее начале, где и расположено оглавление) до этого подзаголовка.

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

У меня, кстати, был случай, что проставленная мною метка для якоря в ID совпала с уже существующей и описанной в CSS файле, что вызвало у меня по началу искреннее удивление, ибо подзаголовок стал выглядеть крайне вычурно и необычно. Причем в той статье он было пока что только один, что и заставило меня какое-то время ломать голову над случившимся.

Ну вот, самое сложно сделали, теперь можно и, собственно, оглавление добавлять. В нашем примере оно будет выглядеть так:

Гиперссылки все ведут на одну и ту же страницу, где и расположена эта статья, но в конце у них через решетку (# — ее иногда называют хеш) стоит уникальная метка, каждая из которых ведет на свой якорь.

В принципе, можно было бы вместо этого написать более коротко:

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

Но проблема заключается в том, что данное оглавление будет выводиться и на главной (а у кого-то и в рубриках, тегах или других архивах), а там уже такие ссылки никуда не приведут. Поэтому оставляем первый вариант с полными Урлами.

Все, теперь только остается прописать CSS свойства для селектора класса ogl и дело в шляпе. Обычно, все стили выносятся в отдельный файл или несколько файлов. В случае Вордпресс он живет в папке с используемой темой:

/wp-content/themes/название темы/style.css

В Joomla его стоит поискать в папке с шаблоном, который у вас в данный момент используется.

Чтобы получить такой же вид оглавления (содержания) для статьи как у меня, достаточно будет добавить в него эту строчку кода:

Разберем по порядку CSS свойства:

1. float:right — делает блок с оглавлением плавающим и заставляет его прижаться к правому краю (подробнее читайте в статье про инструменты блочной верстки Float и clear
2. border:1px dotted black — задает рамку по всем сторонам блока шириной в один пиксел, нарисованную прерывистой линией черного цвета. Про рамки и упомянутые чуть ниже отступы читайте в статье — Задаем в CSS внутренние (Padding) и внешние (Margin) отступы, а так же рамки (Border)
3. padding:5px 5px 0 5px — задаются отступы в 5 пикселей от верхнего, правого и левого края рамки до заключенного в нее текста (пунктов списка).
4. margin:5px — отступы в пять пикселей от внешнего края рамки оглавления до соседних элементов

Кроме этого вы вольны будете добавить сюда и отдельную настройку для шрифтов с помощью свойства Font (Weight, Family, Size, Style) или еще что-то, но лично мне показалось и этого достаточно.

Для того, чтобы экспериментировать с оформлением, можно будет, не залезая в файл style.css, поиграться со стилями, прописав их прямо в Html коде с помощью атрибута style, а уже потом перенести окончательный вариант в отдельный стилевой файлик. Выглядеть это будет примерно так:

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

P.S. Недавно добавил еще и слово «Оглавление», чтобы было понятнее, что это такое. Понятное дело, что для шести сотен статей делать это вручную было бы весьма утомительно, поэтому использовал богатый инструментарий CSS, а именно псевдоэлемент before. В файле СSS была добавлена соответствующая строчка:

.ogl:before

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Все очень понятно!

А этот вариант не засоряет чистоту кода заголовков? Слышал, что теги h1-h6 должны быть полностью чистыми в html-плане.

Спасибо за статью, очень помогла.

Oksana и Артём: Вам спасибо, что читали и комментировали.

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

Все хорошо, только бы автоматизировать этот процесс, а то слишком долго вручную! Вот как на блоге wp-kama.ru приводится решение — код добавить в functions.php. Но тоже не без недостатков

NikEL: ну,да, было бы здорово. А вы не могли бы ссылочку на статью уважаемого Камы кинуть. Спасибо.

NikEL: замечательно, спасибо. Кама, вообще, большой молодец — много его наработок применял на практике и все фунциклировало. Он безусловно специалист с большой буквы.

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

Насчет Камы абсолютно согласна — этот человек реально вносит вклад в «развитие» WordPress’а, сама тоже пользуюсь его кодом. А насчет способа создания оглавления — пусть каждый выбирает, как ему удобнее, хорошо, что есть альтернатива

Спасибо огромное, попробую применить. Только вот вопрос — в файл стилей куда вставлять эту строчку, которую вы в статье даете? Или это не имеет значения, куда?

Ирина: пожалуйста. Не имеет значения, главное, чтобы не внутри какого-нибудь другого CSS свойства (строго после закрывающей фигурной скобки — можно с новой строки).

Добрый день ! Вы не сталкивалиьс с такой проблеммой, когда при вводе текста для пароля или поиска, на странице ворд пресс, тастатура пишет только большими буквами

Здарово) Просто хотел спросить, Дмитрий. Вот я слежу за вашим сайтом. и за другими сайтами схожей тематики. И постоянно наблюдаю одну и ту же картину — вас копируют. не в плане текста, а в плане тем для написания, даже заголовки «блоггеры» идентичные пишут. хотя вполне можно было другие ключи в заголовок вставить. Вот как раз по этой статье за вами несколько «блоггеров» написало. Вас бесит, что вас копируют и просто идут по вашим стопам?)

Лично меня как читателя разных блогов это бесит. просто сначала читаю у вас, а потом еще на нескольких других сайтах встречаю через месяц-второй. бред.)

Ддима: ну, как сказать. Повлиять я на это не могу, поэтому отношусь спокойно. Спасибо.

Спасибо за статью , хорошие стать пишите, но у меня такой вопрос не будет ли считаться оглавление дублями?

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

Добрый день, нужно или нет добавлять к ссылкам содержания статьи тег rel=»nofollow». Спасибо за ответ.

Klim Ivanov

Что делать если в сайте закреплено верхнее мелю и при переходе по ссылке за ним скрывается часть нужного контента входящего в главу?

Говорила мне мама, учись сынок. А её не слушал.

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

Спасибо за статью, просто и понятно. У меня, как и у предыдущих комментаторов, сверху сайта есть закрепленное меню, поэтому поставила якоря не в заголовки, а чуть выше в тексте. Получилось хорошо.

Спасибо все получилось, ожидания оправдались, по статье все понятно сделал с первого раза!

Ваш комментарий или отзыв

Источник: ktonanovenkogo.ru