Как использовать FoundationX

Последнее обновление not available | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$204 per month—let's make that $500!

Learn more

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

При входе в систему¶

После входа в MODX Revolution вы видите Dashboard. У FoundationX свой Dashboard с быстрыми кнопками к частым функциям, встроенными видеоуроками и ссылками на документацию.

Управление настройками сайта¶

На Dashboard нажмите быструю кнопку «Manage Site Settings». Откроется страница Edit Context Settings для контекста 'web' по умолчанию. Если термин Context кажется сложным, не беспокойтесь. Здесь вы редактируете общую информацию о себе или бизнесе.

Откройте вкладку «Context Settings». Вы увидите таблицу (data-grid) настроек. Чтобы изменить значение, дважды щёлкните по текущему значению. Появится редактируемое поле, куда можно ввести своё значение.

Список отсортирован по имени (Name). Это стандартный вид Edit Context Settings в MODX Revolution. Настройки не сгруппированы логически. Просмотрите весь список, чтобы понять параметры FoundationX.

Name	Key	Description
Physical Address	fx.address	Физический адрес бизнеса. Если адрес не нужен на сайте, оставьте поле пустым.
City Location	fx.city	Если задан «Physical Address», укажите город. Иначе оставьте пустым.
Make Content Area Panel?	fx.contentPanel	При «Yes» основная область контента отображается как Panel FoundationX. Подробнее в разделе Site Styles ниже.
Country	fx.country	Если задан «Physical Address», укажите страну. Иначе оставьте пустым.
Email Address	fx.email	Обязательно, если используете контактную форму на странице contact us в FoundationX. Также показывается в футере при включённом Verbose Footer.
Facebook URL	fx.facebook	Полный URL страницы Facebook. Если страницы нет или иконку и ссылку показывать не нужно, оставьте пустым.
Google+ URL	fx.google	Полный URL страницы Google+. Если страницы нет или иконку и ссылку показывать не нужно, оставьте пустым.
LinkedIn URL	fx.linkedin	Полный URL страницы LinkedIn. Если страницы нет или иконку и ссылку показывать не нужно, оставьте пустым.
Enable Masthead?	fx.masthead	При «Yes» над основной навигацией показывается шапка с логотипом, слоганом сайта и иконками соцсетей по умолчанию.
Phone	fx.phone	Телефон бизнеса. Если номер показывать не нужно, оставьте пустым.
Pinterest URL	fx.pinterest	Полный URL страницы Pinterest. Если страницы нет или иконку и ссылку показывать не нужно, оставьте пустым.
Postal Code	fx.postal	Почтовый индекс бизнеса. Если индекс показывать не нужно, оставьте пустым.
Make Blog Sidebar Display Left?	fx.sidebarLeft	При «Yes» боковая навигация блога FoundationX слева. При «No» справа. Если блог не используете, снимите страницу блога с публикации, и настройка не повлияет на сайт.
Make Sidebar Widgets Panels?	fx.sidebarPanels	При «Yes» виджеты боковой панели отображаются как Panel FoundationX. Подробнее в разделе Site Styles ниже.
State/Province	fx.state	Если задан «Physical Address», укажите штат или область. Иначе оставьте пустым.
Site Tagline	fx.tagline	Слоган под логотипом в шапке, если «Enable Masthead» = «Yes».
Twitter URL	fx.twitter	Полный URL страницы Twitter. Если страницы нет или иконку и ссылку показывать не нужно, оставьте пустым.
Verbose Footer?	fx.verboseFooter	При «Yes» на сайте показывается расширенный футер с именем сайта, адресом, телефоном, иконками соцсетей и пунктами верхнего меню.
YouTube URL	fx.youtube	Полный URL страницы YouTube. Если страницы нет или иконку и ссылку показывать не нужно, оставьте пустым.

