VuePressを使って個人ブログを構築する手順を詳しく解説（コード付き）

今回は、VuePress を使用して個人ブログを構築する手順 (コード付き) と、VuePress を使用して個人ブログを構築する際の 注意事項 について詳しく説明します。ここで実際のケースを見てみましょう。一見。

VuePress

vuepress は、Youda によって 4 月 12 日にリリースされた新しい vue ベースの静的 Web サイトジェネレーターで、実際には組み込みの webpack を備えた vue spa アプリケーションです。ドキュメンテーション。

Vue SSR をベースにした静的サイトジェネレーター。本来の目的は楽しくドキュメントを書くことですが、ブログにも非常に適していることがわかりました。

これは VuePress の公式ドキュメントです

早速構築してみましょう

ドキュメントのサンプルに従って自分でプレイすることもできますが、VuePress ドキュメントも VuePress を使用して実装されているため、私はトリックを実行して、楽しみのために VuePress リポジトリから直接ダウンロードしてください。

1. まず VuePress をグローバルにインストールします

npm install -g vuepress

npm install -g vuepress

2.然后把VuePress仓库克隆到你的电脑

git clone git@github.com:docschina/vuepress.git2. 次に、VuePress リポジトリをコンピューターにクローンします

git clone git@github.com:docschina /vuepress .git

docs ファイルで実行します (Node.js バージョン >= 8 であることを確認してください)

cd vuepress
cd docs
vuepress dev

この行が表示されたら、成功したことを意味します:

 VuePress dev server listening at http://localhost:8080/

http の下で開きましょう://localhost:8080/

vuepress ドキュメントが実際に開かれていることがわかりました:

次の作業はデータを置き換えることですが、最初に docs の

ディレクトリ構造を確認する必要があります

:

├─.vuepress
│ ├─components
│ └─public
│ └─icons
│ └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
 ├─config
 ├─default-theme-config
 └─guide
└─README.md // 首页配置文件

ドキュメントは 2 つの部分に分かれており、中国語のドキュメントは /zh/ ディレクトリに、英語のドキュメントはルート ディレクトリにあります。

実際、ディレクトリ内の内容は非常に簡単に理解できます。まず、ガイド、default-theme-config、および config の 3 つのディレクトリが Vuepress ドキュメントの主要な内容です。これら 3 つのディレクトリのみが置き換えられていることがわかります。 ホームページの設定

デフォルトのテーマはホームページのレイアウトを提供します。これを使用するには、ルート ディレクトリ README.md の YAML フロントマターで home: true を指定し、その他のメタデータを追加する必要があります。

まずルート ディレクトリにある README を見てみましょう。md:

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
 details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
 details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
 details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾

本当に理解できません。公式 Web サイトの方が私より詳しい設定手順が記載されています。 ナビゲーション構成

ナビゲーション構成ファイルは .vuepress/config.js にあります

ナビゲーション構成ファイル内で、nav はナビゲーション バーのリンクを独自のブログ ディレクトリに変更できます。

nav: [
 {
 text: 'Guide',
 link: '/guide/',
 },
 {
 text: 'Config Reference',
 link: '/config/'
 },
 {
 text: 'Default Theme Config',
 link: '/default-theme-config/'
 }
]

残りのデフォルトのテーマ設定の公式ドキュメントには、非常に詳細な

ドキュメント手順が記載されています

ここでは詳しく説明しません。 デフォルトのテーマカラーを変更する

.vuepress/ ディレクトリに override.styl ファイルを作成できます。

vuepressは4つの変更可能な色を提供します:

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

私はこれに変更しました:

サイドバーの実装

コメント欄で質問する人が多いので、コメント欄でさせてください実際、私がここにどれだけ詳しく書いても、公式ドキュメントを読んでいる人ほど良いものではありません。

サイドバーの設定も .vuepress/config.js にあります:

sidebar: [
 {
 title: 'JavaScript', // 侧边栏名称
 collapsable: true, // 可折叠
 children: [
 '/blog/JavaScript/学会了ES6，就不会写出那样的代码', // 你的md文件地址
 ]
 },
 {
 title: 'CSS', 
 collapsable: true,
 children: [
 '/blog/CSS/搞懂Z-index的所有细节',
 ]
 },
 {
 title: 'HTTP',
 collapsable: true,
 children: [
 '/blog/HTTP/认识HTTP-Cookie和Session篇',
 ]
 },
]

対応するドキュメント構造:

├─blog // docs目录下新建一个博客目录
│ ├─CSS
│ ├─HTTP
│ └─JavaScript

私のブログ: BrownhuDeployment

🎜 ブログを設定した後、コマンドラインを実行します: 🎜

Vuepress build

この行が表示されたら、成功を意味します:

成功! vuepress で静的ファイルが生成されました。

パッケージ化された vuepress ディレクトリを github リポジトリにアップロードし、github ページと連携してブログ サイトを設定します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue モバイルで WeChat 公開アカウントを実装する手順の詳細な説明

jQuery を実装するタイトル テキストをクリックしてフォントを切り替える 詳細な説明

以上がVuePressを使って個人ブログを構築する手順を詳しく解説（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。