jinja2引用css文件 - CSDN文库

要在Jinja2中引用CSS文件，可以使用HTML中的`link`标签。可以在你的HTML模板文件中添加以下代码： ```html <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> ``` 其中，`url_for`函数会生成静态文件的URL，`static`是默认的静态文件目录的名称，`filename`是静态文件的名称，这里是`styles.css`。确保你的CSS文件在静态文件目录中。默认情况下，Flask会将静态文件放在`static`目录中。因此，确保你的CSS文件在`static`目录中的某个子目录中。例如，如果你的CSS文件在`static/css/styles.css`中，那么在上面的代码中，你需要将`filename`设置为`css/styles.css`。

相关问题

fastapi在jinja2使用css

可以使用FastAPI和Jinja2一起创建具有CSS的网站。以下是一些步骤： 1. 首先，确保您已将所需的CSS文件放在正确的位置。例如，您可以将CSS文件放在“static/css”目录中。 2. 在FastAPI应用程序中，使用以下代码来设置Jinja2模板： ```python from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates(directory="templates") ``` 3. 创建一个Jinja2模板，并在其中引用CSS文件。例如，您可以创建一个名为“index.html”的文件，并在其中引用CSS文件： ```html <!DOCTYPE html> <html> <head> <title>FastAPI + Jinja2</title> <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}"> </head> <body> <h1>FastAPI + Jinja2</h1> <p>Hello, {{ name }}!</p> </body> </html> ``` 4. 在FastAPI应用程序中，创建一个路由方法来呈现Jinja2模板。例如： ```python @app.get("/", response_class=HTMLResponse) async def read_item(request: Request): return templates.TemplateResponse("index.html", {"request": request, "name": "John Doe"}) ``` 在此示例中，我们使用了“TemplateResponse”类来呈现Jinja2模板。我们还将“request”和“name”作为参数传递给模板。 5. 最后，在FastAPI应用程序中，使用以下代码来指定包含CSS文件的目录： ```python app.mount("/static", StaticFiles(directory="static"), name="static") ``` 在此示例中，我们使用“StaticFiles”类来指定包含CSS文件的目录。我们还将此目录挂载到FastAPI应用程序的“/static”路径上。这样，您就可以在FastAPI应用程序中使用Jinja2模板和CSS文件来创建具有样式的网站了。

fastapi在jinja2引用css的时候变成http://127.0.0.1:80/static/style.css

这是因为在 FastAPI 中静态文件默认是在 `/static` 目录下，而 Jinja2 模板引擎中的 CSS 文件路径是相对于当前页面的 URL 而言的。因此，如果你在模板中写的是 `href="style.css"`，它会自动在当前页面的 URL 前面加上 `http://127.0.0.1:80/`，导致找不到文件。为了解决这个问题，你可以在模板中使用 `url_for` 函数来生成正确的 CSS URL。例如，在你的模板中这样写： ```html <link rel="stylesheet" href="{{ url_for('static', path='style.css') }}"> ``` 这样，Jinja2 就会自动根据 `static` 目录的位置来生成正确的 CSS URL，而不会再加上 `http://127.0.0.1:80` 的前缀了。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通