【问题标题】:How to include an external HTML-Head?如何包含外部 HTML 头?
【发布时间】:2019-10-10 08:15:37
【问题描述】:

我又开始编写小型企业网站了,在 10 个 HTML 页面中有 40% 的重复代码(标题和菜单)似乎很愚蠢。另一方面,在这样一个小项目中抛出类似Next.js 的东西似乎也有点矫枉过正。

是否有一种简单的方法可以通过在服务器端或客户端的每个页面中包含 head.html 来减少重复代码?

【问题讨论】:

    标签: javascript html include seo html-head


    【解决方案1】:

    我更喜欢 PHP。将您的 .html(静态)页面更改为 .php(动态)页面。只需“另存为”。您几乎可以将任何东西分成模板。

    您有以下简化的文件结构:

    index.php
    
    header.php
    
    home.php
    
    footer.php
    
    style.css
    

    index.php 包含 + 调用 header.php + home.php + footer.php

    header.php 有您的菜单等。

    home.php 可以有你的滑块,和更多的部分,等等。

    footer.php 拥有您的菜单 + 版权等。

    style.css 有你的样式,你可以有许多 .css 文件,这取决于你想要的样式。

    您可以将此扩展到您的其他页面:about.phpservices.phpcontact.php 等。

    index.php 文件中添加类似

    的内容
    <?php require ('your-folder-for-content/header.php'); ?>
    
    <?php require ('your-folder-for-content/home.php'); ?>
    
    <?php require ('your-folder-for-content/footer.php'); ?>
    

    关闭页脚末尾的 &lt;/html&gt; 括号。

    一个页面或很少重复的部分调用另一个页面并防止冗余。

    【讨论】:

    • home.php 是如何切换到不同内容的?
    • 如您所知,@leonheess home.php 在您的登录页面上。当您链接页面时,其他页面的切换发生在标题中,您甚至可能在稍后为您的内容的不同区域设置不同的标题。但是,登陆页面是第一次访问。假设您在 home.php 中添加了一个滑块,例如使用 调用它。您想在您的在你的着陆页底部的页脚之前,添加 。主页会给你一个干净的监督。
    • @leonheess 无论您稍后在那些“调用”中使用“要求”进行更改,即使您在其他页面中重复,例如在另一个页面中调用相同的部分,即使它是一个 button.php ,您将能够根据需要更改这些部分的内容,并且会立即更改。您无需在一大堆代码中四处搜索,结构将变得更加明显,哪个页面调用什么页面/内容。每个页面都将减少混乱,并且可以轻松更改内容。从简单开始。你会明白我的意思。
    • @leonheess 此外,您可以选择在模板网站上工作。我会推荐 Bootstrap。 Bootstrap 有一个标准化的布局系统。它已经带有美丽的元素。在此处查找模板网站:startbootstrap.com/themes。选择一个免费模板,看看它是如何工作的。根据自己的喜好更改元素和内容。删除不需要的页面。快速启动您的小型企业网站。对于联系页面,如果您遇到困难,请在此处找到我。我可以向您推荐一个高度发达且免费提供的简洁程序。
    【解决方案2】:

    您无法使用客户端 JavaScript 执行此操作,因为它在标头解析后运行。您应该为此使用服务器端技术。从 SSI 到 PHP :)

    【讨论】:

    • 什么是 SSI?谷歌说国际潜水学校
    • 服务器端包含技术
    • 这真的还是要走的路吗?如果我研究这个,我只会得到旧资源..
    • 因为它是非常古老的技术。但它现在也有效。这是完成任务的最简单方法。
    • 你会推荐 PHP 还是 SSI?
    【解决方案3】:

    Jekyll 非常好用且易于使用。您可以剥离所有不需要的功能。也有模板填充可用。它为整个站点输出静态 html,因此您不需要您的服务器运行任何守护进程。

    【讨论】:

      猜你喜欢
      • 2013-09-23
      • 1970-01-01
      • 2018-10-26
      • 2013-04-12
      • 2019-03-12
      • 2015-09-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多