# vuepress ブログテーマカスタマイズ

# 前提

vuepress ブログテーマ基本実施済み

# 概要

vuepress 公式のブログテーマだと寂しいので開発コミュニティの方々が公開しているテーマを適用する。

本手順では ttskch さんという方が公開している vuetify というテーマを適用する。

https://github.com/ttskch/vuepress-theme-blog-vuetify/

# 手順

# インストール

npm install -D vuepress-theme-blog-vuetify

# config ファイル修正（例）

詳細は作者 github 上に記載。デフォルトで適用されている内容を基本的には上書きしてカスタマイズしていく形となる。

vi docs/.vuepress/config.js

module.exports = {
  dest: "public",
  hostname: "http://localhost",
  id: "post",
  dirname: "_posts",
  path: "/",
  title: "プログタイトル",
  theme: "blog-vuetify",

  plugins: ["@vuepress/back-to-top", "@vuepress/plugin-active-header-links"],

  themeConfig: {
    sidebar: {
      directoryIds: ["post"],
      profile: {
        avatarUrl: "hogehoge",
        name: "fuga",
        subTitle: "piyo",
        descriptionHtml: "aaaaa",
      },
      hotTags: 10,
      recentPosts: 5,
      additionalBlocks: [
        {
          title: "Links",
          links: [
            { label: "About", path: "/about" },
            { label: "External Page", url: "https://example.com" },
          ],
        },
      ],
    },
    footer: {
      links: [
        { label: "About", path: "/about" },
        { label: "External Page", url: "https://example.com" },
      ],
    },
    sns: {
      twitter: "bbb",
      github: "ccc",
      feed: "",
    },
    feed: {
      rss: false,
      atom: false,
      json: false,
    },
  },
};

TIP

# 記事以外のページ追加

基本は_post 配下にブログ記事を追加していくが、ブログ記事以外のページを追加する場合は.vuepress ディレクトリと同じ階層にディレクトリを作り、その中を参照する。※本手順では about ディレクトリを作成。

mkdir -p docs/about
echo '# about' > docs/about/README.md

# スタイルカスタマイズ（例）

config 同様詳細は作者 github 上に記載で、デフォルトで適用されている内容を基本的には上書きしてカスタマイズしていく形となる。

mkdir -p docs/.vuepress/styles/
vi docs/.vuepress/styles/variables.scss

$base-font-color: #111;

$sidebar-width: 320px;
$sidebar-padding-x: 6px;

$color-brand: #000037;
$color-app-bar-title: #afafd8;

# ビルド

npm run dev