使用 Vuepress 和 Vue 创建您的下一个静态博客

2025-06-07

使用 Vuepress 和 Vue 创建您的下一个静态博客

在Twitter上关注我，很高兴接受您对主题或改进的建议/Chris

本系列的目的是了解如何使用已知的静态站点生成器之一来构建自己的博客。

简而言之：是的，这篇文章有点长，但值得一读，因为它不仅教你如何创建自己的主页，还教你如何构建自定义组件以及如何使用默认主题。即使你以前从未使用过静态网站生成器，这篇文章也非常容易上手。

建立自己的博客可能是一个非常雄心勃勃的项目，您需要花时间编写代码或集成和调整您绝对必须拥有的不同组件，或者做一些非常简单的事情，您只需专注于撰写文章。

博客通常是静态网站，人们通常不想用 HTML 写博文，而是更喜欢用 Markdown 或纯文本等其他格式。因此，静态网站生成器工具应运而生，既能满足初学者的需求，也能满足最高级用户的使用需求。

我绝对是其中一员，Markdown FTW，我越少需要处理我的博客就越好:)

这是一系列文章的一部分，我们将探讨不同的静态网站生成器。在本文中，我们将重点介绍 VuePress，这是 Vue 团队自己开发的一款静态网站生成器。

我们将介绍以下内容：

  • 安装和设置。这部分非常重要，操作要流畅简单
  • 你好，世界创建第一个页面是体验的重要部分，让我们看看我们能多快启动并运行。
  • 简历、关于和其他页面的静态页面
  • 创建博客文章我们研究不同的静态网站生成器，目的是能够将其用作博客引擎，因此我们需要了解如何命名这些文件，如何使用 frontmatter、标签、slug 和其他东西
  • 自定义外观、颜色、布局等。我们可能对现有的主题很满意，但有时也想调整外观。或者，有没有一个很棒的默认主题可以供我们使用？提示
  • 创建自定义控件，例如文章列表页。列出博客中包含的所有文章或标签云是很常见的。关键在于，我们要么想使用这些类型的文章，要么能够在没有文章的情况下自行创建。

 资源

如果你真的想使用 Vuepress，那么你应该看看一些很棒的链接

 安装和设置

首先，我们需要在系统上安装 Node.js，如果还没有安装，请先安装它：

https://nodejs.org/en/download/

要安装 Vuepress CLI，我们需要在全局级别进行安装，请注意下面我们如何使用globalyarn 或-gNPM install 的标志。

yarn global add vuepress # OR npm install -g vuepress
Enter fullscreen mode Exit fullscreen mode

创建目录
下一步是创建一个目录并将自己置于其中：

mkdir my-blog
cd my-blog
Enter fullscreen mode Exit fullscreen mode

创建一些博客内容

下一步是创建一个README.md如下文件：

# My blog

Welcome to my blog
Enter fullscreen mode Exit fullscreen mode

建立并运行我们的博客

下一步是vuepress dev在终端中输入：

这完成了一系列工作。添加主题、应用插件，最终将页面服​​务于http://localhost:8080

好了，这就是我们的第一页。

太快了。

不可否认的是，开始这件事非常简单。

然而，一个好的静态站点生成器应该能够做一些技巧，所以让我们继续吧。

创建静态页面

我们已经看到了我们的README.md文件是如何变成默认页面的，但是博客很可能需要几个支持页面，例如关于页面或文章列表页面等，并且菜单会很好。

支持页面

让我们创建一些支持页面about.md，cv.md这样我们的项目现在看起来像这样：

  • README.md，我们的默认页面
  • cv.md，包含我们简历的页面
  • about.md，包含有关我们更多详细信息的页面

我们的vuepressCLI 命令已经在后台运行，因此当我们创建上述文件及其内容时，它会重新编译，现在我们可以通过它们的文件名访问这些页面，因此http://localhost:8080/about.html和 也一样http://localhost:8080/about。后者被重写为 HTML 版本。

简单回顾一下我们目前的文件结构：

导航

