Шпаргалки
January 29, 2022

Как подключать скрипты и стили через Темы на платформе 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 - массив ссылок на страницы. Каждая ссылка должна быть обёрнута в кавычки, между ссылками нужно ставить запятую.