如何在更多页面上放置div [英] How to put a div in more pages

问题描述

我想让某个div进入同一网站的多个页面，就像stackExchange栏是整个页面的一个页面一样。用css或html做它会很好。

解释我的问题是：如何在网站的所有页面中放置某些HTML，而不必要做到这一点是强制性的？

所有帮助表示赞赏。

感谢您的帮助。

解决方案

喜欢看初学者教程吗？只需向下滚动一下即可！

你可以用php做这样的事情（就像一个例子 - 如果你对webdev比较陌生，这对你应该是可能的）。 $ b

假设您有一个片段：< nav>< a href =page1> page1< / a>< a href =page2> page2< / a>< / nav>
和一个片段：< footer> copyright by computerquest< / footer> / code>

这些片段在您的案例中是一致的 - 因此它们在每个网站上都不会更改。

现在您只需放入每个这些代码片段放到一个文件中 - 让我们说nav.html和footer.html。

现在你创建你的特定网站：

 <？php includenav.html; ？> 
< div>您的内容page1< / div> 
<？php includefooter.html; ？> 
  

这个页面保存为page1.php，下一个保存为page2.php。

 <？php includenav.html; ？> 
< div>您的内容页面2< / div> 
<？php includefooter.html; ？> 
  

结果将显示为folling代码 - page1：
$ b < a href =page2> page2< / a>< / NAV>
< div>您的内容page1< / div>
< footer>版权所有computerquest< / footer>


和page2：

 < nav>< a href =page1> page1< / a>< a href =page2> page2< / a>< / nav> 
< div>您的内容页面2< / div> 
< footer>版权所有computerquest< / footer> 
  

所以这是您要求的结果。

注意：这不是解决方案，而是一个（如果你是webdev的新手，你可以很聪明地处理这个问题）！

希望这有助于： ）

---

编辑（TUT）：

通过阅读评论知道这个问题的作者是在JavaScript和PHP的新手。

所以我认为它指出了一些事情相当重要不同的技术！

顺便说一句：这只有当你也关心搜索引擎优化和禁用js的人时，才算真正有效。

这里我们去...

假设你有两个不同的类别：home和myService。

如果您决定遵循解决方案的链接指向（从答复被标记为已接受），我会关注以下问题。

如果您想要像一个站点应用程序一样提供您的网站（所以你有y我们的home.html显示了home和myService两个类别），并且您希望通过使用 javascript动态地将myService中的内容加载到home.html（btw：真的是个好主意） - 任何不使用JavaScript的人都无法访问我的服务的内容

但是，嘿： searchengines don 't使用javascript - 所以Google（例如）不会知道关于myService的内容。

如何管理它？

1. 要处理这个，您必须有2个物理网站（home.html和myService.html ） 确实。他们必须完成标记，包括头部和所有东西。当然，通过从不需要的标记（如< head> ）中提取内容，将内容从一个站点加载到另一个站点并不是什么大事。例如： jQuery（'＃content-container'）。load（myService.html＃content-container）; 。但现在，不必为每个网站（例如页脚）重写一致部分的优势/方法完全消失了，而是从搜索引擎优化 - 观点来看，这将是理想的。您必须拥有1个物理网站，但其中包含所有可用内容。现在，您拥有所有内容，只需隐藏/显示不需要的内容/需要的内容。例如： jQuery（'。content'）。hide（）。filter（'＃myservice'）。show（）。但一方面，根据内容的数量和SEO-观点的不同，维护这个内容可能会非常混乱，这不会很理想，因为您的内容不太具体。

结论

我会说：yepp - 有更好的办法！。

如果您是webdevelopment的新手，我强烈建议您开始学习服务器端脚本语言（例如PHP）首先和之后客户端脚本语言（例如javascript）。

学习PHP的基本知识非常简单，您可以很快开始学习javascript。

野生动物

在这里，我们将结合PHP（一种非常简单的方式）和javasrcipt lib rary jQuery：

一开始我们首先考虑哪些元素是一致的，哪些是动态的。

