Редактор WYSIWYG

Редактор WYSIWYG

Как и почти любая другая CMS, Publii включает редактор WYSIWYG (Что вы видите, то и получаете) для создания контента. Этот редактор позволяет пользователям писать текст, вставлять картинки и другие элементы так же, как вы это делали бы в стандартном текстовом редакторе, таком как Microsoft Word, и преобразует его для вас в удобный для браузера HTML. Таким образом, вы обнаружите, что писать контент несложно, даже если вы никогда раньше не создавали веб-сайт, но есть несколько дополнительных опций, о которых стоит знать, которые доступны через панель инструментов редактора, которую мы рассмотрим здесь.

Панель инструментов редактора WYSIWYG

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

Базовое форматирование

Есть несколько опций, без которых не должен быть ни один текстовый редактор, и в первом разделе панели инструментов они описаны:

  • Измените текст на жирный шрифт.
  • Измените текст на курсив.
  • Добавьте подчеркивание к тексту.
  • Зачеркнутый текст.
  • Выровнять текст по левому краю.
  • Выровнять текст по центру.
  • Выровнять текст по правому краю.

В этом первом разделе также представлены некоторые опции, которые менее распространены в текстовых редакторах, такие как Вставить / удалить ссылкуВставить изображениевставить видео и Создать оглавление, а также опции, которые распространены в текстовых редакторах, но которые имеют дополнительные опции или работают немного по-другому, такие как маркированные списки и списки номеров. Информацию об этих параметрах можно найти ниже.

Чтобы вставить ссылку, переместите курсор в область, куда вы хотите добавить ссылку, или выделите текст, который вы хотите преобразовать в ссылку, затем щелкните значок Вставить ссылку на панели инструментов. При этом откроется всплывающее меню с дополнительными опциями ссылок, а именно:

  • Url - Вставьте сюда URL страницы, на которую вы хотите разместить текстовую ссылку. Если вы хотите создать привязку к другому заголовку на той же странице, щелкнув по этому полю, отобразится список доступных заголовков, а также верхние или нижние ссылки по умолчанию.
  • Текст для отображения - Введите текст, который должен быть преобразован в ссылку здесь; если вы выделили блок текста перед щелчком по значку, он уже будет заполнен.
  • Заголовок - введенный здесь текст будет отображаться при наведении курсора мыши на ссылку пользователем.
  • Target - если установлено значение None, ссылка откроется в том же окне браузера. Если установлено значение Новое окно, ссылка откроется в новой вкладке или окне, в зависимости от настроек пользователя.

Нажмите Ok после заполнения полей, чтобы вставить ссылку. Чтобы удалить ссылку, просто щелкните связанный текст в редакторе, а затем щелкните значок Удалить ссылку на панели инструментов.

Вставка смайликов

Редактор Publii WYSIWYG включает в себя широкий выбор смайликов, которые можно вставлять в ваш контент. Чтобы открыть экран смайликов, щелкните значок смайлика (который выглядит как смайлик) на панели инструментов. Откроется всплывающее окно с доступными смайликами.:

всплывающее окно с смайликами

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

Вставка цитат из блоков

Блок-цитаты - отличный способ выделить важные фрагменты текста в вашем посте или привлечь внимание к конкретным цитатам. Чтобы вставить цитату из блока, щелкните значок цитата из блока на панели инструментов. Это позволит выровнять текст по центру, увеличить размер шрифта и добавить значок перед текстом, указывающий, что это цитата. Затем вы можете продолжить ввод текста как обычно; нажатие Enter один раз переместит курсор вниз по строке, но сохранит стиль кавычек-блоков. Нажмите Enter еще раз, не добавляя дополнительного текста, чтобы завершить цитирование блока.

Вставка маркированных списков и нумерованных списков

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

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

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

Вставка изображений

