VuePressベースのブログ構築ガイド

実はどのようにVuePressを利用してブログを構築するかに関する内容は公式ドキュメントで十分に紹介されており、ほとんどの問題がその中で答えを見つけることができると信じていますが、それでも、自分がVuePressを探求し、使用する過程を振り返り、総括し、考え方を整理し、出会った問題を記録する必要があると思います.また、似たような問題に直面した人に問題を解決する考えを提供できれば幸いです.
基本構成
公式の迅速な手順に従ってプロジェクトを作成した後、必要なのは配置です.VuePressが自分の定義に言ったように、Vue駆動の静的ウェブサイトジェネレータです.はい、それはジェネレータです.開発作業をする必要はありません.必要な原料-文章を入れるだけで、いくつかの配置作業をします.必要なブログサイトを生成できます.構成はグローバル構成と個別ページごとのページ構成に分けられ、一般的にデフォルトの構成をグローバル構成に、個別ページの特殊な構成をページ構成に配置します.
グローバル構成
グローバル構成はdocs>.vuepress>config.jsファイルには、グローバル構成に関する内容が多く、基本構成のほか、トピック構成:themeConfig、プラグイン構成:plugins、md構成:Markdown、構築プロセス構成:configureWebpackなどが含まれています.デフォルトのトピック構成は、プロジェクトで使用されるトピックによって異なる構成内容がある場合があります.デフォルトのトピックを直接使用する場合は、トピックの説明ドキュメントの下のデフォルトのトピック構成の説明に基づいて構成できます.
configファイルを変更した後、dev-server構成を再起動する必要があります.
ページの設定
公式ドキュメントではページ構成という概念は言及されていませんが、実際にはページ構成はmarkdownファイルごとのFront Matterに書かれています.ここでパラメータの値を設定したり、カスタム変数を作成したりすることができます(これは後で開発テーマで使用されます).
簡単なFront Matterの例:

---
title:   vuePress       
lang: zh-CN
description:     VuePress            
date: 2021-1-20
---

各コロンにスペースを付ける必要があります.そうしないと、ページが間違って表示されます.
Front Matterでデフォルトのトピックの定義済み変数は次のとおりです.

navbarナビゲーションバー

を開くかどうか

sidebarサイドバーがサイドバー

を開くかどうか

prev前の記事リンク

next次の記事リンク

search検索バー

を開くかどうか

tagsタグを追加し、検索機能のインデックス

を確立する
ブログテーマの使用
美しい個人ブログを構築したい場合は、上記の構成を使用すると、デフォルトのトピックが技術ドキュメントのために設計されているため、ニーズを満たすことができません.より良い利用体験のために公式ブログテーマをご利用いただけます
インストール

yarn add vuepress @vuepress/theme-blog -D

注意ブログトピックを使用するデフォルトのディレクトリ構造はvuepressの初期のディレクトリ構造とは異なり、ディレクトリが正しくないと実行が間違ってしまい、初めて使用した人は何が原因なのか分からない可能性があります
vuepress/theme-blog推奨ディレクトリ構造

├── blog
│   ├── _posts #      
│   │   ├── 2018-11-7-frontmatter-in-vuepress.md #example
│   │   ├── 2019-2-26-markdown-slot.md #example
│   │   └── 2019-5-6-writing-a-vuepress-theme.md #example
│   └── .vuepress
│       ├── `components` _(**Optional**)_
│       ├── `public` _(**Optional**)_
│       ├── `styles` _(**Optional**)_
│       │   ├── index.styl
│       │   └── palette.styl
│       ├── config.js
│       └── `enhanceApp.js` _(**Optional**)_
└── package.json

インストール後config.jsでの構成

// .vuepress/config.js
module.exports = {
     
  title: 'OR      ', 
  theme: '@vuepress/theme-blog',
  themeConfig: {
     
  }
}

その後dev-serverを起動すると、ブログのテーマで表示される新しいページが表示されます
足場の使用
上記のプロジェクトテンプレートは自分で手動で作成する必要はありません.公式には足場--create-vuepressが提供され、実行されています.

yarn create vuepress [ProjectName]

blog typeを選択するとプロジェクトテンプレートが生成されます
dev-serverを起動すると、このプロジェクトテンプレートはトップページ、文章リスト、ラベル、検索のいくつかの機能を含む基本的なブログフレームワークを構築しており、嫌でなければ完全に極簡ブログとして使用することができ、デフォルトの構成をいくつか修正して、一定の個性化を備えていることがわかります.
開発テーマ
公式に提供されているブログのテーマに不満があれば、自分でテーマを開発したり、ページごとのレイアウトを深くカスタマイズしたりして、完全に自分のスタイルのブログを作ることができます.
はい.vuepressフォルダの下にthemeフォルダを新規作成します.ここで、約束されたディレクトリ構造は次のとおりです.

theme
├── global-components
│   └── xxx.vue
├── components
│   └── xxx.vue
├── layouts
│   ├── Layout.vue (   )
│   └── 404.vue
├── styles
│   ├── index.styl
│   └── palette.styl
├── templates
│   ├── dev.html
│   └── ssr.html
├── index.js
├── enhanceApp.js
└── package.json

約束の詳細については、公式ドキュメントを参照してください.
その中で私たちが書いたLayout.vueコンポーネントは各インタフェースに自動的に適用されるので、各コンポーネントでthisを通過することができる必要があります.s i t e′と‘t h i s.site`と`this.これとこれPageは、pathおよびfrontmatterのコンテンツを含むすべてのページと現在のページのメタデータを取得し、Contentコンポーネントを使用してmarkdownファイルでレンダリングされたコンテンツを取得します.
基本的にこれらのコンテンツと構造は、文章ディレクトリコンポーネントや文章展示コンポーネントの作成など、ブログをカスタマイズするニーズを満たすことができますが、一般的にはグローバルなheaderとfooterが必要です.この場合、globalLayoutを使用する必要があります.実際にはvuepressはデフォルトのglobalLayoutコンポーネントを書いています.その役割はfrontmatterにlayoutが構成されているかどうかを判断し、構成されていない場合はLayoutを使用することです.vueレイアウト

---
layout: AnotherLayout
---

新しいglobalLayoutを作ることができます.vueは、デフォルトの構成に代わって、グローバルなheaderコンポーネントとfooterコンポーネントを追加します.

同時にデフォルトのglobalLayoutコンポーネントの機能も持参します

computed: {
     
    layout () {
     
      if (this.$page.path) {
     
        if (this.$frontmatter.layout) {
      //   frontmatter      layout
          return this.$frontmatter.layout
        }
        return 'Layout'  //       layout
      }
      return ''NotFound''  //   NotFind     404.vue  ，    
    }
  }

上記の基本的な考え方があれば、次の仕事はいつものvueアプリケーション開発のように、場所ごとに深くカスタマイズすることができます.
しかし、ほとんどの場合、私たちは最初からやる必要はありません.他の人がやったことのある繰り返しの仕事をする必要はありません.トピック継承に基づいて、デフォルトのトピックに基づいてカスタマイズ機能を変更したり開発したりするなど、実装済みの機能を再利用できます.トピック継承については、公式ドキュメントを参照してください.
個人ブログへようこそ:https://ppwq.xyz