如何在 Twig 模板中定义 css 链接的 href答案

【问题标题】：How to define the href of css link in Twig template如何在 Twig 模板中定义 css 链接的 href
【发布时间】：2014-07-08 22:56:27
【问题描述】：

我有以下应用结构：

index.php
<templates>
|____________ <theme1>
              |
              index.html 
              <css>
              |______________style.css

在 index.html 中如下代码：

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Foundation 5</title>

      <!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like -->
      <link rel="stylesheet" href="css/style.css">

在 index.php 中如下代码：

<?php
require_once("../twig/lib/Twig/Autoloader.php");
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem('templates/theme1/');
$twig = new Twig_Environment($loader, array(
                              'cache' => 'compilation_cache',
                              ));
$template = $twig->loadTemplate('index.html');
echo $template->render(array('desc' => 'variables', 'go' => 'here'));

我意识到 Twig 可以包含 css 文件的静态路径并对其进行修改。但是，我可以在href="{{?}}css/style.css"> 中的路径之前添加什么作为变量或其他内容以使其可供最终显示的页面访问？

注意我的应用程序非常简单，它不使用 symfony。我使用的是 twig 的 1.16.0 版本。

【问题讨论】：

也许你可以使用css的绝对路径？这也使得将它们添加到子路径中的页面变得简单 (example.com/foo/bar/something.html)。
@user3557327 这不是一个选项，因为从不同的 URL 访问网站会破坏设计，即 localhost, 127.0.0.1, domain.com, www.domain.com 等
只要它始终位于域的根目录中，您可以直接使用“/path/to/style.css”（注意起始斜杠）而不指定域。

标签： twig php twig template-engine

【解决方案1】：

我用有限的解决方案解决了它：如下：

在 index.php 中，我使用了 `$_SERVER['REQUEST_URI'] 并将其与主题路径连接，然后将它们设置在模板文件 index.html 中使用的 Twig 变量中：

<?php
/** Config **/
$config = array(
    'themeURI' => 'templates/theme1/',
);
/*****************/
require_once("../twig/lib/Twig/Autoloader.php");
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem($config['themeURI']);
$twig = new Twig_Environment($loader, array(
'cache' => 'compilation_cache',
'auto_reload' => true,
));
$template = $twig->loadTemplate('index.html');
echo $template->render(array('desc' => 'variables', 'themePath' => $_SERVER['REQUEST_URI'].$config['themeURI']));

然后在 index.html 中

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Foundation 5</title>

      <!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like -->
      <link rel="stylesheet" href="{{themePath}}css/style.css">

本方案的局限性 在根目录下的php文件中使用时，需要修改$config['themeURI']的值以相对匹配新路径，可能需要更改路径require 树枝的自动加载器也是。

【讨论】：

【解决方案2】：

试试这个

<?php
require_once("../twig/lib/Twig/Autoloader.php");
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem('templates/theme1/');
$twig = new Twig_Environment($loader, array(
                              'cache' => 'compilation_cache',
                              ));
$template = $twig->loadTemplate('index.html');
echo $template->render(array('desc' => 'variables', 'go' => 'here','assets'=>'themePath/theme1/assets'));

这是在你的模板里

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Foundation 5</title>

      <!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like -->
      <link rel="stylesheet" href="{{assets}}css/style.css">

【讨论】：