如何获取多个HTML文件引用单个.js文件

由 发布于

我正在为客户创建一个网站。我想到将来可能必须创建类似的网站，因此我想创建一个模板网站，该模板网站允许我更改网站的特定部分以使该网站适合特定客户。我想转到一个文件，在其中可以更改联系信息（姓名，电话号码，电子邮件等），这些更改将在所有html文件中更新。

另外，我想设置模板，以便可以动态填充导航栏和页脚中的链接。最终这将是一个12到15页的网站，我只想在一个文件中更新navbar / footer的数据，以便具有navbars / footer的12至15页的其余页面将动态填充。

这是我的文件树。当前没有CSS，只有html。

  • 主目录
  • css文件夹
  • main.css
  • main.css.map
  • main.scss
  • Javascript文件夹
  • index.js
  • about.html
  • contact.html
  • index.html

以下是index.js文件。当前，这适用于index.html，这意味着页脚中的联系信息已正确填充，并且navbar元素中的链接已正确填充。该文件未填充contact.html和about.html中的链接。这就是我的问题。有没有一种方法可以使用这个index.js文件来更新contact.html和about.html中的elements中的链接？

let yourName = document.querySelector('#yourName');
let NMLS = document.querySelector('#NMLS');
let address1 = document.querySelector('#address1')
let address2 = document.querySelector('#address2')
let cityState = document.querySelector('#cityState')
let phone = document.querySelector('#phone')
let email = document.querySelector('#email')
let hours = document.querySelector('#hours')

let homeLink = document.getElementById('homeLink')
let aboutLink = document.getElementById("aboutLink");
let contactLink = document.getElementById('contactLink')

// Change this data depending on client

let firstName = "John"
let lastName = "Doe"
let yourNMLS = "359846"
let yourAddress1 = "1235 4th Street"
let yourAddress2 = ""
let yourCity = "San Diego"
let yourState = "CA"
let yourZip = "96586"
let yourLocalCity = "Escondido"
let yourPhone = "619-213-2589"
let yourEmail = "youremail@gmail.com"
let daysOpen = "Daily"
let hoursOpen = "8:00AM - 5:00PM"

// data for links in navbar
let yourAboutLink = "about.html"
let yourHomeLink = "index.html"
let yourContactLink = "contact.html"

// leave this alone

yourName.innerHTML = `${firstName} ${lastName}`
NMLS.innerHTML = `NMLS: ${yourNMLS}`
address1.innerHTML = `${yourAddress1}`
address2.innerHTML = `${yourAddress2}`
cityState.innerHTML = `${yourCity}, ${yourState} ${yourZip}`
email.innerHTML = `${yourEmail}`
phone.innerHTML =`${yourPhone}`
hours.innerHTML = `${daysOpen}: ${hoursOpen}`
homeLink.href = `${yourHomeLink}`
aboutLink.href = `${yourAboutLink}`
contactLink.href = `${yourContactLink}`

以下是index.html文件。相关部分是header元素中的nav元素，以及footer元素中的ul和li元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>Loan officer website template</title>
</head>
<body>
<!-- Header Start -->
  <div class="hero-wrapper">
    <header>
      <a href="#" class="logo">Company Logo</a>
      <nav>
        <ul>
          <li><a id="homeLink" href="#">home</a></li>
          <li><a id="aboutLink" href="#">about</a></li>
          <li><a id="contactLink" href="#">contact</a></li>
          <li><a id ="applyNowLink" href="#">Apply Now</a></li>
        </ul>
      </nav>
    </header>
    <div class="hero-content">
      <h1>Your Name Home Loans</h1>
      <p class="subtitle">Your Local Mortgage Experts</p>
    </div>
  </div>

<!-- Qiuck features start -->
  <div class="quick-features">
    <div class="quick-features-content">
      <h1>Your "Name of city" Mortgage Experts</h1>
      <p class="subtitle">Welcome to your hometown Escondido mortgage professionals</p>
    </div>
    <div class="features-cards-wrapper">
      <ul>
        <li>
          <img src="#" alt="house icon">
          <h2>Purchase Loans</h2>
          <p>Get Pre-Qualified</p>
          <p>Mortgage Process</p>
          <p>Types of Mortgage</p>
          <p>Glossary of Terms</p>
          <p>Understanding Your Credit</p>
        </li>
        <li>
          <img src="#" alt="hourglass icon">
          <h2>Refinancing</h2>
          <p>Refinancing Facts</p>
          <p>Types of Mortgages</p>
          <p>Our Blogess</p>
          <p>Process of a Mortgage</p>
          <p>Understanding Your Credit</p>
        </li>
        <li>
          <img src="#" alt="pencil and pad icon">
          <h2>Popular Mortgage Programs</h2>
          <p>FHA</p>
          <p>Conventional</p>
          <p>203(K)</p>
          <p>VA</p>
          <p>View All Programs</p>
        </li>
      </ul>
    </div>
  </div>
