# 当サイトで使用している技術【VuePress編3】~レイアウト等の細かい設定~

当サイトはVuePress で作成されています。 前回のVuePress編2インストールから記事の公開までを扱いました。 今回のVuePress編3では、ナビメニューを追加する等、サイトをカスタマイズするための設定ファイルの書き方を説明します。

# 設定ファイルの作成

まずは設定ファイルのconfig.jsを作成します。配置するディレクトリは、.vuepress直下（src/.vuepress/config.js）です。

# 設定ファイルの書き方

設定ファイルconfig.jsの構成は、以下のようになります。

module.exports = {
  base: '/foo/', // 補足1
  title: 'VuePress Sample', // サイトのタイトル
  description: 'smaple project for VuePress', // サイトの説明
  head: [ // head内に記載するタグ
  	['link', { rel: 'icon', type: 'image/png', href: '/icon16.png' }], // 例１ favicon
  	['meta', { name: "author", content: "Taro Yamada" }] // 例２ meta tag
  ],
  themeConfig: { // サイトのテーマに関する設定、詳細は後述
    logo: '/assets/img/logo.png',
  	nav: [ // ナビメニューに表示する項目
  	  { text: 'Home', link: '/' },
  	  { text: 'Blog', link: '/blog/'}
  	],
  	sidebar: [ // サイドバーに表示する項目
      '/about/', // 補足2
      '/blog/'
    ],
  }
}

とりあえず主要な項目のみ載せてあります。もはや、言葉で説明する必要はないでしょう。そのままコピペして、適宜編集して使ってください。詳しい内容は本家のページに書かれています。

# 補足1

https://example.com/foo/ 以下に配置されます。普通、この行はいりません。

# 補足2

サイドバーに表示される文字はsrc/about/index.md の一番最初に書かれた見出しです。

# Theme Config

ここが、一番重要なので、少し丁寧に解説します。

themeConfig: {
  // ここに設定を記入
}

# Logo

logo: '/assets/img/logo.png'

と記入すると、.vuepress/public/assets/img/logo.pngを参照し、Navbar にロゴを配置できます。基本的に、静的なファイルは.vuepress/public/配下に設置します。（public以後のassets、imgディレクトリも自分で作成してください。）

# Navbar Links

nav: [
  { text: 'Home', link: '/' },
  { text: 'Blog', link: '/blog/'}
]

navに配列を記載すると、ナビメニューに表示するリンクを設定できます。通常、ナビメニューはページ上部（スマホの場合は左側のハンバーガーメニュー）に表示されます。

# Sidebar

sidebar: [
  '/about/', // 補足2
  '/blog/'
]

sidebarは、通常ページ左側に表示されます。サイドバーには自分で作成したマークダウンファイルの見出しが表示されます。

# その他の項目

# locale

多言語対応（i18n support）する際に書きます。詳細はInternationalization参照してください。

# ga

Google Analyticsの設定です。VuePressのバージョンによって書き方が異なります。