Есть два способа добавлять изображения к своим постам. Первый и самый простой способ - это просто перетащить изображение, которое вы хотите использовать, в область редактора; изображение будет автоматически загружено и вставлено в выбранное в данный момент положение курсора. Однако этот метод вставляет только изображение с настройками по умолчанию. Если вы хотите более точно настроить внешний вид изображений, вам следует вместо этого использовать кнопку Вставить / Отредактировать изображение, которая находится в правом верхнем углу панели инструментов редактора.

Вставка изображений

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

  • Исходный код - отображает путь к изображению, которое будет вставлено в публикацию. Нажмите на значок справа от поля, чтобы открыть файловый браузер, затем выберите изображение, которое вы хотите вставить со своего компьютера. В качестве альтернативы, если изображение, которое вы хотите использовать, находится в Интернете, вы можете ввести URL-адрес изображения в это поле; не забудьте убедиться, что у вас есть необходимые разрешения на публикацию изображения, если вы не владеете правами на него!
  • Альтернативное описание - Добавьте описание к изображению; оно будет отображаться, если изображение не загрузится, или прочитано программой чтения с экрана, чтобы предоставить информацию о изображении для слабовидящих.
  • Ширина / высота - задает ширину и высоту изображения в пикселях; при выборе изображения фактические размеры будут автоматически заполнены в этих полях, хотя при необходимости вы можете изменить их, чтобы изменить размер изображения.
  • Ограничение пропорций (значок замка) - когда эта опция включена, соотношение сторон выбранного изображения будет сохранено при изменении размера, гарантируя, что изображение не будет выглядеть слишком растянутым. После включения параметр width в поле Ширина автоматически заполнит поле height соответствующим размером.
  • Класс - эта опция позволяет изменять внешний вид изображения в записи. Выберите из полного изображения, при котором изображение занимает весь текстовый столбец, широкого изображения, при котором изображение растягивается до краев страницы, или изображения, выровненного по левому краю или центру, при котором уменьшенная версия изображения размещается слева, справа или по центру экрана, имитируя макет газеты.
  • Показывать подпись - Когда эта опция включена, под вставленным изображением в редакторе будет добавлено поле подписи, в котором вы можете ввести текст подписи к изображению.

Примечание: Если вы сталкиваетесь с проблемами при загрузке, изменении или генерации изображений, попробуйте переключиться с установленного по умолчанию движка для обработки изображений Sharp на включенный движок JIMP, который может быть для вас более стабильным. Вы можете изменить, какой движок используется для изменения изображений, в разделе Глобальные настройки (опции доступны только для пользователей Windows и macOS).

Редактирование существующего изображения

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

Вставка галерей

Галереи в Publii поддерживаются Photoswipe, легким решением, которое создает галереи изображений, удобные для прикосновения, с минимальными усилиями.

Галерея WYSIWYG

Создание галереи

  1. Чтобы добавить галерею к записи, нажмите на значок, отображающий несколько изображений (справа от стандартного значка Вставить изображение). Раздел, представляющий галерею, будет добавлен в текст публикации, обозначенный контуром, с кнопкой Добавить изображения в галерею в центре.
  2. Нажмите на кнопку Добавить изображения, чтобы открыть всплывающее окно Редактировать галерею; если это новая галерея, также откроется окно проводника, где вы можете выбрать любые изображения для добавления в свою галерею.
  3. Дважды щелкните изображение, чтобы добавить его в свою галерею; как только оно будет добавлено, вы можете добавить к нему альтернативный текст и подпись к изображению с помощью предоставленных полей.
  4. Чтобы добавить больше фотографий, нажмите на кнопку Добавить изображения в правом нижнем углу окна редактирования.
  5. После того, как все ваши изображения будут добавлены, выберите количество столбцов для галереи, используя раскрывающийся список в левом нижнем углу окна редактирования, затем нажмите кнопку Ok, чтобы сохранить изменения.

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

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

