Основы · 2

Текстовый редактор

Текстовый редактор — то место, где вы меняете слова на сайте. На этой странице мы поставим редактор, откроем в нём папку сайта и посмотрим, как найти страницу, увидеть превью и сохранить.

Пять минут, никаких настроек. Подойдёт любой редактор; в примерах — VS Code, потому что он бесплатный и одинаковый на macOS, Windows и Linux.

Простыми словами

Каждая страница сайта на HERON — обычный текстовый файл с окончанием .md. Редактор открывает такой файл, как тетрадь на нужной странице. В отличие от Word он не добавляет скрытого оформления: что вы напечатали, то и сохранилось, и HERON прочитает ровно это.

Когда нужна эта страница: перед первой правкой страницы. Когда можно пропустить: если у вас уже есть любимый редактор. Подойдут Блокнот, TextEdit в режиме простого текста, Sublime Text, Zed.

Установите VS Code

1
Скачайте

На code.visualstudio.com нажмите кнопку загрузки. Сайт сам выберет версию для вашей системы.
2
Установите

macOS: откройте скачанный файл и перетащите Visual Studio Code в «Программы». Windows: запустите установщик и поставьте галочки «Add to PATH» и «Open with Code». Linux: пакет .deb или .rpm либо VS Code из центра приложений.
3
Windows с WSL

Установите в VS Code расширение WSL (от Microsoft). Оно позволяет открывать папки, которые лежат в Ubuntu, — там и будет ваш сайт.
4
Запустите

Откроется вкладка приветствия. Её можно закрыть.

Откройте папку сайта

Через меню

Самый простой способ, одинаковый везде.

Что сделать: File → Open Folder, найдите папку сайта (например, my-site), нажмите Open.
Что видно: Слева панель с папками: content, media, theme и файл site.yaml.
Доверие: VS Code может спросить, доверяете ли вы авторам папки. Это ваша папка — отвечайте Yes.

Из терминала

Быстрее, когда вы уже в папке сайта.

Что сделать: В терминале в папке сайта наберите code . (пробел и точка: «эта папка»).
Windows: Выполняйте в терминале Ubuntu: расширение WSL откроет папку из Linux.
Если «command not found»: На macOS откройте VS Code, нажмите Command, Shift и P, наберите shell command, выберите Install 'code' command in PATH.

Что лежит в папке

Одинаковая структура в каждом сайте на HERON.

content/: Ваши страницы. Внутри — по папке на каждый язык сайта (например, en/); у сайта на одном языке такая папка одна. Один файл — одна страница, index.md — главная.
media/: Фото и другие файлы для страниц.
site.yaml: Настройки: название, домен, языки, контакты.
theme/: Внешний вид сайта. Чтобы писать страницы, его трогать не нужно.

Поменяйте страницу

1
Откройте страницу

Слева откройте content, затем папку вашего языка, затем index.md — это главная вашего сайта. Файл откроется посередине.
2
Найдите текст

Вверху, между двумя строками из трёх дефисов, — настройки страницы: title, h1, description. Ниже — текст страницы.
3
Поменяйте слово

Исправьте строку h1 или любое предложение ниже. Кавычки и двоеточие оставьте как есть.
4
Сохраните

Command и S на macOS, Ctrl и S на Windows и Linux. Белая точка на вкладке значит «не сохранено»; после сохранения она пропадает.
5
Посмотрите результат

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

Превью Markdown в редакторе

Рядом с текстом

VS Code показывает, как будет выглядеть текст, без HERON.

Что сделать: В открытом .md-файле нажмите Command, K, затем V на macOS или Ctrl, K, затем V на Windows и Linux.
Что видно: Справа откроется оформленный текст, он меняется вместе с набором.
Помните: Это превью обычного Markdown. Настоящий вид с темой, карточками и вкладками — на localhost:8000, когда работает HERON.

Найти текст по всему сайту

Удобно, когда фраза встречается на нескольких страницах.

Что сделать: Command, Shift и F (macOS) или Ctrl, Shift и F.
Что видно: Все файлы и строки с этим текстом. Нажмите на строку, чтобы открыть.

Полезные дополнения

Необязательно, но помогает.

Проверка орфографии: Расширение Code Spell Checker подчёркивает опечатки. Для русского добавьте словарь Russian - Code Spell Checker.
YAML: Расширение YAML (от Red Hat) раскрашивает site.yaml и предупреждает о сбитом отступе.
Перенос строк: View → Word Wrap, чтобы длинные абзацы помещались в окно.

Вопросы

Можно писать страницы в Word или Google Docs?

Не напрямую: они сохраняют оформление, которое HERON не читает. Пишите текст там, если удобно, затем вставьте его в .md-файл как простой текст и добавьте пометки Markdown. Какие — показано в Markdown за 10 минут.

Я что-то сломал в файле. Как отменить?

Command и Z или Ctrl и Z отменяют по шагу. Если сайт в git, панель Source Control в редакторе показывает каждую правку и позволяет её отменить. См. Git и GitHub.

Что значат три дефиса вверху?

Они обрамляют настройки страницы: заголовок для поисковиков, заголовок на странице, описание и другое. У каждой строки есть подсказка. Полный список — в Формате страницы.

Что дальше?

Освойте несколько пометок, которыми пишутся страницы: Markdown за 10 минут.

Текстовый редактор

Простыми словами

Установите VS Code

Скачайте

Установите

Windows с WSL

Запустите