如何在多个 HTML 文件中重用 HTML 代码 [英] How can I reuse HTML code across several HTML files

查看：16
本文介绍了如何在多个 HTML 文件中重用 HTML 代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

希望一切顺利.

我在互联网上尝试了很多解决方案，但都没有得到我想要的结果.

我正在 html 文件中编写引导程序代码.为此，我正在使用 adminlte.io 模板.

我只需要更改该仪表板的正文文本，网页中的所有其他内容都将保持不变.我如何在代码之前和之后重用.

我没有使用 php，也没有使用任何其他框架，只是简单的 html 文件，或者如果需要获得准确的结果，我可能会使用 JS 文件......提前谢谢你！

可重用的上层代码:

<头><元字符集=utf-8"><meta http-equiv="X-UA-Compatible";内容=IE=边缘"><title>AB1仪表板</title><!-- 告诉浏览器响应屏幕宽度--><元内容=宽度=设备宽度，初始比例=1，最大比例=1，用户可缩放=无"；名称=视口"><!-- Bootstrap 3.3.7 --><link rel="样式表";href=bower_components/bootstrap/dist/css/bootstrap.min.css"><!-- 字体真棒--><link rel="样式表";href=bower_components/font-awesome/css/font-awesome.min.css"><!-- 离子图标--><link rel="样式表";href=bower_components/Ionicons/css/ionicons.min.css"><!-- 主题风格--><link rel="样式表";href=dist/css/AdminLTE.min.css"><!-- AdminLTE 皮肤.从 css/skins 中选择一个皮肤文件夹而不是全部下载以减少负载.--><link rel="样式表";href=dist/css/skins/_all-skins.min.css"><!-- 莫里斯图--><link rel="样式表";href=bower_components/morris.js/morris.css"><!-- jvectormap --><link rel="样式表";href=bower_components/jvectormap/jquery-jvectormap.css"><!-- 日期选择器--><link rel="样式表";href=bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"><!-- 日期范围选择器--><link rel="样式表";href=bower_components/bootstrap-daterangepicker/daterangepicker.css"><!-- bootstrap wysihtml5 - 文本编辑器--><link rel="样式表";href=plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"><!-- HTML5 Shim 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!-- 警告:如果您通过 file://查看页面，Respond.js 将不起作用 --><!--[如果是 IE 9]><script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 谷歌字体--><link rel="样式表";href=https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"><body class="hold-transition skin-blue sidebar-mini"><div class="wrapper"><header class="main-header"><!-- 标志 --><a href="#";class =徽标"><!-- 侧边栏迷你 50x50 像素的迷你徽标 --><span class="logo-mini"><b>WOW</b></span><!-- 常规状态和移动设备的徽标--><span class="logo-lg"><b>WOW</b>|管理面板</span></a><!-- Header Navbar: style 可以在 header.less 中找到 --><nav class="navbar navbar-static-top"><!-- 侧边栏切换按钮--><a href="#";class =侧边栏切换"数据切换=推送菜单"；角色=按钮"><span class="sr-only">切换导航</span></a><div class="navbar-custom-menu"><ul class="nav navbar-nav"><!-- 用户帐户:样式可以在 dropdown.less 中找到 --><li class="dropdown user user-menu"><a href="#";类=下拉切换"；数据切换=下拉"><img src="dist/img/user2-160x160.jpg";类=用户图像"alt=用户图像"><span class="hidden-xs">Alexander Pierce</span></a><ul class="下拉菜单"><!-- 用户图片--><li class="user-header"><img src="dist/img/user2-160x160.jpg";class="img-circle";alt=用户图像"><p>亚历山大·皮尔斯 - 管理员<small>自 2020 年 11 月起成为会员</small></p><!-- 菜单页脚--><li class="user-footer"><div class="pull-left"><a href="#";class=btn btn-default btn-flat">Profile</a>

<div class="pull-right"><a href="#";class=btn btn-default btn-flat">退出</a>

</nav></标题><!-- 左侧栏.包含徽标和侧边栏 --><aside class="main-sidebar"><!-- sidebar: style 可以在 sidebar.less 中找到 --><section class="sidebar"><!-- 侧边栏用户面板--><div class="用户面板"><div class="pull-left image"><img src="dist/img/user2-160x160.jpg";class="img-circle";alt=用户图像">

<div class="pull-left info"><p>管理员用户</p><a href=#"><i class=fa fa-circle text-success"></i>在线

<!-- sidebar menu:: 样式可以在 sidebar.less 中找到--><ul class="sidebar-menu";数据小部件=树"><li class="header">MAIN NAVIGATION</li><li class="active treeview"><a href="#"><i class="fa fa-dashboard"></i><span>仪表板</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a><ul class="treeview-menu"><li class="active"><a href="index.html"><i class="fa fa-circle-o"></i>用户仪表板</a>;</li><li><a href=#"><i class=fa fa-user"></i><span>用户</span></a></li><li><a href=#"><i class=fa fa-map-marker"></i><span>Hunt</span></a></li><li><a href=#"><i class=fa fa-exclamation-circle"></i><span>挑战</span></a></li><li><a href=#"><i class=fa fa-briefcase"></i><span>公司请求</span></a></li></节><!--/.sidebar --></一边>

"这里我想在不同的文件中使用不同的代码"