<!-- Testimonials start -->
<div class="testimonials-wrapper">
  <div class="testimonials-content-wrapper">
    <h1>What our clients say</h1>
    <hr>
    <ul class="testimonials">
      <li>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
        <cite>John Doe</cite>
      </li>
      <li>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
        <cite>Jane Doe</cite>
      </li>
      <li>
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto adipisci inventore quam possimus. Reprehenderit odit harum aut ut omnis libero neque voluptatibus nulla sequi ea tenetur consequuntur nam molestias, cupiditate praesentium! Mollitia ab totam, qui recusandae accusantium animi accusamus molestias, id reprehenderit debitis a consequuntur, vel praesentium hic veniam quam provident! Facere molestias aliquid molestiae. Labore consequatur commodi ex a?</blockquote>
        <cite>Mark Smith</cite>
      </li>
    </ul>
  </div>
</div>
<!-- blog start -->
<div class="blog-wrapper">
  <h1>Blog</h1>
  <hr>
  <div class="blog-content-wrapper">
    <ul class="blog-content">
      <li>
        <img src="#" alt="blog image">
        <h4>Title of blog entry</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
        </p>
      </li>
      <li>
        <img src="#" alt="blog image">
        <h4>Title of blog entry 2</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
        </p>
      </li>
      <li>
        <img src="#" alt="blog image">
        <h4>Title of blog entry 3</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dolore illo, voluptas dolor explicabo, iusto magnam dolorum accusamus et quisquam voluptatem maxime quasi ullam consequuntur.
        </p>
      </li>
    </ul>
  </div>
</div>
<!-- Call to action -->
<div class="call-to-action-wrapper">
  <h1>Questions?</h1>
  <button>Contact Us</button>
</div>
<!-- footer -->
<footer>
  <div class="contact-info-wrapper">
    <ul>
      <li>
        <h2>Call Us</h2>
        <p id="phone"></p>
      </li>
      <li>
        <h2>email</h2>
        <p id="email"></p>
      </li>
      <li>
        <h2>Open Hours (PST)</h2>
        <p id="hours"></p>
      </li>
    </ul>
  </div>
  <div class="nmls-wrapper">
    <ul>
      <li>
        <h2>Contact</h2>
        <p id="yourName"></p>
        <p id="NMLS"></p>
        <p id="address1"></p>
        <p id="address2"></p>
        <p id="cityState"></p>
      </li>
      <li>
        <img src="#" alt="equal housing logo">
      </li>
    </ul>
  </div>
<hr>
<div class="disclaimer-wrapper">
  <p>Disclaimer</p>
  <p>All information is deemed reliable but not guaranteed. All properties are subject to prior sale, charge or withdrawal. Neither listing broker(s) or information provider(s) shall be responsible for any typographical errors, misinformation, misprints and shall be held totally harmless. Listing(s) information is provided for consumers personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumers may be interested in purchasing.</p>

  <p>Copyright © 2020, ODL Websites. All Rights Reserved.</p>
</div>
</footer>

<script type="text/javascript"src="./javascript/index.js"></script>

</body>
</html>

以下是contact.html文件。同样，我的index.js无法使用此文件，这意味着nav元素中的链接不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Contact Page</h1>

  <header>
    <a href="#" class="logo">Company Logo</a>
    <nav>
      <ul>
        <li><a id="homeLink" href="#">home</a></li>
        <li><a id="aboutLink" href="#">about</a></li>
        <li><a id="contactLink" href="#">contact</a></li>
        <li><a id ="applyNowLink" href="#">Apply Now</a></li>
      </ul>
    </nav>
  </header>


  <script type="text/javascript"src="./javascript/index.js"></script></body>
</html>

最后是我的about.html文件。同样，index.js不能使用此文件，这意味着nav中的链接不会更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>About Page</h1>

  <header>
    <a href="#" class="logo">Company Logo</a>
    <nav>
      <ul>
        <li><a id="homeLink" href="#">home</a></li>
        <li><a id="aboutLink" href="#">about</a></li>
        <li><a id="contactLink" href="#">contact</a></li>
        <li><a id ="applyNowLink" href="#">Apply Now</a></li>
      </ul>
    </nav>
  </header>

  <script type="text/javascript"src="./javascript/index.js"></script></body>
</html>