Layout 개조하기

• 서두
• Custom Layout 준비
• 개조하기
• 결론

서두

앞선 글들에서 태그 시스템을 구축하고, 댓글 시스템을 연동해 보았다. 그러나 여전히 불편했던 점은, 매 페이지마다 해당 컴포넌트 태그들을 위아래로 삽입해줘야 한다는 것이다.

그래서 이번 글에서는 VuePress 심화과정이 될 수도 있는 Layout 개조 작업을 해보기로 한다.

Custom Layout 준비

Custom Themes | VuePress (opens new window)를 보면, Layout을 오버라이딩 하기 위해서는 아래 위치의 Layout.vue 파일을 작성하라고 되어있다.

.
└─ .vuepress
   └─ theme
      └─ Layout.vue

또는 CustomLayout.vue 처럼 컴포넌트를 작성하고 페이지 상단 frontmatters에 지정하라고 되어있다. 어쨌든 가이드대로 테스트 삼아 작성해보면...

<template>
  <div class="theme-container">
    <Content />
  </div>
</template>

실망스럽게도 브라우저 화면에 본문만 나오고 상단 헤더나 좌측 네비게이션바 등이 모두 사라진다. 완전히 커스터마이징 하라는 뜻이었던 것이다. 이런... 정신 차리고 다시 가이드를 잘 읽어보자.

아래쪽을 잘 읽어보면, 기본 테마를 기반으로 개조하려면 eject해서 theme 폴더를 복사해 넣으라고 한다. 난 그렇게 하진 않고, vuepress 프로젝트 소스가 있어서 거기서 찾아보니...

vuepress.git
└─ lib
   └─ default-theme
      ├─ ...
      ├─ Layout.vue
      └─ ...

찾았다. Layout.vue 파일을 열어보면 해당 폴더의 다른 파일들도 참조하므로 이 폴더를 통째로 복사하면 되겠다.

vuepress.git/lib/default-theme/ ==복사==> my-site/docs/.vuepress/theme/

개조하기

Layout.vue 파일을 분석해보니, 내가 개조해야할 부분은 Page.vue 였다. 실제 본문에 해당하는 곳...

Content 컴포넌트를 찾아서 내가 원하는 대로 앞뒤로 컴포넌트를 추가하였다.

<!-- docs/.vuepress/theme/Page.vue -->
...
    <TagLinks class="custom-component tag-links top" />
    <Content :custom="false"/>
    <TagLinks class="custom-component tag-links bottom" />
    <Disqus class="custom-component disqus bottom" />
...

클래스를 지정한 이유는, 아래 설명하겠지만 기본 삽입으로는 위치가 조금 안맞았기 때문이다.

스타일 지정을 위해 파일 아래쪽으로가서 이처럼 지정해 주었다.

<style lang="stylus">
...
.custom-component
  @extend $wrapper
  padding-top 1rem
  padding-bottom 1rem
  overflow auto

.custom-component.top
  margin-top 5rem
  margin-bottom -4rem
...
@media (max-width: $MQMobile)
  .custom-component.tag-links
    margin-left 1rem
    margin-right 1rem

그런데 Vue에서 css 문법에 stylus를 지원했나? VuePress 소스를 뒤져보니 기본은 아니고 Vue Loader에 추가 설정을 해서 쓴 것이었다.

Vue Loader 사이트를 가보니 많이 쓰이는 sass/scss, less도 지원이 되더라. 사이트를 참고하자. Using Pre-Processors | Vue Loader (opens new window)

결론

VuePress 구조를 분석하는 데에 시간이 소요된 것이지, 단순히 본문의 위아래로 삽입만 하면 되기 때문에 적용은 생각보다 어렵지는 않다.

다만 Layout 개조가 된 것이기 때문에, VuePress 버전이 업데이트 될 때마다 default-theme 폴더가 변경되었는지 확인해서 내 사이트 소스에도 적용해주어야 하겠다.

참, 그리고 이번 적용으로 인해 기존 페이지들에 넣어둔 <TagLinks />, <Disqus />는 모두 제거해야 했다. 안그러면 두개씩 중복해서 나올테니까.