Symfony2 - 基于 CSS 的 .html 控制器响应

Posted 2023-03-06

【中文标题】Symfony2 - 基于 CSS 的 .html 控制器响应

【英文标题】：Symfony2 - controller response with CSS based .html

【发布时间】：2016-02-01 17:34:36

【问题描述】：

我最近开始使用 Symfony2 并创建了基本控制器：

    class HelloController extends Controller

    /**
     * @Route ("hello/name");
     */

    public function HelloAction($name)
    
        $htmlResp = $this->render('hello/hello.html.twig', array('userName'=>$name));
        $htmlResp->headers->set('Content-Type', 'text/html');
        return $htmlResp;
    

我的 hello.html 文件只是包含 bootstrap.css 的基本代码：

.
.
.
% block stylesheets %
        <!-- Bootstrap core CSS -->
        <link href=" asset('css/bootstrap.min.css') " rel="stylesheet" />
        <!-- Custom styles for this template -->
        <link href=" asset('starter-template.css') " rel="stylesheet" />
        <!--<script src="../../assets/js/ie-emulation-modes-warning.js"></script> -->
    % endblock %
.
.
.
% block body %
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
.
.
.

<div class="container">
        <div class="starter-template">
            <h1>Welcome!</h1>
            <p class="lead">Hello, my dear friend named :  userName </p>
        </div>

    </div><!-- /.container -->

% endblock %
.
.
.

（插入点以缩短不重要的代码片段）。

输入“localhost:8000/hello/SomeName”的结果是显示纯 html 网站（根本没有加载 CSS 文件）。

如果有任何提示如何强制它使用 CSS 加载和显示格式良好的网站，我将不胜感激。

【问题讨论】：

您安装了资产吗？ Assetic，最有可能管理您的 css，需要链接捆绑文件。你可能想要php app/console assets:install --symlink（见symfony.com/blog/…）

@tchap 我已经安装了它，但没有任何改变——仍然是纯 HTML。我使用的 bootstrap.min.css 没有复制到那个 web/bundle 目录中（只创建了一些奇怪的文件 - body.css、exception.css 和 structure.css）。

你能告诉我们你正在使用的基本模板吗？这是% extends ... % 子句中引用的那个。

你的css文件到底在哪里？

@hanzi 我根本没有使用任何基本模板。文件位于 Resources/views//css 和 html.twig 文件位于 Resources/views/.

【参考方案1】：

好的。如果我是你，我会这样做：

确保资产已安装 只是说清楚 - 将所有资产放在 web 目录中（此目录是公开的，因此当请求页面时，浏览器可以下载所需的文件）

准备基本模板。

在要渲染的模板中扩展基本模板（示例）

代码：

% extends "base.html" %

% block title %Index% endblock %

% block head %
    <!-- some content here -->
% endblock %

% block content %
     <!-- some content here -->
% endblock %

现在它是隔离且一致的，您可以将所有东西都包含在一个地方。 确保您的 css 文件的路径正确。如果您不确定，请查看页面源代码并尝试单击由asset() 生成的链接，看看它是否会将您带到该文件。

在基本模板中定义所有块，然后在其他模板中覆盖它们。