# vuePress plugin 사용법

# 시작하기

vuepress 0.x버전과 1.x 버전의 가장 큰 차이는 플러그인을 지원하는가입니다.
플러그인을 지원하게 됨으로, seo라든지 sitemap, 댓글기능 등등 많은 npm라이브러리를 사용할 수 있게 되어 우리의 블로그에 더 많은 기능을 추가 할 수 있게 되었습니다.
그래서 오늘은 제가 사용하고 있는 vuepress 플러그인 및 플러그인 사용법에 대해서 살펴보겠습니다.

# 플러그인 추가 전 필요

플러그인 추가 전에 본인의 vuepress 파일의 package.json에서 하나 확인하실 것이 있습니다.
devDependencies에 vuepress가 설치되어 있는 지 꼭 확인합니다.
저의 경우 vuepress가 설치 안되어 있었는데, 플러그인을 설치하니까 빌드 중에, 플러그인 인식 에러가 뜨더라구요. 꼭 설치 하시고 시작 하여야합니다. 버전은 상관 없습니다.

"devDependencies": {
  "vuepress": "^1.5.2",
}

# plugin-back-to-top

첫번째 플러그인은 vuepress에서 공식 추천한 플러그인 입니다.
블로그 글을 읽고 스크롤이 바닥에 위치하면 맨위로 올려주는 버튼이 만들어지는 플러그인입니다.

# 설치

yarn add -D @vuepress/plugin-back-to-top

# 사용

// .vuepress/config.js
module.export = {
  plugins: ["@vuepress/back-to-top"]
};

끝입니다. 정말 쉽게 플러그인을 사용하도록 만들었습니다.

# 구글 애널리틱스

두번째 플러그인은 구글 애널리틱스입니다. 블로그에 어떤 글이 인기가 많은지, 어느날, 특정 시간때에 유입량이 많은지 데이터로 보여주는 기능입니다.

# 설치

yarn add -D @vuepress/plugin-google-analytics

# 사용

// .vuepress/config.js
module.export = {
plugins: [
    [
      "@vuepress/google-analytics",
      {
        ga: // UA-00000000-0
      }
    ],
  ]
}

# ga 등록

  • 구글 애널리틱스 (opens new window) 여기 들어가셔서 블로그 사이트 등록하시면 위와 같이 UA-00000000-0 같은 키가 나옵니다. 그 값을 ["@vuepress/google-analytics", {ga: xxxx}]여기에 넣어주시면 됩니다.

# sitemap

이 기능은 구글 서치콘솔에서 seo 작업을 할때, sitemap이 필요한 경우 html을 xml로 바꿔주는 기능입니다.

# 설치

yarn add -D vuepress-plugin-sitemap

# 사용

// .vuepress/config.js
module.export = {
plugins: [
    ...,
    ["sitemap", { hostname: "https://kyounghwan01.github.io/blog/" }]
  ]
}
  • hostname에 블로그 사이트 url을 넣어주시면 됩니다.
  • 배포 이후, 구글 서치 콘솔 가셔서 sitemap을 https://kyounghwan01.github.io/blog/sitemap.xml로 등록하시면 됩니다.

# last-updated

  • 추가시 게시글의 맨 밑에 게시글의 마지막 수정일이 기재됩니다.
  • lastUpdated 값을 바꾸면 Last-updated가 원하는 값으로 바뀝니다.

# 설치

yarn add -D @vuepress/plugin-last-updated

# 사용

// .vuepress/config.js
module.export = {
  themeConfig: {
    lastUpdated: "최근변경일"
  },
  plugins: [
    ...,
    ["@vuepress/last-updated"],
  ]
}

# 코드 복사 플러그인

  • 예시 코드 블럭을 만들 경우 해당 코드를 복사하는 기능을 가진 플러그인입니다.

# 설치

yarn add -D vuepress-plugin-code-copy

# 사용

// .vuepress/config.js
module.export = {
plugins: [
    ...,
    ["vuepress-plugin-code-copy"],
  ]
}
#vuepress
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 5/14/2022, 8:52:31 AM