2016-12-22 7 views
2

머리글과 바닥 글을 변경/추가하면 그 후에 모두 편집하지 않고도 내 머리글과 바닥 글을 내 페이지에서 모든 페이지로 업로드하는 방법을 알아 내려고합니다. CSS와 JS를 HTML 페이지에 사용하고 있습니다. check the main page here 수 있습니다. header.php,한 번에 모든 페이지에 동일한 머리글과 바닥 글을 추가하는 방법은 무엇입니까? HTML

<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Da Montanha | Esporte e Aventura em Curitiba</title> 
 
<!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    
 
<link href="css/custom.css" rel="stylesheet" type="text/css"> 
 
    
 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
 
    
 
<link href="css/color.css" rel="stylesheet" type="text/css"> 
 
    
 
<link href="css/responsive.css" rel="stylesheet" type="text/css"> 
 
    
 
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css"> 
 
    
 
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    
 
<link href="css/datepicker.css" rel="stylesheet" type="text/css"> 
 
    
 
<link href="css/iconmoon.css" rel="stylesheet" type="text/css"> 
 
    
 
<link rel="icon" href="images/favicon.ico" type="image/x-icon"> 
 
    
 
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body class="campers-theme"> 
 
    
 
<div id="wrapper"> 
 
    
 
<header id="header"> 
 
    
 
<section class="topbar-section"> 
 
<div class="container"> 
 
<div class="col-md-6"> 
 
<div class="top-social"> 
 
<ul> 
 
<li><a href="https://instagram.com/DaMontanhaAventura" target="_blank"><i class="fa fa-instagram" target="_blank"></i></a></li> 
 
<li><a href="https://www.youtube.com/channel/UC2xNehgiy7AJzThAxQJqA3A" target="_blank"><i class="fa fa-youtube-square" target="_blank"></i></a></li> 
 
<li><a href="https://facebook.com/DaMontanhaAventura" target="_blank"><i class="fa fa-facebook-f" target="_blank"></i></a></li> 
 
</ul> 
 
<a href="mailto:[email protected]" class="email"><i class="fa fa-envelope-o"></i><span class="__cf_email__" data-cfemail="">[email protected]</span></a> <script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div> 
 
</div> 
 
<div class="col-md-6"> 
 
<div class="register-login"> 
 
<ul> 
 
<li><a href="login.html"><i class="fa fa-key"></i>Login</a></li> 
 
<li><a href="registrar-se.html"><i class="fa fa-unlock"></i>Registrar-se</a></li> 
 
</ul> 
 
</div> 
 
</div> 
 
</div> 
 
</section> 
 
    
 
    
 
<section class="logo-section"> 
 
<div class="container"> 
 
<div class="col-md-6"><strong class="logo"><a href="index.html"><img src="images/logo.png" alt="logo"></a></strong></div> 
 
<div class="col-md-6"> 
 
<div class="book-section"> <a href="booking-form.html" class="btn-book">Orçamentos</a> 
 
<div class="number-box"> <i class="fa fa-whatsapp"></i> 
 
<div class="number-text"> <span>Entre em Contato</span> <strong>41 99613 6600</strong> </div> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</section> 
 
    
 
<div id="cp-slide-search" class="cp_side-search"> 
 
<form method="get"> 
 
<input type="text" placeholder="Digite o que procura..." required> 
 
<button type="submit"><i class="fa fa-search"></i></button> 
 
</form> 
 
</div> 
 
    
 
<section class="main-navigation"> 
 
<nav class="navbar navbar-inverse"> 
 
<div class="container"> 
 
<div class="col-md-12"> 
 
<div class="navbar-header"> 
 
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
 
</div> 
 
<div class="nav-outer"> 
 
<div id="navbar" class="collapse navbar-collapse"> 
 
<ul class="nav navbar-nav" id="nav"> 
 
<li class="active"><a href="#">Início</a> 
 
</li> 
 
<li><a href="Aventuras.html">Aventuras<i class="fa fa-caret-down"></i></a></li> 
 
<li><a href="events-large.html">Eventos</i></a></li> 
 
<li><a href="products.html">Loja</i></a></li> 
 
<li><a href="#">Páginas<i class="fa fa-caret-down"></i></a> 
 
<ul> 
 
<li><a href="blog-large.html">Blog</i></a></li></li> 
 
<li><a href="booking-form.html">Orçamento</a></li> 
 
<li><a href="team.html">Nosso Time</a></li> 
 
<li><a href="gallery-1.html">Galeria de fotos</a></li> 
 
<li><a href="testimonials.html">Depoimentos</a></li> 
 
</ul> 
 
</li> 
 
<li><a href="about.html">Sobre Nós</a></li> 
 
<li><a href="contact.html">Contato</a></li> 
 
</ul> 
 
</div> 
 
<div class="nav-right-col"> 
 
<div class="cart-box-outer"> 
 
<div class="dropdown"> 
 
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-shopping-cart"></i> </button> 
 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
