alexweissman/bootsole

一个可嵌套的对象式模板引擎，用于在PHP中生成美观的Bootstrap主题页面、表单、表格和其他组件。

维护者

详细信息

github.com/alexweissman/bootsole

主页

源代码

问题

安装: 137

依赖项: 0

建议者: 0

安全性: 0

星标: 22

关注者: 7

分支: 2

开放问题: 2

语言：JavaScript

v0.2.1 2015-01-31 00:26 UTC

Requires

  • php: >=5.4.0

MIT a059bb8cd3784c9630b3ae64c459dff3c4d0f8bd

php templatingphp formsbootstrap forms

This package is auto-updated.

Last update: 2024-09-16 07:13:20 UTC

README

注意：我已决定停止Bootsole的开发，至少是在当前的形式下。我仍然喜欢这个概念，但我感觉它对于大多数用途来说太复杂了。UserFrosting的新版本将使用更广泛接受的、更简单的模板语言Twig。

由Alex Weissman撰写

版权（c）2015

一个可嵌套的对象式模板引擎，用于在PHP中生成美观的Bootstrap主题页面、表单、表格和其他组件。

https://alexweissman.github.io/bootsole/

这是什么？

Bootsole是PHP网页开发的模板引擎。

为什么我们需要另一个模板引擎？为什么不使用Smarty或Twig呢？！ >:o

模板引擎的目的是将内容的表现与业务逻辑（即数据模型）分离。Smarty和Twig通过以下推理解决了这个问题

  • 我们需要一种方法来将表现与模型分离。
  • ...PHP太冗长，因此应该只用于处理模型。
  • ...让我们构建一个更简洁但更强大的元语言用于表现。
  • ...开发者将注意不要在元语言中构建过多的业务逻辑，并将其尽可能保留为表现逻辑。

这种方法在运行大型操作且“网页开发者”和“网页设计师”是两个不同的职位（或部门）时是有意义的。但如果你是一个通用的网页程序员，在一个小型操作中工作，你的主要关注点是快速开发和可重用、可维护的代码，那会很好。如果模板系统实际上可以使设计和组装真实的网页更快，那就更好了。这就出现了Bootsole。

Bootsole的重点是开发一个DRY（不要重复自己）的设计范式，以实现快速开发。它模拟了人类设计师对网页的思考方式——一个页面包含一个页眉、主体和页脚；主体可能包含一些表单和表格；每个表单将包含字段和按钮，等等。Bootsole的推理如下

  • 我们需要一种方法来将表现与模型分离。
  • ...让我们将“表现”部分尽可能保持最小。
  • ...模板应该是简单的、填空的HTML文档。
  • ...PHP冗长但强大，可以用来将我们的模型转换成可表现的形式。
  • ...当您准备好渲染它们时，只需告诉我将这些转换后的对象放在HTML模板的哪个位置即可。
  • ...我们可以通过提供通用功能通过<强>组件来最小化开发者需要编写的表现逻辑。开发者可以为特定项目需求扩展我们的组件。

通过一个广泛的类 层次结构，Bootsole允许您明确地将页面、表单、表格等声明为PHP对象。这些对象可以配置为设置内容和布局，修改和在整个项目中重用。在适当的情况下，它们可以嵌套在彼此内部。当准备好时，您只需在顶层对象上调用<代码>render，它就会递归地生成适当的HTML，包括自己和所有子对象。

依赖项

PHP

JavaScript/CSS（包含在此存储库中）

  • jQuery 1.10.2
  • Bootstrap 3.3.1
  • Tablesorter 2.17.7，包含分页和筛选小部件
  • FormValidation v0.6.1
  • FontAwesome 4.1
  • Bootstrap Switch 3
  • Select2 3.5.1
  • Bootstrapradio 0.1

安装

您可以通过Composer安装Bootsole，或者将其作为独立库安装。

使用Composer安装

  1. 如果您还没有安装，请获取Composer并安装它——最好是全局安装。
  2. 要求Bootsole，可以通过运行php composer.phar require alexweissman/bootsole，或者通过创建一个composer.json文件
{
    "require": {
        "php": ">=5.4.0",
        "alexweissman/bootsole": "0.2.0"
    }
}

