使用 Symfony2/Twig 创建引导轮播

Posted

技术标签:

【中文标题】使用 Symfony2/Twig 创建引导轮播【英文标题】:Creating bootstrap carousel using Symfony2/Twig 【发布时间】:2014-03-19 14:11:59 【问题描述】:

我是 Bootstrap 和 Symfony2/Twig 的新手。

我想在引导程序中创建一个轮播,但使用 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 中的以下部分,因为引导程序需要 &lt;div&gt; 的 ID 和 .carousel 类。它应该是这样的:

#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 属性为引导程序提供它所需的 ID,并同时告诉 twig 不要转发或类似的东西,因为这是一个 html 链接?

【问题讨论】:

【参考方案1】:

在这种情况下,您不需要在&lt;a&gt; 标记的href 部分插入新的(树枝)路径。照你说的做,就像

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

在 twig 中,您不必在每个 href 或 src 处输入路径。就在你需要的时候。

【讨论】:

如果我使用轮播的ID,然后从url调用索引页面 如果我使用轮播的 ID,然后从 URL https://localhost/symfony-study/web/app_dev.php/index 调用索引页面,那么轮播将显示。但是当我尝试更改轮播幻灯片时,它不会更改,而是将轮播的 ID 附加到 URL 中,在本例中为 #index-carousel。它看起来像这样:https://localhost/symfony-study/web/app_dev.php/index#index-carousel。之前我假设 twig 试图转发我,这就是为什么我认为 twig 需要 href 属性的路径。

以上是关于使用 Symfony2/Twig 创建引导轮播的主要内容,如果未能解决你的问题,请参考以下文章

如何使用下一个 js 设置反应引导轮播的样式?

在引导轮播中加载多个谷歌图表

删除活动课程后,引导轮播不起作用

负边距如何在引导轮播中起作用?

引导轮播标题按钮不可点击

如何在引导轮播中使用 for 循环