如何通过_config.yml为GitHub Pages配置全局自定义样式表?
解决方法
1. 正确的_config.yml配置方式
你之前通过defaults设置stylesheet的方式不生效,原因是GitHub官方支持的Pages主题模板不会读取这个全局变量。针对这类主题,正确的配置方式是在_config.yml中添加custom_css项(多数官方主题支持该配置):
# _config.yml theme: 你的主题名称(比如minimal、cayman) custom_css: - assets/css/nbstyle.css
如果你的主题不支持custom_css配置,还有更通用的方案:
2. 通用自定义头部方案
在项目根目录创建_includes/head-custom.html文件,写入以下代码:
<link rel="stylesheet" href="/assets/css/nbstyle.css">
GitHub Pages的官方主题会自动加载这个自定义头部文件,实现全局引入你的样式表。
关于样式加载逻辑
无论用哪种方法,主题的默认CSS会先加载,你的自定义CSS后加载。如果你的样式选择器和主题样式的权重相同,你的样式会覆盖主题的对应规则;如果你的选择器权重更高,同样会覆盖原有样式。相当于两者同时导入,你的自定义样式作为补充或覆盖项生效。
内容的提问来源于stack exchange,提问作者ejkreboot
相关产品推荐
相关产品推荐