并运行composer install。

  1. 在您的项目中包含vendor/autoload.php文件。有关如何实现的示例，请参阅public/site-config.php。

注意：Bootsole核心库完全包含在vendor/alexweissman/bootsole/bootsole/中。您不需要public目录——它仅包含Bootsole如何在PHP项目中使用的示例。

手动安装

将bootsole/子目录复制到您通常保存网站非公开资源的任何位置。如果您不知道“非公开资源”是什么意思，请参阅Organize Your Next PHP Project the Right Way。

如果您想运行预制的示例，可以将public目录的内容复制到您的网站公开目录中。

在没有Composer的情况下，您需要手动包含Bootsole的源文件。public/config-site.php文件将自动为您完成此操作——您可以将此代码移到项目的主配置文件中。

配置

Bootsole依赖于一些预定义的常量来正确地找到并渲染模板、JS和CSS包含等。您可以在bootsole/config-bootsole.php文件中找到这些常量。大多数默认值应该可以直接使用，但以下内容除外

PATH_PUBLIC_ROOT

这是您网站公共目录的本地（文件）路径。建议您将其声明为相对于config-bootsole.php文件的位置。例如，如果您的目录结构如下所示

- public_html/               // This is where we want PATH_PUBLIC_ROOT to point
  - js/
  - css/
  - <public-facing content>
- resources/
  - bootsole/
    - config-bootsole.php    // This is where PATH_PUBLIC_ROOT is defined
    - ...
  - <other libraries>

则可以将PATH_PUBLIC_ROOT设置为：define ("Bootsole\PATH_PUBLIC_ROOT", realpath(dirname(__FILE__) . "/../../public_html") . "/");

URI_PUBLIC_ROOT

正如您所知，文件路径不等于URL路径（尽管它们之间通常有很强的关系，尤其是在您没有使用URL路由系统的情况下）。因此，Bootsole需要知道您的网站公共URL是什么。

对于开发环境，这可能是这样的：https:///myproject/。

对于生产环境，这可能是这样的：https://mysite.com/。

基本用法

如果您已经使用Composer自动加载了库，那么您需要的只是

<?php

require_once "path/to/autoload.php";
use \Bootsole as BS;

...

否则，您需要手动按正确顺序包含文件。有关如何实现的示例，请参阅public/config-site.php。

然后，您可以开始定义和部署模板

Bootsole使用{{double handlebar}}表示法来表示模板中的占位符。

创建模板

$template = "
<div class='media'>
  <a class='media-left' href='#'>
    <img src='{{img_src}}' alt='{{img_alt}}' width='64' height='64'>
  </a>
  <div class='media-body'>
    <h4 class='media-heading'>{{heading}}</h4>
    {{body}}
  </div>
</div>";

然后，将内容赋值给占位符

$content = [
    "img_src" => "http://avatars1.githubusercontent.com/u/5004534?v=3&s=400",
    "img_alt" => "Lord of the Fries",
    "heading" => "Alex Weissman",
    "body" => "Alex has many years of experience in software development, including web development using MySQL, PHP, and Javascript frameworks including jQuery and Twitter Bootstrap. Alex maintains the frontend website for Bloomington Tutors, as well as a backend site..."
];

构造一个新的HtmlBuilder对象，设置模板，并渲染


use \Bootsole as BS;

$hb = new BS\HtmlBuilder($content);
$hb->setTemplate($template);
echo $hb->render();

输出

Basic Usage

<div class='media'>
  <a class='media-left' href='#'>
    <img src='http://avatars1.githubusercontent.com/u/5004534?v=3&s=400 alt='Lord of the Fries' width='64' height='64'>
  </a>
  <div class='media-body'>
    <h4 class='media-heading'>Alex Weissman</h4>
    Alex has many years of experience in software development, including web development using MySQL, PHP, and Javascript frameworks including jQuery and Twitter Bootstrap. Alex maintains the frontend website for Bloomington Tutors, as well as a backend site for managing tutor and client data and activity.
  </div>
</div>

哇，太棒了！到目前为止，这只是简单的查找和替换。但我们还可以在HtmlBuilder对象的内容中嵌套HtmlBuilder对象

嵌套模板对象

$jumbotron_template = "
    <div class='jumbotron'>
        <h1>{{heading}}</h1>
        {{body}}
    </div>";
    
