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

Question

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

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

Answer 1

在做了一点挖掘之后，我假设你正在使用SKELETONCSS 框架？

我认为你最好的选择是用香草标记包装你的表格，并添加一行 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;
}

Answer 2

您可以使用 javascript 来做到这一点，您可以简单地将var tables = document.getElementsByTagName("table")其用作您的选择器。

然后使用添加类for

这是代码

window.onload = function() {
    var tables = document.getElementsByTagName("table"),
        len = tables !== null ? tables.length : 0,
        i = 0;
    for(i; i < len; i++) {
        tables[i].className += " u-full-width"; 
    }
}
function addclass(){
    var tables = document.getElementsByTagName("table"),
        len = tables !== null ? tables.length : 0,
        i = 0;
    for(i; i < len; i++) {
        tables[i].className += " u-not-full-width"; 
    }
}

table {
border:1px solid #000;
width:100%;
height:300px;
}
td {
border:1px solid red;
}
.u-full-width{
background-color:blue;
}
.u-not-full-width{
background-color:green !important;
}

<button onclick="addclass();">Add class to all tables</button>
<table>
	<tbody>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</tbody>
</table>
<table >
	<tbody>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</tbody>
</table>
<table >
	<tbody>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</tbody>
</table>

是的你可以