[原创]VuePress教程之官方博客主题与插件简介

VuePress教程之官方博客主题与插件简介

别名: 介绍 VuePress 官方博客主题与插件

前言

VuePress Core Team 的成员 Billy: 除了 VuePress 核心以外，我负责官方博客插件与主题的开发。

如果你不知道 VuePress，他是一个由 Vue 的作者尤雨溪建立的静态网站生成器，简单又轻量，以 markdown 为中心，其特点是能在 markdown 里使用 Vue，被许多用户用来撰写技术文件。

在过去 VuePress 只提供默认的文档主题，然而你可以通过它开发各种静态网站，除了文件以外，我最常看到的大概非博客莫属。而我们在今天正式移除官方博客插件与主题的 WIP 状态。

我将在这篇博文中做快速简介，不会深入细节。

快速开始

我知道从头建起一个项目总是很麻烦无聊，尤其是对于一个新的接触的技术。 VuePress Core Team内已经针对这点做讨论，会尽快提供官方脚手架 Cli。在这篇文章里，你可以暂时先使用我事先准备好的template。

代码语言：javascript复制

git clone https://github.com/billyyyyy3320/vuepress-blog-template.git # Clone template

cd vuepress-blog-template && yarn # 安裝依赖

yarn dev # 运行在 localhost:8080

打开 localhost:8080，相信你已经看到一个现成的博客了。

写一篇博文

第一步：创建markdown文件

默认情况下，所有博文都必须放在_posts文件夹内，而文件名格式为日期-标题.md，例如 2020-01-25-intro-to-vuepress-official-blog-plugin-and-theme.md。

代码语言：javascript复制

└── _posts
    ├── ...
    └── 2020-01-25-intro-to-vuepress-official-blog-plugin-and-theme.md

第二步：Front matter

Front matter是用于指定个别文件的变量，格式是上下两行三个，中间使用语法。必须写在 Markdown 的最上方，在这主题里，是各篇博文的重要信息：

代码语言：javascript复制

---
title: VuePress 官方默认博客主題
date: 2020-01-20
tags:
  - Vue
  - VuePress
  - JavaScript
summary: 有了静态网站生成器，建立自己的博客其实很简单，如果你会写Vue，VuePress是个很好的选择，即便你没用过Vue，你也可以直接套用开箱即用的主题。
---

只有title是你必填的，它的值将会成为博文的标题与最终生成的 html 页面的<title>。

第三步：内文

在 Markdown 里，当然是用 Markdown 语法啰，基本上常见的 Markdown 语法在这都适用。

Markdown 是一种轻量级标记式语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们「使用易读易写的纯文字格式编写文件，然后转换成有效的 XHTML（或者 HTML）文件」。

那 Markdown 我就不多赘述了，而内文就由你自由发挥了。

增加互动与可见性

相信你要博客，就是要给人看的吧，VuePress 作为一个静态网站生成器已经做了许多优化。这个主题还提供了以下配置，以下配置都要写在 .vuepress/config.js 的themeConfig 中。

以下配置都不是必要配置，请针对你的需求去选择。

Sitemap

代码语言：javascript复制

module.exports = (options, context, api) => {
  return {
    ...
    themeConfig: {
      ...
      sitemap: {
        hostname: "https://billyyyyy3320.com/"
      }
    },
  };
};

在hostname里填下你博客的网址，就会在你执行 build 指令时产生sitemap.xml，就那么简单，剩下的交给搜索引擎爬虫去爬他吧。如果你想要自己提交，他就在dist文件夹下。

Web Feed 订阅

代码语言：javascript复制

module.exports = (options, context, api) => {
  return {
    ...
    themeConfig: {
      ...
      feed: {
        canonical_base: 'https://billyyyyy3320.com/',
      },
    },
  };
};

canonical_base是必填的。就跟前面的Sitemap一样，用你的博客URL填写canonical_base。

默认情况下，将使用Rss feed，但也可以使用Atom和JSON feed。

留言

默认提供了两个选择：

Vssue：基于 issue 的留言服务

代码语言：javascript复制

module.exports = (options, context, api) => {
  return {
    ...
    themeConfig: {
      ...
      comment: {
        // Which service you'd like to use
        service: 'vssue',
        // The owner's name of repository to store the issues and comments.
        owner: 'You',
        // The name of repository to store the issues and comments.
        repo: 'Your repo',
        // The clientId & clientSecret introduced in OAuth2 spec.
        clientId: 'Your clientId',
        clientSecret: 'Your clientSecret',
      },
    },
  };
};

