欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 安装预览篇 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 环境变量篇 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 视图布局篇 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 站点部署篇

星期二, 2019-03-05 01:31 — adminshiping1

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 安装预览篇

 发布于   学院君  2618 Views        
   

1、简介        

Jigsaw 是一个基于 Laravel Blade 语法生成静态站点的扩展包。安装之前，确保系统已经安装 PHP 5.5+，如果要使用Elixir 编译 CSS 和 JavaScript 的话还需要安装 Node.js 和 NPM。

2、安装        

全局安装        

我们可以通过Composer全局安装Jigsaw：

composer global require tightenco/jigsaw
       

本地安装        

如果全局安装Jigsaw有依赖冲突，也可以为每个项目进行本地安装。

首先我们需要创建一个站点目录：

mkdir my-site && cd my-site
       

然后通过Composer本地安装Jigsaw：

composer require tightenco/jigsaw
       

初始化站点        

如果是全局安装的话，可以在web根目录下运行如下命令初始化一个新站点：

jigsaw init my-site
       

这将会在当前目录下生成一个新的名为my-site的新站点。

如果是在本地安装的话，可以在项目目录下运行如下命令初始化新的站点：

./vendor/bin/jigsaw init
       

这也会为新站点生成目录结构和相应文件。

站点目录结构        

无论是通过哪种方式，生成的静态站点目录结构如下：

jigsaw-structure        

其中，source目录包含了站点的实际内容，这里面存放了站点的所有页面、CSS、JavaScript、图片等资源。

在项目根目录下，Jigsaw提供了gulpfile.js和package.json用于编译前端资源，以及一个config.php文件用于指定在模板中有效的变量。

4、构建&预览        

构建站点        

如果你想要生成站点，需要在项目根目录下运行如下命令：

jigsaw build
       

Jigsaw将会在build_local目录下生成静态HTML：

jigsaw-build-local        

预览站点        

如果你跟我一样，是在Mac下使用Valet作为开发环境，那么此时你已经可以在浏览器中通过my-site.dev访问静态站点了。

如果不是的话要想快速预览，可以在项目根目录下运行如下命令：

jigsaw serve
       

这样，你就可以在浏览器中通过http://localhost:8000/来预览站点。

如果你使用Elixir来编译前端资源，还可以通过Browsersync来预览站点：

gulp watch
       

Browsersync可以自动打开一个浏览器标签页，并在你每次修改之后重新加载页面。这对快速预览更改而言很方便！

本系列教程：        

  1 人觉得这篇文章很有用

学院君    

学院君 has written 1095 articles

Laravel学院院长，终身学习者

积分：140147 等级：P12 职业：手艺人 城市：杭州        

1 条回复

  1. study study says:                    
    正好需要这种，制作一个cms站点
      回复                        
     感谢 (0)                    

来自 https://laravelacademy.org/post/6504.html


使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 ——  环境变量篇

 发布于   学院君  1806 Views        
   

jigsaw-variable        

1、站点变量        

任意添加到config.php数组中的变量都会在模板中生效。例如，我们这样配置config.php：

<?php

return [
    'site_name' => 'Laravel学院',
];
       

然后修改source/index.blade.php内容如下：

@extends('_layouts.master')

@section('body')
    <h1>Welcome to {{ $site_name }}</h1>
@endsection
       

接下来运行 jigsaw build 重新构建应用，此时我们再看build_local/index.html，会发现其中的内容发生了改变：

<body>
    <h1>Welcome to Laravel学院</h1>
</body>
       

2、环境        

通常我们可能需要在开发环境和生产环境使用不同的变量，例如，在生产环境我们需要渲染Google Analytics代码，而在开发环境则不需要渲染。

Jigsaw通过为不用环境创建不同的配置文件来轻松解决这一问题，我们的基础config.php内容可能是这样：

return [
    'site_name' => 'Laravel学院',
    'site_url' => 'http://dev.laravelacademy.org'
];
       

我们在此基础上为生产环境创建的配置文件为config.production.php：

return [
    'site_url' => 'http://laravelacademy.org',
];
       

我们只是重写了site_url变量，site_name则保持和config.php一致。

构建指定环境        

要构建指定环境，只需在运行jigsaw build命令的时候指定环境参数即可：

jigsaw build production
       

这将为生产环境生成新的站点目录build_production。

3、Blade模板        

关于Blade模板这里不多赘述，参考Laravel官方文档Blade部分即可：http://laravelacademy.org/post/5919.html。

本系列教程：        

  2 人觉得这篇文章很有用

学院君    

学院君 has written 1095 articles

Laravel学院院长，终身学习者

积分：140147 等级：P12 职业：手艺人 城市：杭州        

0 条回复



