HTML 未与 Hugo 中的 CSS 链接

Question

我正在使用一些引导代码在 Hugo 中处理一些预制主题，我只想在显示、悬停等时更改所有链接的颜色。我已经搜索了很多，它说我必须按此顺序将 a:link{...}, a:visited{...}, a:hover{...}, a:active{...} 放入我的 css 中。我也试过放

<link rel="stylesheet" href="kitab.css">

在有人说之后在我的 html 中。没有一个变体工作，链接是蓝色的，我只想知道如何在 html 和 css 之间建立连接。 我的 html 部分（如果这不是一个非常简单的问题，我会全部提供）列出了一些可点击的标题，它们对应于网站中的页面：

<ul class="list-unstyled ml-1 mb-0 border-top border-warning pt-2">
    {{ range first 4 .Pages }}
    <li>
      <a href="{{ .Permalink }}">
        <p class="mb-1">
          {{ .Title }}
        </p>
      </a>  
    </li>
    {{ end }}
  </ul>

，这是我的整个 CSS：

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Roboto", sans-serif;
  background-color: whitesmoke;
  overflow-y: scroll;
  min-width: 250px;
}

nav {
  height: 40px;
}
main {
  min-height: calc(100vh - 100px);
  border-radius: 10px;
}
.side-bar {
  width: 25px;
  position: fixed;
  top: 70px;
}
footer {
  font-size: 0.9em;
  margin-left: 35px;
}
.nav-menu {
 /* color: #007bff !important; */
  font-size: 1.5em;
}
.nav-menu:hover {
 /* color: #0056b3 !important; */
  cursor: pointer;
}
.nav-menu-disabled {
 /* color: #4e4f50 !important; */
  font-size: 1.5em;
}


/* the link colors here */

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}








.book-cover {
  color: white;
/*  background-color: #24242499; */
}
.bookTitle {
  position: absolute;
  top: 2%;
  left: 5%;
}
.bookAuthor {
  position: absolute;
  bottom: 2%;
  right: 5%;
}
.show {
  transition: all 0.1s;
}
.hanging {
  padding-left: 15px;
  text-indent: -15px;
}

/*
ul.nav li a, ul.nav li a:visited {
    color: orange !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: orange !important;
}

ul.nav li.active a {
    color: orange !important;
}

*/

#copiedMessage {
  position: fixed;
  display: table-cell;
  line-height: 100px;
  width: 224px;
  height: 100px;
  text-align: center;
  top: calc(50% - 50px);
  left: calc(50% - 112px);
  transition: all 1s;
}

Answer 1

我完全理解现在发生的事情，我认为 Hugo 初学者应该看到这一点，因为我在任何教程中都没有被警告过。

在 Hugo 中，您可以导入主题。我所做的是将 CSS 文件从主题的静态移动到主题外的静态（我的项目）。所以，这实际上是在 Hugo 中将 CSS 与 HTML 链接起来的问题（这就是我更改主帖标题的原因）。如果您的主题中有一部分代码，而该主题之外有一部分代码，这可能会导致您在 Hugo 中出现问题。

解决方案是将我感兴趣的文件从主题移动到我的项目中（在主题之外），完全销毁主题的其余部分，并从 config.toml 中删除主题变量。另一种解决方案是将所有内容（除了内容文件夹中的文件）放入主题中。