Как добавить класс CSS по умолчанию для одного вида элементов в Hugo?

Question

Я изменяю тему, которую нашел для Хьюго, и мне было интересно, как я могу добавить класс css в таблицы в сгенерированном HTML-коде. Я хочу использовать платформу CSS, и я хотел бы, если таблицы имеютclass="u-full-width"Я знаю, что могу редактировать коды CSS, но я думаю, что должен быть разумный способ.

Что-то, что автоматически добавляет атрибуты класса к каждой таблице в сгенерированном HTML-коде.

Answer 1

После небольшой копки я предполагаю, что вы используете SKELETON CSS Framework?

Я думаю, что ваш лучший вариант - обернуть ваши таблицы ванильной разметкой и добавить одну строчку 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>

Да, ты можешь