Vitepressについてまとめてみた。

基本のはじめ方

1. 下記を実行

   npm install vitepress
   OR
   yarn add vitepress
   

2. package.jsonに下記スクリプトを追加

   "scripts": {
      "docs:dev": "vitepress dev src",
      "docs:build": "vitepress build src && mv src/.vitepress/dist dist",
      "docs:serve": "vitepress build src",
    },
    ... 略
   

3. フォルダ構成を下記のようにする

     - src
       |_.vitepress/
       |       |_  components/
       |       |        |_ vueコンポーネント
       |       |_  theme/
       |       |        |_ index.js // vueコンポーネント読み込み
       |       |_  config.js // 設定ファイル
       |_ docs
       |_ index.md
     - .gitignore
     - package.json
     - yarn.lock
   

4. 下記コマンドで開発を進めていく

• docs:dev で開発時のプレビュー
• docs:build でビルド

ファイル、フォルダの説明

• .vitepress/components
.vueのコンポーネントを格納する場所で、ここで定義したファイルを.vitepress/theme/index.jsで読み込ませることで、markdownファイル内で、
  vueコンポーネントを使うことができる。

• .vitepress/theme/index.js
.vitepress/componentsで作成したファイルを読み込ませる部分。定義方法は以下のようになる。

  import Theme from 'vitepress/theme';
  import WritersBox from '../components/WritersBox.vue';
  
  export default {
      ...Theme,
  
      enhanceApp({ app }) {
          app.component('writers-box', WritersBox);
      },
  }
  

  <writers-box/> でこのコンポーネントを呼び出せるようになる。(データバインディングも可能)

• .vitepress/config.js
  vitepressの設定部分、ナビゲーションやサイドバーOGP設定などができる。

  vitepressの設定

  module.exports = {
      // OGP
      lang: "ja",
      title: '',
      description:'',
      head: [
          [
              'meta',
              { property: 'og:image', content: '/fe-beginner-doc/site/logo.png' },
          ],
      ],
      // github pagesにデプロイする際のルートパス定義
      base: '/fe-beginner-doc/',
      themeConfig: {
          logo: '/site/logo.png', // ヘッダー横のロゴ画像
          // 編集用URLの定義場所
          // ページ下部に`このページをgithubで編集`を手軽に追加できる
          repo: 'taka1156/fe-beginner-doc',
          editLinks: true,
          editLinkText: 'このページをgithubで編集',
          lastUpdate: '最終更新',
          docsDir: 'src', // mdを置いてる場所
          docsBranch: 'master',
  
          // header navの定義
          nav: [
          {
              text: 'NAVI',
              items: [
                  { text: 'Top', link: '/0_docs/' },
                  { text: 'Vue', link: '/1_vue/' },
                  // 略
              ],
          },
          {
              text: 'コミュニティ',
              items: [
              {
                  text: 'vuejs-jp',
                  link: 'https://vuejs-jp.org/',
              },
              {
                  text: 'svelte-jp',
                  link: 'https://github.com/svelte-jp',
              },
              ],
          },
          ],
  
          // サイドバーの定義
          sidebar: {
              '/1_vue/': 'auto',
              '/2_react/': 'auto',
              '/3_svelte/': 'auto',
              '/4_other/': 'auto',
              '/5_githubpages/': 'auto',
              '/6_ex/': 'auto',
              '/': [
                  { text: '0. はじめに', link: '/0_docs/' },
                  {
                  text: '1. Vueを利用したサイト作成',
                  link: '/1_vue/',
                  },
                  //...略
              ],
          }
      },
  };
  

• src/index.md
  初回(入り口)のページ。定義方法は以下のようになる。

  index.mdの設定

  ---
  home: true
  
  heroImage: /site/logo.png
  heroText: Welcome to Frontend World
  tagline: このサイトはフロントエンド初心者向けのtipsや手引きのようなものをまとめています。
  actionText: Get Start
  actionLink: /0_docs/
  features:
  - title: 🟩 Vueを利用した開発
  details: vue2 + vue-router使った開発
  - title: 🟦 Reactを利用した開発
  details: react + react-router-domを使った開発
  - title: 🟧 Svelteを利用した開発
  details: svelte + svelte-spa-routerを使った開発
  - title: 💻 github pagesの利用方法
  details: master、docs、actionsそれぞれを利用したデプロイ方法
  - title: 🛠 【発展】 viteの使用
  details: vite + vue3 or reactの開発
  - title: 📍 その他tips
  details: spaで404が出る,OGP対策など
  footer: MIT Licensed | Copyright ©︎  2021
  ---
  

  

その他拡張

• markdown関連の拡張

   // .vitepress/config.js
   markdown: {
       // コードスニペットに行番号表示 
       lineNumbers: true,
       // [[toc]]で目次表示する際の目次化範囲の指定
       // [1,2,3,4,5,6](h1~h6)
       toc: { includeLevel: [1, 2] }, 
       // markdownの拡張(markedown-it系)
       config: (md) => {
       md.use(
           require('markdown-it-container'),
           'spoiler',
           containerMdExtend(md)
       );
       },
   },
  

  // .vitepress//plugins/md/index.js
   const containerMdExtend = (md) => ({
   validate: function (params) {
       return params.trim().match(/^spoiler\s+(.*)$/);
   },
  
   render: function (tokens, idx) {
       var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
  
       if (tokens[idx].nesting === 1) {
       // opening tag
       return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';
       } else {
       // closing tag
       return '</details>\n';
       }
   },
   });
  
   module.exports = containerMdExtend;