소개하다.

최근에 나는 타임라인을 사용하여 너의 부차적인 성과와 주요한 성과를 추적하는 추문을 보았다.이것은 재미있는 생각이다.난 왜 한번도 생각해본 적이 없지?그래서 깨우침을 받아 나는 자신의 판본을 창작하기 시작했다.본문에서, 너는 내가 영감에서 창작한 과정을 보게 될 것이다.

플로린 팝송👨🏻‍💻
@florinpop1705

나는 그것들이 아무리 크든 작든 너의 모든 성과를 기록할 것을 강력히 건의한다.🎯사칭 대역증후군을 처리할 때 정말 도움이 된다.내 사이트(시간표)에 한 페이지가 있는데 바로 이것을 위해서다.너는 마음대로 복사해서 스스로 사용할 수 있다.
2020년 12월 15일 오전 7:47
20
204

기술 스택

마지막으로 내가 원하는 것은 매우 명백한 것이다. 오직 내가 필요로 하는 기술만이 이해할 수 있다.저는 Django를 백엔드로 선택했습니다.왜냐하면이것은 관리하기 쉬운 모델 보기 제어 구조와 상자를 열면 바로 사용할 수 있는 관리 패널을 제공합니다. 앞부분은 간단한 Html와 CSS가 될 것입니다. 저는 화려한 사람이 아닙니다.간단해. 나한텐 문제 없어.

개시하다

나는 먼저 간단한 Django 프로젝트를 만들고 타임라인 프로그램을 만들었다.더 많은 내용을 추가할 계획이기 때문에 단독 프로그램을 만드는 것은 좋은 생각입니다.그 밖에 나는 카드 모형을 추가했는데 만약에 라벨 같은 내용이 필요하다면 제목, 본문, 날짜를 필드로 삼기만 하면 된다.(잠시 후에 추가할 예정입니다) 쉽게 추가할 수 있습니다.

class Card(models.Model):
    """
    In timeline: Each achievement is shown in card
    """
    heading = models.CharField(max_length=55, default="I forgot to add heading..", blank=False, null=False)
    body = models.TextField(max_length=999, default="", null=True, blank=True)
    date = models.DateField(default=timezone.now, null=False, blank=False)

    def __str__(self) -> str:
        return f"{self.heading}.. on {self.date}"

모델이 완성되면...비하인드를 처리하기 위해 보기를 만들 때가 되었다.나는 그 중의 모든 카드 (즉 성취) 를 연도로 나누는 시간표를 원한다.그래서 이 일을 처리해야 합니다.
보기에 대해 저는 클래스 기반의 유니버설 보기 django.views.generic.View을 사용하고 자신의 요청 처리 방법을 정의했습니다.장래에 맞춤형 물건이 필요할 것 같아서요.

class CardView(View):
    template_name = 'timeline/card_list_view.html'
    def get(self, request):
        cards = Card.objects.all().order_by('-date')

        return render(request, template_name=self.template_name, context={'timeline_data':cards})

나의 첫 번째 방법에서, 나는 단지 모든 카드를 앞에 보여 주려고 시도했을 뿐이다.나는 곧 이것이 통하지 않는다고 생각했다.Django에서는 방법이 없기 때문에 (적어도 나는 찾을 수 없다) 나는 이런 방식으로 데이터베이스를 조회할 수 있고 나에게 연도로 구분된 카드를 줄 수 있다.그래서 나는 이 문제를 처리하기 위해 자신의 논리를 추가했다.

class CardView(View):
    template_name = 'timeline/card_list_view.html'
    def get(self, request):
        cards = Card.objects.all().order_by('-date').values()

        qs = defaultdict(list)
        for query in cards:
            card_year = query['date'].year
            qs[card_year] += [query]
        qs = dict(qs)

       return render(request, template_name=self.template_name, context={'timeline_data':qs})

