#vuepress 初期設定及びカスタマイズ

パワフルで美しい vuepress に乗り換えてから半年の記事です。元も wordpress だったので、初期設定いらなかったけど、markdown の書き方や vuejs も覚えながらやっとブログが安定するようになりました。今までの初期設定やカスタマイズ箇所を忘れないようにメモしました。

目次

#基本的なインストール

yarn add -D vuepress # OR npm install -D vuepress

mkdir docs

注意

  1. webpack 3.xは Yarn 使うこと
  2. 記事はdocsディレクトリの下に置くこと

#package json 作成

{
  "name": "xxx",
  "version": "0.0.1",
  "description": "make happy",
  "scripts": {
    "build": "vuepress build docs",
    "dev": "vuepress dev docs"
  },
  "dependencies": {
    "vue-no-ssr": "^1.1.1",
    "vuepress-plugin-smooth-scroll": "0.0.3"
  },
  "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.2.0",
    "@vuepress/plugin-google-analytics": "^1.2.0",
    "@vuepress/plugin-pwa": "^1.2.0",
    "markdown-it-mark": "^2.0.0",
    "moment": "^2.24.0",
    "vue-social-sharing": "^2.4.7",
    "vuepress": "^1.2.0"
  }
}
  • vue-no-ssrは ssr 使わないためのパッケージ
  • vuepress-plugin-smooth-scrollはスクロールきれいに魅せるためのパッケージ
  • markdown-it-markは文書目立つためのパッケージ
  • momentは更新時刻表示するときに使うパッケージ
  • vue-social-sharingはソーシャルボタン

#ディレクトリ構造

.
├── docs
│ ├── .vuepress (Optional)
│ │ ├── components (Optional)
│ │ ├── theme (Optional)
│ │ │ └── Layout.vue
│ │ ├── public (Optional)
│ │ ├── styles (Optional)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (Optional, Danger Zone)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (Optional)
│ │ └── enhanceApp.js (Optional)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md

└── package.json

docs/.vuepressdocs/.vuepress/config.jsはオプションになっていますが、本気で作るなら設定すべき

#config js の設定































 






















 





























 






module.exports = {
  head: [
    ['link', { rel: 'icon', size: '192x192', href: '/logo.png' }],
    [
      'link',
      {
        rel: 'apple-touch-icon',
        size: '192x192',
        href: '/logo.png'
      }
    ],
    ['meta', { name: 'theme-color', content: '#ec546b' }],
    ['link', { rel: 'stylesheet', href: '/main.css' }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['link', { rel: 'shortcut icon', href: '/favicon.ico' }]
  ],
  locales: {
    '/': {
      lang: 'ja',
      title: 'xxx',
      description: ' Description',
      head: [
        ['meta', { name: 'keywords', content: 'xxx, vueブログ' }],
        ['meta', { property: 'og:title', content: 'xxx' }],
        [
          'meta',
          {
            name: 'og:description',
            content: ' Description'
          }
        ],
        ['meta', { property: 'og:locale', content: 'ja' }],
        ['meta', { property: 'og:type', content: 'website' }],
        ['meta', { property: 'og:url', content: 'https://xxx.com' }],
        ['meta', { property: 'og:site_name', content: 'xxx Blog' }],
        [
          'meta',
          {
            property: 'og:image',
            content: 'https://xxx.com/images/icons/icon-192x192.png'
          }
        ]
      ]
    }
  },
  themeConfig: {
    sidebar: 'auto',
    logo: '/images/icons/favicon-32x32.png',
    nav: [{ text: 'Github', link: 'https://github.com/vuejs/vuepress' }]
  },
  plugins: [
    'smooth-scroll',
    '@vuepress/back-to-top',
    [
      '@vuepress/pwa',
      {
        serviceWorker: true,
        updatePopup: {
          '/': {
            message: '新しいコンテンツがあります。',
            buttonText: '更新する'
          }
        }
      }
    ],
    [
      '@vuepress/last-updated',
      {
        transformer: (timestamp, lang) => {
          const moment = require('moment')
          moment.locale(lang)
          return moment(timestamp).fromNow()
        }
      }
    ],
    [
      '@vuepress/google-analytics',
      {
        ga: 'UA-xxx-1'
      }
    ]
  ],
  markdown: {
    extendMarkdown: md => {
      md.set({ breaks: true })
      md.use(require('markdown-it-mark'))
    }
  }
}

headに S ページ設定など
@vuepress/pwaは serviceWorker の基本設定
md.set({ breaks: true });は markdown 改行サポート

#トップページ設定

デフォルトトップページが用意されています。

docs/README.md

---
home: true
heroImage: /hero.png
actionText: Get Started →
actionLink: /guide/
footer: MIT Licensed | Copyright © 2018-present Evan You
---

基本的に以上で設定完了! 🎉

#vuepress カスタマイズ

#プラグインいろいろインストール

#タグページ一覧

各ページの frontmatter に設定したtagsをトータルして一覧表示

自作コンポーネント.vuepress/components/TagList.vue

<template>
  <div class="tags-page">
    <ul>
      <li v-for="tag,index in Object.keys(tags)" :key="'t'+index">
        <router-link :to="{ path: `/tags/#${tag}`}" :class="['title-tags','color'+index]">{{tag}}</router-link>
      </li>
    </ul>

    <div v-for="tag,index in Object.keys(tags)" :key="'s'+index">
      <h2 :id="tag">
        <a href="#" class="header-anchor" aria-hidden="true">#</a>
        <i class="fas fa-tags"></i>
        {{tag}}
      </h2>

      <ul :style="{listStyle: 'none'}">
        <li v-for="page,index in tags[tag]" :key="'b'+index">
          <router-link :to="{ path: page.path}" class="title-link">
            <i class="far fa-file-alt"></i>
            {{page.title}}
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    tags() {
      let tags = {};
      for (let page of this.$site.pages) {
        for (let index in page.frontmatter.tags) {
          const tag = page.frontmatter.tags[index];
          if (tag in tags) {
            tags[tag].push(page);
          } else {
            tags[tag] = [page];
          }
        }
      }
      return tags;
    }
  }
};
</script>
<style lang="stylus" scoped>
.tags-page {
  h2 {
    margin-top: -3.1rem;
    padding-top: 4.6rem;
    margin-bottom: 0;
  }

  li {
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin-right: 5px;
  }
}
i {
  font-size: 14px;
  margin-right: 3px;
}
*,
::after,
::before {
  box-sizing: border-box;
}
div {
  display: block;
}
.d-inline {
  display: inline-block !important;
}
.capture-image {
  display: block;
  margin: 10px auto 0;
  width: 220px;
}
.title-tags {
  border-radius: 3px;
  padding: 0 4px;
  color: #fff;
  background: #42b983;
}

