Ein Artikel, der Ihnen schnell zeigt, wie Sie mit VuePress + Github Pages ein Blog erstellen (praktisch)

Dieser Artikel wird Ihnen eine praktische VuePress-Erfahrung vermitteln. In diesem Artikel werde ich Ihnen zeigen, wie Sie mit VuePress + Github Pages schnell einen Blog erstellen.

Die Übersetzung von Hanbook, dem neuesten offiziellen TypeScript-Dokument, wurde kürzlich fertiggestellt. Insgesamt gibt es vierzehn Artikel, die als eines der besten TypeScript4-Einführungs-Tutorials in China bezeichnet werden können. Um das Lesen für alle zu erleichtern, habe ich VuePress + Github Pages verwendet, um einen Blog zu erstellen Statischer Website-Generator basierend auf Vue, mit einfachem Stil und einfacher Konfiguration. Es ist auch relativ einfach. Der Grund, warum ich

VitePress

nicht verwende, ist, dass ich ein vorhandenes Theme verwenden möchte und VitePress nicht mit dem aktuellen VuePress-Ökosystem kompatibel ist. Was den Grund angeht, warum ich VuePress@next

nicht wähle, wenn man bedenkt, dass es so ist Ich befinde mich noch im Beta-Stadium und werde mit der Migration beginnen, sobald es stabil ist. [Verwandte Empfehlungen: „

vue.js Tutorial“]

Schnellstart

Gleich wie die offizielle Website von VuePress

1. Erstellen Sie ein neues Verzeichnis und geben Sie es einrreee2 Management Initialisieren Sie den Server

// 文件名自定义
mkdir vuepress-starter && cd vuepress-starter

3. Installieren Sie VuePress als lokale Abhängigkeit

yarn init # npm init

4. Erstellen Sie Ihr erstes Dokument als Dokumentstammverzeichnis, daher entspricht diese README.md der Homepage:

yarn add -D vuepress # npm install -D vuepress

5 . Fügen Sie einige Skripte zu package.json hinzu. Starten Sie den Server lokal.

2. Grundkonfiguration

Erstellen Sie ein .vuepress-Verzeichnis im Dokumentverzeichnis, in dem alle VuePress-bezogenen Dateien abgelegt werden. Zu diesem Zeitpunkt könnte Ihre Projektstruktur wie folgt aussehen:

mkdir docs && echo '# Hello VuePress' > docs/README.md

Fügen Sie config.js im Ordner .vuepress hinzu, um den Titel und die Beschreibung der Website zu konfigurieren und SEO zu erleichtern :

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

Die Schnittstelle ähnelt derzeit:

3. Fügen Sie eine Navigationsleiste hinzu

Wir fügen jetzt oben eine Navigationsleiste hinzu Ändern Sie in der rechten Ecke oben auf der Seite config.js:

yarn docs:dev # npm run docs:dev

Der Effekt ist wie folgt:

Weitere Konfigurationen finden Sie im VuePress-Navigationsleiste:

https://vuepress.vuejs.org/zh/theme /default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

4. Fügen Sie eine Seitenleiste hinzu

.vuepress 目录，所有 VuePress 相关的文件都会被放在这里。此时你的项目结构可能是这样：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

在 .vuepress 文件夹下添加 config.js，配置网站的标题和描述，方便 SEO：

module.exports = {
  title: 'TypeScript4 文档',
  description: 'TypeScript4 最新官方文档翻译'
}

此时界面类似于：

3. 添加导航栏

我们现在在页首的右上角添加导航栏，修改 config.js:

module.exports = {
    title: '...',
    description: '...',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '冴羽的 JavaScript 博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/mqyqingfeng' },
                    { text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }
                ]
            }
        ]
    }
}

效果如下：

更多的配置参考 VuePress 导航栏：

https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

4. 添加侧边栏

