Как создать новостную ветку в шахматном порядке?

Question

Я создал ленту новостей на своем сайте Drupal 8. Как отобразить ветку новостей в шахматном порядке?

Я хочу, чтобы первый был слева, а сухой - справа, то же самое для других. На самом деле, я добавляю класс .right для этого, и он работает.

Но как добавить этот класс автоматически (у меня есть сто блоков для отображения в ветке)?

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 home-page-footer">
            <div class="col-md-12 timelines">
              <div class="main-timeline">
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-globe-americas"></i>
                  </div>
                  <div class="timeline-content">
                    <h3 class="title">Communautaire</h3>
                    <p class="description">
                    Grâce aux groupes et aux contenus que vous publierez dedans, vous pourrez rencontrer de nouvelles personnes partageant les mêmes centres d’intérêt que vous et y inviter vos amis. Vous pouvez aussi suivre des groupes et des boutiques.
                    </p>
                  </div>
                </div>
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-thumbs-up"></i>
                  </div>
                  <div class="timeline-content right">
                    <h3 class="title">Simple</h3>
                    <p class="description">
                    S1BIOSE est simple d'utilisation et accessible à tous. De plus il est en responsive design, c'est-à-dire qu'il s'adapte à tout type d'appareils (téléphones, tablettes, liseuses, ordinateurs et tv) et ses gros boutons le rendent utilisable sur écran tactile.
                    </p>
                  </div>
                </div>
                <div class="timeline">
                  <div class="timeline-icon">
                    <i class="fas fa-cookie-bite"></i>
                  </div>
                  <div class="timeline-content">
                    <h3 class="title">Respectueux</h3>
                    <p class="description">
                    S1BIOSE est hébergé par une entreprise française sur des serveurs situés en France et est déclaré à la commission nationale de l'informatique et des libertés (CNIL). Vous pouvez supprimer votre compte utilisateur et vos publications à tout moment.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

CSS:

.main-timeline .timeline-content {
    width: 45%;
    padding: 20px;
    border-radius: 5px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
}

.main-timeline .timeline-content:before {
    content: "";
    border-left: 7px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    left: 45%;
    top: 20px;
}

.main-timeline .timeline-content.right {
    float: right;
}

.main-timeline .timeline-content.right:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

Когда я вручную добавляю класс .right к .timeline-content, он отлично работает:

Теперь, когда я создаю представление с помощью Drupal, как автоматически добавить класс .right к любой строке с четным номером?

Какой код в моем JS-файле я должен ввести, чтобы добавить класс .right к четной строке?

  $('.timelines').on('even', function () {
       $('timeline-content').addClass('right');
  });

 $('.timeline:nth-child(even) .timeline-content').addClass('right');

.main-timeline {
    position: relative;
}

.main-timeline:before {
    z-index: -1;
    content: "";
    width: 3px;
    height: 100%;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
    position: absolute;
    top: 0;
    left: 49.9%;
}

.main-timeline .timeline {
    margin-top: 50px;
    position: relative;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

.main-timeline .timeline-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
    overflow: hidden;
    margin-left: -26px;
    position: absolute;
    top: 0;
    left: 50%;
    text-align: center;
}

.main-timeline .timeline-icon img {
    width: 50px;
    height: 50px;
}

.main-timeline .timeline-content {
    width: 45%;
    padding: 20px;
    border-radius: 5px;
    background: #ffffff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
    box-shadow: 0 0 10px rgba(0,0,0,0.22);
}

.main-timeline .timeline-content:before {
    content: "";
    border-left: 7px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    left: 45%;
    top: 20px;
}

.main-timeline .timeline-content.right {
    float: right;
}

.main-timeline .timeline-content.right:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

.timeline:nth-child(even) .timeline-content {
    float: right;
}

.timeline:nth-child(even) .timeline-content:before {
    content: "";
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ffffff;
}

.main-timeline .timeline-title {
    color: #000000;
    padding: 10px;
    background: #ffffff;
    border-bottom: 1px solid #cccccc;
    border-radius: 3px 3px 0 0;
    margin: -20px -20px 0px -20px;
}

.main-timeline .timeline-title h3 {
    font-size: 30px;
    font-weight: 300;
    margin-top: 0;
}

.main-timeline .timeline-title h6 {
    margin-bottom: 0;
}

.main-timeline .timeline-description {
    margin-top: 10px;
}