.color0 {
  background: #42b999;
}
.color1 {
  background: #3366cc;
}
.color2 {
  background: #dc3912;
}
.color3 {
  background: #ff9900;
}
.color4 {
  background: #109618;
}
.color5 {
  background: #990099;
}
.color6 {
  background: #0099c6;
}
.color7 {
  background: #dd4477;
}
.color8 {
  background: #66aa00;
}
.color9 {
  background: #b82e2e;
}
.color10 {
  background: #316395;
}
.color11 {
  background: #3366cc;
}
.color12 {
  background: #994499;
}
.color13 {
  background: #22aa99;
}
.color14 {
  background: #aaaa11;
}
.color15 {
  background: #6633cc;
}
.color16 {
  background: #e67300;
}
.color17 {
  background: #8b0707;
}
.color18 {
  background: #651067;
}
.color19 {
  background: #329262;
}
.color20 {
  background: #5574a6;
}
.color21 {
  background: #3b3eac;
}
.color22 {
  background: #b77322;
}
.color23 {
  background: #16d620;
}
.color24 {
  background: #b91383;
}
.color25 {
  background: #f4359e;
}
.color26 {
  background: #9c5935;
}
.color27 {
  background: #a9c413;
}
.color28 {
  background: #2a778d;
}
.color29 {
  background: #668d1c;
}
.color30 {
  background: #bea413;
}
.color31 {
  background: #0c5922;
}
.color32 {
  background: #743411;
}
.color33 {
  background: rgb(82, 82, 82);
}
.color34 {
  background: rgb(255, 0, 41);
}
.color35 {
  background: rgb(55, 126, 184);
}
.color36 {
  background: rgb(102, 166, 30);
}
.color37 {
  background: rgb(152, 78, 163);
}
.color38 {
  background: rgb(0, 210, 213);
}
.color39 {
  background: rgb(255, 127, 0);
}
.color40 {
  background: rgb(175, 141, 0);
}
.color41 {
  background: rgb(127, 128, 205);
}
.color42 {
  background: rgb(179, 233, 0);
}
.color43 {
  background: rgb(196, 46, 96);
}
.color44 {
  background: rgb(166, 86, 40);
}
.color45 {
  background: rgb(247, 129, 191);
}
.color46 {
  background: rgb(141, 211, 199);
}
.color47 {
  background: rgb(190, 186, 218);
}
.color48 {
  background: rgb(251, 128, 114);
}
.color49 {
  background: rgb(128, 177, 211);
}
.color50 {
  background: rgb(253, 180, 98);
}
.color51 {
  background: rgb(252, 205, 229);
}
.color52 {
  background: rgb(188, 128, 189);
}
.color53 {
  background: rgb(255, 237, 111);
}
.color54 {
  background: rgb(196, 234, 255);
}
.color55 {
  background: rgb(207, 140, 0);
}
.color56 {
  background: rgb(27, 158, 119);
}
.color57 {
  background: rgb(217, 95, 2);
}
.color58 {
  background: rgb(231, 41, 138);
}
.color59 {
  background: rgb(230, 171, 2);
}
.color61 {
  background: rgb(166, 118, 29);
}
.color62 {
  background: rgb(0, 151, 255);
}
.color63 {
  background: rgb(0, 208, 103);
}
.color64 {
  background: rgb(0, 0, 0);
}
.color65 {
  background: rgb(37, 37, 37);
}
.fa-facebook:hover {
  color: #3b5998;
}
.fa-twitter:hover {
  color: #00aced;
}
.fa-pinterest:hover {
  color: #cb2027;
}
.fa-linkedin:hover {
  color: #007bb6;
}
.fa-instagram:hover {
  color: #517fa4;
}
.fa-reddit:hover {
  color: #ff4500;
}
.fa-line:hover {
  color: #1dcd00;
}

</style>
2020-01-09
  • vuepress