当我将可选参数传递给视图时，为啥我的 CSS 静态文件在 Django 中不起作用？

Posted 2023-02-24

【中文标题】当我将可选参数传递给视图时，为啥我的 CSS 静态文件在 Django 中不起作用？

【英文标题】：Why don't my CSS static files work in Django when I pass an optional parameter to the view?当我将可选参数传递给视图时，为什么我的 CSS 静态文件在 Django 中不起作用？

【发布时间】：2021-05-30 03:52:08

【问题描述】：

我正在 Django 中创建一个应用程序，其中我有一个主（索引）页面，其中显示了许多使用 CSS 样式设置的对象。 CSS 位于静态文件中。当我不向views.py 中的索引视图传递任何参数时，所有的CSS 都呈现得很好。但是，每当我向视图 url 传递一个额外的参数时，都不会应用 CSS（但信息会正确显示）。请问有人可以帮我解决这个问题吗？

settings.py：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "auctions/static")
STATICFILES_DIRS = [os.path.join(BASE_DIR, "auctions/static")]

urls.py（应用程序）：

urlpatterns = [
    path("categories", views.categories, name="categories"),
    path("", views.index, name="index"),
    **path("category/<str:cat_name>", views.index, name="index"),**
    path("create_listing", views.create_listing, name="create"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),
    path("<int:id>", views.view_listing, name="view"),
    path("watchlist", views.watchlist, name="watchlist")
]+static(settings.STATIC_URL, document_root=settings.STATIC_ROOT

模板：

% load static %
<link href="% static 'auctions/styles.css' %" rel="stylesheet">

views.py：

def index(request, cat_name=None):
    if cat_name is not None:
        listings = Listing.objects.filter(category=cat_name)
        listings = listings.filter(bid_active=True)
    else:
        listings = Listing.objects.filter(bid_active=True)
    return render(request, "auctions/index.html", 
            "listings": listings
            )

基本上，如果我不输入额外参数，视图就会起作用（但我必须这样做以避免代码中的冗余）。

【问题讨论】：

我没有看到您的网址以斜杠结尾（例如"categories" 应该是"categories/"），您的网址是否有效，或者您是否在设置中设置了APPEND_SLASH = False？跨度>

【参考方案1】：

在您的 url 模式中，它们都被命名为“index”。将其中之一命名为“index_with_category”。但这并不能解决您的问题。为此，请查看浏览器中的源代码并查看 css 指向的位置。

当您指定一个类别时，您的 url 模式匹配 category 路径，它在 /static_root/category/auctions/styles.css 中寻找您的 styles.css，但您希望它指向 /static_root/auctions/styles.css。由于您的网址中有category，并且您的css文件的href中没有前导斜杠，因此浏览器正在寻找相对于category的auctions，在某些情况下您可能想要，但可能不是在这个。当您不传递类别时，您的 url 已经位于您网站的根目录，因此对 auctions 目录的相对引用有效。

我怀疑您想将该行更改为具有前导斜线，否则它将查找与类别相关的拍卖：

<link href="% static '/auctions/styles.css' %" rel="stylesheet">