Как динамически изменить базовый URL-адрес таблицы стилей и js-файлов в теге head на статическом веб-сайте

Я работаю над статическим веб-сайтом без использования SSG и создаю все страницы вручную, когда тестировал его в локальной среде, все было в порядке, но когда я разместил его, мне нужно было изменить доменное имя, и это испортило расположение файлов в заголовке и теле html-страниц, поэтому я искал решение этой проблемы, назначив базовый URL-адрес переменной, а затем вставив его в тег заголовка, который не работал, поэтому я наткнулся на это решение

Это то, чего я хотел добиться динамически добавить таблицу стилей ссылки в ‹head ›

но проблема в том, что у меня есть несколько таблиц стилей и js-файлов, и это не идеальный способ решить эту проблему, поэтому как я могу добиться этого, не сильно испортив код на моей веб-странице, что-то вроде переменной или функция добавления, которая позволяет мне добавить домен/базовый URL один раз, а затем позаботится обо всем остальном.

Что-то вроде этого, но для статической страницы

<link href="<?=getThemeURI()?>/assets/css/theme.css" rel="stylesheet"/>

Я хотел бы иметь решение js, если это возможно


javascript
person Yeshwanth B    schedule 23.06.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

с помощью javascript вы можете получить свой текущий домен с помощью window.location

`${window.location.protocol}//${window.location.hostname}`

поэтому, когда вам не нужно поддерживать старые браузеры, вы можете сделать это простым способом

const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
const domain = `${window.location.protocol}//${window.location.hostname}`
stylesheets.forEach((sheet) => {
  const href = sheet.getAttribute('href');
  sheet.setAttribute('href', `${domain}/${href}`);
});

поэтому в ваших таблицах стилей вам нужно только указать путь, например, «assets/css/theme.css». Домен будет добавлен через javascript.

если ваш текущий домен не является вашим URL-адресом темы, вы можете настроить файл конфигурации и получить оттуда эту информацию с помощью вызова ajax.

person manoi    schedule 23.06.2021
comment
Привет @manoi, когда я пытался добавить несколько файлов, это не сработало, можешь ли ты сказать мне, как я могу добавить несколько файлов? - person Yeshwanth B; 23.06.2021
comment
я отредактировал свой ответ, пожалуйста, посмотрите. - person manoi; 23.06.2021
comment
Привет, @manoi, ты видишь, в чем проблема? ссылка не работает - person Yeshwanth B; 23.06.2021
comment
вам необходимо правильно указать строки шаблона, developer.mozilla.org /en-US/docs/Web/JavaScript/Reference/ - person manoi; 23.06.2021