npm 包 saber.js 使用教程

前言

saber.js 是一个 Vue 驱动的基于 Markdown 的静态站点生成器。它灵活、易于使用，并支持多个主题。本文将介绍如何在前端开发中使用该工具。

安装与配置

安装

saber.js 可以通过 npm 进行安装：

npm install -g saber-cli

创建项目

使用以下命令创建一个项目：

saber create my-project

其中，my-project 是项目名称。

运行

进入项目文件夹，执行以下命令启动 Web 服务器：

saber dev

在浏览器中打开 http://localhost:3000，就可以看到页面了。

配置

saber.js 的配置文件为 saber-config.yml，位于项目根目录下。可以在该文件中对站点进行配置。下面是一个示例配置：

title: "My Site"
description: "This is my awesome site"
theme: default

该配置文件中包含了三个属性：

• title：站点名称。
• description：站点描述。
• theme：使用的主题。可以选择官方主题，也可以使用自定义主题。

插件

saber.js 可以使用插件扩展各种功能。

Markdown 插件

Markdown 插件支持更多的 Markdown 语法。其中，比较流行的有：

• @saber/plugin-highlight：代码高亮插件。
• @saber/plugin-renderer-vue：在 Markdown 中使用 Vue 组件。
• @saber/plugin-md-enhance：增强 Markdown 语法。

可以通过以下命令安装插件：

npm install @saber/plugin-highlight --save

之后，在 saber-config.yml 文件中启用插件：

plugins:
  - @saber/plugin-highlight

其他插件

saber.js 还支持其他插件，比如：

• @saber/plugin-pwa：使站点支持离线访问和推送通知。
• @saber/plugin-search：添加搜索功能。

部署

静态站点托管服务

可以使用静态站点托管服务将站点部署到互联网上。比较流行的有：

• Netlify：提供免费的静态网站托管服务。
• Vercel：提供免费的静态网站托管服务，支持自动化部署。

部署到 Netlify 的步骤：

1. 在 Netlify 注册账号并登录。
2. 点击「New site from Git」，选择仓库和分支。
3. 在「Build command」中填写 saber build。
4. 在「Publish directory」中填写 public。
5. 点击「Deploy site」，等待构建完成。

Github Pages

可以使用 Github Pages 将站点托管到 Github 上。具体操作如下：

1. 在 Github 中创建一个新的仓库，命名为「你的用户名.github.io」。

2. 在本地项目根目录下执行以下命令：

   saber deploy

3. 选择 Github Pages 选项，并输入仓库路径。

4. 提交代码并推送到 Github。

部署到 Github Pages 的优点在于免费且部署方便。

总结

本文介绍了如何使用 saber.js 建立一个静态站点，并讲解了插件的使用方法和部署方式。通过学习本文，读者可以快速上手 saber.js，并且可以通过插件进行二次开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7c81e8991b448e5fa2