Подключение собственных JavaScript и CSS файлов в bluetronix CMS
В этом руководстве вы подключите собственный JavaScript файл и собственный стиль к макету вашего веб-сайта. Вы познакомитесь с правилом _own и узнаете, как версионирование файлов помогает при изменениях.
Предпосылки и цель
Для этого руководства вам нужен доступ разработчика к системе управления контентом bluetronix и вы должны знать структуру макетов и папок разработчика. Вы научитесь подключать собственные файлы JavaScript и CSS помимо существующих файлов CMS, не изменяя оригинальные системные файлы.
Мы используем файлы, показанные на скриншотах: BxHeadScript_own.js и BxStyle_own.css. Оба файла явно подключаются в макете, чтобы CMS учитывала их при загрузке веб-страницы.
1. Открыть макет
Откройте в CMS раздел Макет и выберите Макет - HTML. Затем откройте макет, в который вы хотите подключить свои файлы JavaScript и CSS. В этом примере мы используем стандартный макет.
В определении макета вы уже найдете подключения к центральным файлам CMS, например BxHeadScript.js и BxStyle.css. Дополнительные собственные файлы вы можете добавить прямо рядом.
2. Создать собственный JavaScript файл в менеджере файлов
Откройте Менеджер файлов и перейдите в помеченную красным системную папку bx_script. Там вы найдете центральные JavaScript-файлы системы управления контентом bluetronix и, возможно, языковые варианты.
Создайте там свой файл BxHeadScript_own.js или выберите его, если он уже существует. Вы можете скопировать для этого подходящий существующий файл, чтобы использовать его в качестве шаблона.
Выберите Редактировать, чтобы открыть JavaScript-код вашего собственного файла в текстовом редакторе.
В показанном примере файл содержит собственный JavaScript-код для выбора между темным и светлым режимами. В текстовом редакторе вы можете редактировать свой проектный JavaScript-код и затем сохранить.
Не изменяйте оригинальный BxHeadScript.js для собственных расширений. Файлы в системных папках bx_ могут быть перезаписаны при обновлении CMS. Обозначьте свои собственные файлы там с помощью _own.
3. Подключить собственный JavaScript файл в макете
Вернитесь к Макет - HTML. Дополните свой собственный JavaScript-файл дополнительно к существующему файлу CMS. Если ваш скрипт должен загружаться рано, добавьте его, как на скриншоте, в области head после существующего Head-Script.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
Дополнительная строка загружает ваш собственный JavaScript-код. Исходный BxHeadScript.js остается неизменным. Путь к файлу и запись вашего файла должны совпадать с файлом в Менеджере файлов.
4. Создать собственный CSS файл в менеджере файлов
Откройте в Менеджере файлов системную папку bx_style. Здесь находится, среди прочего, центральная таблица стилей BxStyle.css. Для собственных настроек мы используем отдельный файл под названием BxStyle_own.css.
Создайте файл BxStyle_own.css или откройте существующий собственный файл. При этом системный файл BxStyle.css остается незатронутым.
С помощью Редактировать вы можете вставить и сохранить свои собственные CSS-правила в этом файле.
5. Подключить собственный CSS файл в макете
Снова откройте Макет - HTML. В области head вы добавите свой собственный CSS-файл после существующего файла таблицы стилей. Порядок важен, если собственные правила должны перекрывать стандартное форматирование.
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
Стандартный файл CSS остается в силе, в то время как вы отдельно управляете дополнительными или отличающимися форматированиями в BxStyle_own.css.
6. Использовать JavaScript в заголовке или внизу страницы
JavaScript-файлы могут быть подключены в области head или внизу страницы перед закрывающимся тегом body в зависимости от их назначения. Показанный BxHeadScript_own.js загружается в Head. Для других скриптов вы также можете использовать собственную папку проекта и затем подключить файл в макете.
Пример для дополнительного файла из собственного папки внизу страницы:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Этот пример показывает дополнительный файл. Если вы хотите заменить системный файл на собственную версию, вам необходимо осознанно настроить соответствующие подключения в выбранном макете и убедиться, что ни одна необходимая функция CMS не была удалена.
7. Различие системных папок и собственных папок проекта
Помеченные красным bx_ папки принадлежат системе управления контентом bluetronix. Собственные файлы внутри этих папок должны быть помечены _own, чтобы они не обрабатывались как системные файлы при регулярных обновлениях CMS.
Вы можете хранить свои собственные JavaScript и CSS файлы также в созданных вами папках проекта без приставки bx_, например /script/ или /my_scripts/. Здесь обозначение _own не является обязательным. Фактический путь вы должны использовать в вашем определении макета.
Обозначение _own не заменяет подключение в макете: отдельно созданный файл загружается только тогда, когда он подключен с помощью соответствующей строки script или link.
8. Автоматическая версионирование файлов
При показанных подключениях макета CMS bluetronix использует пометку __FV_…__. Благодаря этому CMS может дополнить параметр версии на основе даты изменения. После изменения браузер загружает текущий JavaScript или CSS файл, вместо того чтобы продолжать использовать устаревшую версию из кеша.
Пример: Исходный путь, такой как /script/MyScript.js, может быть дополнен параметром версии после обработки. Вам не нужно самостоятельно обновлять номер версии в подключенных файлах для каждого макета.
9. Сохранять и проверять изменения
Сначала сохраните свои собственные файлы JavaScript и CSS, а затем отредактированный макет. Обновите свою веб-страницу и проверьте, выполняются ли ваши функции JavaScript и применяются ли ваши собственные правила CSS.
Если файл не загружается, сначала проверьте имя файла, регистр букв, путь к папке и подключение в макете. Если используется несколько макетов, проверьте также, редактировали ли вы макет, назначенный данной странице.
Резюме
Для собственных расширений вы можете создать, например, BxHeadScript_own.js в папке bx_script и BxStyle_own.css в папке bx_style. Затем вы подключаете оба файла в Макет - HTML наряду с исходными файлами CMS. Таким образом, стандартные файлы остаются неизменными, в то время как вы отдельно управляете специфическим кодом JavaScript и CSS для проекта.
Часто задаваемые вопросы
что часто спрашивают клиенты
Мне нужен доступ разработчика, чтобы подключать собственные файлы JavaScript и CSS?
Да. Этот учебник предназначен для разработчиков, которые имеют доступ к определению макета и папкам разработчика CMS bluetronix.
Где я могу найти подключения для JavaScript и CSS?
Откройте Макет и выберите Макет - HTML. Там вы можете добавить подключения в желаемом макете.
Где мне сохранить свой собственный файл JavaScript?
В показанном примере вы создаете BxHeadScript_own.js в папке bx_script и подключаете его дополнительно к имеющемуся BxHeadScript.js в макете.
Где мне сохранить свой собственный файл CSS?
В показанном примере ваш собственный файл BxStyle_own.css находится в папке bx_style. В макете он подключается после существующего стиля.
Почему собственные файлы должны содержать _own в имени при размещении в системных папках?
Красным выделенные bx_-системные папки могут быть перезаписаны при обновлениях. С помощью _own вы отмечаете свои собственные специфические для проекта файлы.
Будет ли _own-файл автоматически загружен, как только он создан?
Нет. Вы должны дополнить свой собственный файл JavaScript или CSS в желаемом макете подходящим подключением script или link.
Могу ли я использовать свою собственную папку вместо системной папки bx_?
Да. В созданной вами проектной папке без префикса bx_ _own не является обязательным. Используйте в макете фактический путь к файлу.
Должен ли я загружать свой собственный файл CSS перед или после стандартного файла?
В показанном примере BxStyle_own.css подключается после BxStyle.css. Таким образом, собственные правила с одинаковой специфичностью могут перезаписывать ранее загруженные стандартные правила.
Для чего нужна метка __FV_…__ в путях файлов?
CMS bluetronix может благодаря этому дополнить параметр версии файла, чтобы браузеры загружали актуальный файл после изменения.
Что я должен проверить, если мой собственный файл не работает?
Проверьте имя файла, регистр букв, указанный путь, а также подключение и выбор нужного макета.