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

Question

I want to create one page to contain the <header></header> for all my pages.我想创建一个页面来包含我所有页面的<header></header> 。 Meaning I can link all my stylesheets without having to go page by page.这意味着我可以链接我所有的样式表，而不必逐页链接 go。

Any ideas?有任何想法吗？ I'm using Visual Studios.我正在使用 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>

Answer 1

Usually you use PHP for this.通常为此您使用 PHP。 Make a file 'header.php' and include that in every other PHP page with: include 'header.php';制作一个文件'header.php'并将其包含在每个其他PHP页面中： include 'header.php';

But PHP works on the server, so you need to have a server space somewhere to run it on.但是 PHP 在服务器上工作，所以你需要在某个地方有一个服务器空间来运行它。 You can test a server at home on your own computer with Apache though: https://www.apachefriends.org/index.html您可以使用 Apache 在您自己的计算机上在家中测试服务器： https://www.apachefriends.org/index.html

Answer 2

I use Flask.我使用 Flask。 Flask has Templating using Jinja2. Flask 具有使用 Jinja2 的模板。 Here's what the server-side[flask] and html template side[jinja2-html] looks like:下面是服务器端 [flask] 和 html 模板端 [jinja2-html] 的样子：

** [yourflaskappname]/crud.py** ** [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])

So below you will see how you can use jinja with flask.因此，下面您将看到如何将 jinja 与 flask 一起使用。 Note the {{ }}.注意 {{ }}。 you can call values into {{ }} from the server, and dynamically places the data into the HTML template.您可以从服务器调用值到 {{ }}，并动态地将数据放入 HTML 模板。 templates are so amazing and powerful.模板是如此惊人和强大。 flask is easy to learn. flask 易于学习。 Make sure to learn JS too!一定要学习JS！

** [yourflaskappname]/templates/issue_tracker/BF_FE_view1_v2.html** ** [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>

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

问题描述

2 个解决方案

解决方案1
1 2021-03-14 22:07:46

解决方案2
1 2021-03-14 22:23:42

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

问题描述

2 个解决方案

解决方案1 1 2021-03-14 22:07:46

解决方案2 1 2021-03-14 22:23:42

解决方案1
1 2021-03-14 22:07:46

解决方案2
1 2021-03-14 22:23:42