$jumbotron_content = [
    "heading" => "Developers",
    "body" => $hb
];

$jumbotron = new BS\HtmlBuilder($jumbotron_content);
$jumbotron->setTemplate($jumbotron_template);
echo $jumbotron->render();

输出

Nested Templates

<div class='jumbotron'>
    <h1>Developers</h1>        
    <div class='media'>
      <a class='media-left' href='#'>
        <img src='http://avatars1.githubusercontent.com/u/5004534?v=3&s=400 alt='Lord of the Fries' width='64' height='64'>
      </a>
      <div class='media-body'>
        <h4 class='media-heading'>Alex Weissman</h4>
        Alex has many years of experience in software development, including web development using MySQL, PHP, and Javascript frameworks including jQuery and Twitter Bootstrap. Alex maintains the frontend website for Bloomington Tutors, as well as a backend site...
      </div>
    </div>
</div>

好吧，这有点酷。但如果我们需要一个开发者的整个列表怎么办？我们是否需要为每个开发者设置一个占位符？

当然不是！您也可以将HtmlBuilder对象的数组赋值给占位符。它们在渲染时会自动连接

嵌套模板对象的数组

$hb2 = new BS\HtmlBuilder([
    "img_src" => "http://ww2.hdnux.com/photos/02/25/67/613833/3/gallery_thumb.jpg",
    "img_alt" => "Rambo",
    "heading" => "Sylvester Stallone",
    "body" => "Sylvester Gardenzio Stallone, nicknamed Sly Stallone, is an American actor, screenwriter and film director.  Stallone is well known for his Hollywood action roles..."
]);
$hb2->setTemplate($template);

$hb3 = new BS\HtmlBuilder([
    "img_src" => "http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d0/d0877f614b8bb52813a63915be4da611cfa0ac2e_medium.jpg",
    "img_alt" => "John McClane",
    "heading" => "Bruce Willis",
    "body" => "Walter Bruce Willis, better known as Bruce Willis, is an American actor, producer, and singer. His career began on the Off-Broadway stage and then in television in the 1980s, most notably as David Addison in Moonlighting..."
]);
$hb3->setTemplate($template);

$jumbotron_template = "
    <div class='jumbotron'>
        <h1>{{heading}}</h1>
        {{body}}
    </div>";
    
$jumbotron_content = [
    "heading" => "Developers",
    "body" => [
        $hb1,
        $hb2,
        $hb3
    ]
];

$jumbotron = new BS\HtmlBuilder($jumbotron_content);
$jumbotron->setTemplate($jumbotron_template);
echo $jumbotron->render();

输出

Array Templates

<div class='jumbotron'>
    <h1>Developers</h1>
      
    <div class='media'>
      <a class='media-left' href='#'>
        <img src='http://avatars1.githubusercontent.com/u/5004534?v=3&s=400' alt='Lord of the Fries' width='64' height='64'>
      </a>
      <div class='media-body'>
        <h4 class='media-heading'>Alex Weissman</h4>
        Alex has many years of experience in software development, including web development using MySQL, PHP, and Javascript frameworks including jQuery and Twitter Bootstrap. Alex maintains the frontend website for Bloomington Tutors...
      </div>
    </div>
    
    <div class='media'>
      <a class='media-left' href='#'>
        <img src='http://ww2.hdnux.com/photos/02/25/67/613833/3/gallery_thumb.jpg' alt='Rambo' width='64' height='64'>
      </a>
      <div class='media-body'>
        <h4 class='media-heading'>Sylvester Stallone</h4>
        Sylvester Gardenzio Stallone, nicknamed Sly Stallone, is an American actor, screenwriter and film director.  Stallone is well known for his Hollywood action roles...
      </div>
    </div>
    
    <div class='media'>
      <a class='media-left' href='#'>
        <img src='http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d0/d0877f614b8bb52813a63915be4da611cfa0ac2e_medium.jpg' alt='John McClane' width='64' height='64'>
      </a>
      <div class='media-body'>
        <h4 class='media-heading'>Bruce Willis</h4>
        Walter Bruce Willis, better known as Bruce Willis, is an American actor, producer, and singer. His career began on the Off-Broadway stage and then in television in the 1980s, most notably as David Addison in Moonlighting...
      </div>
    </div>