Настройка вашей галереи

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

  • Интервал между элементами - устанавливает количество пробелов между каждым изображением из галереи, которое по умолчанию равно 0,5 REM; Значения REM рекомендуются для поддержания относительного расстояния между фотографиями разных размеров на экранах разных размеров (в основном, размер промежутка между разными фотографиями остается относительно одинаковым, поэтому на маленьких экранах нет больших промежутков), но могут использоваться и другие, такие как px и vw.
  • Стиль лайтбокса - определите, будет ли лайтбокс (фон, отображаемый вокруг фотографии при нажатии на нее в галерее) светлым или темным, чтобы соответствовать эстетике вашего сайта.
  • Прозрачность наложения лайтбокса - устанавливает прозрачность лайтбокса при просмотре отдельной фотографии; значение 0 будет полностью прозрачным, в то время как значение 1 будет полностью непрозрачным.
  • Расширенные настройки лайтбокса - При включении будут показаны дополнительные опции для управления вашим лайтбоксом.

Если включены расширенные настройки лайтбокса, будут доступны следующие дополнительные опции, обеспечивающие дополнительные элементы управления лайтбоксом в дополнение к стандартным сенсорным элементам управления:

  • Текущий слайд / общее количество - Если включено, в лайтбоксе будет отображаться общее количество изображений в галерее, а также номер просматриваемой в данный момент фотографии.
  • Кнопка увеличения / уменьшения масштаба - определяет, будет ли добавлена отдельная кнопка для увеличения / уменьшения масштаба в лайтбокс; пользователи также могут увеличивать или уменьшать масштаб, щелкая изображение.
  • Кнопка переключения на полноэкранный режим - добавляет кнопку для отображения изображения на весь экран для более детального просмотра.
  • Кнопка Поделиться - включает кнопку поделиться, чтобы пользователи могли делиться вашими фотографиями в социальных сетях.
  • Кнопка закрытия - отображает кнопку для закрытия лайтбокса при просмотре одной фотографии.
  • Стрелки "Следующая" / "Предыдущая" - включает кнопки для прокрутки между фотографиями в галерее.
  • Предварительный загрузчик - включает анимацию предварительного загрузки, которая запускается всякий раз, когда загрузка изображений занимает больше 1 секунды.
  • Закрывать галерею при прокрутке страницы - если включено, лайтбокс галереи будет закрыт, когда пользователь прокручивает страницу вниз (обратите внимание, что эта опция применима только к устройствам, которые не поддерживают сенсорное управление, таким как настольные компьютеры).
  • Навигация с клавиатуры - позволяет пользователям настольных компьютеров или ноутбуков использовать клавиатуру для навигации между изображениями в галерее.

Вставка видео

Онлайн-видео, предоставляемое через Youtube, Dailymotion и т.п., является популярным способом предоставления и потребления контента, поэтому Publii включает поддержку встраивания этих видео в ваши посты. Чтобы вставить видео, точно так же, как при вставке изображения, наведите курсор на редактор, в который вы хотите вставить видео, затем нажмите на опцию Вставить / Отредактировать видео в правом верхнем углу панели инструментов редактора; откроется всплывающее окно с параметрами, относящимися к конкретному видео, которые являются:

