【发布时间】：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 中的以下部分，因为引导程序需要 <div> 的 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 链接？
【问题讨论】：
标签： jquery html twitter-bootstrap symfony twig