Disqus：线上留言服务平台

代码语言：javascript复制

module.exports = (options, context, api) => {
  return {
    ...
    themeConfig: {
      ...
      comment: {
        // Which service you'd like to use
        service: 'disqus',
        // The owner's name of repository to store the issues and comments.
        shortname: 'vuepress-plugin-blog',
      },
    },
  };
};

配置完后，留言板会自动在每篇文章最底部生成。

电子邮件订阅

默认整合了mailchimp来提供 Email 订阅。

代码语言：javascript复制

module.exports = (options, context, api) => {
  return {
    ...
    themeConfig: {
      ...
      newsletter: {
        endpoint: 'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&id=bd18d40138'
      },
    },
  };
};

需要填入endpoint来启用这个功能。至于如何获取endpoint，请参考此处，我用截图说明的地方。

部署

静态网页的部署非常简单，VuePress 官方文件里有针对各服务的指南。

在这里以我使用的Netlify做范例，

代码语言：javascript复制

# Push this blog to your Github

# Go to Netlify and log in

# Click `New site from git`

# Select `Github`

# Select your blog repo

# Fill out `Build command` with `vuepress build blog`

# Fill out `Publish directory` with `blog/.vuepress/dist`

# Deploy site

就酱。

@vuepress/plugin-blog

想必你有疑惑，博客插件跟主题差在哪里？

简单来讲，一个有画面，一个没画面。我们把必要的博客功能拆出来集成到插件里，目的是希望它能被重复利用，让所有想打造博客主题的开发者更快上手，更专注于界面的开发。

实际上，官方博客主题是可以使用palette.styl，index.stly进行配置和自定义的，还能从VuePress的主题中继承一些feature。

Palette
Styling in VuePress docs
Theme Inheritance

但是如果你想改的范围更大，上述方法无法满足你的话，欢迎你打造你的博客主题，拓展 VuePress 社群。这时候你就可以使用这个插件，一定会帮你省去许多麻烦。

想写一个主题，请先详读如何写一个 VuePress 主题.

使用 @vuepress/plugin-blog 的主题

即使之前都还表明还在开发阶段，还是有些开发者已经利用这个插件开发博客主题：

@vuepress/theme-blog
vuepress-theme-reco
vuepress-theme-seeker
vuepress-theme-modern-blog
vuepress-theme-yuchanns

功能介绍

所以说，到底有什么开箱即用的功能：

自定义分类

例如，基于目录对帖子进行分类，例如，官方博客主题假定_posts下的所有.md文件均为博客文章，并在根目录/中列出。您可以设置自定义目录，甚至可以设置目录，例如通过writing 和 photography目录进行分类。

此外，此插件提供了Front matter 分类，例如，官方博客主题可让用户为每篇博文定义标签以对主题进行分类。再次，你还可以自定义category之外的其他分类器，如location, category等。

符合博客风格的 Permalink

使用文件名的使用文件名和文件夹名生成的 URL，例如：

代码语言：javascript复制

.
└── _posts
    ├── 2018-4-4-intro-to-vuepress.md
    └── 2019-6-8-intro-to-vuepress-next.md

# 会产生

/_posts/2018-4-4-intro-to-vuepress.html
/_posts/2019-6-8-intro-to-vuepress-next.html

有了这个插件，你能让他变的更博客：

代码语言：javascript复制

/2018/04/04/intro-to-vuepress/
/2019/06/08/intro-to-vuepress-next/

标签功能

当文章一多，想必你会想将文章标签。透过这个插件，你只需要设定一页要几篇文章，不必自己动手动脑来实现。

而且我们也提供了两个 UI 组件可以让你直接使用，当然涉及 UI 绝对不是强制的，你可以通过 Client API取得标签数据来决定你自己的呈现方式。

接下来的功能就是提供我稍早所提到的简单增加互动与可见性的方法。

Sitemap

输出目录生成 sitemap.xml

留言

整合了Disqus与 Vssue。并且提供了一个方便的组件 - <Comment/>，让你可以在任何你想要置入留言板的地方插入。

Web Feed - 在output文件夹中生成rss.xml、feed.atom 或 feed.json。集成了News letter的 mailchimp插件，提供一个方便的组件 - <SimpleNewsletter />，以便你可以将其嵌入任意位置。

vue.js markdown xml

0 人点赞