</div>

当然可以，您能否从文件中加载模板？

当然可以，这实际上是一种首选方式。模板的路径（相对于根目录，PATH_TEMPLATES）是构建HtmlBuilder对象时可选的第二个参数

$hb = new BS\HtmlBuilder($content, "path/to/template.html");

好吧，我明白这很有用。但我并不真的擅长面向对象。我真的需要为我的网页的每个组件创建一个单独的对象吗？

这是个不错的主意，它可以帮助你保持组织。但如果你真的想的话，你可以在内容中直接定义子组件

隐式定义的子组件

$jumbotron_template = "
    <div class='jumbotron'>
        <h1>{{heading}}</h1>
        {{body}}
    </div>";
    
$jumbotron_content = [
    "heading" => "Developers",
    "body" => [
        "@template" => $template,
        "@content" => [
            "img_src" => "http://avatars1.githubusercontent.com/u/5004534?v=3&s=400",
            "img_alt" => "Lord of the Fries",
            "heading" => "Alex Weissman",
            "body" => "Alex has many years of experience in software development, including web development using MySQL, PHP, and Javascript frameworks including jQuery and Twitter Bootstrap. Alex maintains the frontend website for Bloomington Tutors..."            
        ]
    ]
];

$jumbotron = new BS\HtmlBuilder($jumbotron_content);
$jumbotron->setTemplate($jumbotron_template);
echo $jumbotron->render();

你会发现我们已经使用了两个特殊的指令，@template和@content，来直接在主"jumbotron"组件中定义子组件。当构造父HtmlBuilder时，它将使用@template中提供的模板和@content中提供的内容来自动构建一个子HtmlBuilder对象。您还可以使用@source指令传入模板文件的路径，而不是模板本身。

您可以使用@array指令为给定模板创建内容数组

$jumbotron_content = [
    "heading" => "Developers",
    "body" => [
        "@template" => $template,
        "@array" => [
            [
                "img_src" => "http://avatars1.githubusercontent.com/u/5004534?v=3&s=400",
                "img_alt" => "Lord of the Fries",
                "heading" => "Alex Weissman",
                "body" => "Alex has many years of experience in software development, including web development using MySQL, PHP, and Javascript frameworks including jQuery and Twitter Bootstrap. Alex maintains the frontend website for Bloomington Tutors..."            
            ],
            [
                "img_src" => "http://ww2.hdnux.com/photos/02/25/67/613833/3/gallery_thumb.jpg",
                "img_alt" => "Rambo",
                "heading" => "Sylvester Stallone",
                "body" => "Sylvester Gardenzio Stallone, nicknamed Sly Stallone, is an American actor, screenwriter and film director.  Stallone is well known for his Hollywood action roles..."
            ],
            [
                "img_src" => "http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d0/d0877f614b8bb52813a63915be4da611cfa0ac2e_medium.jpg",
                "img_alt" => "John McClane",
                "heading" => "Bruce Willis",
                "body" => "Walter Bruce Willis, better known as Bruce Willis, is an American actor, producer, and singer. His career began on the Off-Broadway stage and then in television in the 1980s, most notably as David Addison in Moonlighting..."
            ]
        ]
    ]
];

$jumbotron = new BS\HtmlBuilder($jumbotron_content);
$jumbotron->setTemplate($jumbotron_template);
echo $jumbotron->render();

使用@array而不是@content，您正在告诉HtmlBuilder该模板应该应用于分配给@array的数组中的每个子数组。渲染内容然后在渲染时连接。

说到指令，它们是什么？

指令

我们已经看到了@template、@content、@source和@array指令。所以，你可能已经明白了。但以防万一，指令是内容数组中的成员，它们在模板中不会作为字面占位符渲染。相反，您可以使用它们向HtmlBuilder传达特殊信息。例如，@template告诉HtmlBuilder我们正在传递一个模板，该模板应该应用于相应的@content或@array指令的内容。

Bootsole附带的一些特殊用途模板类还有其他指令。它们允许您访问特定类型的内容，例如NavbarBuilder或NavDropdownBuilder中的项，或者为TableColumnBuilder对象发出特殊行为的信号，如@display指令。

这些特殊用途类到底是什么？

很高兴您问这个问题 - 请在我们的网站上继续阅读！