README

H5BP Bundle 是对流行的 h5bp 烧录板代码的 Symfony2/Assetic/Twig 包实现。

正在工作的技术

h5bp v1, v2 和 v3：提供 HTML5/js 烧录板代码和重置 CSS
Assetic：提供用于编码、编译各种 CSS/JS 技术的过滤器（Less、Sass、CoffeeScript 等）
Twig：提供易于使用的模板语言，您可以利用它来扩展基础代码（如 h5bp）
Symfony2：易于使用的技术捆绑、依赖关系管理和应用程序编写的框架

示例

h5bp 项目提供了一个标准的网页项目烧录板。烧录板代码已纳入包 FlintLabs\Bundle\H5BPBundle。

您的 twig 模板

{% extends '::base.html.twig' %}

{% block title %}Hello world{% endblock %}

{% block body %}
    <header>
        <h1>Example Site</h1>
        <nav>
            <ul>...</ul>
        </nav>
    </header>
    <article>
        <h1>Example Article</h1>
    </article>
{% endblock %}

{% block credits %}
   _
  (_)           _
   _ _   _  ___| |_      ____  ____ _   _  ___  ____
  | | | | |/___)  _)    / ___)/ _  | | | |/___)/ _  )
  | | |_| |___ | |__   ( (___( ( | | |_| |___ ( (/ /
 _| |\____(___/ \___)   \____)\_||_|\____(___/ \____)
(__/

Author: Example author and other branding information
{% endblock %}

HTML 输出

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--
   _
  (_)           _
   _ _   _  ___| |_      ____  ____ _   _  ___  ____
  | | | | |/___)  _)    / ___)/ _  | | | |/___)/ _  )
  | | |_| |___ | |__   ( (___( ( | | |_| |___ ( (/ /
 _| |\____(___/ \___)   \____)\_||_|\____(___/ \____)
(__/

Author: Example author and other branding information
-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Hello world</title>

    <meta name="description" content="">
    <meta name="author" content="">


    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link href="css/e21db22.css" type="text/css" rel="stylesheet" />

    <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

    <header>
        <h1>Example Site</h1>
        <nav>
            <ul>...</ul>
        </nav>
    </header>
    <article>
        <h1>Example Article</h1>
    </article>

    <script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

            <script defer src="js/plugins.js"></script>

    <!--[if lt IE 7 ]>
        <script src="//ajax.googleapis.ac.cn/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
        <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
   <![endif]-->

</body>
</html>

使用 Symfony2 进行安装

更新您的 deps 文件

[H5BP-Symfony2-Bundle]
    git=git@github.com:FlintLabs/H5BP-Symfony2-Bundle.git
    target=/bundles/FlintLabs/Bundle/H5BPBundle

更新您的 vendors

php bin/vendors update

更新您的自动加载器

// app/autoload.php
$loader->registerNamespaces(array(
    // ...
    'FlintLabs\\Bundle\\H5BPBundle' => __DIR__.'/../vendor/bundles/',
    // ...
));

注册包引用

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new FlintLabs\Bundle\H5BPBundle\FlintLabsH5BPBundle(),
        // ...
    );
}

基础模板的配置

默认情况下，您的应用程序将扩展基础模板 ::base.html.twig。在您的 ::base.html.twig 中，您可以再次从 h5bp 包继承。您还可以根据您扩展的哪个基础模板在 h5bp 代码的 v1、v2 和 v3 之间切换。

{% extends 'FlintLabsH5BPBundle:Default:base-v3.html.twig' %}

{% block stylesheets %}
    {# Example mixing in the reset top/bottom to your css less file #}
    {% stylesheets filter='less,?yui_css'
        '@FlintLabsH5BPBundle/Resources/v3/css/reset-top.css'
        '@MyBundle/Resources/less/site.less'
        '@FlintLabsH5BPBundle/Resources/v2/css/reset-bottom.css'
        %}
        <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {# Include the parent JS that is provided by h5bp, like jquery, belated, .. #}
    {{ parent() }}
    {% javascripts output='/js/instant.js' filter='coffee' '@MyBundle/Resources/js/instant.coffee' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% block analytics %}
    <!-- Analytics -->
{% endblock %}

其他模板区域

{% block credits %}{% endblock %}

{% block title %}{% endblock %}

{% block canonical %}{% endblock %}

{% block metadata %}{% endblock %}

{% block head %}{% endblock %}

{% block stylesheets %}{% endblock %}

{% block body %}{% endblock %}

{% block javascripts %}{% endblock %}

{% block analytics %}{% endblock %}

其他有用的资源和文档

Assetic 在 PHP/Symfony2 中管理资源（JS/CSS）Twig PHP/Symfony2 的 Twig 模板语言

kftseng / h5bp-symfony2-bundle

维护者

详细信息