1. 一致：导航栏，页脚和一些核心标记元素
   

   好吧，让我们开始制作一个template.php（它是一个必须保存的文件）：
   
   

    <！doctype html> 
   < html> 
   < head> 
   < meta charset =utf-8> 
   <！ - 动态元素 - >< title><？php echo $ stitle; ？>< /标题> 
   < style> #active {font-size：1.5em; cursor：text}< / style> 
   < / head> 
   < body> 
   < nav> 
    <？php＃动态显示活动导航：id =活动
    if（$ ssite ===home）
    echo'< a href =home.php id =active> home< / a>< a href =myservice.php> service< / a>'; 
    else 
    echo'< a href =home.php> home< / a>< a href =myservice.phpid =active> service< / a> ; 
   ？> 
   < / nav> 
   < div id =content> 
   <？php include'template.content.php'; ？><！ - 动态元素 - > 
   < / div> 
   < footer> 
   （c）by computerquest 
   < / footer> 
   < script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script> 
   < script> 
    window.jquery || document.write（'< script src =jquery-1.11.1.min.js>< \ / script>'）; 
    window.sSite ='<？php echo $ sSite; ？>; //传送活动网站从PHP到JavaScript 
   < / script> 
   < script src =main.js>< / script> 
   < / body> 
   < / html> 
     

   现在我们制作2个文件（每个站点1个）
   
   home。 php：

    <？php 
   ＃set sites id 
    $ sSite =home; 
   ＃设定网站标题
    $ s标题=欢迎回家; 
   ＃设定网站内容
    $ sContent ='在这里，我们将与动态网站特定内容的页面：home.php...'; 
   ＃包含钻孔模板的钻孔模板，或者当其通过ajax 
   请求包含isset（$ _POST [sAjaxSite]）的子模板时？ template.content.php：template.php; 
   ？> 
     

   myservice.php：
   
   

    <？php 
    $ sSite =myservice; 
    $ sTitle =我的服务; 
    $ sContent ='在这里，我们使用页面的动态网站特定内容：myservice.php...'; 
    include isset（$ _POST [sAjaxSite]）？template.content。 php：template.php; 
   ？> 
     

   现在我们可以提供2个特定的物理站点，这些站点从搜索引擎优化和可访问性来看是非常好的，但开发环境非常智能且易于维护，因为如果您想创建一个新的你只需要做一个新的file.php：

    <？php 
    $ sSite =file; 
    $ sTitle =New Site; 
    $ sContent ='在这里，我们将使用动态网站特定页面内容：file.php...'; 
    include isset（$ _POST [sAjaxSite]）？template.content.php：template.php; 
   ？> 
     

   ，并更新template.php中的导航栏：
   
   

     [...] 
   < nav> 
   <？php＃highlight activ e动态导航：class =active
    if（$ sSite =home）
    echo'< a href =home.phpid =active>主页< / a& < a href =myservice.php>服务< / a>< a href =file.php>新< / a>'; 
    elseif（$ sSite =mySevice）
    echo'< a href =home.php>主页< / a>< a href =myservice.phpid =active >服务< / a>< a href =file.php>新< / a>'; 
    else 
    echo'< a href =home.php>主页< / a>< a href =myservice.php>服务< / a>< a href = file.phpid =active>新< / a>'; 
   ？> 
   < / nav> 
    [...] 
     

   看起来像您所需要知道的PHP开头！

   
   $ b
   
   
   1. $ setVariables =简单;
   
   $ getVariables = $ setVariables;
   
   2. echo $变量;
      include files-is-so-easy-in.php;
   
   
   3. 条件语句 if（is_nessecary === TRUE）{ here we go; } else {let it be; } 或 is_nessecary === TRUE？ 这里我们走了：让它成为;
   
   

   多数民众赞成在这个PHP场景中除了告诉服务器何时开始解析<？php 以及何时停止解析？> ...

   
   
   

   那么我们还需要什么呢？ 每个人都想要一个不错的一站式应用程序 - 所以让我们来做这个（jQuery方法）并创建一个文件main.js：
   
   

    < code $（函数（）
    {
    jQuery（window）.ready（函数（）
    {
    
    var aSite = ['home'，' myservice'，'file']; //当网站结构发生变化时唯一需要更新的行
    
    var sSiteAct = window.sSite; //在template.php（window。 sSite ='<？php echo $ sSite;？>'）
    //＃3导航而不离开当前端
    var fNavigate = function（oEvent）
    {
    jClicked = jQuery（oEvent.target）; 
    sHref = jClicked.attr（'href'）; 
    if（sSiteAct！== sHref）//只做点击元素不是那样的东西目前活跃的
    {
    jNav.filter（'＃active'）。attr（'id'，''）; 
    jClicked.attr（'id'，'active'）; 
    jContent.hide（）。filter（'＃'+ sHref.substr（0，sHref.lastIndexOf（'。'）））。show（）; 
    sSiteAct = sHref; 
   } 
   }; 
    
    //＃2追加sContent（sContent是通过ajax加载的所有内容容器）
    var jNav = jQuery（'nav a'）; 
    var jContent = {}; 
    var sContent =''; 
    var fInitiateNavigation = function（sContent）
    {
    jQuery（'＃content'）。append（sContent）; 
    jContent = jQuery（'。content'）; //获取所有内容容器，以便说出jQuery DOM对象
    jNav.click（function（oEvent）//监听点击事件
    {
    fNavigate（oEvent）; 
   返回false; //防止< a> -tags 
   }}的默认行为; 
    jNav.filter（'＃active'）。click（）; //触发点击事件| SA＃3
   }; 
    
    //＃1启动，通过ajax将所有内容容器加载到sContent 
    var i = aSite.length; 
    var iNotLoaded = i; 
    while（--i！== -1）
    {
    sSite = aSite [i]; 
    if（sSite！== sSiteAct）
    {
    jQuery.post（sSite +'.php'，
    {
    sAjaxSite：sSite 
   }） .done（function（sAjaxResponse）
    {
    sContent + = sAjaxResponse; 
    if（--iNotLoaded === 0）
    {
    fInitiateNavigation（sContent）; 
   } 
   }）; 
   } 
    else if（--iNotLoaded === 0）
    {
    fInitiateNavigation（sContent）; 
   } 
   } 
    
   }）
   }）.call（this）; 
     

   这就是它！如果你坚持上述概念的原则，那么jQuery代码片段应该始终如一。这些原则非常简单：具有特定网站内容的容器始终具有 class =。content和 id =文件名无扩展名 code>。

   
   
   

   当你不熟悉它时，肯定上面的jQuery部分看起来很混乱。但那不是重点。当然，你必须首先学会相处。但是如果你仔细看看PHP部分，你会发现它非常简单。
   
   没有太多的努力，你有坚实的基础来提高你的webdev技能。
   
   我认为 应建立客户端的东西。因为这会帮助你将注意力集中在内容本身上，这对SEO来说是一个重要的事实。不要忘记，搜索引擎没有看到您的内容，就像看到客户网站操纵结果的人一样。

   
   
   

   您可以专注于网站具体内容越好质量（不要把它当作教条，但要记住）。这是模板系统的一个优点。

   
   
   

   请不要忘记我总是尝试使用一种非常简单的措辞，因为这是针对初学者的。 ：）
   

   I would like to have certain divs go into more than one page for the same website just like how the stackExchange bar is one all of the pages. It would be nice to do it with css or html. I have no current theory on how to do this.

   To explain my question is: How to put certain html in all of the pages in my website without having to do it mandatory?

   All help is appreciated.

   Thank you for your help.

   解决方案

   Like to see a beginners tutorial? Just scroll down a bit!

   You can do things like that with php (just as an example - if you are quite new to webdev this should be possible for you).

   Lets say you have one snippet: <nav><a href="page1">page1</a><a href="page2">page2</a></nav> and one snippet: <footer>copyright by computerquest</footer>

   These snippets are consistent in your case - so they don't change on each site.
   Now you just put each of these snippets into one file - lets say "nav.html" and "footer.html".

   Now you create your specific sites like this:

   <?php include "nav.html"; ?>
   <div>your content page1</div>
   <?php include "footer.html"; ?>
   

   This page you save as page1.php and the next one as page2.php.

   <?php include "nav.html"; ?>
   <div>your content page2</div>
   <?php include "footer.html"; ?>
   

   The results will be as the folling code - page1:

   <nav><a href="page1">page1</a><a href="page2">page2</a></nav>
   <div>your content page1</div>
   <footer>copyright by computerquest</footer>
   

   and page2:

   <nav><a href="page1">page1</a><a href="page2">page2</a></nav>
   <div>your content page2</div>
   <footer>copyright by computerquest</footer>
   

   So this would be the result you had asked for.

   NOTE: this is not THE solution but ONE (and probably one you can handle quite smart if you are new to webdev)!

   hope it helps :)

   ---

   EDIT (TUT):

   As i got to know by reading the comments the author of this question is both a newbie in javascript and PHP.

   So i think its quite important to point out some things about the different techniques!
   BTW: This really counts only if you are also concerned about SEO and folks that have disabled js.

   Here we go...
   Lets assume you have 2 different categories: "home" and "myService".

   If you decide to follow the solution the link points to (from answer marked as accepted) i would be concerned about the following issue.
   If you want to deliver your site like a one-site-app (so you have your "home.html" that shows up both categories home and myService) and you want to realize this by dynamically loading the content from myService into home.html (btw: really a good idea in general) with javascript - anybody who don't uses javascript would not be able to access the content of myService!

   But hey: searchengines don't use javascript - so Google (for example) would not know about the content of myService.

   How to manage this?

   1. To handle this you must have 2 physical sites (home.html and myService.html) indeed. And they have to be done with complete markup including head and all the stuff. Of course its still not a big deal to load the content from one site to the other by extracting the content from the unneeded markup like <head>. For example something like: jQuery('#content-container').load( "myService.html #content-container" );. But now the advantage / approach of don't having to rewrite the consistent parts for each site (eg footer) went by completely but from the "SEO-point of view" this would be ideal.

   2. You must have 1 physical site but with all available contents inside. Now that you have all your content you just hide / show the unwanted / wanted content on demand. For example something like: jQuery('.content').hide().filter('#myservice').show(). But on the one hand maintaining this could be very confusing depending on the quantity of the content and from the "SEO-point of view" this would not be ideal because your content is less specific now.

   CONCLUSION

   I would say: "yepp - there are better ways!".
   If you are new to webdevelopment i would strongly recommend to start learning a "server-side scripting language" (eg PHP) first and afterwards a "client-side scripting language" (eg javascript).

   Learning the very basics of PHP is really easy and you can start learning javascript very soon too.

   THE WILDLIFE

   Here we go with a nice solution combining PHP (in a very easy way) and the javasrcipt library jQuery:

   At the very beginning we first think about which elements are consistent and which are dynamic.

   1. consistent: navigation bar, footer, some core markup elements
   2. dynamic: site specific content

   Alright so lets start with making a "template.php" (its a file that have to be saved):

   <!doctype html>
   <html>
       <head>
           <meta charset="utf-8">
           <!-- dynamic element --><title><?php echo $stitle; ?></title>
           <style>#active{font-size: 1.5em;cursor: text}</style>
       </head>
       <body>
           <nav>
               <?php # highlight active navigation dynamically: id="active"
               if     ($ssite === "home")
                   echo '<a href="home.php" id="active">home</a><a href="myservice.php">service</a>';
               else
                   echo '<a href="home.php">home</a><a href="myservice.php" id="active">service</a>';
               ?>
           </nav>
           <div id="content">
   <?php include 'template.content.php'; ?><!-- dynamic element -->
           </div>
           <footer>
               (c) by computerquest
           </footer>
           <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
           <script>
               window.jquery || document.write('<script src="jquery-1.11.1.min.js"><\/script>');
               window.sSite = '<?php echo $sSite; ?>'; // "transfer" active site from php to javascript
           </script>
           <script src="main.js"></script>
       </body>
   </html>
   

   Now we make 2 files (1 for each site)
   "home.php":

   <?php
   # set sites id
   $sSite    = "home";
   # set sites title
   $sTitle   = "Welcome Home";
   # set sites content
   $sContent = 'Here we go with the dynamic site specific content of page: "home.php"...';
   # include the hole template for deliviring a hole site or just the subtemplate when its requested by ajax
   include isset( $_POST["sAjaxSite"] ) ? "template.content.php" : "template.php";
   ?>
   

   "myservice.php":

   <?php
   $sSite    = "myservice";
   $sTitle   = "My Service";
   $sContent = 'Here we go with the dynamic site specific content of page: myservice.php"...';
   include isset( $_POST["sAjaxSite"] ) ? "template.content.php" : "template.php";
   ?>
   

   So by now we can deliver 2 specific physical sites which is very good from points of view SEO and accessibility but having a development environment that is smart and easy to maintain because if you want to make a new site the only things you have to do is make a new "file.php":

   <?php
   $sSite    = "file";
   $sTitle   = "New Site";
   $sContent = 'Here we go with the dynamic site specific content of page: "file.php"...';
   include isset( $_POST["sAjaxSite"] ) ? "template.content.php" : "template.php";
   ?>
   

   and also update our nav bar in template.php:

   [...]
       <nav>
           <?php # highlight active navigation dynamically: class="active"
           if     ($sSite = "home")
               echo '<a href="home.php" id="active">Home</a><a href="myservice.php">Service</a><a href="file.php">New</a>';
           elseif ($sSite = "mySevice")
               echo '<a href="home.php">Home</a><a href="myservice.php" id="active">Service</a><a href="file.php">New</a>';
           else
               echo '<a href="home.php">Home</a><a href="myservice.php">Service</a><a href="file.php" id="active">New</a>';
           ?>
       </nav>
   [...]
   

   Seems like thats all you have to know about PHP at the very beginning!

   1. $setVariables = "simple";
   2. $getVariables = $setVariables;
   3. echo $variables;
   4. include "files-is-so-easy-in.php";
   5. conditional statements if (is_nessecary === TRUE) {"here we go";} else {"let it be";} or is_nessecary === TRUE ? "here we go" : "let it be";

   Thats really it in this PHP scenario except telling the server when to start parsing <?php and when to stop parsing ?>...

   So what do we need else? "Everybody wants a nice one-site-app" - so lets do this (the jQuery way) and make a file "main.js":

   (function()
   {
       jQuery(window).ready(function()
       {
   
           var aSite = ['home', 'myservice', 'file']; // the only line that have to be updated when sites structure changes
   
           var sSiteAct = window.sSite; // assigned on the bottom of template.php (window.sSite = '<?php echo $sSite;?>')
           // #3 navigate without leaving the current side
           var fNavigate = function(oEvent)
           {
               jClicked = jQuery(oEvent.target);
               sHref = jClicked.attr('href');
               if (sSiteAct !== sHref) // only do something if clicked element isn't that one thats currently active
               {
                   jNav.filter('#active').attr('id', '');
                   jClicked.attr('id', 'active');
                   jContent.hide().filter('#' + sHref.substr(0, sHref.lastIndexOf('.'))).show();
                   sSiteAct = sHref;
               }
           };
   
           // #2 append sContent (sContent is all the content containers loaded via ajax)
           var jNav = jQuery('nav a');
           var jContent = {};
           var sContent = '';
           var fInitiateNavigation = function(sContent)
           {
               jQuery('#content').append(sContent);
               jContent = jQuery('.content'); // get all content containers as so to say "jQuery DOM objects"
               jNav.click(function(oEvent)    // listen to click event
               {
                   fNavigate(oEvent);
                   return false;                // prevent default behavior of <a>-tags
               });
               jNav.filter('#active').click();  // trigger click event | SA "#3"
           };
   
           // #1 startup with loading all content containers via ajax into sContent
           var i = aSite.length;
           var iNotLoaded = i;
           while (--i !== -1)
           {
               sSite = aSite[i];
               if (sSite !== sSiteAct)
               {
                   jQuery.post(sSite + '.php',
                   {
                       sAjaxSite : sSite
                   }).done(function(sAjaxResponse)
                   {
                       sContent += sAjaxResponse;
                       if (--iNotLoaded === 0)
                       {
                           fInitiateNavigation(sContent);
                       }
                   });
               }
               else if (--iNotLoaded === 0)
               {
                   fInitiateNavigation(sContent);
               }
           }
   
       })
   } ).call(this);
   

   Thats it! If you stay in the principles of the concept above the jQuery snippet should work always as aspected. Those principles are as simple as: the container with specific site content always have class=".content" and id="filename without extension".

   For sure the jQuery part above looks confusing when you are new to it. But thats not the point. Of course you have to learn first befor getting along with it. But if you have a close look at the PHP part you will see it is really simple.
   And without too much effort you have a solid base to enhance you webdev skills.
   The "client-side stuff" should be built on top of this in my opinion. Because this will help you to give a focus on the content itself and thats an important fact for SEO. Don't forget that search engines don't see your content like somebody who sees a client-site manipulated result.

   The more you can focus on the sites specific content the better the quality (don't take it as a dogma but keep it mind). And thats one advantage of a templating system.

   Please don't forget that i always tried to use a very simple kind of phrasing because this is targeted to beginners. :)

   这篇关于如何在更多页面上放置div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！