如何设置一个包含 <header></header> 并可以链接到所有页面的页面？答案

【问题标题】：How do I set up one page that containers the <header></header> and can be linked to all pages?如何设置一个包含 <header></header> 并可以链接到所有页面的页面？
【发布时间】：2021-03-14 21:35:15
【问题描述】：

我想创建一个页面来包含我所有页面的<header></header>。这意味着我可以链接所有样式表，而无需逐页浏览。

有什么想法吗？我正在使用 Visual Studio。

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, IE=11">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Drool Design Studio">
    <meta name="apple-mobile-web-app-title" content="Drool Design Studios">

    <title>Drool Design Studio</title>

    <!--FAVICON-->
    <link rel="icon" type="image/png" href="/images/logo/favicon.png" />

    <!--STYLE SHEETS-->
    <link href="style/global.min.css" rel="stylesheet" />
    <link href="style/header.min.css" rel="stylesheet" />
    <link href="style/sections.min.css" rel="stylesheet" />
    <link href="style/footer.min.css" rel="stylesheet" />
    <link href="style/buttons.min.css" rel="stylesheet" />
    <link href="style/scroll.min.css" rel="stylesheet" />
    <link href="style/reviews.min.css" rel="stylesheet" />

    <!--JS-->
    <script src="https://kit.fontawesome.com/662c8a0fc8.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

【问题讨论】：

你有某种服务器/模板系统吗？
纯html没有办法做到这一点。您可以使用生成 html 的模板语言
我不怕。你能推荐一种我可以让我的网站适应的模板语言吗？
最容易学习的是 IMO 是 Jekyll。您可以在jekyllrb.com 找到信息，您应该可以轻松地复制所有内容。它是更简单的模板引擎之一。还建议将 JS 脚本加载到页面底部，就在关闭 </body> 标记之前。

标签： html header stylesheet

【解决方案1】：

通常您为此使用 PHP。创建一个文件“header.php”并将其包含在每个其他 PHP 页面中：include 'header.php';

但是 PHP 在服务器上工作，所以你需要在某个地方有一个服务器空间来运行它。不过，您可以在自己的计算机上使用 Apache 在家中测试服务器：https://www.apachefriends.org/index.html

【讨论】：

【解决方案2】：

我使用 Flask。 Flask 有使用 Jinja2 的模板。下面是服务器端 [flask] 和 html 模板端 [jinja2-html] 的样子：

** [yourflaskappname]/crud.py**

from flask import Flask
crudSEapi = Blueprint('crudSEapi', __name__)

app = Flask(__name__)

@crudSEapi.route("/issue_tracker/", methods=['GET', 'POST'])
def issue_tracker():

    

    flows, issue_next_page = get_model().Crud.factory('issue').issues_bf()

return render_template('issue_tracker/BF_FE_view1_v2.html', my_string="Wheeeee!", my_list=[0,1,2,3,4,5])

所以下面你将看到如何将 jinja 与烧瓶一起使用。注意 {{ }}。您可以从服务器将值调用到 {{ }} 中，并将数据动态地放入 HTML 模板中。模板是如此惊人和强大！烧瓶很容易学习。一定要学JS！

** [yourflaskappname]/templates/issue_tracker/BF_FE_view1_v2.html**

<HTML>

<HEAD>

<TITLE>Your Title Here</TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

<HR>



<p>My string: {{my_string}}</p>
<p>Value from the list: {{my_list[3]}}</p>
<p>Loop through the list:</p>
  <ul>
    {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %}

<HR>

</BODY>

</HTML>

【讨论】：