html静态模板-Flask 教程 – 静态文件

bendan520 2023年8月23日 html 0

整理：Python 架构师

静态文件（static files）是指这些不需要动态生成的文件，比如图片、CSS文件、JavaScript脚本等。

在Flask中，我们需要创建一个名为static的文件夹来存放静态文件。 该文件夹应与应用程序模块和模板文件夹位于同一目录级别。 因此，在项目的根目录创建一个静态文件夹：

$ mkdir static

生成静态文件的URL

在 HTML 文件中，引用这些静态文件需要提供文件所在的 URL。 为了获得更大的灵活性，可以使用 Flask 提供的 url_for() 函数生成这些文件的 URL。

在第2章的最后，我们学习了url_for()函数的用法。 它接受端点值（视图函数的名称）和参数，并返回相应的 URL。 对于静态文件，需要将端点值设置为static，并使用filename参数传入相对于静态文件夹的文件路径。

假设我们在static文件夹根目录下放置了一个名为foo.jpg的文件，下面的代码可以获取它的URL：

<img src="{{ url_for('static', filename='foo.jpg') }}">

静态模板是什么意思_静态模板技术_html静态模板

在大括号内调用 url_for() 将返回 /static/foo.jpg。

提示：在Python脚本中，url_for()函数需要从flask包中导出； 它可以直接在模板中使用，因为Flask将一些常用的函数和对象添加到模板的上下文（环境）中。

添加网站图标

Favicon（收藏夹图标）是显示在浏览器选项卡和书签栏中的网站图标。 您需要准备 ICO、PNG 或 GIF 格式的图像html静态模板，尺寸通常为 16×16、32×32、48×48 或 64×64 像素。 将图片放在static目录下，然后使用下面的方法将其导入到HTML模板中：

templates/index.html：导入 Favicon

<head>    ...    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}"></head>保存后刷新页面，即可在浏览器的标签页上看到该图片。

添加图片

为了增加页面的多样性，我们将添加两个图像：出现在页面标题后面的头像和出现在页面顶部的猫 gif。 我们在static目录下创建一个名为images的子文件夹，并将这两张图片放入其中：

shell$ cd static$ mkdir images

创建子文件夹不是必需的，只是为了更好地组织类似类型的文件。 同样html静态模板，如果您有多个 CSS 文件，您也可以创建一个 css 文件夹来组织它们。 接下来，将这两个图像添加到页面模板中，确保填写正确的文件路径：

templates/index.html：添加图像

<h2>    <img alt="Avatar" src="{{ url_for('static', filename='images/avatar.png') }}">    {{ name }}'s Watchlist</h2>...<img alt="Walking Totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">

请注意填写正确的文件路径。 保存并刷新页面，您将在页面上看到相应的图片。

添加CSS

html静态模板_静态模板是什么意思_静态模板技术

虽然图片已经添加了，但是页面仍然很简单，因为我们还没有添加CSS样式定义。 在static目录下创建CSS文件style.css，添加以下内容：

static/style.css：定义页面样式

/* 页面整体 */body {    margin: auto;    max-width: 580px;    font-size: 14px;    font-family: Helvetica, Arial, sans-serif;}
/* 页脚 */footer {    color: #888;    margin-top: 15px;    text-align: center;    padding: 10px;}
/* 头像 */.avatar {    width: 40px;}
/* 电影列表 */.movie-list {    list-style-type: none;    padding: 0;    margin-bottom: 10px;    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
.movie-list li {    padding: 12px 24px;    border-bottom: 1px solid #ddd;}
.movie-list li:last-child {    border-bottom:none;}
.movie-list li:hover {    background-color: #f8f9fa;}
/* 图片 */.totoro {    display: block;    margin: 0 auto;    height: 100px;}

接下来，在页面的标签内导入此 CSS 文件：

templates/index.html：导入CSS文件

<head>    ...    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css"></head>

提示：当您将 CSS 写入单独的文件时，它会被浏览器缓存（其他静态文件也是如此，例如 JavaScript 文件）。 从 Flask 2.0 开始，它支持在更改时手动重新加载静态文件。 如果你还在使用旧版本的Flask，每次更新CSS文件内容后，你需要使用以下快捷键来清除缓存：

最后，设置相应元素的class属性值以与相应的CSS定义关联：

templates/index.html：添加类属性

<h2>    <img alt="Avatar" class="avatar" src="{{ url_for('static', filename='images/avatar.png') }}">    {{ name }}'s Watchlist</h2>...<ul class="movie-list">    ...</ul><img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">

最终页面效果如下图（大家可以根据自己的需要自由更改CSS定义，我尽力了）：

章节总结

主页已经基本形成，接下来我们将逐步完成程序的功能。 在结束之前，让我们交出代码：

$ git add .$ git commit -m "Add static files"$ git push

静态模板是什么意思_html静态模板_静态模板技术

程序员交流群

扫码进群记得备注：城市、昵称、技术方向。

扫描下方二维码，逆袭成长

热门推荐