前言
saber.js 是一个 Vue 驱动的基于 Markdown 的静态站点生成器。它灵活、易于使用，并支持多个主题。本文将介绍如何在前端开发中使用该工具。
安装与配置
安装
saber.js 可以通过 npm 进行安装：
--- ------- -- ---------
创建项目
使用以下命令创建一个项目：
----- ------ ----------
其中，my-project 是项目名称。
运行
进入项目文件夹，执行以下命令启动 Web 服务器：
----- ---
在浏览器中打开 http://localhost:3000，就可以看到页面了。
配置
saber.js 的配置文件为 saber-config.yml，位于项目根目录下。可以在该文件中对站点进行配置。下面是一个示例配置：
------ --- ----- ------------ ----- -- -- ------- ----- ------ -------
该配置文件中包含了三个属性：
title：站点名称。description：站点描述。theme：使用的主题。可以选择官方主题，也可以使用自定义主题。
插件
saber.js 可以使用插件扩展各种功能。
Markdown 插件
Markdown 插件支持更多的 Markdown 语法。其中，比较流行的有：
@saber/plugin-highlight：代码高亮插件。@saber/plugin-renderer-vue：在 Markdown 中使用 Vue 组件。@saber/plugin-md-enhance：增强 Markdown 语法。
可以通过以下命令安装插件：
--- ------- ----------------------- ------
之后，在 saber-config.yml 文件中启用插件：
-------- - -----------------------
其他插件
saber.js 还支持其他插件，比如：
@saber/plugin-pwa：使站点支持离线访问和推送通知。@saber/plugin-search：添加搜索功能。
部署
静态站点托管服务
可以使用静态站点托管服务将站点部署到互联网上。比较流行的有：
部署到 Netlify 的步骤：
- 在 Netlify 注册账号并登录。
- 点击「New site from Git」，选择仓库和分支。
- 在「Build command」中填写
saber build。 - 在「Publish directory」中填写
public。 - 点击「Deploy site」，等待构建完成。
Github Pages
可以使用 Github Pages 将站点托管到 Github 上。具体操作如下：
在 Github 中创建一个新的仓库，命名为「你的用户名.github.io」。
在本地项目根目录下执行以下命令：
----- ------
选择 Github Pages 选项，并输入仓库路径。
提交代码并推送到 Github。
部署到 Github Pages 的优点在于免费且部署方便。
总结
本文介绍了如何使用 saber.js 建立一个静态站点，并讲解了插件的使用方法和部署方式。通过学习本文，读者可以快速上手 saber.js，并且可以通过插件进行二次开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056c7c81e8991b448e5fa2