Flask自学记录

最新推荐文章于 2024-09-12 16:26:00 发布

奋斗的java小伙

最新推荐文章于 2024-09-12 16:26:00 发布

阅读量76

点赞数

分类专栏： Flask学习记录文章标签： flask python 后端

本文链接：https://blog.csdn.net/qq_60815011/article/details/132668759

版权

Flask学习记录专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这里是我们现在有的文件

在这里插入图片描述

因为这里的路径都是纯静态路径加载，会无法调用很多东西，所以我们要把它改为动态路径加载，就得使用jinjia2模板中的url_for模板，所以我们要把相对路径全部改为url_for的格式
改完后
在这里插入图片描述
效果为：（调用了bootstrap和css样式）

1.稍微复习一下html相对路径的知识吧

 在 HTML 中，相对路径指的是相对于当前目录的位置。相对路径使用两个特殊符号，一个点（.）和一个双点（…），它们分别表示当前目录和父目录。双点用于在层次结构中向上移动。例如：

• . 表示当前目录。
• … 表示父目录，即当前目录的上一级目录。
• images/picture.jpg 表示当前目录下的 images 文件夹中的 picture.jpg 文件。
• …/images/picture.jpg 表示父目录下的 images 文件夹中的 picture.jpg 文件。
相对路径通常用于链接到与当前页面位于同一网站中的外部文件，例如网页、图像、样式表和 JavaScript 文件。使用相对路径可以使您的网页不受当前基 URL 的限制，所有链接都将在您自己的计算机（localhost）以及您当前和未来的公共域上正常工作。这是一种最佳实践。

2.创建一个base.html 来作为父模板让几个子模版继承父模板

在这里插入图片描述
可以观察到导航条部分内容都是一致的，可以把其放在父辈模板中让子模版继承，子模版独特的部分可以让父模板用{%block%}title{%end block%}来让子模版可以呈现多态性

就用这个代码来继承{% extends 'base.html' %}

在这里插入图片描述
{% block body %}
这里填字模块自己的部分
{% endblock %}
当然也可以把标签中的东西block出来

其中一些属性css和JavaScript 在head中要用 所以要在head中定义一个空白来存放这些

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ url_for('static',filename = 'bootstrap/bootstrap.4.6.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename = 'css/init.css') }}">
    <title>{% block title%}{% endblock %}</title>
    {% block head %}{% endblock %} 
</head>

这样就完成了父模板的构建了
也就可以实现子模版多样性的功能