现在我们添加一些 md 文档，目前文档的目录如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|  └─ handbook
|  	  └─ ConditionalTypes.md
|	    └─ Generics.md
└─ package.json

我们在 config.js 配置如下：

module.exports = {
    themeConfig: {
        nav: [...],
        sidebar: [
            {
                title: '欢迎学习',
                path: '/',
                collapsable: false, // 不折叠
                children: [
                    { title: "学前必读", path: "/" }
                ]
            },
            {
              title: "基础学习",
              path: '/handbook/ConditionalTypes',
              collapsable: false, // 不折叠
              children: [
                { title: "条件类型", path: "/handbook/ConditionalTypes" },
                { title: "泛型", path: "/handbook/Generics" }
              ],
            }
          ]
    }
}

对应的效果如下：

5. 更换主题

现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们可以直接使用主题，这里使用的主题是 vuepress-theme-rec（https://vuepress-theme-reco.recoluan.com/）：

现在我们安装 vuepress-theme-reco：

npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco

然后在 config.js 里引用该主题：

module.exports = {
  // ...
  theme: 'reco'
  // ...
}

刷新一下页面，我们会发现一些细节的改变，比如加载时的 loading 动画、以及支持切换暗黑模式：

6. 添加文章信息

但我们也会发现，像条件类型这一篇文章，条件类型（Conditional Types）Jetzt fügen wir einige MD-Dokumente hinzu:

---
title: 条件类型
author: 冴羽
date: '2021-12-12'
---

Wir konfigurieren es in config.js</. Code> wie folgt: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">module.exports = { // ... locales: { &amp;#39;/&amp;#39;: { lang: &amp;#39;zh-CN&amp;#39; } }, // ... }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Der entsprechende Effekt ist wie folgt: 🎜🎜<img src="https: //p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b53be542e6134a0c8637034cf4048618~tplv-k3u1fbpfcp-watermark . awebp" alt="" Loading="lazy" class="medium-zoom-image"/>🎜< h2 data-id="heading-6">5. Ändern Sie das Thema🎜🎜Jetzt sind die grundlegenden Verzeichnis- und Navigationsfunktionen verfügbar wurde implementiert, aber wenn ich auch laden, die Animation wechseln, den Modus wechseln (dunkler Modus), zum Anfang zurückkehren und kommentieren möchte, können wir zur Vereinfachung der Entwicklungskosten das hier verwendete Thema direkt verwenden vuepress-theme-rec (https://vuepress-theme-reco.recoluan.com/): 🎜🎜Jetzt installieren wir vuepress-theme -reco: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">module.exports = { //... themeConfig: { subSidebar: &amp;#39;auto&amp;#39; } //... }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Dann referenzieren Sie das Theme in <code>config.js</code >: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$accentColor = #3178c6</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Aktualisieren Sie die Seite und wir werden einige detaillierte Änderungen finden, wie z. B. die Ladeanimation während des Ladens und Unterstützung für den Wechsel in den Dunkelmodus: 🎜🎜<img src="https://p3-juejin.byteimg.com/ tos-cn-i-k3u1fbpfcp/12ddf58858974638ae55d669238600da~tplv-k3u1fbpfcp-watermark.awebp" alt="" Loading="lazy" class="medium-zoom-image"/>🎜<h2 data-id="heading-7" >6. Artikelinformationen hinzufügen🎜🎜Aber wir werden auch feststellen, dass <code>Bedingte Typen zweimal vorkommt. Dies liegt daran, dass dieses Thema automatisch den ersten großen Titel als Titel von extrahiert In diesem Artikel können wir der MD-Datei jedes Artikels einige Informationsänderungen hinzufügen: 🎜

// 通过检查，查看元素样式声明
.dark .content__default code {
    background-color: rgba(58,58,92,0.7);
    color: #fff;
}

🎜Zu diesem Zeitpunkt hat der Artikel folgende Auswirkungen: 🎜

