Question

我有一个网站，这个HTML块在所有页面上：

<div class="about">
<p> <a href="google.com">lorem ipsum</a> </p>
</div>

我希望避免在页面的HTML明文中重复这一点，以便网站变得更模块化/更容易编辑。我该怎么做呢？一个自然的解决方案可能是将它集成到我的CSS样式表中，但我不知道如何。

Answer 1

我建议您使用jquery将此html附加到每个页面，如下所示：

    $('.blocks').append('<div class="about">'+
        +'<p><a href="google.com">lorem ipsum</a></p>'+
        +'</div>');

Answer 2

如果您使用的是 C＃ASP.NET 您可以将此内容转换为部分视图。因此，您有一个包含此内容的视图，您可以通过此方式随处呈现：

@Html.Partial("yourView")

Answer 3

使用功能。你没有指定你使用的服务器端lang，所以我将在PHP上放一个例子：

<?php
    function printAbout(){
        echo "<div class='about'><p><a href='google.com'>lorem ipsum</a></p></div>";
    }
?>

然后你只需要在其他你想要打印这个div的地方包含包含该功能的页面，并按照以下方式调用你喜欢的函数：

<?php
    printAbout();
?>

请注意，打印该功能的页面上的样式将在您对其进行编码时生效，因此无需在函数上添加css或javascript，因此可以更容易地进行扩展和编辑（并且更容易查找））

Answer 4

如果您使用的是PHP，请将其放在一个单独的.php文件中，然后使用<?php include("path to the file.php"); ?>

将其包含在内

Answer 5

如果您使用php - 使用部分

about.php

<div class="about">
<p> <a href="google.com">lorem ipsum</a> </p>
</div>

main.php

<?php include about.php  ?>

Answer 6

您可以将其放在HTML文件中并在其他页面中使用。

使用jQuery：

a.html：

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("yourNewPage.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

yourNewPage.html：

<div class="about">
<p> <a href="google.com">lorem ipsum</a> </p>
</div>

有关详细信息，请查看此link

如何避免重复此HTML块？

6 个答案: