[Github] 블로그 커스터마이징-3.1 포토폴리오 내용보강

수정 목표

저번에 about 탭과 Project 탭을 병합해서 portfolio 탭을 새로 생성 했습니다. Project 탭에 연혁을 시각적으로 보여줄 수 있기에 Project Summary 에 적용 시켰는데.. 처음에 생각 했던 기대와 달리 내용이 부실해 보였습니다. 프로젝트에 대한 간단한 내용이 타이틀 뿐이면 누가 관심을 가지려 할까..? 해서 연혁에 내용을 추가하기로 했습니다. 타이틀 밑에 어떤 프로젝트인지 부가 설명하는 서브 타이틀, 프로젝트 기간, 사용 된 기술스택 추가로 작성 하기로 했습니다.

구조 분석

_layouts/portfolio.html → _post/*.md 파일 중 카테고리가 프로젝트인 파일에 각 변수의 값을 받아 html에 출력합니다. 작성된 포스팅을 보면 상단 부분에 다음과 같이 값이 설정 되어 있습니다.

---
# 기존 정보
layout: post
date: 2021-09-03
title: "BMW Garage Startup Program PoC"
tags: [GitLab, AWS EC2, Vue, Python, AWS RDS, ]
categories: [Project, ]

# 새로추가 될 정보 
subtitle: 고객상담 이력 대시보드 개발
enddate : 2021-12-01
comments: false
---

portfolio.html 에서 같이 마크다운의 변수에 접근 하여 데이터를 출력 할 수 있습니다. 노션 자동화 까지 생각 한다면 노션에 추가될 정보의 속성을 추가하여 작성 하고 _scripts/notion-import.js 포스팅이 작성되는 부분에 추가 될 정보를 받아와 작성 해준 후
portfolio.html 데이터를 출력 하면 된다.

---

코드 수정

_scripts/notion-import.js

post에 작성될 md 파일을 작성하는 코드는 다음과 같습니다.

if 문을 추가하여 노션으로 부터 받아온 카테고리 값이 있으면서 값이 Project 이면 정보를 더 작성 하도록 설정 하였습니다. 추가로 프로젝트의 포스팅은 댓글을 비활성화 시켰습니다.

  if (cats.length > 0 && cats[0] === "Project") {
    //subtitle
    let ptsubtitleitle = r.properties?.["서브타이틀"]?.["rich_text"];
    if (ptsubtitleitle?.length > 0) {
      ptsubtitleitle = ptsubtitleitle[0]?.["plain_text"];
    }
    //enddate
    let enddate = r.properties?.["종료일"]?.["date"]?.["start"];
    if (enddate) {
      enddate = moment(enddate).format("YYYY-MM-DD");
    }
    fm = `---
layout: post
date: ${date}
title: "${title}"${fmtags}${fmcats}
subtitle: ${ptsubtitleitle}
enddate : ${enddate}
comments: false
---`;
  } else {
      fm = `---
layout: post
date: ${date}
title: "${title}"${fmtags}${fmcats}
---`;
  }

_layouts/portfolio.html

타이틀 밑에 추가로 값을 받아온 서브 타이틀과 프로젝트 종료 값을 li 태그 안에서 포함 해줍니다.

li 태그가 연혁의 회색을 생성하여 해당 태그 안에 넣고 글자 크기나 자간 등 수정하였습니다.

<li>
	{% assign ts = post.date | date: '%s' %}
	<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
	<span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
	{{ post.date | date: df_strftime_m }}
	</span>
	<a href="{{ post.url | relative_url }}">{{ post.title }}</a><br>
	<li>
	<div class = "summary">주제 : {{ post.subtitle }}</div>
	<div class = "summary">기간 : {{ post.date | date: '%Y-%m' }} ~ {{ post.enddate | date: '%Y-%m'}}</div>
	<div class = "summary">기술스택 : 
		{% for tag in post.tags %}
		{{ tag }}
		{% unless forloop.last %},{% endunless %}
		{% endfor %}
	</div>
	</li>
</li>

삽질 후기

블로그를 커스텀 할 수록 웹에 대한 흥미가 늘어가는 거 같아요. html 상에 값을 출력 해내는 과정은 큰 삽질 없이 잘 뽑는데 성공 했지만, SCSS상으로 많은 삽질은 했습니다. 기존에 타이틀만 뽑았을 때 입을 옷을 입혀 놓은건데 추가로 데이터를 비집어 넣었으니 틀이 깨질 수 밖에 .. 그런 부분을 하나 하나 수정 해나가면서 css가 왜 노가다성 인지 다시 한번 느꼈습니다.