如何创建交错的新闻线程？

时间：2018-09-05 22:36:20

标签： javascript css drupal-8

我在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时，它可以正常运行：

enter image description here

现在，当我使用Drupal创建视图时，如何将.right类自动添加到任何偶数行？

enter image description here

在我的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>

1 个答案:

答案 0 :(得分：2)

为了能够向视图的呈现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');

参见两种方法的代码笔，https://codepen.io/julia-cipriani-corvalan/pen/RYLPqy 使用CSS，我将背景设置为红色，使用JS，我添加了设置蓝色边框的正确类，两个类都设置为timeline-content元素，甚至还有timeline个父元素。

让我知道是否有帮助，

相关问题
最新问题