Question

我是Bootstrap和Symfony2 / Twig的新手。

我想在bootstrap中创建一个旋转木马但是使用Twig模板引擎。我的基本模板如下所示：

    <!DOCTYPE html>
<!-- /src/xxx/blodBundle/Resources/views/base.html.twig -->
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head>
        {% block head %}
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>{% block title %}Default for variable title part{% endblock %} - constant title part</title>
            <!--[if lt IE 9]>
               <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->

            {% block stylesheets %}
                <link rel="stylesheet" href="{{ asset('bundles/xxxblog/css/bootstrap.min.css') }}" type="text/css" />
                <link rel="stylesheet" href="{{ asset('bundles/xxxblog/css/main.css') }}" type="text/css" />
                <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
            {% endblock %}
        {% endblock %}
    </head>
    <body>
        {% block body %}
            <div id="wrap">
                <header id="header">
                    {% block header %}
                        {% block carousel %}
                            <h1>Page Name</h1>
                        {% endblock %}
                        {% block navigation %}
                            <nav>
                                <ul class="navigation">
                                    {% block navigation_elements %}
                                        <li><a href="{{ path('page_impressum') }}">Impressum</a></li>                    
                                    {% endblock %}
                                </ul>
                            </nav>
                        {% endblock %}
                    {% endblock %}
                </header>

                <section class="content">
                    {% block content %}Default Content-Area{% endblock %}
                </section>

                <aside class="sidebar-right">
                    {% block sidebarright %}Right Sidebar{% endblock %}
                </aside>

                <aside class="sidebar-left">
                    {% block sidebarleft %}{% endblock %}
                </aside>

                <div id="footer">
                    {% block footer %}
                        Maybe a link to your privacy settings, a link to Symfony2, whatever.
                    {% endblock %}
                </div>
            </div>

            {% block javascripts %}
                <script src="{{ asset('/js/jquery/jquery.js') }}"></script>
                <script src="{{ asset('/js/bootstrap.min.js') }}"></script>
            {% endblock %}
        {% endblock %}
    </body>
</html>

index.xhtml.twig：

{% extends "xxxblogBundle::base.html.twig" %}

{% block title %}Index Page{% endblock %}

{#{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        $('.carousel').carousel();
    });
</script>
{% endblock %}#}

{% block carousel %}
    <div id="index-carousel" class="carousel slide"  data-ride="carousel">
        {#Indicators#}
        <ol class="carousel-indicators">
            <li data-target="#index-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#index-carousel" data-slide-to="1"></li>
            <li data-target="#index-carousel" data-slide-to="2"></li>
        </ol>

        {#Wrapper for slides#}
        <div class="carousel-inner">
            <div class="item active">
                <h2>IMAGE 1</h2>
                <div class="carousel-caption">
                    <h4>Image 1 Label</h4>
                    <p>Lorem ipsum dolor sit amet</p>
                </div>
            </div>
            <div class="item">
                <h2>IMAGE 2</h2>
                <div class="carousel-caption">
                    <h4>Image 2 Label</h4>
                    <p>consectetur adipisicing elit</p>
                </div>
            </div>
            <div class="item">
                <h2>IMAGE 3</h2>
                <div class="carousel-caption">
                    <h4>Image 3 Label</h4>
                    <p>sed do eiusmod tempor incididunt</p>
                </div>
            </div>
        </div>

        {#Controls#}
        <a class="left carousel-control" href="{{ path('page_index') }}" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="{{ path('page_index') }}" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
{% endblock %}

PageController.php：

/**
 * @Route("/")
 */
class PageController extends Controller {

    /**
     * @Route("/index", name = "page_index")
     * @Template()
     */
    public function indexAction() {
        return $this->render("xxxblogBundle:Page:index.html.twig");
    }
}

真正有趣的部分是index.html.twig的以下部分，因为bootstrap需要具有<div>类的.carousel的ID。它应该是这样的：

{#Controls#}
    <a class="left carousel-control" href="#index-carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#index-carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

同时，Twig期望控制器可以处理相同的属性href，可能是这样的：

<a class="left carousel-control" href="{{ path('page_index') }}" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>

所以我的问题是如何通过href属性为bootstrap提供所需的ID，并告诉twig同时不转发或类似的东西，因为这是一个html链接？

Answer 1

在这种情况下，您无需在href标记的<a>部分插入新的（树枝）路径。就像你说你需要它一样，就像

一样

<a class="left carousel-control" href="#index-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>

在树枝上，你不必在你拥有的每个href或src上输入路径。就在你需要的时候。

使用Symfony2 / Twig创建bootstrap轮播

1 个答案: