Detaillierte Erklärung der Schritte zum Erstellen eines persönlichen Blogs mit VuePress (mit Code)

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung von VuePress zum Erstellen eines persönlichen Blogs (mit Code). Fälle, werfen wir einen Blick darauf.

VuePress

vuepress wurde am 12. April von Youda als Marke veröffentlicht Der neue statische Website-Generator auf Basis von Vue ist eigentlich eine Vue-Spa-Anwendung mit integriertem Webpack, mit dem Dokumente geschrieben werden können.

Ein statischer Site-Generator basierend auf Vue SSR. Sein ursprünglicher Zweck besteht darin, problemlos Dokumente zu schreiben, aber ich habe festgestellt, dass er sich auch sehr gut zum Bloggen eignet.

Dies ist das offizielle Dokument von VuePress

Beginnen Sie mit der EinrichtungSie können den Beispielen im Dokument folgen und selbst damit spielen. Da die VuePress-Dokumentation jedoch auch mit VuePress implementiert wird, habe ich einen Trick gewählt und direkt das docs-Verzeichnis im VuePress-Warehouse verwendet, um damit zu spielen.

1. Installieren Sie zuerst VuePress global

npm install -g vuepress2. Klonen Sie dann das VuePress-Repository auf Ihren Computer

git clone git@github.com:docschina/vuepress.gitIn der Dokumentdatei ausführen (bitte stellen Sie sicher, dass Ihre Node.js-Version >= 8 ist)

cd vuepress
cd docs
vuepress dev

Wenn Sie diese Zeile sehen, bedeutet das, dass es erfolgreich war:

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

Unten haben wir geöffnet http://localhost:8080/

und festgestellt, dass das Vuepress-Dokument tatsächlich geöffnet wurde:

Die folgende Arbeit besteht darin, die Daten zu ersetzen, aber wir Sie sollten sich zunächst die

Verzeichnisstruktur von docs

ansehen:

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

Das Dokument ist in zwei Teile unterteilt, das chinesische Dokument befindet sich im Verzeichnis /zh/ und das englische Dokument im Stammverzeichnis.

Tatsächlich sind die Dinge im Verzeichnis recht einfach zu verstehen. Erstens sind die drei Verzeichnisse „guide“, „default-theme-config“ und „config“ die Hauptinhalte des Vuepress-Dokuments , können Sie auch sehen, dass nur diese drei Verzeichnisse ersetzt wurden.

Homepage-KonfigurationDas Standardthema bietet ein Homepage-Layout. Um es zu verwenden, müssen Sie die YAML-Front von README festlegen. md in Ihrem Stammverzeichnis. Geben Sie „home: true“ in „materie“ an und fügen Sie einige weitere Metadaten hinzu.

Schauen wir uns zuerst die README-Datei im Stammverzeichnis an, 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 // 页尾

Ich kann es wirklich nicht verstehen, die offizielle Website hat detailliertere Konfigurationsanweisungen als meine.

NavigationskonfigurationDie Navigationskonfigurationsdatei befindet sich in .vuepress/config.js

In der Navigationskonfigurationsdatei nav Um den Link in der Navigationsleiste zu steuern, können Sie ihn in Ihr eigenes Blog-Verzeichnis ändern.

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

Die verbleibenden offiziellen Dokumente zur Standard-Theme-Konfiguration enthalten sehr detaillierte

Dokumentbeschreibungen

Ich werde hier nicht auf Details eingehen.

Ändern Sie die StandarddesignfarbeSie können eine override.styl-Datei im Verzeichnis .vuepress/ erstellen.

vuepress bietet vier veränderbare Farben:

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

Ich habe es wie folgt geändert:

Implementierung der SeitenleisteDa im Kommentarbereich viele Leute nachfragen, werde ich es hier aktualisieren. Tatsächlich ist es nicht so gut, wie das offizielle Dokument zu lesen, egal wie ausführlich ich hier schreibe. .

Die Konfiguration der Seitenleiste ist auch in .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篇',
 ]
 },
]

Die entsprechende Dokumentstruktur:

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

Mein Blog: brownhu

BereitstellungFühren Sie nach der Konfiguration Ihres Blogs die Befehlszeile aus:

Vuepress build

Wenn Sie diese Zeile sehen, bedeutet das Erfolg:

Erfolg! Generierte statische Dateien in vuepress.

Laden Sie das gepackte vuepress-Verzeichnis hoch. Gehen Sie zu Ihrem Github-Repository und arbeiten Sie mit der Github-Seite zusammen, um Ihre Blog-Website zu konfigurieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung eines öffentlichen WeChat-Kontos für Mobilgeräte mit Vue

jQuery-Schritte zur Implementierung Klicken Sie auf den Titeltext, um die Schriftart zu wechseln. Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Schritte zum Erstellen eines persönlichen Blogs mit VuePress (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!