나는 defaultdict, 매우 유용한 도구를 썼다.우리 성에는 if-else과 try/except을 주었다.내가 여기서 무엇을 하고 있는지 알고 싶다면, 우선, 나는 최신에서 가장 오래된 순서로 모든 카드를 얻은 다음, .values()에서 사전 목록으로 변환할 것이다.그리고defaultdict 대상을 만들었습니다.이 항목의 기본값은 list이며, 같은 해의 모든 카드를 키 값 쌍에 추가합니다.이렇게.이것이 바로 백엔드 코드의 깊이다.
앞을 내다보니 내 앞부분을 만드는 것이 좀 귀찮아서 여기저기 둘러보니 내가 원하는 것처럼 간단하지만 기능이 강한 시간표 템플릿을 발견했다(here 보기).
문제가 있어요.이것은 다른 css 클래스를 사용하여 카드를 대체합니다. 왼쪽은 홀수이고, 오른쪽은 짝수입니다.그래서 나는 그것을 사용하는 방법이 필요하다
Django 템플릿의

및

카운터

은 짝수인지 홀수인지 판단하는 방법을 찾았다.우리는 그곳에서 간단한% 2을 사용할 수 없기 때문이다.

그래서 나는 사방을 둘러보더니 하나가 아니라 두 가지 예상치 못한 일을 발견했다.내 문제를 함께 해결하다.말 그대로 첫 번째는 forloop.counter.이것은django에서 for개의 순환계수기다.두 번째는 divisibleby 필터입니다.마지막으로 제 앞부분은 이렇게 보여요.(상관없는 코드를 삭제했다)

<div class="timeline-continue">
    {% for year, card_list in timeline_data.items %}
        {% for card  in card_list %}
            {% if forloop.counter|divisibleby:2 %}
                {% include 'timeline/snippets/right_card.html' with heading=card.heading date=card.date body=card.body %}
            {% else %} 
                {% include 'timeline/snippets/left_card.html'  with heading=card.heading date=card.date body=card.body %}
            {% endif %}
        {% endfor %}
        {% include 'timeline/snippets/year_circle.html' with year=year %}                    
    {% endfor %}
</div>

네, 저는 단편으로 건조의 원칙을 따릅니다.왼쪽과 오른쪽의 카드 부분은 이렇다.
왼쪽 패

<div class="row timeline-right">
    <div class="col-md-6">
        <p class="timeline-date">
            {{date|date:"F  "}}
        </p>
    </div>
    <div class="col-md-6">
        <div class="timeline-box">
            <div class="timeline-icon">
                <i class="fa fa-gift"></i>
            </div>
            <div class="timeline-text">
                <center>
                <h3>{{heading|title }}</h3>
                <p>{{body}}</p>
                </center>
            </div>
        </div>
    </div>
</div>

정확한 카드

<div class="row timeline-left">
    <div class="col-md-6 d-md-none d-block">
      <p class="timeline-date">
        {{date|date:"F"}}
      </p>
    </div>
    <div class="col-md-6">
      <div class="timeline-box">
        <div class="timeline-icon d-md-none d-block">
          <i class="fa fa-business-time"></i>
        </div>
        <div class="timeline-text">
          <center>
          <h3>{{heading|title }}</h3>
          <p>{{body}}</p>
          </center>
        </div>
        <div class="timeline-icon d-md-block d-none">
          <i class="fa fa-business-time"></i>
        </div>
      </div>
    </div>
    <div class="col-md-6 d-md-block d-none">
      <p class="timeline-date">
        {{date|date:"F"}}
      </p>
    </div>
  </div>

솔직히 그렇다.이것은 단지 데이터베이스에 카드를 만들어서 최종 제품의 문제를 검사할 뿐이다.나는 결과가 매우 좋다고 믿는다.최종 제품 here

소스 코드

전체 코드 라이브러리 here을 볼 수 있습니다.

고얄 아만 / 폴더

내가 곧 내놓을 서류 가방을 포함하는 원본 코드

폴더

내가 곧 내놓을 서류 가방을 포함하는 원본 코드
View on GitHub
신용:
기사 표지 사진 Florian Klauer과 Unsplash