CSS 添加到 Jekyll Minima 中，而不是完全覆盖它

在本文中，我们将介绍如何使用 CSS 添加到 Jekyll Minima 主题中，而不是完全覆盖它。Jekyll Minima 是一个简洁而强大的静态网站生成器，它基于 Jekyll 平台，并提供了一个漂亮的默认主题。然而，有时我们需要对它进行一些个性化的定制，而不是完全替换它。

阅读更多：CSS 教程

为什么要添加而不是完全覆盖

在开始之前，让我们先探讨一下为什么我们应该选择添加 CSS 而不是完全覆盖 Jekyll Minima 主题。Jekyll Minima 提供了一套美观且一致的样式，它经过仔细设计和优化，具有良好的可读性和用户体验。因此，我们应该尽量保留 Jekyll Minima 提供的默认样式，并根据我们的需求进行一些微调和个性化。

修改主题样式

要向 Jekyll Minima 中添加自定义的 CSS 样式，我们需要创建一个新的样式文件，并将其添加到主题中。首先，在项目目录中找到 _sass 文件夹，里面包含了 Jekyll Minima 主题的样式文件。创建一个新的样式文件，命名为 custom.scss，并将其保存在 _sass 文件夹中。

在 custom.scss 文件中，我们可以根据自己的需求添加任何 CSS 样式。比如，我们想改变文章标题的颜色，可以添加以下代码：

h1 {
  color: #FF0000; /* 将标题颜色改为红色 */
}

在添加完自定义的样式后，我们需要在项目的 assets/css 文件夹中创建一个新的样式表文件，命名为 custom.css。在 custom.css 文件中，我们需要导入前面创建的 custom.scss 文件，并重写一些默认的样式。添加以下代码：

@import "minima";

@import "custom";

这样，我们的自定义样式将与 Jekyll Minima 的样式进行合并。

然后，我们需要在 _config.yml 文件中指定使用我们的自定义样式表。找到 sass 部分，将其修改为：

sass:
  style: compressed
  load_paths:
    - _sass

这样，我们的自定义样式将被压缩并加载。

最后，在命令行中运行 bundle exec jekyll serve 命令来启动本地服务器，我们可以在浏览器中预览我们的网站。现在，我们的自定义样式已经成功地添加到了 Jekyll Minima 主题中。

示例说明

以修改导航栏样式为例，我们可以添加以下代码到 custom.scss 文件中：

nav {
  background-color: #000000; /* 修改导航栏背景色为黑色 */
}

nav a {
  color: #FFFFFF; /* 将导航链接颜色改为白色 */
}

然后，在 _config.yml 文件中添加以下代码：

header_pages:
  - index.md
  - about.md

footer_pages:
  - index.md
  - about.md

这样，我们可以将自己的页面链接添加到导航栏和页脚中。

总结

通过添加而不是完全覆盖 Jekyll Minima 主题的方式，我们可以保留默认主题的美观和一致性，同时根据自己的需求进行个性化的定制。通过修改主题样式文件，并在配置文件中引入自定义样式，我们可以灵活地操控网站的外观和风格。希望本文对你理解如何使用 CSS 添加到 Jekyll Minima 主题有所帮助。