我如何调整/使用为网站制作的模板以适应 Symfony？答案

【问题标题】：How do I adapt/use a template made for a website to Symfony?我如何调整/使用为网站制作的模板以适应 Symfony？
【发布时间】：2020-05-11 16:08:35
【问题描述】：

我正在开发一个 Symfony 项目/网站（初级），我计划使用一个由 HTML/CSS/JS 和许多 JQuery 插件制作的模板（这个https://github.com/ColorlibHQ/AdminLTE）。现在，我知道如何使用 Twig 模板并希望将该设计适应我的网站，但我遇到了一些问题并且不知道如何去做：

该模板有一个 package.json 文件，其中包含该模板需要运行的依赖项。（Bootstrap、FontAwesome、Datatables.net、Sweetalerts 等）如何在我的项目中安装这些依赖项及其确切版本？到目前为止，我一直使用 composer 将 Symfony 依赖项安装到我的项目中，但我也可以使用 npm 吗？我可以将模板的 package.json 中的依赖项复制到我的并执行 npm install 吗？
安装这些依赖项后，我的文件夹结构将如何？（我的项目具有任何 Symfony 应用程序的基本结构，遵循官方文档）所有新安装的插件都将放在 node-modules 文件夹中？
我仍在研究 Webencore 文件的工作原理，我是否需要使用 require() 来导入我的网站在安装后需要的所有插件？我想我需要对 CSS 做同样的事情。

这是安装 Webencore 后我的 Symfony 项目结构和 package.json 文件的屏幕截图。：

如果这个问题没有多大意义，或者我要求的太多，我很抱歉。或者也许我的想法/计划是错误的。

【问题讨论】：

Start here.
有一个bundle 可能更容易使用，因为大部分繁重的工作都是为您完成的：转换为 twig 并与 encore 集成。
@msg 有了你的评论，我意识到这个模板已经适应了 Symfony，但我发现你链接的包只有几个页面/模板，并且使用的是旧版本（2.4），而我想使用一个新的（版本3）。我终于弄清楚了如何安装插件并创建了自己的 Twig 文件/模板。

标签： symfony npm bootstrap-4 twig package.json

【解决方案1】：

我也不是专家，但我会尽力帮助你。

Composer 适用于 Symfony 包 (composer.json)，但在这里你应该使用 yarn 或 npm 来安装你的包 (package.json)。

首先安装 Yarn： https://classic.yarnpkg.com/en/docs/install/#windows-stable

我认为你的行命令中的“yarn”应该可以在之后安装它。

如果还没有完成，还要安装 Webpack encore： https://symfony.com/doc/current/frontend.html

然后安装你的包：yarn add admin-lte@^3.0

所有必要的文件都将被下载到节点模块中，并保存在这里。

对 bootstrap、sweet alert 和您需要的所有包执行相同操作（在 google 上搜索包名称）。

在您的 App.js 中，您可以执行以下操作来使用包（新的 javascript 版本）：

import $ from 'jquery';
import 'bootstrap';
import 'bootstrap-datepicker';

并为您的 App.js 中需要的每个包执行相同的操作 import 用于新的 javascript 版本，需要用于旧版本。

希望对你有帮助:)

【讨论】：

非常感谢您！我没有意识到我可以使用 yarn 并将该模板使用的所有插件“安装”到我的项目中。我也一直在使用 npm。现在我有一个 app.js 文件，其中包含对我的插件的所有导入，并且我使用了 twig 模板中的 encore 函数来编译这些文件。现在的问题是，很多插件都可以与 Jquery 一起使用，虽然我确实将它导入到我的项目中，但有些插件不起作用并导致某些功能出错。在 symfony 项目中安装 JQuery 的正确方法是什么？谢谢你帮助我。
对我来说，我只是做了“yarn add jquery”来将它安装在节点模块中。在您可以将其导入您需要的文件（在您的情况下为 App.js）之后，哪些插件有哪些错误？因为它应该正常工作
我这样做了，它最终工作得很好。非常感谢！