来自 https://laravelacademy.org/post/6511.html


使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 视图布局篇

 发布于   学院君  2329 Views        
   

使用模板语言最大的好处之一就是可以创建可复用的整体布局和局部视图。

1、定义整体布局        

布局本身只是包含一个或对个@yield调用（用于渲染子视图内容）的基本Blade模板。

一个基本的布局文件内容如下：

<!DOCTYPE html>
<html>
    <head>
        <title>The Amazing Web</title>
    </head>
    <body>
        <header>
            My Amazing Site
        </header>

        @yield('contents')

        <footer>
            <p>©2016 Awesome Co</p>
        </footer>
    </body>
</html>
       

Jigsaw开箱提供的source/_layouts目录就包含了这个基本布局视图文件。

2、继承布局        

要继承一个布局，需要创建一个视图模板并通过@extends指令来指定继承哪一个布局，并使用@section指令来指定渲染哪一部分：

@extends('_layouts.master')

@section('contents')

<div>
    <p>The contents of my amazing homepage.</p>
</div>

@endsection
       

布局和局部视图文件的引用都是通过.对目录层级进行分隔并且相对于source根目录，同时省略了.blade.php。

关于Blade布局请参考Blade官方文档。

3、局部视图        

要在一个模板中引入另一个模板，使用@include指令：

<!DOCTYPE html>
<html>
    <head>
        <title>The Amazing Web</title>
    </head>
    <body>
        @include('_partials.header')

        @yield('contents')

        @include('_partials.footer')
    </body>
</html>
       

你可以在第二个参数中以关联数组的方式传递数据到局部视图：

<!DOCTYPE html>
<html>
    <head>
        <title>The Amazing Web</title>
    </head>
    <body>
        @include('_partials.header', ['page_title' => 'My Amazing Site'])

        @yield('contents')
 
        @include('_partials.footer')
    </body>
</html>
       

传递过去的变量就可以被有效使用：

<!-- _partials/header.blade.php -->
<header>
    {{ $page_title }}
</header>
       

4、防止布局/局部视图被渲染        

要阻止文件或文件夹被渲染，需要加上_前缀：

layouts-directory        

Jigsaw默认提供了一个_layouts文件夹，不过只要你使用了_前缀，就可以任意创建你所需要的文件或文件夹。

例如，如果你想要在某个地方存放所有局部视图，可以创建一个_partials目录：

partials-directory        

由于_partials目录以_开头，这些文件不会在生成站点时被渲染，但是仍然可以在其他模板中通过@include指令引入。

本系列教程：        

  0 人觉得这篇文章很有用

学院君    

学院君 has written 1095 articles

Laravel学院院长，终身学习者

积分：140147 等级：P12 职业：手艺人 城市：杭州        

0 条回复

           

    登录后才能进行评论，立即登录?        

    来自 https://laravelacademy.org/post/6521.html



    使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇

     发布于   学院君  3149 Views        
       

    1、Markdown        

    有些页面你更想使用Markdown而不是Blade？在Jigsaw中使用Markdown很简单，只需要创建以.markdown或.md为文件扩展名的文件即可，并且以YAML front matter的方式指定细节。

    例如，假设你有这样的布局并且想要以Markdown文本填充content部分：

    <html>
    <head>...</head>
    <body>
        @yield('body')
    </body>
</html>
           

    如果这个布局使用了_layouts目录下的master布局，就可以像这样创建一个使用该布局的Markdown文件：

    markdown-source        

    最终生成的页面内容如下：

    markdown-build        

    这样我们就可以在浏览器中通过http://jigsaw.dev/markdown来访问以Markdown格式编辑的页面。

    自定义front matter变量        

    下面我们来看一些更加复杂的设置，假设你在_layouts目录下有一个名为post.blade.php的布局文件：

    @extends('_layouts.master')

@section('content')
    <h1>{{ $title }}</h1>
    <h2>by {{ $author }}</h2>

    @yield('postContent')
@endsection
           

    你可以通过添加键到 YAML front matter 来填充$title和$author：

    markdown-variable-set        

    构建之后最终生成的文件内容如下：

    markdown-variable-build        

    通过http://jigsaw.dev/markdown/content即可访问该页面。

    2、编译前端资源        

    Jigsaw站点开箱支持Laravel Elixir，如果你在Laravel项目中使用过Elixir，也就知道如何在Jigsaw中使用Elixir。

    设置环境        

    开始之前，确保已经安装了Node.js和NPM并配置好环境。

    安装好了之后，拉取需要的依赖以便编译资源：

    npm install
           

    更多安装细节，请参考完整的Elixir文档。

    组织前端资源        

    默认情况下，所有你想处理的前端资源都位于source/_assets目录：
    assets-source
    Elixir会遍历子目录下每个资源文件的文件类型（如Sass、Less或Coffeescript），我们建议遵循这种约定以避免额外的配置。

    默认情况下，一旦前端资源编译之后，它们就会被放置到source目录下相应的位置：
    assets-compiled
    如果你想要修改前端资源编译的源目录和目标目录，可以编辑gulpfile.js中的这两行：

    elixir.config.assetsPath = 'source/_assets';
