使用Slug展示博客详情时静态URL失效问题求助

核心原因 #

你在博客详情页里用了相对路径引用静态资源（比如media/assets/css/bootstrap.min.css），当页面URL是/blog/this-is-testing-number-1/时，浏览器会把当前URL的路径作为基准，把资源路径拼接成/blog/this-is-testing-number-1/media/...，而不是从根目录开始的/media/...。

具体修复步骤 #

1. 快速修正HTML资源路径 #

把所有资源路径的开头加上/，改成绝对路径，让浏览器直接从网站根目录查找资源：

<!-- CSS
================================================== -->
<link rel="stylesheet" href="/media/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/media/assets/css/magnific-popup.css" />
<link rel="stylesheet" href="/media/assets/css/owl.carousel.min.css" />
<link rel="stylesheet" href="/media/assets/css/simple-scrollbar.css" />
<link rel="stylesheet" href="/media/assets/css/fontawesome.all.min.css" />
<link rel="stylesheet" href="/media/assets/css/style.css" />

<script src="/media/assets/js/modernizr.min.js"></script>

2. 规范方案：使用Django模板标签 #

Django提供了专门的模板标签来管理静态资源，避免路径错误：

• 首先在模板顶部加载标签：

{% load static %}

• 然后用{% get_media_prefix %}标签拼接媒体资源路径（适合用户上传的内容）：

<!-- CSS
================================================== -->
<link rel="stylesheet" href="{% get_media_prefix %}assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="{% get_media_prefix %}assets/css/magnific-popup.css" />
<!-- 其他资源同理修改 -->

<script src="{% get_media_prefix %}assets/js/modernizr.min.js"></script>

如果这些资源是项目自带的静态文件（非用户上传），建议放到static目录，改用{% static %}标签：

<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />

3. 修正settings.py中的配置错误 #

你的配置里有两处语法/命名错误：

• MEDIA_URL缺少闭合引号：

# 原错误代码
MEDIA_URL = '/media/

# 修正后
MEDIA_URL = '/media/'

• STATICFILES_DIR应为复数STATICFILES_DIRS，否则Django无法识别：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR , "public/static")
]

内容的提问来源于stack exchange，提问作者Zubaer Zishan