저번에 찾았던 gray-matter
를 사용해 태그리스트도 만들어줄 예정이다.
// TODO: 해당 방법은 posts 디렉토리 아래에 있는 모든 .md 파일을 불러오기 때문에 포스트 양이 늘어날수록 오래걸려서 안좋은 방법인것 같다
const fileContent = fs.readFileSync(tempDir, 'utf8');
const frontMatter = matter(fileContent).data;
frontMatter?.tags?.map(v => {
if (files[v] === undefined) {
files[v] = 1;
} else {
files[v]++;
}
});
저번 포스트와 마찬가지로 모든 파일의 메타데이터에 접근해서 태그를 읽어오는식으로 작성했다. 하지만 TODO 에도 써놨듯이 안좋은 방법인것 같아 새로운 포스트가 업로드 되면 태그 목록만 따로 업데이트 시키는 작업이 필요할 것 같다. 물론 먼 훗날 얘기겠지만 (메뉴 리스트에도 적용 필수)
// LayoutDevlog.js
const keys = Object.keys(value);
return (
<div>
{
keys.map((v, i) => {
return (
<div key={i}>
{v}
<a>{value[v]}</a>
</div>
)
})
}
</div>
);
위와같이 프론트단에서 뿌려주게되면 아래와 같이 나오게 된다.
결과 :::
태그 이름과 갯수가 붙어있어서 알아보긴 힘들다, 다음 작업은 다시 디자인 작업이 될것같다.