Должен ли я делать традиционную копию верхнего и нижнего колонтитула на каждой странице, или есть ли способ отобразить его с помощью JavaScript на каждой странице!
Просто ожидаю, что сэкономлю ли я несколько килобайт на своих файлах .html, отображая верхний и нижний колонтитулы на каждой странице с помощью JavaScript?
Я бы настоятельно рекомендовал использовать фреймворк внешнего интерфейса, такой как Angular, Vue, Svelte и т. д. Вы можете создавать компоненты для своих верхних и нижних колонтитулов, а затем повторно использовать их в нескольких местах.
Я согласен, что это сделает жизнь намного проще, но в ответ на ваш запрос используйте javascript следующим образом.
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src = "./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Home Page</h1>
<my-footer></my-footer>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src = "./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>About Page</h1>
<my-footer></my-footer>
</body>
</html>
контакт.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<script type=module src = "./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Contact Page</h1>
<my-footer></my-footer>
</body>
</html>
index.js
class MyHeader extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<header>
<nav>
<ul>
<li><a href=index.html>Home</a></li>
<li><a href=about.html>About</a></li>
<li><a href=contact.html>Contact</a></li>
</ul>
</nav>
</header>`;
}
}
customElements.define("my-header", MyHeader);
class MyFooter extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<footer>
© 2022 My Company
</footer>`;
}
}
customElements.define("my-footer", MyFooter);
Надеюсь, это поможет вам.
Я имею в виду, что использование JS для рендеринга верхних и нижних колонтитулов на моих страницах является хорошей практикой. Спасибо.
Да, это полностью зависит от количества веб-страниц на вашем веб-сайте, но я считаю, что полезно исследовать каждый случай во время обучения. JavaScript используется для создания взаимодействия с пользователем на веб-страницах и т. д., в дополнение к использованию эффективного кода, чтобы не повторяться. Не повторяйтесь — принцип, используемый программистами для создания более эффективного кода (DRY).
Для минимальной основы рассмотрим petite vue.