стилизация контента из NetlifyCMS (с Gridsome в качестве генератора сайтов stati c) - PullRequest
0 голосов
/ 27 мая 2020

после создания сообщения в блоге (состоящего из нескольких абзацев и нескольких изображений) в NetlifyCMS при проверке HTML / CSS сообщения шаблон генерирует следующую разметку:

    .post {
    
      &__header {
        width: calc(100% + var(--space) * 2);
        margin-left: calc(var(--space) * -1);
        margin-top: calc(var(--space) * -1);
        margin-bottom: calc(var(--space) / 2);
        overflow: hidden;
        border-radius: var(--radius) var(--radius) 0 0;
    
        img {
          width: 100%;
        }
    
        &:empty {
          display: none;
        }
      }
    
      &__content {
    	  
        h2:first-child {
          margin-top: 0;
        }
    
        p:first-of-type {
          font-size: 1.2em;
    	  background-color: blue;
          color: var(--title-color);
    	}
        img {
          width: calc(100% + var(--space) * 2);
          margin-left: calc(var(--space) * -1);
          display: block;
          max-width: none;
        }
      }
    }
<div class="post__content">
    <p>first paragraph.</p>
    <p>second paragraph.</p>
    <p>third paragraph.</p>
    <p>fourth paragraph.</p>
    <p><img src='image1path.jpg'></p>
    <p><img src='image2path.jpg'></p>
    <p><img src='image3path.jpg'></p>
    <p><img src='image4path.jpg'></p>
    <p><img src='image5path.jpg'></p>
</div>

Фотографии имеют ширину 100% и отображаются в виде блоков. Что было бы наилучшим подходом для размещения изображений в формате flexbox или сетки? - напишите несколько javascript, чтобы добавить классы в теги p и img с помощью setAttribute, затем добавьте css? - Создать собственный виджет NetlifyCMS? - Создать собственный плагин фотогалереи Gridsome? - или еще какой вариант? Это проще, чем я думаю?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...