使用 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 中的以下部分，因为引导程序需要 <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 链接？
【问题讨论】：
【参考方案1】：在这种情况下，您不需要在<a> 标记的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，然后从 URLhttps://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 创建引导轮播的主要内容，如果未能解决你的问题，请参考以下文章