javascript - 如何在 100 多个网页的网站中使用 JavaScript 组件实现 HTML Header(navbar)
问题描述
我有一个包含 200 多个网页的网站,其中包含一个导航栏(标题)。我怎样才能自动化它,所以我不必担心使用 JavaScript 更改所有 200 多个网页的标题。实现这一目标的最佳方法是什么?
我使用 jQuery 实现如下,但导航栏没有显示。
<link rel="stylesheet" href="../../assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="jquery.js"></script>
<script>
$(function () {
$("#includedContent").load("../../html/home/header.html");
});
</script>
<!-- CSS Front Template -->
<link rel="stylesheet" href="../../assets/css/theme.css">
<!-- CSS Front Doc -->
<link rel="stylesheet" href="../../documentation/assets/css/starter.css">
</head>
<body>
<!-- ========== HEADER ========== -->
<header id="includedContent"></header>
<!-- ========== END HEADER ========== -->
我使用了 includeContent id 并将其链接到 header.html 页面。header.html 页面示例附在下面
<!-- ========== HEADER ========== -->
<header id="header" class="u-header u-header--hide-topbar u-header--sticky-top-md u-header--show-hide-md "
data-header-fix-moment="500" data-header-fix-effect="slide">
<!-- Search -->
<div id="searchPushTop" class="u-search-push-top">
<div class="container position-relative">
<div class="u-search-push-top__content">
<!-- Close Button -->
<button type="button" class="close u-search-push-top__close-btn" aria-haspopup="true"
aria-expanded="false" aria-controls="searchPushTop" data-unfold-type="jquery-slide"
data-unfold-target="#searchPushTop">
<span aria-hidden="true">×</span>
</button>
<!-- End Close Button -->
<!-- Input -->
<form class="js-focus-state input-group">
<input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Search</button>
</div>
</form>
<!-- End Input -->
<!-- Content -->
<div class="row d-none d-md-flex mt-7">
<div class="col-sm-6">
<strong class="d-block mb-2">Quick Links</strong>
<div class="row">
<!-- List Group -->
<div class="col-6">
<div class="list-group list-group-transparent list-group-flush list-group-borderless">
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Search Results List
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Search Results Grid
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
About
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Services
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Invoice
</a>
</div>
</div>
<!-- End List Group -->
<!-- List Group -->
<div class="col-6">
<div class="list-group list-group-transparent list-group-flush list-group-borderless">
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Profile
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
User Contacts
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Reviews
</a>
<a class="list-group-item list-group-item-action" href="#">
<span class="fas fa-angle-right list-group-icon"></span>
Settings
</a>
</div>
</div>
<!-- End List Group -->
</div>
</div>
<div class="col-sm-6">
<!-- Banner -->
<div class="rounded u-search-push-top__banner">
<div class="d-flex align-items-center">
<div class="u-search-push-top__banner-container">
<img class="img-fluid u-search-push-top__banner-img"
src="../../assets/img/mockups/img3.png" alt="Image Description">
<img class="img-fluid u-search-push-top__banner-img"
src="../../assets/img/mockups/img2.png" alt="Image Description">
</div>
<div>
<div class="mb-4">
<strong class="d-block mb-2">Featured Item</strong>
<p>Create astonishing web sites and pages.</p>
</div>
<a class="btn btn-xs btn-soft-success transition-3d-hover" href="index.html">Apply
Now <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
</div>
<!-- End Banner -->
</div>
</div>
<!-- End Content -->
</div>
</div>
</div>
<!-- End Search -->
<div class="u-header__section">
<div id="logoAndNav" class="container">
<!-- Nav -->
<nav class="js-mega-menu navbar navbar-expand-md u-header__navbar u-header__navbar--no-space">
<!-- Logo -->
<a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center"
href="../../html/home/index6.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#3F7DE0" opacity=".65"
d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,41,11.7V23C41,32.9,32.9,41,23,41z" />
<path class="fill-info" opacity=".5"
d="M28,35.9L28,35.9c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18l11.3,0C43,0,46,3,46,6.6V18C46,27.9,38,35.9,28,35.9z" />
<path class="fill-primary" opacity=".7"
d="M18,46L18,46C8,46,0,38,0,28v0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6V28C35.9,38,27.9,46,18,46z" />
<path class="fill-white" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z" />
</svg>
<span class="u-header__navbar-brand-text">Title</span>
</a>
<!-- End Logo -->
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn u-hamburger" aria-label="Toggle navigation"
aria-expanded="false" aria-controls="navBar" data-toggle="collapse" data-target="#navBar">
<span id="hamburgerTrigger" class="u-hamburger__box">
<span class="u-hamburger__inner"></span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="navBar" class="collapse navbar-collapse u-header__navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<!-- Button -->
<li class="nav-item u-header__nav-last-item">
<a href="../../html/home/index6.html">
<i class="fas fa-home fa-lg" style="color:rgb(30,144,255);">
<!-- icon --></i>
</a>
</li>
<!-- End Button -->
<!-- About Title -->
<li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover"
data-animation-in="slideInUp" data-animation-out="fadeOut" data-max-width="900px"
data-position="right">
<a id="aboutgssyMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle"
href="javascript:;" aria-haspopup="true" aria-expanded="false">About GSSY</a>
<!-- About - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="aboutgssyMegaMenu">
<div class="row no-gutters">
<div class="col-lg-12">
<div class="u-header__promo-card-deck">
<!-- ST-1 Item -->
<div class="u-header__promo-card u-header__promo-item">
<a class="u-header__promo-link" href="../../html/home/whatisgssy.html">
<div class="media align-items-center">
<div class="media-body">
<span class="u-header__promo-title transition-3d-hover">ST-1</span>
<small class="u-header__promo-text">Find out more </small>
</div>
</div>
</a>
</div>
<!-- End ST-1 Item -->
</div>
</div>
</div>
</div>
<!-- End About - Mega Menu -->
</li>
<!-- End About Title -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</div>
</div>
</header>
<!-- ========== END HEADER ========== -->
解决方案
您已将此问题标记为 PHP 以及 JS,因此我强烈建议您在 PHP(或您可能正在使用的任何其他服务器端语言)中执行某种常见的包含,而不是尝试这样做客户端(如 smootok 所示)主要是因为它会更加可靠,但也因为它在客户端上也会更快。
例如: <?php include("includes/header.php");?>
推荐阅读
- node.js - 如何在猫鼬模式中动态设置数字的最大属性
- javascript - Materialize CSS Sidenav 从屏幕底部打开
- java - 铃声停不下来
- node.js - 我正在制作一个 minecraft ping discord 机器人,当我的服务器离线时它会抛出这个错误
- python - 异步 http 的新手:如何解决这个问题?
- r - 如何根据 R 中的日期拆分数据框?
- bash - Bash - 如何查找具有特定名称的文件并将它们设置为变量?
- f# - 导入模块中的 F# Fable 函数未编译为 js
- google-bigquery - Bigquery SQL 根据分隔符/前缀将单值字符串转换为多值
- security - 无法在 Kubernetes 上运行的 Anchore 中添加注册表