README

Puzzle 是一个简单的静态网站生成器，同时也提供了使用 REST 端点（或任何其他类型的端点）的机会。

使用 Jigsaw 提供模板引擎，类似于 Laravel 的 Blade，并将资源编译成静态网站。

使用 Grunt 自动化任务，提供无压力的开发体验和最佳的前端。

入门

全局安装

通过 Composer 全局安装 Puzzle

$ composer global require lordoffreaks/puzzle

确保 ~/.composer/vendor/bin 在你的 $PATH 中。
初始化新项目

$ puzzle init my-site

本地安装

如果你在尝试全局安装 Puzzle 时遇到依赖冲突，你始终可以在每个网站的基础上本地安装它。

为你的网站创建一个文件夹

$ mkdir my-site && cd my-site
通过 Composer 安装 Puzzle

$ composer require lordoffreaks/puzzle
在当前文件夹中初始化新项目

$ ./vendor/bin/puzzle init

构建你的第一个网站

构建 Puzzle 网站就像构建静态 HTML 网站一样，只不过以 .blade.php 结尾的文件将使用 Laravel 的 Blade 模板语言进行渲染。

在 /source 目录中根据你的喜好构建你的网站。它可能看起来像这样

├─ source
│  ├─ _assets
│  ├─ _layouts
│  │  └─ master.blade.php
│  ├─ img
│  │  └─ logo.png
│  ├─ about-us.blade.php
│  └─ index.blade.php
└─ config.php

当你想构建它时，从项目根目录中运行 build 命令

$ puzzle build

默认情况下，你的网站将被构建并放置在 /build_local 目录中。

使用上面的示例结构，你最终可能会得到这样的结果

├─ build_local
│  ├─ about-us
│  │  └─ index.html
│  ├─ img
│  │  └─ logo.png
│  └─ index.html
├─ source
└─ config.php

为了快速预览，启动本地 PHP 服务器

$ php -S localhost:8000/ -t build_local

布局

模板语言的最大优点之一是能够创建可重用的布局。

由于布局永远不应该单独渲染，你需要能够告诉 Jigsaw 哪些文件不应该被渲染。

为了防止文件或文件夹被渲染，只需在前面加上下划线即可

├─ source
│  ├─ _layouts
│  │  └─ master.blade.php # Not rendered
│  └─ index.blade.php     # Rendered
└─ config.php

配置变量

你添加到 config.php 中的任何内容都将作为变量在模板中使用。

例如，如果你的配置如下...

return [
    'contact_email' => 'support@example.com',
];

...你可以在模板中使用该变量，如下所示

@extends('_layouts.master')

@section('content')
    <p>Contact us at {{ $contact_email }}</p>
@stop

环境

你可能有一些特定的配置变量，在不同环境中需要不同，例如 Google Analytics 跟踪 ID。

Puzzle 允许你为每个环境指定不同的配置文件来处理这种情况。

要创建特定环境的配置文件，只需将环境名称放在文件扩展名前面

config.production.php

要为特定环境构建网站，使用 --env 选项

$ puzzle build --env=production

每个环境都有自己的 build_* 目录，因此在这种情况下，你的网站将放置在 build_production。

注意：特定环境的配置文件会与基础配置文件合并，因此您不需要重复填写不需要更改的值。

美观的URL

Puzzle会自动将所有不是以index命名的Blade文件渲染为子文件夹中的index.html，该子文件夹名称与原始文件相同。

例如，如果您在source目录中有一个名为about-us.blade.php的文件

├─ source
   ├─ _layouts
   ├─ about-us.blade.php
   └─ index.blade.php

...它将被渲染为index.html在build/about-us目录中

├─ build_local
   ├─ about-us
   │  └─ index.html 
   └─ index.html

如果您需要禁用此行为，在构建您的站点时使用--pretty=false选项。

lordoffreaks / puzzle

维护者

详情