Есть ещё одна настройка, System Setting, которую нужно изменить для полной кастомизации FoundationX. В главном меню менеджера выберите System » System Settings. Вверху data-grid есть выпадающий список «Filter by area...». Выберите «Site» ближе к концу списка. Найдите настройку «Site name» с ключом «site_name». Дважды щёлкните значение (по умолчанию «FoundationX» и номер версии). Введите название бизнеса или сайта. Затем щёлкните по тексту ключа «site_name». System settings сохраняются, как только фокус уходит с поля ввода.

Управление настройками стилей¶

На Dashboard нажмите быструю кнопку «Site Style Settings». Откроется страница редактирования специального Resource FoundationX для настройки внешнего вида. У CSS-ресурса FoundationX четыре вкладки:

Перейдите на 3-ю вкладку «Template Variables». Здесь начинается основная настройка.

Первые две («Static Resource» и «Settings») и последняя («Resource Groups») не требуют правок. Мы рекомендуем менять их только опытным пользователям MODX.

В MODX «Template Variable» (TV) это пользовательские поля, привязанные к шаблонам страниц. Здесь страница это CSS-файл сайта. Писать CSS не обязательно. В FoundationX вы меняете CSS через наши TV.

В FoundationX три категории TV:

Colors
Foundation
Look and Feel

Colors¶

Первая категория TV это Colors. Схему цветов можно задать hex-значениями. Но есть способ удобнее.

FoundationX поставляется с custom TV ColorPicker, чтобы выбирать цвета в графическом интерфейсе. Из-за бага в extra ColorPicker TV не отображается сразу после установки FoundationX из Snapshot. Нужно повторно активировать addon на странице Package Management:

В верхнем меню менеджера откройте System » Package Management.
Найдите пакет «ColorPicker» и нажмите «Reinstall».
На следующем экране «Continue», затем «OK» в окне подтверждения. ColorPicker должен отображаться корректно.

Теперь при редактировании CSS Resource FoundationX TV выглядят так:

Щёлкните стрелки выпадающего списка, чтобы открыть визуальный color picker. Выберите цвет, и hex попадёт в TV автоматически. Не забудьте сохранить изменения.

Foundation¶

В категории Foundation пока одна TV в версии 1.0.4-beta: загрузчик логотипа:

Щёлкните стрелки в элементе «Site Logo». Откроется MODX Browser, по умолчанию в папке /assets/foundation/images/. Если нет, выберите её в дереве слева. Для загрузки нажмите Upload (обведено выше). В окне «Upload Files» нажмите «Add», выберите файл, «Upload», затем закройте окно.

В MODX Browser выберите миниатюру логотипа и «OK». URL попадёт в значение TV, и логотип появится в masthead, если он включён.

Look and Feel¶

Третья и самая мощная категория TV FoundationX это «Look and Feel»:

Include CSS: Подключение отдельных CSS-файлов, @font-face и любого CSS, который должен быть в начале итоговой таблицы стилей. Если не знаете, что это значит, поле можно не трогать :)
Content Width: Ширина основного контейнера в пикселях. Фактический размер зависит от устройства и ширины браузера, но это значение по умолчанию.
Body Background Texture Image: Фоновая текстура body. В FoundationX есть несколько файлов, можно загрузить свой. TV загрузки изображений стандартная, работает как у логотипа.
Custom CSS: Если вы пишете CSS сами, добавьте правила сюда. Они попадут в конец итогового stylesheet и переопределят стили пакета. Это, вероятно, самая мощная TV в FoundationX. С грамотными селекторами и каскадом CSS вы настроите сайт без правок статического CSS из пакета.

Если что-то пошло не так, наведите на метку TV «Custom CSS». Маленькая зелёная стрелка позволит сбросить TV к умолчанию, то есть к пустому значению. Если сохранить ресурс в таком виде, стили вернутся к умолчанию, а ваш Custom CSS будет перезаписан. Это запасной вариант, если CSS совсем испортился. Используйте с осторожностью.

Просто добавьте контент¶

На этом всё. Добавляйте контент. На каждой начальной странице есть инструкции по использованию. Мы продолжим добавлять документацию по отдельным страницам. Приятной работы с FoundationX!