你好，在这里，
非常感谢您点击这篇文章😁。
在上一篇文章中，我告诉过你，它闻起来像春天的味道，但现在，它已经明显降温了😅。
哦，是的，我们确实还没有在这里谈论天气……我很抱歉（嗯，我想是这样）。
本周，我们将使用 CSS，我们将完全打破 Twig，你会发现它很有趣，嗯，作为一种方法，它有点“不是很干净”，但是嘿，在这个博客上，我会告诉你一切。
无论如何，这周我们正在做艺术（这就是为什么本文使用绘画图像😛）
但为什么我需要这样做呢？
啊，好吧，仍然是一个“副项目”，你还记得预订应用程序吗 Symfony UX Turbo ？
与此同时，我给你发了很多垃圾邮件，你不应该忘记它😛。
这个应用程序基本上是为单个餐厅设计的，因为我们不要害怕言语，我当时没有看到价值。 我这样做是因为有人告诉我这可以解决一个大问题……
而且，我不得不指出，事实就是如此，这个应用程序基本上只是另一个“副项目”，正在全速运行……
而且，在您看来，一些效果很好的东西，它会发生什么？ 人们一直问我“如何获得它”，我的回答总是：
你不能，它不是为大规模部署而设计的，它是为单个餐厅而设计的。
直到现在也是如此。
问题是，当你的理发师（嗨，亚历克斯）、你的朋友、你的专业联系人……告诉你这个应用程序非常好并且必须让其他人可以使用它时，我可以随心所欲地战斗。其他餐馆老板…… ……好吧，最终它会进入你的脑海，所以你开始工作。
对于每个餐厅和“其预订空间”，有必要允许每个场所创建完全不同的颜色主题。
项目中有哪些 CSS 堆栈？
目前，这个项目是 Bootstrap for CSS（这是我在这里变得昂贵的时刻吗？😛），带有实用程序类屏蔽，所有内容都从 SASS“转译”为 CSS。
如果我们为每家餐厅使用不同的主题（SASS）怎么办？
这个解决方案不适合我，事实上，这意味着每次我重新部署时，CSS 都会“转换”，并且必须创建与餐馆一样多的 CSS 文件。 即使对于某些餐厅来说这是可能的，它也是不可行的，我不知道有多少餐厅会使用这个应用程序，最重要的是我们需要能够一键更改颜色😁。
CSS、Twig、控制器和实体
我们要做的就是这样，我们可以将 CSS 直接放在 HTML 中，但我不喜欢这个想法，事实上，我们这样做并没有使用浏览器缓存，所以我们要让它更干净一点。
树枝
这确实是我笑得很开心的部分 PHPStorm，不明白我在做什么，因为在 Twig 中我们使用“{{ }}”来显示变量，问题是在 CSS 中我们也使用“{ }”，所以 PHPStorm 并不真正知道该怎么做，这导致了一些滑稽的情况。
话不多说，下面是 Twig 代码的头部：
有趣的是，即使是来自 Twig 的解释器 GitLab 不太喜欢这段代码。
为什么要在文件开头定义变量？
坦率地说，这是相当不愉快的工作，我必须查看 Bootstrap 类或哪个类定义了哪种颜色？ 因此，为了更容易地可视化我的进度，我在文件的开头定义了变量。
在这里，你看到的是最终的文件，但是在开发过程中，我直接在文件中定义了颜色，以立即检测是否有基本测试留下的颜色，此外，为了让你最大的乐趣，这是我在开发过程中指定的宏伟主题这个 css.twig 文件的创建（我从没想过有一天我会这么说）
很漂亮，不是吗？ 这绝对是可怕的，我们同意……但至少现在我可以立即看到颜色中是否有原始 CSS 的残留。
此外，在这次捕获中，我们看到我尚未处理 Bootstrap“警报”。
这里应该注意的是，我使用 Twig“原始”过滤器，这是危险的，因为没有过滤器，因此，我们可以将 CSS 注入到我的 Twig 文件中，为了克服这个问题，我稍后会做一个过滤器 🙂，之前释放被释放。
另外，你可以看到我在这段代码中使用了“自定义”Twig 过滤器，它只是从“StackOverflow”检索的代码（真人都知道），它会自动重新计算梯度：
这个文件有一些问题，特别是函数名称，我稍后会纠正它。
控制器
对于我们的浏览器来说，这个文件必须是一个 CSS 文件，而且首先是一个“可缓存” 通过浏览器，否则，每次用户返回到他们最喜欢的酒店的预订过程时，他们都必须重新加载此文件，而这不符合我的价值观，我一想到这个就感到毛骨悚然不利用浏览器缓存。 🤣
这是我们的控制器：
这里有趣的部分是响应，事实上，我们将告诉 Symfony 它是一个 CSS 文件，并且它必须在“标头”中返回该文件是公共的（因此可以被 CDN“缓存”），并且浏览器可以将其保留在缓存中。
如果您注意的话，您会发现缓存是好的，但是，如果主题发生变化，在已经访问过的用户（或通过 CDN 的同一服务器的用户）的浏览器中它不会发生变化。
别担心，我们稍后会看到。
正如您在代码中看到的，我们发送到“.css.twig”，“theme”变量是“$restaurant->getTheme();” 这个“getTheme()”返回一个 Doctrine 实体。
实体
最后一点，但并非最不重要的一点，该实体是将我们的主题存储在数据库中的实体，但不仅如此……
缓存的问题在于，当主题更改时，它必须刷新，为此，我们使用文件的一个版本，只是为了在修改主题时更改文件的 URL。
这是我的实体：
您将找到主题的所有颜色以及“$version”，这将是一个简单的“int”，我们将在更改主题时更新它。
每种颜色都有默认值，这使您可以拥有一个“交钥匙”主题，可以在创建基本餐厅时对其进行修改。对于那些好奇的人，这里是基本主题：
有点深蓝色的背景和金色的按钮，不错吧？
充电器 notre CSS
为此，没有什么比这更简单的了，包含主题的实体仍然需要从基本的“布局”中访问（或者如果您希望可以创建一个“块”并将其扩展到您的视图 Twig girls。
就我而言，该项目有点特殊（请记住，它是第一个使用 Symfony UX Turbo 的项目），我可以从“base_customer.html.twig”访问餐厅。
请记住在 URL 中包含您的版本，在我的例子中，它是“v”，它的值是 Restaurant.theme.version。
每次保存修改表单时都会更新此版本号。
编辑主题的表单
坦白说，我还没有写它，很简单，因为它将归结为一个命令：“php bin/console make:form”。
然后，只需将其集成到餐厅的“后台”即可。
此外，如果您想查看我在“后台”中制作的另一个 CRUD，这里可以将消息添加到主屏幕：
是的，这与它无关，但是嘿，无论如何我必须向你展示一些东西😁。
结论
这篇文章到这里就结束了，我希望您喜欢它，并且它对您自己的项目有用。
我们很快就会在另一篇文章中见到你 🙂 即使我还不知道我们将讨论什么（在写这篇文章时，我只是有了一个想法……）。
祝你度过愉快的一周。
