Как подключать скрипты и стили через Темы на платформе GetCourse
В блоге геткурса есть статья о том, как использовать Темы, и если вы её не читали, то прежде чем изучать мою заметку, вникните в то, как геткурс предлагает использовать Темы, как их создавать, и вообще зачем они нужны. Потому что я буду говорить здесь только про нестандартное использование Тем, а именно о том, как подключать Темы к системным страницам, к урокам или к страницам тренингов.
В Теме есть 3 вкладки, которые нам интересны: Настройки, CSS, JS.
Вкладкой Шрифты, я никогда не пользуюсь.
На вкладке CSS прописывается код стилей, при чём этот код не должен содержать HTML тегов таких, как <style>.
На вкладке JS соответственно прописывается JavaScript-код, и здесь тегов <script> тоже быть не должно.
Код который вы прописываете на этих вкладках, можно получить в виде файлов, которые хранятся в геткурсе. Ссылки на эти файлы можно скопировать на вкладке "Настройки", там они называются Bandle-файлы. Нажимаете на нужную ссылку правой кнопкой мыши и в контекстном меню выбираете "Копировать адрес ссылки":
Теперь у вас есть прямые ссылки на те CSS и JS-коды, которые прописаны во вкладках темы.
Обратите внимание, что если вы используете "Дополнительные файлы" (об этом написано в статье геткурса), то код Bandle-файлов будет включать код всех соответствующих дополнительных файлов темы.
Как подключить
Имея ссылки на эти Bundle-файлы, можно подключить Тему даже к тем страницам, на которых не предусмотрено использование Тем. Для этого нужно прописать HTML-код, который будет вызывать Bandle-файлы Темы, в Настройках аккаунта в полях "Дополнительные теги для HEAD" или "Счётчики и прочие скрипты для BODY".
Выберите то поле , которое больше подходит под ваши задачи.
В чём разница между этими полями
Код добавленный в HEAD будет выполняться быстрее, чем появятся элементы на странице. И это очень полезно для CSS-кода, т.к. в этом случае будет намного меньше "дёрганья", при загрузке страниц. Грубо говоря, если CSS-файл успеет загрузиться, то элементы будут появляться сразу застилизованными.
В то же время загрузка через это поле JavaScript-кода, который должен каким-либо образом взаимодействовать с элементами страницы, перед появлением элементов на странице, может привести к тому, что скрипт просто не найдёт эти элементы и код не сработает.
Кроме того, будьте очень внимательны, при вставке кода в блок HEAD, потому что там малейшая ошибка может привести даже к тому, что контент страниц полностью исчезнет. Будет просто белый экран, и вы не сможете даже исправить код. Особенное внимание стоит обратить на закрытие HTML-тегов. Чтобы этого избежать, нужно прописывать в HEAD только тот код, в работе которого вы уверены на 100%. Поэтому советую сначала вставлять код в блок BODY, и только потом, когда вы убедитесь, что он работает, как надо, можете перенести его в HEAD. Ошибки допущенные в блоке BODY не так страшны.
Код добавленный в BODY, выполняется после того, как вся структура страницы будет загружена. Поэтому в него нужно вписывать код, который может быть исполнен чуть позже. К тому же так можно сэкономить драгоценные миллисекунды загрузки страницы, которые бы отнимали эти скрипты.
Обратите внимание, что код, записанный в HEAD, никогда не работает в чатиуме (в мобильном приложении геткурса), в тоже время код из BODY будет работать в чатиуме, если в настройках тренинга на вкладке "В приложении" поставить галочки "Не приводить уроки к нативному виду" и "Не приводить список к нативному виду".
Так же никакой код из Настроек аккаунта не работает в ПК версии геткурса на страницах Профиль, Смена пароля и Chatium (Приложение).
Подключение Темы для всех страниц
Проще всего подключить Тему ко всем страницам онлайн-школы для этого пропишите в Настройках аккаунта такой код:
<link href="ТУТ-ССЫЛКА-НА-CSS-BUNDLE-ФАЙЛ" rel="stylesheet"> <script type="text/javascript" src="ТУТ-ССЫЛКА-НА-JS-BUNDLE-ФАЙЛ"></script>
Не забудьте вставить свои ссылки и обратите внимание на кавычки, они должны быть. Если у вас нет скриптов, а есть только стили, например, то уберите лишнюю строчку кода.
После вставки кода в поле "Дополнительные теги для HEAD" или "Счётчики и прочие скрипты для BODY" необходимо подождать 5-10 минут, т.к. геткурс не сразу применяет изменения. Иногда бывает, что изменения применяются сразу, но после обновления страницы, код опять не работает. Не пугайтесь, просто подождите несколько минут :)
Подключение Темы для определённых страниц
Подключение Темы для определённых страниц чуть сложнее. Для этого потребуется JavaScript-код, который будет фильтровать страницы. У меня есть такой :) Я вставляю его на вкладку "JS" в теме. А в Настройках аккаунта подключаю только Bundle-файл JS, который будет запускаться на всех страницах онлайн-школы. Но код, записанный на вкладке JS, проверит, какую страницу открыл пользователь, и если эта та страница, на которую нужно подключить Тему, то скрипт сам инициирует дальнейшее подключение скриптов и стилей Темы (подгружает Bundle-файл CSS).
Итак, для этого на вкладке JS используется примерно такой код:
(function(){
if(checkTruePage({
notMode: 0,
strict: 0,
pages: [
'/teach/control/',
'/pl/teach/control/lesson/view'
],
})) {
// подключаем стили
$('<link>', {rel:"stylesheet", href: "ссылка-на-css-bundle-файл"}).appendTo('head');
// если в тему входят
// какие-то скрипты,
// то прописываем их тут
}
function checkTruePage(opt) {
let i=false;
const u = window.location.href;
const d = location.protocol+'//'+location.hostname;
opt.pages.forEach(p => {
if (opt.strict) {if(u==el||u==d+p)i=true;}
else if(u.indexOf(p)>-1)i=true;
});
return opt.notMode ? !i : i ;
}
})();
В этом коде есть 3 параметра:
notMode - отрицание. Если поставить 1, то Тема будет подключаться ко всем страницам, кроме тех, которые в списке.
strict - строгая проверка ссылок. Если поставить 1, то ссылки на страницы будут сверяться полностью (включая GET-параметры и якоря). В этом случае, ссылки должны быть абсолютными.
pages - массив ссылок на страницы. Каждая ссылка должна быть обёрнута в кавычки, между ссылками нужно ставить запятую.