<li> 
 
<div class="cart-box"> <strong class="title">Você tem <a href="products-detail.html">1 item(s)</a> no seu carrinho.</strong> 
 
<div class="cart-row"> 
 
<div class="thumb"><a href="products-detail.html"><img alt="img" src="images/cart-img.jpg"></a></div> 
 
<div class="text-box"> <a class="close" href="#"><i class="fa fa-close"></i></a> <a href="products-detail.html">BestWedding Camping Equipment</a> <strong class="amount">1 x R$59.00</strong> </div> 
 
</div> 
 
<strong class="subtotal">Subtotal: <span>R$59.00</span></strong> 
 
<div class="btn-row"> <a class="btn-checkout" href="products-detail.html">Checkout</a> </div> 
 
</div> 
 
</li> 
 
</ul> 
 
</div> 
 
</div> 
 
<div class="top-search"> <a href="#" class="search-icon" id="search-push"><i class="fa fa-search"></i></a> </div> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</nav> 
 
</section> 
 
    
 
</header>

<footer id="footer"> 
 
<section class="instagram"> 
 
<div class="container"> 
 
<h2>We’re on Instagram</h2> 
 
</div> 
 
<ul> 
 
<li><a href="#"><img src="images/instagram/instagram-img-1.jpg" alt="img"></a></li> 
 
<li><a href="#"><img src="images/instagram/instagram-img-2.jpg" alt="img"></a></li> 
 
<li><a href="#"><img src="images/instagram/instagram-img-3.jpg" alt="img"></a></li> 
 
<li><a href="#"><img src="images/instagram/instagram-img-4.jpg" alt="img"></a></li> 
 
<li><a href="#"><img src="images/instagram/instagram-img-5.jpg" alt="img"></a></li> 
 
<li><a href="#"><img src="images/instagram/instagram-img-6.jpg" alt="img"></a></li> 
 
<li><a href="#"><img src="images/instagram/instagram-img-7.jpg" alt="img"></a></li> 
 
<li><a href="#"><img src="images/instagram/instagram-img-8.jpg" alt="img"></a></li> 
 
</ul> 
 
</section> 
 
    
 
<section class="footer-section-1"> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-md-4"> <strong class="footer-logo"><a href="#"><img src="images/footer-logo.png" alt="logo"></a></strong> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam laboris nisi ut aliquip ex ea commodo conseque Duis aute irure dolor in reprehenderit</p> 
 
<a href="about.html" class="btn-style-2">Read More</a> </div> 
 
<div class="col-md-4"> 
 
<h3>More Services</h3> 
 
<div class="row"> 
 
<div class="col-md-6"> 
 
<div class="footer-box"> 
 
<ul> 
 
<li><a href="#">Free Parking</a></li> 
 
<li><a href="#">Free Wifi Area</a></li> 
 
<li><a href="#">Restaurant</a></li> 
 
<li><a href="#">Free Hot Shower</a></li> 
 
<li><a href="#">Swimming Pool</a></li> 
 
<li><a href="#">Shaded Pitches</a></li> 
 
</ul> 
 
</div> 
 
</div> 
 
<div class="col-md-6"> 
 
<div class="footer-box"> 
 
<ul> 
 
<li><a href="#">Laundry</a></li> 
 
<li><a href="#">Hairdresser</a></li> 
 
<li><a href="#">Digs Area</a></li> 
 
<li><a href="#">Barbecue Station</a></li> 
 
<li><a href="#">Ping Pong Table</a></li> 
 
<li><a href="#">Coffee Bar</a></li> 
 
</ul> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
<div class="col-md-4"> 
 
<div class="footer-box"> 
 
<h3>Contact us</h3> 
 
<address> 
 
<ul> 
 
<li> <span><i class="fa fa-home"></i></span> 
 
<div class="text-box"> 
 
<p>123 Lorem Ipsum Avenue,<br> 
 
Campers Road, NY, U.S.A.</p> 
 
</div> 
 
</li> 
 
<li> <span><i class="fa fa-phone"></i></span> 
 
<div class="text-box"> 
 
<p>Call us for any Query</p> 
 
<strong>44</strong> </div> 
 
</li> 
 
<li> <span><i class="fa fa-envelope-o"></i></span> 
 
<div class="text-box"> 
 
<p>Send us email for any Information</p> 
 
