Редактирование страниц (8): Редактирование HTML-кода

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

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

Как я уже говорил, для редактора кода, в т.ч. HTML-кода используется интегрированный Code Mirror. Его пользовательский интерфейс адаптирован для работы в админке и расширен необходимыми для Composite C1 CMS возможностями.

Редактор кода

Вы помните, что для редактирования HTML-кода страницы, вам нужно:

1. Открыть страницу в админке (кнопка "Изменить страницу" на панели кнопок)
2. В визуальном редакторе переключится в режим "Код" (кнопка "Код" в визуальном редакторе"

Вы на месте.

На данном этапе IntelliSense при редактировании не поддерживается, но есть сторонние решения для этих целей, ведь Composite C1 CMS развивается и усилиями сообщества тоже.

Например, пакет расширения AutoComplete (англ.). (С последней версией я не работал, но некоторые предыдущие версии я пробовал - и они меня вполне устраивали.)

Кнопка "Добавить"

Во-первых, кнопка "Добавить" в редакторе кода дает вам возможность добавить:

• URL страницы - формате Composite C1: ~/page(9bdb7b6d-4e4f-41c9-bcc3-95b20bd8d796)
• URL изображения из медиа-архива - тоже в формате Composite C1: ~/media(ce4a5c82-e727-44c5-9769-e890946a81fc)
• URL медиа-файла из медиа-архива - также как и изображения

Их вы можете использовать в ваших ссылках и вставках изображений и т.п.:

<a href="~/page(9bdb7b6d-4e4f-41c9-bcc3-95b20bd8d796)" />
<a href="~/media(ce4a5c82-e727-44c5-9769-e890946a81fc)" />
<img src="~/media(ce4a5c82-e727-44c5-9769-e890946a81fc)" />

Во-вторых, вы можете указывать относительный путь к файлам на сайте с помощью:

• Frontend URL: напр., /Frontend/Styles/layout.css

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

<link rel="stylesheet" href="~/Frontend/Styles/layout.css" type="text/css"/>

(Возможно для индивидуальных страниц - это не совсем то, но в шаблонах и XSLT-функциях - это как раз то, что нужно.)

В-третьих, вы можете добавлять непосредственно XML-код функций с помощью пункта меню "Добавить":

• Код функции

Кому-то будет гораздо удобнее и быстрее  вставлять функции как код в редакторе кода, напр.:

<f:function name="Composite.Navigation.LanguageSwitcher">

  <f:param name="Mode" value="TranslatedOrHomePages" />

  <f:param name="ShowCurrent" value="False" />

  <f:param name="Format" value="NativeName" />

</f:function>

<f:function name="Layout.Navigation.TopLinks" />

<f:function name="Layout.Navigation.Menu" />

чем функции в визуальном редакторе.

Кнопка "Форматировать"

Кнопка "Форматировать" просто форматирует код: дерево элементов перестраивается, удаляются "лишние" элементы и т.п.

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

Кнопка "Дизайн"

Кнопка "Дизайн" переключает вас обратно в режим визуального редактора.


Читайте также в этом блоге:

• Редактирование страниц (1): Настройки, контент, метаданные, просмотр
• Редактирование страниц (2): Общие и расширенные настройки
• Редактирование страниц (3): Публикация страниц по расписанию
• Редактирование страниц (4): Выбор шаблона страниц
• Редактирование страниц (5): Визуальный редактор
• Редактирование страниц (6): Вставка контента в редакторе
• Редактирование страниц (7): Стили в визуальном редакторе