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

【问题标题】：How to add a default CSS class for one kind of elements in Hugo?如何为 Hugo 中的一种元素添加默认 CSS 类？
【发布时间】：2017-08-03 18:36:17
【问题描述】：

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

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

【问题讨论】：

您需要将class="u-full-width"添加到.md文件中用户生成的表中，还是仅添加到主题本身生成的表中？另外，您要修改的主题是什么？
我知道您需要简码：zwbetz.com/…

标签： html css hugo static-generator

【解决方案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;
}

【讨论】：

【解决方案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>

是的，你可以

【讨论】：

我不想使用javascript，可以吗？
是的，你可以试试上面的代码，给我点赞并把它标记为已回答：)
我真的很感谢你的努力（我会赞成你的回答）但这不是我的意思，我知道使用 javascript 我可以做到这一点，但我想更改 Hugo 生成的 html。
你可以成为作者，但我的答案是你所要求的。你想给 Hugo 生成的所有表自动添加一个类 ^^
市场已解决，然后我会在您的下一个问题中为您提供帮助，为社区做这件事