html - 在 Jekyll 模板中自定义 CSS 样式

Question

我第一次使用 Jekyll 来构建作品集网站。我在自定义 HTML 方面没有遇到任何问题，但当我按照自定义 CSS 的说明进行操作时，我所做的更改在我执行 bundle exec jekyllserve 后不会应用。这是我按照此 github help link 中的说明尝试过的操作: 我创建了一个 CSS 文件 (assets/css/style.css)，并在其顶部放置了以下代码块:

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.button {
background-color: red;
}

然后，在 head.html 文件中，我确保通过添加以下内容来链接这个新创建的样式表:

<link rel="stylesheet" href="{{- 'assets/css/style.css' | relative_url -}}" />
<link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" />

请注意，main.css 是模板附带的原始 CSS 文件。 之后，当我刷新页面时，按钮没有改变。如果有人告诉我我应该采取不同的做法，我将不胜感激。谢谢

Answer 1

这与您调用 css 的顺序有关。

CSS有一个级联模型，其中你调用的最后一个CSS具有优先权。

尝试将您的 css 放在默认的 css 之后。

<link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" />
<link rel="stylesheet" href="{{- 'assets/css/style.css' | relative_url -}}" />

如果不起作用，请添加“重要”。

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.button {
  background-color: red !important;
}

如果这也不起作用，只需将另一个类放入 css 和 html 中的按钮

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.btn {
  background-color: red;
}