📌  相关文章
📜  烧瓶上的 css 和 js - Javascript (1)

📅  最后修改于: 2023-12-03 15:40:48.565000             🧑  作者: Mango

烧瓶上的 CSS 和 JS

烧瓶（Flask）是 Python 编程语言下的一个小巧的网络应用程序框架。它在 Python 2.7 及 Python 3.5 之后的版本中均可以使用。烧瓶使用 Werkzeug 工具箱和 Jinja2 模板引擎。烧瓶没有默认使用的数据库，然而支持多种数据库系统，包括 MongoDB、MySQL、SQLite 等等。烧瓶同时跟更流行的前端框架（如 Bootstrap）很好地配合使用，而且还提供了内置的开发服务器和调试器。本文将探讨如何在烧瓶中添加 CSS 和 JS。

CSS
使用静态文件

建立静态文件夹（static）并添加样式文件（style.css）

./yourproject
├── yourproject
│   ├── __init__.py
│   ├── views.py
│   ├── templates
│   │   └── index.html
│   └── static
│       └── style.css
└── run.py

<!DOCTYPE html>
<html>
<head>
    <title>Flask CSS</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Hello Flask</h1>
    <p>Welcome to Flask</p>
</body>
</html>
使用 CDN
<!DOCTYPE html>
<html>
<head>
    <title>Flask CSS</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Hello Flask</h1>
    <p>Welcome to Flask</p>
</body>
</html>
JS
使用静态文件

建立静态文件夹（static）并添加 JS 文件（script.js）

./yourproject
├── yourproject
│   ├── __init__.py
│   ├── views.py
│   ├── templates
│   │   └── index.html
│   └── static
│       ├── style.css
│       └── script.js
└── run.py

<!DOCTYPE html>
<html>
<head>
    <title>Flask JS</title>
</head>
<body>
    <h1>Hello Flask</h1>
    <p>Welcome to Flask</p>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
使用 CDN
<!DOCTYPE html>
<html>
<head>
    <title>Flask JS</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello Flask</h1>
    <p>Welcome to Flask</p>
</body>
</html>