# VuePress のブログに meteorlxy テーマを設定する

VuePress のブログに、日本のブログっぽいテーマである「meteorlxy」を設定します。

meteorlxy のGitHub(opens new window)

meteorlxy のデモサイト(opens new window)

# テーマの追加

yarn で「meteorlxy」のテーマを追加します。

yarn add vuepress-theme-meteorlxy

# 設定変更

テーマガイド(opens new window) を参考にconfig.js を書き換えます。

my-blog
├── blog
│   ├── _posts
│   │   └── 2020-1-1-test.md
│   └── .vuepress
│       ├── public
│       │    ├── posts-img
│       │    │     └── 2020-09-28-blog-sample.PNG
│       │    └── common-img
│       └── config.js ← これ
└── package.json

書き換え例

module.exports = {
    // サイトのタイトル
    title: 'らいのブログ',
    // サイトの説明
    description: 'らいの雑記帳です',
    // 言語設定
    locales: {
        '/': {
            lang: 'ja-jp',
        },
    },
    // テーマを指定
    theme: 'meteorlxy',
    // Theme config
    themeConfig: {
        // ボタンなどを日本語に変更
        lang: {
            home: 'ホーム',
            posts: '記事検索',
            category: 'カテゴリー',
            categories: 'カテゴリー',
            allCategories: '全て',
            tag: 'タグ',
            tags: 'タグ',
            search: '検索',
            createdAt: '作成日',
            updatedAt: '更新日',
            prevPost: '前の記事へ',
            nextPost: '次の記事へ',
            toc: '目次',
        },
        // Personal infomation (delete the fields if you don't have / don't want to display)
        personalInfo: {
            // Nickname
            nickname: 'らい',
            // Introduction of yourself (HTML supported)
            description: '自己紹介',
            // Your location
            location: 'Tokyo, Japan',
            // アバターの画像
            // Set to external link
            avatar: 'https://www.meteorlxy.cn/assets/img/avatar.jpg',
            // Or put into `.vuepress/public` directory. E.g. `.vuepress/public/img/avatar.jpg`
            // avatar: '/img/avatar.jpg',
            // SNS　アカウント情報
            sns: {
                // Twitter account and link
                twitter: {
                    account: 'game_rai777',
                    link: 'https://twitter.com/game_rai777',
                },
            },
        },
        // Header Config (Optional)
        header: {
            // ヘッダーの背景画像
            background: {
                // urlを指定すると画像が、指定しないとランダムパターンが表示される
                //url: '/assets/img/bg.jpg',
                // ランダムパターンを使用するか？
                useGeo: true,
            },
            // 記事のタイトルをヘッダーに表示するか？
            showTitle: true,
        },
        // Footer Config (Optional)
        footer: {
            // Show 'Powered by VuePress' or not (enable it to support VuePress)
            poweredBy: true,
            // Show the theme that you are using (enable it to support this theme) (please do not disable it, haha)
            poweredByTheme: true,
            // フッター表示 HTML 可
            custom: 'Copyright 2020 らいのブログ',
        },
        // Info Card Config (Optional)
        infoCard: {
            // ヘッダーの背景画像
            headerBackground: {
                // urlを指定すると画像が、指定しないとランダムパターンが表示される
                //url: '/assets/img/bg.jpg',
                // ランダムパターンを使用するか？
                useGeo: true,
            },
        },
        // Show the last updated time of your posts
        lastUpdated: true,
        // ナビバーに表示する項目
        nav: [
            { text: 'ホーム', link: '/', exact: true },
            { text: '記事検索', link: '/posts/', exact: false },
        ],
        // Enable smooth scrolling or not
        smoothScroll: true,
        // ズームプラグイン vuepress-plugin-zooming を使うかどうかの設定
        zooming: {
            // @see https://vuepress.github.io/en/plugins/zooming
        },
        // 何ページづつ表示するか
        pagination: {
            perPage: 5,
        },
        // Default Pages (Optional, the default value of all pages is `true`)
        defaultPages: {
            // Allow theme to add Home page (url: /)
            home: true,
            // Allow theme to add Posts page (url: /posts/)
            posts: true,
        },
    },
}

# 確認

yarn dev　で実行すると、テーマが反映されたのが確認できます。

yarn dev

人気ブログランキング(opens new window)