<a href="mailto:"><span class="__cf_email__" data-cfemail="caa3a4aca58aa9aba7baafb8b9e4a9a5a7">[email&#160;protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div> 
 
</li> 
 
<li> <span><i class="fa fa-clock-o"></i></span> 
 
<div class="text-box"> 
 
<p>Office Timings</p> 
 
<strong>09:00 - 19:00</strong> </div> 
 
</li> 
 
</ul> 
 
</address> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</section> 
 
    
 
    
 
<section class="footer-section-2"> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-md-6"> 
 
<div class="footer-socila"> 
 
<ul> 
 
<li><a href="#"><i class="fa fa-twitter"></i>twitter</a></li> 
 
<li><a href="#"><i class="fa fa-facebook-f"></i>facebook</a></li> 
 
<li><a href="#"><i class="fa fa-google-plus"></i>google plus</a></li> 
 
<li><a href="#"><i class="fa fa-linkedin-square"></i>linkedin</a></li> 
 
</ul> 
 
</div> 
 
</div> 
 
<div class="col-md-6"><strong class="copy">2016 &copy; Campers, Powered by: <a href="http://crunchpress.com/" target="_blank">Crunchpress</a></strong></div> 
 
</div> 
 
</div> 
 
</section> 
 
    
 
</footer> 
 
    
 
</div> 
 
    
 
    
 
<script src="js/jquery-1.12.2.min.js"></script> 
 
    
 
<script src="js/bootstrap.min.js"></script> 
 
    
 
<script src="js/owl.carousel.min.js"></script> 
 
    
 
<script src="js/jquery.noconflict.js"></script> 
 
<script src="js/theme-scripts.js"></script> 
 
    
 
<script src="js/zebra_datepicker.js"></script> 
 
    
 
<script src="js/function.js"></script> 
 
    
 
<script src="../../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> 
 
<script src="js/jquery.counterup.min.js"></script> 
 
    
 
<script src="js/jquery.countdown.min.js"></script> 
 
    
 
<script src="js/custom.js"></script> 
 
<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'&lt;').replace(/>/g,'&gt;');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body> 
 

 
<!-- Mirrored from html.crunchpress.com/campers/blog-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 24 Nov 2016 12:21:10 GMT --> 
 
</html>

+2

당신은 내가 이것을 사용하는 방법에 대한 튜토리얼에 대한 검색을 원하지 예를 –

+0

에 대한 handlebars.js 같은 템플릿 엔진을 필요로하기 위하여려고하고있다 PHP없이 수행 할 경우 몇 가지를 알고 있다면, 알려 주시기 바랍니다 ! 도와 주셔서 대단히 감사합니다! –

답변

0

당신이 PHP 파일에 넣어 수 footer.php
: 도움이된다면

, 사람들은 다음과 같은 코드가 있습니다 그리고 당신이
<?php include('header.php') ?>
는 HTML 코드가
<?php include('footer.php') ?>

+0

그가 PHP에 대한 질문을 어디에서 지정 했습니까? – prateekkathal

+0

그는 그렇게하지 않았기 때문에 그가 모든 제안에 대해 열려 있다고 가정하고 있습니다 – Taki

+0

제안에 감사드립니다. 솔직히 말해서 PHP로 작업하는 방법을 모르겠습니다. 당신이 말한 것을 시도했지만 작동하지 않았습니다. 나는 페이지가 코드를 읽을 수 있도록 다른 것을 바꿔야한다고 생각하니? –

0

서버 측 언어없이 작업을 수행하려면 원하는 목적지를 포함, 당신은 당신의 템플릿에로드 자바 스크립트를 사용해야합니다. 이 질문에 대한 답에서 그렇게 할 수있는 몇 가지 방법을보십시오.

Include another HTML file in a HTML file

기본적으로, 당신은이 HTML 끌어 오기 위해 AJAX 요청을하려면 같은 jQuery를 또는 무언가를 사용해야합니다.

+0

감사합니다. @JDavis, 다음 코드를 사용해 보겠습니다.

b.js를 삽입하기 전에 HTML 콘텐츠를 입력하십시오.

... <스크립트 SRC = "b.js"> 당신이 나중에 원하는 콘텐츠를 여기 ...

합니다.

' JS '문서.쓰기 (단지 같은 \ 가 나열이 코드에서 보여, \ ''\ \

당신이와 LF의 탈출을 가지고,

주의 그러나 \ 여기

\ HTML 코드를 추가 '. \ \

\ '); –

1

angularJS에서 라우팅 기능을 사용할 수 있습니다. 아래 예를 확인할 수 있습니다. 여기서 동적으로 페이지에 바인딩 할 수있는 여러 콘텐츠를 가질 수 있습니다. 따라서 고정 머리글과 바닥 글 내용을 갖게됩니다.

<body ng-app="myApp"> 

    <p>header</p> 

    <a href="#content1">content1</a> 
    <a href="#content2">content2</a> 
    <a href="#content3">content3</a> 

    <div ng-view></div> 


    <script> 
    var app = angular.module("myApp", ["ngRoute"]); 
    app.config(function($routeProvider) { 
     $routeProvider 
     .when("/", { 
      templateUrl : "content1.htm" 
     }) 
     .when("/content1", { 
      templateUrl : "content1.htm" 
     }) 
     .when("/content2", { 
      templateUrl : "content2.htm" 
     }) 
     .when("/content3", { 
      templateUrl : "content3.htm" 
     }); 
    }); 
    </script> 
<p>footer</p> 
</body>