여러 페이지에서 탐색 모음을 재사용하려면 어떻게 해야 합니까?
방금 home/index.html 페이지 만들기를 마쳤습니다. 탐색 모음을 제자리에 유지하고 사용자가 내 모든 페이지를 클릭하는 동안 그대로 유지합니다. 각 페이지 상단에 탐색 코드를 복사하여 붙여넣어야 합니까? 아니면 더 깔끔하게 보이게 할 다른 방법이 있습니까?
HMTL 탐색:
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" alt="Home"/></div>
<div id="headtag"><img src="image.png" alt="Home"/></div>
<div id="tagline"><img src="image.png" alt="Home"/></div>
</a>
</div>
<div>
<a href="/" class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
이것이 나를 도운 것입니다. 내 탐색 모음은 본문 태그에 있습니다. 탐색 모음의 전체 코드가 nav.html파일 에 있습니다(html 또는 body 태그 없이 탐색 모음용 코드만). 대상 페이지에서 다음 head태그로 이동합니다.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
그런 다음 body 태그에서 다음과 같이 고유 ID와 nav.html컨테이너 에 로드할 javascript 블록을 사용 하여 컨테이너를 만듭니다.
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
이것은 꽤 오래된 질문이라는 것을 알고 있지만 JavaScript를 사용할 수 있는 경우 jQuery와 해당 AJAX 메서드를 사용할 수 있습니다.
먼저 모든 탐색 모음의 HTML 콘텐츠가 포함된 페이지를 만듭니다.
다음으로 jQuery의 $.get방법을 사용 하여 페이지의 내용을 가져옵니다. 예를 들어 탐색 모음의 모든 HTML을 이라는 파일에 navigation.html넣고 에 자리 표시자 태그(Like <div id="nav-placeholder">)를 추가 했다고 가정해 보겠습니다 index.html. 그러면 다음 코드를 사용합니다.
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
다중 페이지 웹 사이트를 만들기 위해 php를 사용할 수 있습니다.
- 메뉴 및 소셜 미디어 등에 대한 모든 html 코드를 넣어야 하는 header.php를 만듭니다.
- 다음 코드를 사용하여 index.php에 header.php를 삽입하십시오.
<? php include 'header.php'; ?>
(위의 코드는 이 전에 모든 html 코드를 덤프합니다) 귀하의 사이트 본문 내용입니다.
- 마찬가지로 바닥글 및 기타 요소를 쉽게 만들 수 있습니다. PHP 내장 지원은 확장에서 html 코드를 지원합니다. 따라서이 쉬운 수정을 더 잘 배우십시오.
아주 오래되었지만 충분히 간단한 기술은 "서버측 포함" 을 사용 하여 .shtml확장 이 있는 최상위 페이지에 HTML 페이지를 포함하는 것 입니다. 예를 들어 이것은 당신의 index.shtml파일 이 될 것입니다 :
<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>
예, 절름발이이지만 작동합니다. HTTP 서버 구성에서 SSI 지원을 활성화하는 것을 기억하십시오( 이것이 Apache에 대해 수행하는 방법입니다 ).
Brando ZWZ는 이러한 상황을 처리하기 위한 몇 가지 훌륭한 답변을 제공합니다.
Re: 여러 페이지의 동일한 탐색 모음 2018년 8월 21일 오전 10:13|LINK
내가 아는 한, 여러 솔루션이 있습니다.
예를 들어:
탐색 모음의 전체 코드는 nav.html 파일에 있습니다(html 또는 body 태그 없이 탐색 모음용 코드만 있음).
그런 다음 많은 코드를 작성하지 않고도 jquery에서 직접 로드할 수 있습니다.
이와 같이:
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
솔루션2:
JavaScript 코드를 사용하여 전체 탐색 모음을 생성할 수 있습니다.
이와 같이:
자바스크립트 코드:
$(function () {
var bar = '';
bar += '<nav class="navbar navbar-default" role="navigation">';
bar += '<div class="container-fluid">';
bar += '<div>';
bar += '<ul class="nav navbar-nav">';
bar += '<li id="home"><a href="home.html">Home</a></li>';
bar += '<li id="index"><a href="index.html">Index</a></li>';
bar += '<li id="about"><a href="about.html">About</a></li>';
bar += '</ul>';
bar += '</div>';
bar += '</div>';
bar += '</nav>';
$("#main-bar").html(bar);
var id = getValueByName("id");
$("#" + id).addClass("active");
});
function getValueByName(name) {
var url = document.getElementById('nav-bar').getAttribute('src');
var param = new Array();
if (url.indexOf("?") != -1) {
var source = url.split("?")[1];
items = source.split("&");
for (var i = 0; i < items.length; i++) {
var item = items[i];
var parameters = item.split("=");
if (parameters[0] == "id") {
return parameters[1];
}
}
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-bar"></div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<%--add this line to generate the nav bar--%>
<script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>
https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages
그것이 당신에게 효과가 있을지 모르겠지만 저에게는 효과가 있습니다. 헤더나 본문 태그 없이 탐색 코드를 배치해 보십시오(탐색 모음이 시작되고 끝나는 코드만). 탐색 모음에 대한 코드를 별도로 배치하게 됩니다. Navigation.html에 이미 탐색 코드가 있고 다른 페이지에 포함할 것이라고 가정해 보겠습니다. 이를 포함하려면 body 태그 안에 배치하고 탐색 모음이 로드됩니다.
ReferenceURL : https://stackoverflow.com/questions/31954089/how-can-i-reuse-a-navigation-bar-on-multiple-pages
'IT이야기' 카테고리의 다른 글
| Simplemembership을 사용하는 새로운 MVC 4 인터넷 템플릿의 역할 기반 인증 (0) | 2021.10.20 |
|---|---|
| Node.js 코드의 아무 곳에서나 MongoDB 연결을 닫지 않는 것이 권장되는 이유 (0) | 2021.10.20 |
| Docker는 종료된 컨테이너의 로그를 봅니다. (0) | 2021.10.18 |
| SPAN의 차이점 (0) | 2021.10.18 |
| 캔버스 중앙에 맞추기 (0) | 2021.10.18 |