html - 如何为 Hugo 中的一种元素添加默认的 CSS 类？

Question

我正在修改为 Hugo 找到的主题，我想知道如何将 css 类添加到生成的 HTML 代码中的表格。 我想使用 css 框架，如果表格有 class="u-full-width"，我知道我可以编辑 css 代码，但我认为必须有一个聪明的方法。

自动将类属性添加到 HTML 生成代码中的每个表的东西。

Answer 1

在深入了解之后，我假设您正在使用 SKELETON CSS 框架？

我认为你最好的选择是用原始标记包装你的表格，并添加一行 CSS:

<div class="u-full-width">
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
</div>

...像这样使用您的 CSS:

div.u-full-width > table {
  width: 100%;
  box-sizing: border-box;
}

... 或者，您可以继承 SKELETON 的样式:

div.u-full-width > table {
  width: inherit;
  box-sizing: inherit;
}