# VuePressメモ. 02. カスタマイズ. 基本的な

# 基本的な設定 ( config.js 内 )

src/.vuepress/config.js ファイルを編集

# 配置先ディレクトリ (document root?) の設定

module.exports = {
  base: '/z/',
  ...
}

# Markdown の設定

Markdown は markdown-it が使われているので、そのオプションを指定。

  • lineNumbers: コードブロックで行番号を表示
    • → 自分の用途では コードが短いから行番号は不要
  • breaks: 行末に空白2つ入れていない改行も、改行する
  • anchor: h1〜 の 左に # を出したくない
module.exports = {
  ...
  markdown: {
    lineNumbers: true,
    breaks: true,
    anchor: { permalink: false, permalinkBefore: false, permalinkSymbol: '' },
  },
  ...
}

# 右上のリンク ( themeConfig > nav )

  • いったんカラにする
  • 入れ子にして、言語ごとのリンク作るのは真似しよう
    • Lang
      • English
      • Japanese
  • 設定しかたはサンプル見たまんまなので省略

# 左側のリンク ( themeConfig > sidebar )

# 設定

  • 設定しかたはサンプル見たまんまなので省略

手で足すのは面倒なので、

  • ファイル一覧の部分をスクリプトで差し替えることにした (乱暴)
  • たぶん、こんな乱暴なことはせずに、*.vue ファイルでなんとかするお作法なのだとは思うが

# ファイル名の制約

  • 日本語ファイルは問題ないのだけど
  • 半角 (, ) はファイル名にはダメっぽい(全角は問題なかった)

# サイドバーの深さ ( themeConfig > sidebarDepth )

  • ページ内のヘッダをサイドバーに出さない場合は 0 を設定
themeConfig: {
    ..
    sidebarDepth: 0,
    ...
}

# index.md について

  • home: true 設定をなくした
  • そうしないと左側に sidebar が出ないから

# favicon の設定

src/.vuepress/public/favicon.ico に配置

src/.vuepress/config.js

module.exports = {
  head: [
    ["link", { rel: "icon", href: "/favicon.ico" }]
  ]
};

[ 📩 ご意見 ]