Jekyll自定义主题开发：如何在Liquid文件中关联样式表

嘿，我来帮你搞定这个样式表关联的问题！你用普通HTML的link标签没效果，其实是踩了Jekyll路径解析的小坑——Jekyll对文件路径的处理和纯HTML不一样，结合Liquid模板的时候，得用Jekyll自带的变量或过滤器来确保路径指向正确。

先对照你的文件夹结构：

• 站点根目录下有_layouts文件夹，里面是default.liquid
• 同级还有stylesheets文件夹，里面是styles.css

你只需要把原来的link标签改成下面两种方式之一就行：

方法一：用site.baseurl变量拼接路径 #

这个方法最稳妥，尤其是你的站点以后可能部署在子目录下的时候：

<link rel="stylesheet" href="{{ site.baseurl }}/stylesheets/styles.css">

为啥原来的href="mystyle.css"不行？因为你的default.liquid在_layouts文件夹里，用相对路径的话，Jekyll会误以为要找_layouts/stylesheets/styles.css，这个路径根本不存在，自然加载失败。用site.baseurl加上从根目录开始的路径，就能精准指向你存放styles.css的文件夹。

方法二：用Jekyll的relative_url过滤器 #

如果你的Jekyll版本是4及以上，还可以用这个更简洁的写法，它会自动帮你把路径和site.baseurl拼接好：

<link rel="stylesheet" href="{{ '/stylesheets/styles.css' | relative_url }}">

最后给你几个小提醒：

• 确认stylesheets文件夹确实和_layouts在同一级（站点根目录下），别不小心把它塞进_layouts里了
• 运行jekyll serve后，可以打开浏览器开发者工具（按F12），看“网络”标签里有没有styles.css的404错误，如果有的话，再仔细检查路径拼写
• 要是你正在开发可复用的Jekyll主题gem（不是直接搭建单个站点），路径逻辑会有变化，但从你的文件夹结构来看，上面的方法完全够用

快试试这两种写法，应该就能正常加载样式表啦！

备注：内容来源于stack exchange，提问作者Skrillx