всплывающее окно "Вставить настройки видео"
  • Источник - исходный URL видео, которое вы хотите встроить; просто скопируйте полный URL (например, http: //www.youtube.com/watch?v=11a11a11a11) и добавьте его в это поле; необходимый код для вставки будет сгенерирован автоматически. Вы можете скопировать предоставленный код для вставки прямо из видео и вставить весь код в добавьте вкладку, щелкнув добавьте текст в верхней части boxout.
  • Ширина / высота - установите ширину и высоту видео так, как вы хотите, чтобы оно отображалось в публикации, в пикселях.
  • (Значок замка)  Ограничение пропорций - Как и при вставке изображений, включение этой опции гарантирует сохранение соотношения сторон видео при изменении размера; после включения значения ширины в поле Width высота будет автоматически заполнена, чтобы соответствовать исходному соотношению сторон.

Вы также должны увидеть три разных раздела, перечисленных в левой части всплывающего окна; Общие (раздел по умолчанию), Встраивание (позволяет добавлять код встраивания для вашего видео вместо указания прямого источника) и Дополнительно. Расширенные параметры позволяют выполнить две дополнительные настройки:

  • Альтернативный URL источника - Если у вас есть альтернативное местоположение, которое Publii может использовать, если первый источник не работает, введите его здесь.
  • Медиа-постер (URL изображения) - Установите миниатюру для видео так, как оно будет отображаться в блоге. Вы можете ввести URL-адрес изображения, которое хотите использовать, или щелкнуть значок со стрелкой вверх справа от поля, чтобы загрузить свое собственное изображение для использования в качестве миниатюры.

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

Если вы уже вставили видео и хотите изменить настройки позже, щелкните по видео в редакторе, затем нажмите на кнопку "Добавить / Отредактировать видео", чтобы открыть окно с конкретными настройками для выбранного видео, где вы сможете внести необходимые изменения.

Вставка таблиц

Таблицы в редакторе WYSIWYG работают так же, как в таких приложениях, как Excel. Это полезно для отображения таких данных, как цены, результаты опросов и т.д...

Чтобы вставить таблицу, наведите курсор в редакторе, куда вы хотели бы добавить таблицу, затем щелкните значок Таблицы на панели инструментов, который откроет дополнительные параметры таблицы. Прежде чем вашу таблицу можно будет вставить в ваш контент, вам нужно будет определить размер; вы можете сделать это, выделив опцию Таблица , которая отобразит сетку. Выделив ячейку в таблице курсором, вы можете задать общее количество строк и столбцов; щелкните по ячейке, чтобы задать размер и вставить таблицу.

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

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

Вставленная таблица будет автоматически сгенерирована из каждого из ваших заголовков, при этом вложенные заголовки будут сгруппированы в подразделы, например, первый заголовок H2 будет указан как раздел 1 в таблице, при этом любые разделы H3 под ним будут отображаться как разделы 1.11.21.3 и т.д. ... а любые разделы H4 между заголовками H3 будут отображаться как 1.1.11.1.2 и так далее.

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

Изменение заголовка оглавления

По умолчанию таблица будет иметь "Оглавление" в качестве заголовка. Это можно изменить, нажав на заголовок таблицы в редакторе; затем вы можете удалить или изменить заголовок по мере необходимости.

Обновление оглавления

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

Форматы

Каждая тема в Publii включает дополнительные параметры форматирования для выделения текста, помимо основного жирного или курсива. Эти форматы доступны через раздел Форматы в левом нижнем углу панели инструментов редактора. Каждая тема имеет свои уникальные форматы и оформление; их можно использовать для выделения блоков текста цветным фоном, вставки заглавной буквы в начале предложения или смещения текста.

Чтобы вставить нужный формат, наведите курсор редактора туда, где вы хотите использовать формат, затем щелкните опцию Форматы на панели инструментов и выберите нужный формат из выпадающего списка. Затем вы можете печатать как обычно, и будет применено форматирование. Нажатие Enter завершит форматирование и начнется обычная строка текста.

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

Форматы HTML

Опция "Форматы HTML" , которая является второй опцией в левом нижнем углу панели инструментов редактора, позволяет вам изменять теги HTML для текста, который вы пишете, включая заголовкиабзацыадреспредисловие и код. Как и в случае с другими параметрами форматирования, вы можете выбрать формат перед вводом текста или выделить выделенный текст и изменить его формат. Более подробную информацию об основах HTML можно найти в разделе Посты этого руководства.

Найти и заменить

Когда вам нужно внести много изменений за один раз, использование функции поиска и замены сэкономит вам много времени. Чтобы получить доступ к функции Найти и заменить , нажмите CTRL + F или Command + F на клавиатуре или щелкните значок увеличительного стекла на панели инструментов. Откроется всплывающее окно "Найти и заменить ", в котором у вас есть доступ к следующим параметрам:

  • Найти - Введите текст, который вы хотите найти в своем контенте, здесь.
  • Заменить на - Введите здесь текст, которым вы хотите заменить найденный текст.

При нажатии на значок шестеренки в левом нижнем углу всплывающего окна также отобразятся две дополнительные опции:

  • Сопоставлять регистр - если эта опция включена, то поиск будет выполняться только для строк, которые точно соответствуют регистру, указанному в поле Найти ; очень полезно, если вам нужно заменить несколько строчных слов на заглавные или наоборот.
  • Находить только целые слова - если эта опция включена, поиск будет игнорировать соответствующий текст, являющийся частью более крупного слова, например, поиск "вверх" при включенной этой опции будет игнорировать более длинные слова, такие как "расстроен".

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

Горизонтальная линия

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

Читать дальше

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

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

Очистить форматирование

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

Отмена / Повтор Изменений

Каждый совершает ошибки или оказывается застигнутым врасплох неожиданным поведением редактора, которое вносит беспорядок в ваше форматирование. В таких случаях вы можете нажать кнопку Отменить , представленную стрелкой назад, чтобы отменить последнее изменение. Если вы что-то отменили , но затем решили, что вам понравилось изменение, вы можете нажать кнопку Повторить , чтобы повторно реализовать изменения.

Автосохранение записей

Publii включает функцию автосохранения для защиты вашего поста от любого неожиданного закрытия, такого как отключение питания, или от простого изменения решения после закрытия поста. Автосохранение происходит каждые 10 секунд при редактировании новой записи; если вы затем закроете экран записи, намеренно или по внешним причинам, черновик автосохраненной записи будет сохранен и удерживаться в течение 30 минут, что позволит вам восстановить все утерянные изменения. Чтобы восстановить черновик, после повторного открытия экрана редактирования записи нажмите на кнопку Восстановить последний черновик, которая появляется справа от панели инструментов редактора; у нее есть значок, похожий на часы с перемоткой назад. После завершения работы черновик текста мгновенно появится в редакторе, готовый к редактированию.

Автоматическое сохранение сообщений

Редактор исходного кода

Если вам удобно использовать HTML или вы хотели бы внести некоторые более сложные правки, такие как добавление CSS-классов в содержимое вашей публикации, вы можете сделать это, переключившись на редактор исходного кода. Нажмите на символ HTML-тега на панели инструментов редактора, чтобы перейти к исходному коду. Функции редактора TinyMCE недоступны при работе с исходным кодом, но вы можете выполнять поиск определенного контента с помощью панели поиска, доступной для нажатия CTRL + F.

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

Отсюда прокрутите вниз до раздела "Экспериментальные функции" и включите опцию "Автоматическое оформление исходного кода в редакторе WYSIWYG" и нажмите кнопку "Сохранить настройки" вверху страницы. После завершения работы редактор исходного кода всегда будет украшать код при открытии.

Встроенный редактор

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

Встроенный редактор WYSIWYG

Расширенная вставка ссылок

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

  • Выберите тип ссылки - укажите, хотите ли вы ссылаться на публикацию, тег или страницу автора, главную страницу вашего сайта или пользовательский URL-адрес в этом раскрывающемся списке.
  • Имя записи, тега или автора - эта опция доступна только в том случае, если в предыдущем разделе выбрана страница записи, тега или автора. Все доступные материалы на вашем сайте Publii будут показаны при нажатии на раскрывающийся список, но вы можете использовать окно поиска в верхней части списка для фильтрации материалов, если у вас на сайте много контента.
  • Пользовательская ссылка - задает URL-адрес ссылки. Отображается только при выборе типа ссылки Пользовательская ссылка.
  • Назначение ссылки - указывает, перенаправляет ли ссылка текущее окно браузера пользователя (опция То же окно) или открывается на новой вкладке (опция Новое окно).
  • Метка ссылки - задает текст, который должен отображаться в контенте в виде ссылки; если вы выделили текст заранее, он будет автоматически добавлен в это поле.
  • Привязка к ссылке - устанавливает цель на привязку, которая находится на той же странице, что и ссылка, позволяя пользователям быстро переходить к определенному разделу. В раскрывающемся списке будут отображены все якоря, которые были добавлены на страницу для выбора.
  • Атрибут заголовка ссылки - устанавливает атрибут заголовка HTML для элемента ссылки. Введенный здесь текст будет отображаться в виде всплывающей подсказки, когда пользователь наведет курсор мыши на ссылку на опубликованном веб-сайте.

Ярлыки Markdown

Редактор TinyMCE в Publii в настоящее время не включает в себя полноценный редактор markdown, но он поддерживает наиболее распространенные сочетания клавиш, которые помогут вам быстрее создавать содержимое ваших записей.

##Два хэша перед предложением определяют текст как HTML-элемент H2, или Заголовок 2.
###Три хэша перед предложением создают HTML-элемент H3, или Заголовок 3.
####Четыре хэша создают элемент h3, или Заголовок 4.
#####Пять хэшей создают элемент H5, или Заголовок 5.
######Шесть хэшей создают элемент H6, или Заголовок 6.
1. Число "1" и точка, за которой следует пробел, создают HTML-элемент OL, или Упорядоченный список.
Звездочка или дефис (иначе известный как тире), за которыми следует пробел, создает HTML-элемент UL, или неупорядоченный список.
* текст*Вставка звездочек до и после блока текста сделает этот текст курсивным.
** текст**Вставка двух строк до и после блока текста сделает этот текст жирным.

Вставка заголовков с помощью Markdown

Элементы заголовка в HTML (H1-H6) используются для создания заголовков для вашего контента. Каждый "уровень" заголовка используется для отображения положения определенного заголовка в иерархии записей; например, в главном заголовке страницы или статьи будет использоваться заголовок H1, в то время как в каждом подразделе статьи будет использоваться заголовок H2. Если у каждого раздела есть свои подразделы, то они обычно будут использовать следующий заголовок вниз; подраздел под заголовком H2 будет использовать заголовок H3, и так далее. Это создает структуру вашего контента, которая легко понятна как людям, так и компьютерам! В Publii основной заголовок H1 создается полем "Заголовок" в редакторе записей, а другие заголовки могут быть добавлены вручную по мере создания вашего контента. С помощью ярлыков markdown это можно сделать очень быстро и легко.

Чтобы вставить заголовок с помощью markdown, вы добавляете хэши (#), соответствующие заголовку, который вы хотите вставить перед своим заголовком. Итак, чтобы вставить элемент заголовка 2 (H2), вы должны написать:

## My heading 2 title

... затем нажмите enter. Редактор записей автоматически преобразует это в элемент заголовка 2 в HTML. Если вы хотите вставить элемент заголовка 3 (H3), просто добавьте три хэша перед заголовком и так далее.

Вставка списков с помощью Markdown

Существует два типа списков, которые распространены в HTML и в письменной форме в целом; упорядоченные списки, или списки с пронумерованными элементами, и неупорядоченные списки, в которых вместо цифр для каждого элемента используются маркеры. Вставить их с помощью markdown чрезвычайно быстро и просто. Для неупорядоченного списка введите звездочку (*) или дефис / тире (-), за которыми следует пробел перед текстом первого элемента в списке. Когда вы нажмете Enter, текст автоматически изменится на выделенный элемент. Например, набрав:

* The first item in my unordered list.

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

Вставка упорядоченных списков работает точно так же, но вместо использования звездочки или дефиса вы можете просто начать писать список, используя "1. ". Элемент автоматически будет отформатирован в виде списка. После того, как вы добавите достаточное количество элементов, просто нажмите enter на пустой элемент, чтобы завершить список.

Добавление жирного или курсивного текста с помощью Markdown

Markdown может автоматически сделать ваш текст выделенным жирным шрифтом или курсивом, выделив текст соответствующим символом, в данном случае звездочкой (*) для выделения курсивом и двумя звездочками (**) для выделения жирным шрифтом. Чтобы выделить предложение жирным шрифтом, вам следует добавить две звездочки до и после текста. Для курсива добавьте по одной звездочке до и после текста:

**This text will be bold**. 
*This text will be italic*.
This text will be unchanged.

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

Subscribe

Get the latest news, updates and more delivered directly to your email inbox

...