那么导航呢？如何在页面之间导航？让我们看一下在官方文档中找到的一段摘录：

[Home](/) <!-- Sends the user to the root README.md -->
[foo](/foo/) <!-- Sends the user to index.html of directory foo -->
[foo heading anchor](/foo/#heading) <!-- Anchors user to a heading in the foo README file -->
[foo - one](/foo/one.html) <!-- You can append .html -->
[foo - two](/foo/two.md) <!-- Or you can append .md -->
Enter fullscreen mode Exit fullscreen mode

好的，这意味着我们可以链接到主页、目录下的登录页面、页面上的特定锚点，并且我们可以输入.md或.html文件结尾。

令人印象深刻，让我们尝试一下

改README.md說：

# My blog

Welcome to my blog

- [About](/about/)
- [CV](/cv/)
Enter fullscreen mode Exit fullscreen mode

我们还可以添加：

[Home](/)
Enter fullscreen mode Exit fullscreen mode

about.md到和的底部cv.md。现在，我们在起始页和另外两个页面之间有一个功能齐全的导航系统。

做好生产准备

到目前为止，我们一直vuepress dev在浏览器中托管博客，但如何才能真正让它投入生产呢？你知道让它生成 HTML、CSS 和其他所有代码吗？因为如果我们查看现在的文件结构，它只是 Markdown 文件。答案很简单，我们输入：

vuepress build
Enter fullscreen mode Exit fullscreen mode

运行上述命令将得到以下结果

如上所述，这将创建一个.vuepress目录及其dist下的一个目录

上面我们可以看到，每个 Markdown 文件都已转换为 HTML 文件。我们还获得了一个assets包含 JavaScript、CSS 和图像的子目录。

太简单了吧？

 使用 Markdown 写博客

我们开始评估静态网站生成器的主要原因是找到能够支持我们博客运营的工具。让我们列出我们想要的功能以及每篇文章需要添加的标签：

  • 主题标签，一种为页面添加适当标签的方式。对于读者来说，能够轻松查看文章内容至关重要。
  • 标题，一个描述性的标题是吸引人们选择阅读我们文章的关键
  • 日期，即文章撰写的日期，为文章指定日期非常重要，这样我们就能很容易地看到文章的写作时间，同时还能按日期对文章进行分组/排序
  • 代码高亮，这个是必须的。阅读长行源代码时，如果没有高亮，简直无法忍受。

写一篇文章

好的，让我们创建一个目录pages并开始创建一篇文章article.md。让我们添加几个段落并像往常一样添加一些代码，现在使用以下命令进行渲染vuepress dev：

好的，看起来不错，我们得到了美观的文章文本渲染效果，这很好地突出了代码的亮点。不过等等，还有更多。我们实际上可以像这样指示特定的行：

什么...

我知道，当你想高亮显示代码中的新增内容时，这很有用。那么我们是怎么做到的呢？

通常，我们用三个反引号来开始一段代码`，然后添加js一些代码来指示语言，在本例中是 JavaScript。如果我们在 this 中添加一些内容{}，就可以指示想要高亮显示的行。为了实现上述操作，我们js{3,4}在反引号后输入了一行代码，表示我们需要高亮3显示4额外的行。

关于代码渲染的另一件事是，我们可以通过config.js在目录下创建文件并像这样.vuepress设置属性来启用行号：lineNumbers

module.exports = {
  markdown: {
    lineNumbers: true
  }
}
Enter fullscreen mode Exit fullscreen mode

前言

这是文章顶部的部分。我们可以用它来设置以下内容：

  • 标题
  • 小路
  • 关键词
  • 出版日期
  • 元信息

在 Vuepress 中，我们将这个 header（即frontmatter）定义为 YAML。它看起来像这样：

---
property: value
objectproperty: 
  prop: value
  prop2: value
---
Enter fullscreen mode Exit fullscreen mode

另一个例子是：

title: Blogging Like a Hacker
lang: en-US
Enter fullscreen mode Exit fullscreen mode

那么这一切什么时候才重要呢？

您首先需要知道的是，它的底层引擎是 Vue，Vue 将所有不同的页面作为对象读取，并且前端内容将作为对象读取。

如果我们在前言中填充一些有趣的信息，比如标题、关键词、发布数据等等，那么就可以很容易地创建不同的组件，轻松展示您的博客信息，比如文章列表、按日期排序，或者为什么不展示最常用标签的标签云？

好的，是的，这听起来很棒，但我该怎么做呢？

继续阅读，您将在下一部分中找到答案。

自定义控件

应该说，现成的控件并不多。不过，考虑到创建这些控件很容易，你其实并不需要它们。下面我们将展示一个简单的组件，让你掌握它的基本用法，以及一个稍微高级一点的组件。

好的，我们刚刚介绍了 frontmatter 的概念，它是每篇文章顶部的一段 YAML，但我们实际上如何用它做一些有用的事情呢？答案是创建自定义控件。

好的，您已经这么说了，但是怎么做呢？

还记得我说过一切都是 Vue.js 吗？不是吗？嗯，确实如此。这意味着，如果我们在运行时创建的目录components下创建一个目录，我们就可以创建可以在网站任何地方使用的 Vue 组件。.vuepressvue build

真的吗？我知道如何创建 Vue 组件，但如何使用它们呢？

让我们从创建一个组件开始About.vue

并给文件添加以下内容：

// About.vue

<template>
  <div class="box">
    <h2>{{title}}</h2>
    {{message}}<button @click="click">Hi</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'about page'
    }
  },
  methods: {
    click() {
      alert('hi')
    }
  },
  props: ['title']
}
</script>
<style scoped>
 .box {
   padding: 20px;
   margin: 2px;
   box-shadow: 0 0 10px black;
 }
</style>
Enter fullscreen mode Exit fullscreen mode

上面看起来像一个非常普通的 Vue.js 组件，它具有数据属性message、输入参数title和方法click。

所以你的意思是我可以在页面中使用它？

正确，只需像这样添加它about.md：

# About

<About title="about me" />
Enter fullscreen mode Exit fullscreen mode

等一下，所以你混合了 markdown 和 HTML 元素？

是的，确实有效。结果如下：

正如您在上面看到的，它呈现得很好，甚至当我们单击按钮时，JavaScript 部分也能正常工作，我们得到警报窗口。

列表控件

好的，我们已经创建了我们的第一个自定义控件，它真的很酷，非常简单，但我们还没有展示它的真正价值，即 - 我们如何与前端内容进行交互。

我们要做的是创建一个列表控件。该控件可以获取我们撰写的所有文章，并以列表格式呈现。具体操作如下：

  1. 创建一个目录和文章，让我们为我们的文章创建一个目录，然后我们将其命名为pagesnext createtypescript.md和vuex.md

  2. 添加 frontmatter，让我们给它们每个添加一个 frontmatter ，其中包括标题、语言、发布数据和关键字列表

  3. 创建一个列表组件，让我们创建一个列表组件，它将能够遍历这些文章，抓取所需的数据并对其进行良好的格式化

创建目录和文章
它应该如下所示

添加前言
我们之前说过这是 YAML，所以让我们尝试包含我们提到的所有需要​​的信息，如下所示：

---
title: My first article on TypeScript
lang: en-US
published: 2019-09-19
meta:
  keywords:
    - TypeScript
    - JavaScript
    - Tutorial
  description:
    content: Article on TypeScript
---
Enter fullscreen mode Exit fullscreen mode

上面是一篇文章的封面示例，名为typescript.md。显然，不同文章的标题、发布日期、关键词和描述会有所不同。我们几乎可以自行决定如何构建上述内容，只要它是有效的 YAML 文件即可。

创建列表组件

有一件事使这一切成为可能。放置在components目录中的 Vue 组件可以访问类似 so 的 site 对象this.$site。该 site 对象有一个属性，pages该属性是一个列表，其中包含所有包含 so 的页面this.$site.pages。

这真是个好消息，但我们需要稍微过滤一下，因为我们只需要pages目录中的页面。我们可以通过以下代码轻松实现：

return this.$site.pages
  .filter(p => {
    return p.path.indexOf('/pages/') >= 0;
});
Enter fullscreen mode Exit fullscreen mode

现在轮到我们的头条内容了。我们在页面头条中定义的所有内容都会被解析为对象，因此当我们循环遍历每个页面时，我们可以访问page.frontmatter。因此，我们可以轻松地使用 来访问我们的关键词page.frontmatter.meta.keywords。

这意味着我们可以继续构建我们的列表组件，如下所示：

// List.vue

<template>
  <div>
    <div class="article" v-for="page in files">
      <a v-bind:href="page.path">{{page.title}}</a>
      <div class="keywords">
        <span class="keyword" v-for="key in page.frontmatter.meta.keywords">{{key}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    files() {
      return this.$site.pages
        .filter(p => { 
          return p.path.indexOf('/pages/') >= 0;
        });
    }
  }
}
</script>
<style scoped>
  .article {
    margin-bottom: 20px;
    border-left: solid 5px #3eaf7c;
    padding: 20px;
  }
  .keywords {
    margin-top: 10px;
  }
  .keyword {
    padding: 5px;
    border-radius: 7px;
    font-size: small;
    background: #3eaf7c;
    margin-right: 5px;
    color: white;
    font-weight: 500;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

投入使用后它将呈现如下效果：

现在，我们可以通过确保点击某个关键词时，最终会显示与该关键词匹配的文章列表来改进上述方法，一切皆有可能。这个练习就留给你了。你应该已经获得了足够的信息，知道如何继续下去了。

 默认主题

主题本身是一个很大的话题，所以我会把自定义主题留到以后的文章里再讲。我接下来会讲解如何使用当前的默认主题，让你的网站看起来更美观一些。

它包含相当多的功能，完整的功能列表如下：

https://vuepress.vuejs.org/default-theme-config/

我们可以改变的一件事是我们的主页README.md。我们可以通过添加 frontmatter 来彻底改变它，如下所示：

---
home: true
heroImage: ./logo.png
actionText: Get Started →
actionLink: /articles/
features:
- title: Blog
  details: This is a blog consisting of articles on various tech topics
- title: CV
  details: This is my CV
- title: About
  details: This tells you everything about who I am as a person
footer: MIT Licensed | Copyright © 2018-present Evan You
---
Enter fullscreen mode Exit fullscreen mode

这将为页面提供一个英雄部分，一个突出的信息部分，其下方是三列功能。上面的 YAML 将呈现如下：

注意，我们还没有讨论如何管理资源，你可能想知道它是如何知道如何解析heroImage指向 的。实际上，我们在下面./logo.png创建了一个目录，并将我们的图像放在那里。public.vuepress

我想再提一下默认主题的菜单功能。我们需要在目录config.js下创建一个文件.vuepress，并确保themeConfig像这样设置属性：

module.exports = {
  themeConfig: {
    nav: [{
        text: 'Home',
        link: '/'
      },
      {
        text: 'About',
        link: '/about/'
      },
      {
        text: 'CV',
        link: '/cv/'
      },
      {
        text: 'Blog',
        link: '/articles/'
      },
      {
        text: 'Public Speaking',
        link: '/speaking/'
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

概括

就这些了，伙计们。:)

我们从安装 CLI 开始，一直到学习一些实用的命令，比如vuepress dev如何使用它。此外，我们还学习了vuepress build如何渲染最终的静态文件。

我们展示的非常酷的事情之一是创建自定义控件是多么容易，最后，我们展示了使用默认主题时已经有多少功能。

就我个人而言，这绝对是我用过的最简单的静态网站生成器。迫不及待地想让它在已经非常优秀的基础上更上一层楼。快来试试吧！

文章来源：https://dev.to/itnext/creating-a-blog-easier-than-ever-starring-vuepress-and-vue-3p8c
Devto 翻译
PREV
如何在 React 中使用 Firebase 上传图像。
NEXT
使用 Swagger 和 Nest.js 向您的 REST API 添加实时文档