但如果你不想要标题、作者、时间这些信息呢，我们可以在样式里隐藏，这个稍后会讲到。

7. 设置语言

注意，上图的文章时间，我们写入的格式为 2021-12-12 ，但是显示的是 12/12/2021，这是因为 VuePress 默认的 lang 为 en-US，我们修改一下 config.js：

module.exports = {
  // ...
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  // ...
}

可以发现时间换了一种展示方式：

8. 开启目录结构

在原本的主题里，我们发现每篇文章的目录结构出现在左侧：

而 vuepress-theme-reco 将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，如果你要全局开启，可在页面 config.js 里设置开启：

module.exports = {
  //...
  themeConfig: {
    subSidebar: 'auto'
  }
  //...
}

此时效果如下：

9. 修改主题颜色

VuePress 基于 Vue，所以主题色用的是 Vue 的绿色，然而 TypeScript 的官方色则是蓝色，那如何修改 VuePress 的主题色呢？

你可以创建一个 .vuepress/styles/palette.styl 文件，文件代码如下：

$accentColor = #3178c6

此时可以发现主题颜色变了：

更多的颜色修改参考 VuePress 的 palette.styl。

10. 自定义修改样式

如果你想自定义修改一些 DOM 元素的样式呢？就比如在暗黑模式下：

我们发现用作强调的文字颜色比较暗淡，在暗黑模式下看不清楚，我想改下这个文字的颜色和背景色呢？

而 VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。

我们在 .vupress 文件夹下创建这个目录，然后创建 index.styl 文件，代码如下：

// 通过检查，查看元素样式声明
.dark .content__default code {
    background-color: rgba(58,58,92,0.7);
    color: #fff;
}

此时文字就清晰了很多：

那之前我们提到的隐藏每篇文章的标题、作者、时间呢，其实也是类似的方式：

.page .page-title {
   display: none;
}

最后的效果如下：

11. 部署

我们的博客就算是正式的做好了，接下来我们部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：learn-typescript。

对应，我们需要在 config.js 添加一个 base 路径配置：

module.exports = {
  	// 路径名为 "/<REPO>/"
    base: &#39;/learn-typescript/&#39;,
  	//...
}

最终的 config.js 文件内容为：

module.exports = {
    title: 'TypeScript4 文档',
    description: 'TypeScript4 最新官方文档翻译',
    base: '/learn-typescript/',
    theme: 'reco',
    locales: {
        '/': {
          lang: 'zh-CN'
        }
    },
    themeConfig: {
        // lastUpdated: '上次更新',
        subSidebar: 'auto',
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '冴羽的 JavaScript 博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/mqyqingfeng' },
                    { text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }
                ]
            }
        ],
        sidebar: [
            {
                title: '欢迎学习',
                path: '/',
                collapsable: false,
                children: [
                    { title: "学前必读", path: "/" }
                ]
            },
            {
              title: "基础学习",
              path: '/handbook/ConditionalTypes',
              collapsable: false,
              children: [
                { title: "条件类型", path: "/handbook/ConditionalTypes" },
                { title: "泛型", path: "/handbook/Generics" }
              ],
            }
          ]
    }
}

然后我们在项目 vuepress-starter 目录下建立一个脚本文件：deploy.sh，注意修改一下对应的用户名和仓库名：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:mqyqingfeng/learn-typescript.git master:gh-pages

cd -

然后命令行切换到 vuepress-starter 目录下，执行  sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 gh-pages 分支，我们查看下对应仓库分支的代码：

我们可以在仓库的 Settings -> Pages 中看到最后的地址：

Die letzte Adresse, die ich generiert habe, ist https://mqyqingfeng.github.io/learn-typescript/

Zu diesem Zeitpunkt haben wir die Bereitstellung von VuePress und Github Pages abgeschlossen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEin Artikel, der Ihnen schnell zeigt, wie Sie mit VuePress + Github Pages ein Blog erstellen (praktisch). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!