Cleaver —— 基于 Laravel Blade 的静态页面生成工具

tl;dr: github.com/aschmelyun/cleaver 以获取更多信息

我知道您大概在想什么, “哦, 又一个 静态网站生成器”。 而且您说的没错，但我希望我创建的内容与您接触过的内容有所不同。

相较于尽量给多人提供多种功能, 又或是尽量对每个人都友好， 我更愿意努力将Cleaver设计得 对开发人员开放。

在后台，它是一个非常简单的应用程序，其核心仅有700余行代码。

它从何而来？

它的诞生源于解决我的痒点，Cleaver设计的初衷是帮助我 快速构建以数据驱动的登陆页。 我在市场上与其他SSG的问题在于， 您通常会在Markdown或是生成器所使用的语言之间纠结。 对于博客或任何内容密集型网站来说，这不会是个问题，但我在尝试构建文档网站和在线规范表时遇到了一个问题。

我真的希望能够通过JSON构建网站，就像从API获取数据返回给我一样。所以，我就是这样创建了它！

Cleaver使用本地保存的JSON文件，并使用提供的键将其中的数据直接解析为PHP变量。这将传递给Laravel的Blade模板引擎，然后将所有内容编译成静态HTML文件，并保存在您设置的目录树中。

那么，举个栗子，您的JSON如下所示：

{
    "view": "layouts.default",
    "path": "/posts/a-whole-new-world",
    "title": "A Whole New World",
    "description": "Shining, shimmering, splendid.",
    "items": [
        "Three Forks",
        "Seven Spoons",
        "One Butter Knife"
    ]
}

转换成PHP变量后如下所示：

$view 
"layouts.default"

$path
"/posts/a-whole-new-world"

$title
"A Whole New World"

$description
"Shining, shimmering, splendid."

$items
array("Three Forks", "Seven Spoons", "One Butter Knife")

这些数据将传递到资源目录中您选择的Blade模板 (在本例中是 views/layouts/default.blade.php) 。之后就可以像中Laravel应用程序中一样使用它们：

<h1>{{ $title }}</h1>
<h4>{{ $description }}</h4>
<ul>
    @foreach($items as $item)
        <li>{{ $item }}</li>
    @endforeach
</ul>

通过简单的 npm run dev 脚本编译网站后，它将已经渲染好的静态HTML文件保存在/dist 目录下的posts/a-whole-new-world/index.html文件中。

您可以在包含 usecleaver.com 登陆页 这里看到更好的例子。

入门

您需要确保在计算机上安装了以下软件：

• PHP
• Composer
• Node
• NPM

开始创建Cleaver站点的最简单方法是运行以下命令：

composer create-project aschmelyun/cleaver your-site-name

这将从 repo 下载最新版本的Cleaver，安装所需的软件包，并将所有内容转储到名为 your-site-name的文件夹中。当然，请更改它以反映您实际想要的站点目录。

在你的终端中导航到新建文件夹，然后运行以下命令来安装所需的 node 包，并开始编译你的站点：

npm install && npm run dev

大约几分钟后，你的站点应该已经成功构建，其中包含演示内容(精简版usecleaver.com/docs页面)，并添加到工程根目录下的一个/dist文件夹中。

让我们继续翻开新的一页。

创建和构建页面

用于构建你的站点的所有内容都位于resources/content目录中。在这里，你可以添加JSON 和 Markdown 文件，你可以为这些文件用你认为合适的任何特定方式组织和命名。与许多其他静态站点生成器不同，你的内容目录结构不会影响已建站点的结构。

在每个内容文件中，必须设置两个键才能成功编译页面。这两个是view和path。让我们看看它们每一个都做了什么，为什么它们很重要：

• view 页面编译所依据的模板。你可以在指定的文件中使用和包括其他模板，但将使用该模板进行构建。
• path 是在 Cleaver 运行后，此页面将在你的dist目录中结束的位置。例如，如果你有一个名为 myblog.com 的站点，并且希望此页面存在于 myblog.com/post/a-Cool-post ，则路径值将为/post/a-Cool-post。

如前所述，Cleaver 既接受 JSON 文件，也接受 Markdown。下面是一个用于相似页面的示例：

两者之间最大的区别在于在 Blade 模板中访问数据的方式。

对于 JSON 内容文件，每个键都用作单独的变量。因此，在上面的示例中，你将引用单个$title字符串和一个$paragraphs字符串数组。

然而，在使用 Markdown 时，最后三个破折号以下的所有内容都作为一个$content变量注入。如果使用此选项，Blade 的未转义输出快捷方式 {!! $content !!} 将呈现从 Markdown 文件编译而来的正确 HTML 标记。

修改静态资源

Cleaver 使用 Sass 文件进行样式设置，并自动加载到 Tailwind css 实用程序库中。你可以在resources/sets/sass目录下添加自己的样式，也可以覆盖当前配置的样式。默认情况下，其中有一个名为app.scss的文件，该文件仅导入 Tailwind 库，但可以自由导入你自己的 Sass 文件，或者根据需要添加和删除自定义类。

导航到resources/sets/js目录，你将看到一个名为app.js的 JavaScript 文件。 就像样式一样，Cleaver 在这里有一个非常基本的方法。这个文件所做的就是导入 lodash、JQuery 和 Vue，为你的站点提供一个现代化且可扩展的起点来实现前端功能。因为我们通过 Laravel 的 webpack 包装器 Mix 获取所有内容，所以你可以在整个 JavaScript 中使用 ES6 语法和 import/require 语句。

构建和部署

要编译静态资源并使用内容文件构建静态站点，你只需从项目的根目录运行以下命令之一：

npm run dev or npm run production

两者都将编译你所有的 CSS/JS 并构建站点，但是运行 production 将精简和版本化你的静态资源文件。后者确实需要更长一点的时间，但如果你要将站点部署到生产环境中，则建议使用后者。

此外，你还可以使用npm run watch，它会启动本地 web 服务器并查看你的静态资源和内容文件的所有更改，每次保存更改时都会重新编译整个站点。

一旦你构建了站点，整个标记树和静态资源就可以在项目根目录下的dist目录中使用。你可以将此文件直接上传到 Web 服务器的公共根目录并以此方式提供服务，也可以提交整个项目并调整 Web 服务器的公共文件夹以指向dist目录。

注意:如果你想编译你的站点，而不是静态资源，你可以直接从项目根目录运行php cleaver命令。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

---

原文地址：https://dev.to/aschmelyun/cleaver-a-blaz...

译文地址：https://learnku.com/php/t/51146