Dynami c Хронология - передача контента django

Question

Я хочу создать динамическую c временную шкалу, подобную переполнению стека. Я имею в виду, что это именно то, что я хочу:

моя модель:

class Blog(models.Model):
    title = models.CharField(max_length=150)
    story = models.TextField()
    dateof_event = models.DateTimeField()

    def __str__(self):
        return self.title

Теперь у меня есть несколько блогов, и я хочу показать те блоги на странице профиля пользователя в виде временной шкалы, отфильтрованной по дате. Таким образом, каждый раз, когда пользователь создает блог, он должен занимать место на временной шкале на основе опубликованной даты.

Теперь, чтобы передать эти блоги как контент на временной шкале, что я могу сделать?

В настоящее время я как бы делаю это:

<div class="timeline">
    {% for blog in blogs %}

        {% if forloop.counter|divisibleby:2 %}

            <div class="container right">
                <div class="content">
                    <h2>{{ blog.title }}</h2>
                    <p>{{ blog.content }}</p>
                </div>
            </div>
        {% else %}
            <div class="container left">
                <div class="content">
                    <h2>{{ blog.content }}</h2>
                    <p>{{ blog.story }}</p>
                </div>
            </div>
        {% endif %}

    {% endfor %}
</div>

, который делает какую-то работу, но супер супер неэффективный подход. Также как, скажем, мой блог довольно длинный, примерно 500 слов, который должен быть в любом случае, тогда история уходит из карты.

Так что мне нужен лог c, который будет отображаться до определенного количества слов в предварительном просмотре, и если он превосходит определенный порог, должна быть кнопка, чтобы нажимать и читать дальше. Но как это сделать?

Также на временной шкале stackoverflow вы можете видеть, что одна карта начинается над нижней частью другой карты. Но как это сделать? В настоящее время моя временная шкала выглядит следующим образом:

Я знаю, что css, который я использую, является крайне грязным и неэффективным. Но я не могу найти лучших вариантов, также я очень плохо знаком с html и css в целом. Мой css выглядит примерно так:

* {
 box-sizing: border-box;
}


/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }

 /* The actual timeline (the vertical ruler) */
.timeline::after {
   content: '';
   position: absolute;
   width: 6px;
   background-color: black;
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -3px;
  }

/* Container around content */
.container {
   padding: 10px 40px;
   position: relative;
   background-color: gray;
   width: 35%;
 }

 / * The circles on the timeline */
 .container::after {
     content: '';
     position: absolute;
     width: 25px;
     height: 25px;
     right: -13px;
     background-color: black;
     border: 4px solid #FF9F55;
     top: 15px;
     border-radius: 50%;
     z-index: 1;
 }

 /* Place the container to the left */
 .left {
     left: 15%;
 }

 /* Place the container to the right */
 .right {
    left: 50%;
 }

 /* Add arrows to the left container (pointing right) */
 .left::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      right: 30px;
      border: medium solid white;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent black;
   }

  /* Add arrows to the right container (pointing left) */
  .right::before {
       content: " ";
       height: 0;
       position: absolute;
       top: 22px;
       width: 0;
       z-index: 1;
       left: 30px;
       border: medium solid white;
       border-width: 10px 10px 10px 0;
       border-color: transparent black transparent transparent;
  }

  / * Fix the circle for containers on the right side */
  .right::after {
     left: -16px;
  }

  /* The actual content */
  .content {
      padding: 20px 30px;
      background-color: red;
      position: relative;
      border-radius: 6px;
      border: 5px solid black;
  }

   /* Media queries - Responsive timeline on screens less than 600px wide */
   @media screen and (max-width: 600px) {
   /* Place the timelime to the left */
   .timeline::after {
         left: 31px;
   }

  /* Full-width containers */
  .container {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
  }

 /* Make sure that all arrows are pointing leftwards */
.container::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
 .left::after, .right::after {
     left: 15px;
  }

  /* Make all right containers behave like the left ones */
 .right {
    left: 0%;
  }

}

Так что полностью нужно каким-то образом переформатировать. Но как мне изменить мою структуру html, если блог становится длиннее, просто покажите 2 строки, а затем оставьте остальные, чтобы узнать больше. И весь мой код грязный и отвратительный. Есть ли лучший и крутой способ создания временной шкалы, такой как stackoverflow? Другое дело, как я могу создать ту же временную шкалу стека overflow, используя bootstrap? Если да, как я могу это сделать?

Пожалуйста, кто-нибудь, помогите. Я совершенно застрял. Так что любая помощь будет действительно полезной. Заранее спасибо.