## 基本のはじめ方 1. 下記を実行 ```shell npm install vitepress OR yarn add vitepress ``` 1. `package.json`に下記スクリプトを追加 ```js "scripts": { "docs:dev": "vitepress dev src", "docs:build": "vitepress build src && mv src/.vitepress/dist dist", "docs:serve": "vitepress build src", }, ... 略 ``` 1. フォルダ構成を下記のようにする ```shell - src |_.vitepress/ | |_ components/ | | |_ vueコンポーネント | |_ theme/ | | |_ index.js // vueコンポーネント読み込み | |_ config.js // 設定ファイル |_ docs |_ index.md - .gitignore - package.json - yarn.lock ``` 1. 下記コマンドで開発を進めていく - `docs:dev` で開発時のプレビュー - `docs:build` でビルド ## ファイル、フォルダの説明 - `.vitepress/components` `.vue`のコンポーネントを格納する場所で、ここで定義したファイルを`.vitepress/theme/index.js`で読み込ませることで、markdownファイル内で、 vueコンポーネントを使うことができる。 - `.vitepress/theme/index.js` `.vitepress/components`で作成したファイルを読み込ませる部分。定義方法は以下のようになる。 ```js import Theme from 'vitepress/theme'; import WritersBox from '../components/WritersBox.vue'; export default { ...Theme, enhanceApp({ app }) { app.component('writers-box', WritersBox); }, } ``` `` でこのコンポーネントを呼び出せるようになる。(データバインディングも可能) - `.vitepress/config.js` vitepressの設定部分、ナビゲーションやサイドバーOGP設定などができる。

vitepressの設定

```js 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の設定

```yaml --- 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 --- ```

![vite-sample-index-md.png:center](https://images.microcms-assets.io/assets/ff13d73775fe4e989b3dfb473b1bd9cb/ab38c7721c854b5baeedaf3fc076048b/%20vite-sample-index-md.png?h=600&w=500) ## その他拡張 - markdown関連の拡張 ```js // .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) ); }, }, ``` ```js // .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 '

' + md.utils.escapeHtml(m[1]) + '

\n'; } else { // closing tag return '

\n'; } }, }); module.exports = containerMdExtend; ```

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