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

作者: geekzl管理员 发布时间: 2020-11-29 17:11:39 314 人阅读   百度未收录

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

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

vuepress快速入门教程-极客中心

前言

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

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

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

我将在这篇博文中做快速简介,不会深入细节,如果你有兴趣更深入了解,你可在看完之后去读官方文件

@vuepress/theme-blog

范例

呃,其实,我的博客,你现在所看到的就是一个范例了。 你可在我的部落个到处游荡一下。

快速开始

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

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

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

第二步:Front matter

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

---
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.jsthemeConfig 中。

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

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

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

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

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

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

  • 留言

默认提供了两个选择 :

  1. Vssue: 基于 issue 的留言服务
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',
      },
    },
  };
};
  1. Disqus: 线上留言服务平台
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 订阅。

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做范例,

# 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.stylindex.stly进行配置和自定义的,还能从VuePress的主题中继承一些feature。

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

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

使用 @vuepress/plugin-blog 的主题

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

功能介绍

所以说,到底有什么开箱即用的功能:

  • 自定义分类

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

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


  • 符合博客风格的 Permalink

使用文件名的使用文件名和文件夹名生成的 URL, 例如:

.
└── _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

有了这个插件,你能让他变的更博客:

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

  • 标签功能

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

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


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

  • Sitemap

输出目录生成 sitemap.xml

  • 留言

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

  • 订阅

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

结语

如果你有任何让 VuePress 博客插件与主题更好的想法,直接开个 issue 来讨论吧。



版权声明

当前位置:geekzl | 极客中心 » VuePress教程之官方博客主题与插件简介

发表评论

Captcha Code

我还会在以下平台发布内容

知乎 CSDN