UOM:RE

# TIL-20210623

# Today

  • blog 목차 만들기
  • 메인 페이지 탬플릿 만들기

# Content

어제 작업하던 큰 타이틀 마다의 목차를 생성하는 기능을 구현했다.

# 시행착오

  1. vuepress 공식 문서는 두 가지가 있다.

여러가지 레퍼런스를 찾아가다 보면, vuepress라고 나와있는 두 가지 공식 문서를 볼 수 있다.

한가지 공식 문서는 vuepress-next라는 github page와 연결되어 있고, 나머지는 vuepress github과 연결되어 있다.
이처럼 두 가지 공식 문서는 현재 반영하는 버전이 다르다.

처음에 이 부분을 알지 못하고, 비슷한 문서내용으로 인해 두가지를 동시에 적용하는 일이 생겼다.
이후에는 vuepress 공식문서를 사용하였고, vuepress-next에서는 빌드 에러가 발생하는 부분으로 사용을 미루어 두었다.

  1. markdown page에서 데이터를 만들어 사용하기

    사용목적

    1. 큰 카테고리 밑에 있는 여러가지 항목을 메인 페이지에서 목차로 보여준다.

    2. 목차를 클릭하면 해당 게시글로 이동한다.

폴더의 마크다운 파일들을 불러와 해당 이름의 목록을 만들어야 했다.
마크다운 파일안에서는 파일 리스트를 불러오는일이 불가능하다.

때문에, Markdown page안에서는 파일 리스트를 불러와 목차로 데이터로 만드는게 불가능했다.

그 결과 plugin을 사용해 데이터를 넣어주기로 했다.

  1. vuepress 에서 plugin 사용하기
    .vuepress에 plugin 폴더를 생성하고 각각의 큰 주제에 맞는 목차를 만들어주는 plugin을 넣어 주었다.

plugin은 frontmatter에 데이터를 심어주는 방식으로 구현했다.





 
 










//.vuepresss/plugin/dirTree/index.js
module.exports = (options, ctx) => ({
  // 플러그인은 config를 통해 options을 받을 수 있다. 또한 app그 자체를 두 번째 변수로 받는다.
  name: "custom-dirTree-generator",
  async extendPageData($page) {
    // 매 페이지마다 페이지의 데이터를 조작할 수 있게 하는 메서드
    const { frontmatter } = $page;
    if (frontmatter.dirPath) {
      const path = "./docs/" + frontmatter.dirPath;
      const files = await returnTree(path);
      const list = files.map((fileName) => fileName.replace(".md", ""));
      $page[frontmatter.dirPath] = list; // page자체에 데이터를 심어준다.
    }
  },
});

이 과정은 빌드하는 과정에 모두 이루어지고 해당 페이지에서는 plugin을 통해 심어진 데이터를 받아 사용한다.

<template>
  <listAnchor :list="list"></listAnchor>
</template>

<script>
export default {
  computed: {
    list: () => {
      return this.$page.list;
    },
  },
};
</script>

해당 페이지의 리스를 생성해 list라는 변수에 할당해서 사용했다.

← TIL-20210628 →