@media only screen and (max-width: 990px) {
    .main-timeline .timeline-title h3 {
        font-size: 25px;
    }
    .main-timeline .timeline-content::before {
        top: 16px;
    }
}

@media only screen and (max-width: 767px) {
    .main-timeline {
        margin-left: 20px;
    }
    .main-timeline:before {
        left: 0;
    }
    .main-timeline .timeline-content {
        width: 90%;
        float: right;
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline-content.right:before {
        left: 10%;
        right: inherit;
        margin-left: -6px;
        border-left: 0;
        border-right: 7px solid #ffffff;
    }
    .main-timeline .timeline-icon {
        left: 0;
    }
}

@media only screen and (max-width: 479px) {
    .main-timeline .timeline-content {
        width: 85%;
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline-content.right:before {
        left: 15%;
    }
    .main-timeline .timeline-title h3 {
        font-size: 20px;
    }
    .main-timeline .timeline-content:before {
        top: 13px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 home-page-footer">
            <div class="col-md-12 timelines">
              <div class="main-timeline">
                <div class="views-element-container form-group"><div class="view view-timeline-public view-id-timeline_public view-display-id-block_1 js-view-dom-id-38d0b8b38b7d1f7be5c3ba53e63939fd9979deb1ce7bd918a170a79832785389">
  
    
      
      <div class="view-content">
      <div data-drupal-views-infinite-scroll-content-wrapper="" class="views-infinite-scroll-content-wrapper clearfix form-group">    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-56">test 56</a></h3>
         <h6>jeu, 06/09/2018 - 12:57</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-77">test 77</a></h3>
         <h6>jeu, 06/09/2018 - 12:56</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-55">test 55</a></h3>
         <h6>jeu, 06/09/2018 - 12:56</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      https://www.s1biose.com/sites/default/files/styles/thumbnail/public/2018-02/linux_circuit_board_penguin_avatar_by_duradcell-d6gzwwu.jpg?itok=JnvROb1j
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/discussion/test-6">test 6</a></h3>
         <h6>jeu, 06/09/2018 - 12:08</h6>
      </div>
      <p class="timeline-description">
         Nouveau contenu (Discussion)<br>
         créé par <a href="/user/1">administrateur</a><br>
         dans le groupe [message:field_group_reference:entity:title]	
      </p>
   </div>
</div>
</div>
</div>
    <div class="views-row"><div>
  <div class="timeline">
   <div class="timeline-icon">
      [message:author:user_picture:thumbnail]
   </div>
   <div class="timeline-content">
      <div class="timeline-title">
         <h3><a href="/user/11569">test</a></h3>
         <h6>jeu, 06/09/2018 - 01:18</h6>
      </div>
      <p class="timeline-description">
         Vient de s'inscrire
      </p>
   </div>
</div>
</div>
</div>
</div>

    </div>
  
      
<ul class="js-pager__items pager" data-drupal-views-infinite-scroll-pager="">
  <li class="pager__item">
    <a class="button" href="/node?page=1" title="Aller à la page suivante" rel="next">Afficher plus</a>
  </li>
</ul>

          </div>
</div>

              </div>
            </div>
          </div>

Answer 1

Чтобы иметь возможность добавить класс к отображаемому HTML представления таким образом, вам необходимо использовать пользовательский шаблон.

Это можно сделать, скопировав шаблон файла ветки по умолчанию core/themes/classy/templates/views/views-view-XXXX.html.twig впапку с вашей темой и обновляем там код.

См. https://drupal.stackexchange.com/questions/203642/how-to-add-odd-or-even-class-in-each-row-of-a-views-table-output,, чтобы вы могли полностью контролировать визуализацию вида Drupal.

Если вы не имеете опыта работы с Drupal и согласноhtml-структуру, вы также можете достичь этого с помощью CSS:

.view-content .views-row:nth-child(even) .timeline .timeline-content {
       background: red;  // put here your 'right' properties.
}

С помощью селектора :nth-child(), который принимает значения even и odd, которые можно использоватьдля вашей цели.

Если вам действительно нужно добавить класс к этому конкретному элементу, вы можете сделать jQuery следующим образом:

 $('.view-content .views-row:nth-child(even) .timeline .timeline-content').addClass('right');

См. Codepen с обоими подходами, https://codepen.io/julia-cipriani-corvalan/pen/RYLPqy с CSS IЯ устанавливаю фон как красный, и с помощью JS я добавляю правильный класс, который устанавливает синюю рамку, к элементу timeline-content с четным timeline родителем.

Дайте мне знать, если это поможет,