静态网页生成器中直接写<link>易失效,因路径解析、构建时机和主题覆盖机制差异;Hexo三类主题支持方式不同,Django需用{% static %},纯HTML须检查根/相对路径、编码及构建重写。

直接在静态网页生成器里写 <link rel="stylesheet" href="style.css"> 很可能失效——路径解析、构建时机、主题覆盖机制都会让这个看似简单的操作出错。真正起作用的方式,取决于你用的是哪个生成器,以及它是否暴露了安全的注入点。
Hexo 主题里填 custom.css 不生效?先看主题类型
Next、Fluid、Butterfly 这三类主流 Hexo 主题对自定义 CSS 的支持逻辑完全不同,硬套一个配置会白忙活:
- Next 主题只认
custom: css: /css/custom.css这种写法,路径必须以/开头,对应source/css/custom.css;它不解析数组,也不识别inject.head里的 link 标签(除非你手动关掉默认样式) - Fluid 主题原生支持
custom_css数组,- /css/custom.css和- https://cdn.jsdelivr.net/npm/xxx.css可混写,顺序即加载顺序,404 不中断构建 - Butterfly 主题压根不读
custom_css,必须走inject.head,且要写完整<link rel="stylesheet" href="/css/custom.css">,href 不能省略/,否则 hexo g 后浏览器控制台报net::ERR_ABORTED
Django 模板里写 href="style.css" 为什么 404?
Django 强制分离模板与静态资源,href="style.css" 这种相对路径在模板中永远无效,因为 HTML 是从 templates/ 渲染的,而 CSS 必须从 static/ 目录经 HTTP 提供:
- 确保
settings.py里有STATIC_URL = '/static/'和STATICFILES_DIRS = [BASE_DIR / "static"] - 把
style.css放进项目根目录下的static/文件夹,不是templates/下,也不是static/css/以外的嵌套路径(除非你额外配STATICFILES_DIRS) - 模板顶部加
{% load static %},然后用<link rel="stylesheet" href="{% static 'style.css' %}">,别漏引号
纯静态 HTML 里引入 CSS 却不生效?检查这三点
没有构建工具时,路径错误最隐蔽,浏览器控制台只显示 404,但你可能正盯着正确的文件名发呆:
立即学习“前端免费学习笔记(深入)”;
-
/表示站点根目录,比如href="/css/main.css"要求文件实际在 Web 服务器根路径下的css/main.css;而href="css/main.css"是相对当前 HTML 文件位置解析的 - 如果 HTML 在
/blog/post.html,想引用同级的style.css,得写href="../style.css",不是./style.css(后者指/blog/下) - CSS 文件本身编码要是 UTF-8 无 BOM,尤其 Windows 上用记事本另存时容易带 BOM,导致部分浏览器拒绝解析整张表
最常被忽略的其实是构建阶段的路径重写:Hexo 的 hexo g、Django 的 collectstatic 都会挪动文件或加哈希后缀,但只有通过它们规定的机制引入,才能保证链接指向最终部署后的正确位置。手写 link 标签绕过这些机制,等于主动放弃路径可靠性。


