elixir.config.publicPath = 'source';
           

    启用不同的预处理器        

    Jigsaw开箱处理如下的gulpfile.js并配置为使用Sass：

    var gulp = require('gulp');
var elixir = require('laravel-elixir');
var argv = require('yargs').argv;

elixir.config.assetsPath = 'source/_assets';
elixir.config.publicPath = 'source';

elixir(function(mix) {
    var env = argv.e || argv.env || 'local';
    var port = argv.p || argv.port || 3000;

    mix.sass('main.scss')
        .exec('jigsaw build ' + env, ['./source/*', './source/**/*', '!./source/_assets/**/*'])
        .browserSync({
            port: port,
            server: { baseDir: 'build_' + env },
            proxy: null,
            files: [ 'build_' + env + '/**/*' ]
        });
});
           

    如果你想要切换到Less、使用Coffeescript、或者利用其它的Elixir特性，可以按照自己的所需对这个文件进行编辑。

    下面是一个使用Less和CoffeeScript的例子：

    var gulp = require('gulp');
var elixir = require('laravel-elixir');

elixir.config.assetsPath = 'source/_assets';
elixir.config.publicPath = 'source';

elixir(function(mix) {
    mix.less('main.less')
       .coffee('scripts.coffee')
       .exec('jigsaw build', ['./source/**/*', '!./source/_assets/**/*'])
       .browserSync({
            server: { baseDir: 'build_local' },
            proxy: null,
            files: [ 'build_local/**/*' ]
       });
});
           

    编译资源        

    要编译资源，可以使用如下命令：

    gulp
           

    编译之后，会自动运行jigsaw build，这样就可以在浏览器中预览更改。

    监听修改        

    每次手动运行gulp让修改生效很麻烦，取而代之地，你可以运行如下命令让修改生效：

    gulp watch
           

    项目中任意时间任意文件的修改，资源都会被重新编译并且Jigsaw都会重新生成静态HTML页面。

    使用gulp watch还会启用Browsersync，这样浏览器会在修改的时候自动刷新，此外，它还会为你管理本地站点服务，而不必启动本地PHP服务器。

    还可以通过--env标识指定要监听的环境：

    gulp watch --env=staging
           

    本系列教程：        

      1 人觉得这篇文章很有用

    学院君    

    学院君 has written 1095 articles

    Laravel学院院长，终身学习者

    积分：140147 等级：P12 职业：手艺人 城市：杭州        

    0 条回复

             

      登录后才能进行评论，立即登录?        

      来自  https://laravelacademy.org/post/6526.html


      使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 站点部署篇

       发布于   学院君  3249 Views        
         

      1、美化URL        

      默认情况下，所有非index.blade.php文件都会被生成为对应子目录下的index.html，例如如果你在source目录下有一个about-us.blade.php：

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

      最终将会生成build_local/about-us/index.html：

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

      这意味着，关于我们页面的URL是http://example.com/about-us/，而不是http://example.com/about-us.html。

      注：你可以在构建站点时通过--pretty=false选项来关闭这一默认设置。

      2、站点部署        

      由于Jigsaw只是静态HTML和JavaScript，部署起来非常简单，也非常廉价。

      使用Github Pages        

      Github Pages免费为Github提供的静态站点提供托管主机，开始之前，先查看其文档理解其工作原理。

      我们部署Jigsaw站点到Github Pages的方式是这样的：

      1）为生成环境构建站点：

      gulp && jigsaw build production
             

      2）提交build_production目录到仓库：

      git add build_production && git commit -m "Build for deploy"
             

      3）使用git subtree push只推送build_production目录到gh-pages分支：

      git subtree push --prefix build_production origin gh-pages
             

      手动部署        

      如果你已经有了一个服务器（如阿里云ECS）可以为Jigsaw站点提供托管主机，所有需要做的只是在web根目录下获取build_production的内容，并且在web服务器（如nginx）中将站点URL指向这里。

      本系列教程：        

        1 人觉得这篇文章很有用

      学院君    

      学院君 has written 1095 articles

      Laravel学院院长，终身学习者

      积分：140147 等级：P12 职业：手艺人 城市：杭州        

      0 条回复

      来自  https://laravelacademy.org/post/6534.html

      普通分类: 
      laravel
      Powered by Drupal

      友情链接

      校园好文网

       www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2