작업 타임라인 사용 예제

작업 타임라인 기능 소개

이 포스트는 작업 타임라인 기능을 사용하는 방법을 보여주는 예제입니다.

Front Matter에 작업 정보 추가하기

포스트 상단의 Front Matter 영역에 다음과 같은 정보를 추가하면 작업 타임라인에 표시됩니다:

---
layout: post
title: "포스트 제목"
date: 2025-04-23  # 포스트 게시일
categories: ["카테고리1", "카테고리2"]
tags: ["태그1", "태그2"]

# 작업 정보 (타임라인용)
work_start_date: 2025-04-15  # 작업 시작일
work_end_date: 2025-04-22    # 작업 완료일
work_hours: 24               # 총 작업 시간(시간 단위)
---

작업 정보 활용 방법

작업 정보는 다음과 같이 활용됩니다:

  1. 포스트 상단에 작업 정보 표시: 각 포스트 상단에 작업 시작일, 완료일, 소요 시간이 표시됩니다.
  2. 타임라인 페이지: 작업 시작일을 기준으로 정렬된 타임라인 페이지에서 모든 작업물을 시간순으로 확인할 수 있습니다.
  3. 필터링: 년도별, 카테고리별로 타임라인을 필터링하여 볼 수 있습니다.

코드 샘플

아래는 이 기능을 구현하기 위해 추가한 코드의 일부입니다:


{% if page.work_start_date %}
<span class="post-work-date">
  <i class="fas fa-tools"></i> 작업 시작: {{ page.work_start_date | date: "%Y-%m-%d" }}
</span>
{% endif %}

활용 예시

이 기능을 활용하면 다음과 같은 일이 가능합니다:

  1. 포트폴리오 작업물의 소요 시간 관리
  2. 프로젝트 진행 기간 시각화
  3. 작업 히스토리 타임라인으로 정리
타임라인 이미지

결론

작업 타임라인 기능은 블로그에 포스팅하는 작업물의 시간 정보를 체계적으로 관리하고 시각화하는 데 도움이 됩니다. 작업 일정과 소요 시간을 기록하고 공유하세요!

댓글