Как я могу повторно использовать HTML-навигацию на каждой странице моего сайта? - PullRequest
Новая
       6

Как я могу повторно использовать HTML-навигацию на каждой странице моего сайта?

0 голосов
/ 09 декабря 2018

Я использую Bootstrap 4 для своего сайта.

Каждая страница содержит один и тот же код навигационной панели.Когда я меняю панель навигации, мне приходится копировать код на каждую страницу.

Как создать один файл с кодом панели навигации и включить его в каждую страницу во время выполнения, что позволяет один раз обновить панель навигациии он должен отображаться одинаково на каждой странице?

Я знаю, как это сделать в php, но я предпочитаю использовать javascript.

Я создал тестовую страницу, используя примеры, найденные на других сайтах, но этоне работает, см http://vidalingua.com/nav-test.html

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Я нашел решение, которое сработало. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(function(){
        var filename = "https://www.vidalingua.com/navbar.html"
        $("#includedContent").load(filename);
    });
</script>
</head>
<body>
<div id="includedContent"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
0 голосов
/ 09 декабря 2018

На вашем сайте вы загружаете jquery в голову, а затем загружаете jquery slim в ногу вашей страницы.В jquery slim load () не поддерживается.Вместо загрузки 2-х версий jquery lust загрузите полную версию jquery в вашу секцию foot и поместите после этого свой код jquery.Вот как должна выглядеть ваша страница: 

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>

<!--Navigation bar-->
<div id="nav-placeholder">

</div>


<!--end of Navigation bar-->


<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function(){
  $("#nav-placeholder").load("navbar.html");
});
</script>
</body>
...