可重用的低位代码:

 <footer class="main-footer"><div class="pull-right hidden-xs"><b>版本</b>2.4.0
<strong>版权&copy;2020年<a href=#">哇.</a></strong>所有权利预订的.</页脚>
<!-- ./wrapper --><!-- jQuery 3 --><script src="bower_components/jquery/dist/jquery.min.js"></script><!-- jQuery UI 1.11.4 --><script src="bower_components/jquery-ui/jquery-ui.min.js"></script><!-- 使用 Bootstrap 工具提示解决 jQuery UI 工具提示中的冲突 --><脚本>$.widget.bridge('uibutton', $.ui.button);<!-- Bootstrap 3.3.7 --><script src=bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!-- Morris.js 图表--><script src=bower_components/raphael/raphael.min.js"></script><script src=bower_components/morris.js/morris.min.js"></script><!-- 迷你图--><script src=bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script><!-- jvectormap --><script src=plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script><script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script><!-- jQuery 旋钮图表--><script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script><!-- 日期范围选择器--><script src=bower_components/moment/min/moment.min.js"></script><script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script><!-- 日期选择器--><script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script><!-- Bootstrap WYSIHTML5 --><script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script><!-- Slimscroll --><script src=bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script><!-- FastClick --><script src="bower_components/fastclick/lib/fastclick.js"></script><!-- AdminLTE 应用程序--><script src=dist/js/adminlte.min.js"></script><!-- AdminLTE 仪表板演示(仅用于演示目的)--><script src=dist/js/pages/dashboard.js"></script><!-- AdminLTE 用于演示目的--><script src=dist/js/demo.js"></script>

感谢您的回复.

解决方案

您可以在三个地方执行此操作:

在您构建站点时，在部署之前/期间.

在此步骤中，您获取已编写的源代码(以及您想从数据库中提取的任何数据)并将其转换为适合复制到您的服务器的代码(和内容)然后发送到浏览器.

您可以为此使用任何您喜欢的编程语言.通常，您会使用模板库并从一系列源文件中注入内容.

有很多静态站点生成器 旨在做到这一点.Jamstack 有更长的列表(尽管解释较少).

在服务器上

您已经拒绝了 PHP，但它或其他服务器端语言是解决此类问题的常见选择，无论是简单的包含集、更智能的模板还是完整的大型 CMS.

在客户端

通过使用客户端JS的HTTP提取内容 然后将其注入页面 是一个相当简单的选项，但对搜索引擎最不友好，并且最有可能因客户端问题(例如单个文件的网络超时或广告拦截器)而中断.

更复杂的系统会使用诸如 React 之类的工具，但其中最好的工具是由服务器端渲染支持的(例如通过 Next.js) 或构建时生成的静态文件(例如通过 Gatsby).也就是说，您使用选项 1 或选项 2，然后添加客户端以增强 UX 和性能.

hope all are doing well.

I've tried many solutions across the internet, but not getting the result I want.

I am writing bootstrap code in html files. I am using adminlte.io template for that purpose.

I just have to change the body text of that dashboard and all other things will remain same across the webpages. How can I RE-USE both before and after code.

I am not using php, or anyother framework just simple html file or I may use JS files if that's necessary for the accurate results.... Thank You in advance!

Re-usable upper code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AB1 Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="#" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>WOW</b></span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>WOW</b> | Admin panel</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          
          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
              <span class="hidden-xs">Alexander Pierce</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                <p>
                  Alexander Pierce - Administrator
                  <small>Member since Nov. 2020</small>
                </p>
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">Profile</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">Sign out</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>Admin user</p>
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
     
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i>User dashboard</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-user"></i> <span>Users</span></a></li>
        <li><a href="#"><i class="fa fa-map-marker"></i> <span>Hunt</span></a></li>
        <li><a href="#"><i class="fa fa-exclamation-circle"></i> <span>Challenge</span></a></li>
        <li><a href="#"><i class="fa fa-briefcase"></i> <span>Corporate request</span></a></li>
        </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

""HERE I WANT TO USE DIFFERENT CODE IN DIFFERENT FILES""

Re-usable lower code:

  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.4.0
    </div>
    <strong>Copyright &copy; 2020 <a href="#">WOW.</a></strong> All rights
    reserved.
  </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
</body>
</html>

Thank You for your response.

解决方案

There are three places you can do this:

When you build the site, before/during deployment.

This is a step where you take the source code you've written (along with any data you want to pull from, for example, a database) and convert it to code (and content) suitable to be copied to your server and then sent to browsers.

You can use any programming language you like for this. Generally you would use a template library and inject the content in it from a series of source files.

There are lots of static site generators which are designed to do this. Jamstack has a longer list (albeit with less explanation).

On the server

You've rejected PHP, but it or another server side language are common choices for this sort of problem, be it with a simple set of includes, something slightly smarter with templates or a full on big CMS.

On the client

Pulling content over HTTP with client-side JS and then injecting it into the page is a fairly simple option, but the least friendly to search engines and most likely to break due to client issues (like network timeouts for individual files or ad-blockers).

More complex systems would use tools like React but the best of those are backed by server-side rendering (e.g. via Next.js) or build-time generated static files (e.g. via Gatsby). That is to say you use option 1 or option 2 and then add client-side to enhance the UX and performance.

这篇关于如何在多个 HTML 文件中重用 HTML 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