英文:
How to combine Codrops tutorial codes into a SilverStripe project?
问题
I love all the tutorials and code examples on the Codrops website. Codrops Website
我喜欢Codrops网站上的所有教程和代码示例。
I would like to include some of them in my SilverStripe projects. SilverStripe CMS
我想在我的SilverStripe项目中包含其中一些。
I've learnt how to install them to my site theme folder using NPM.
我已经学会了如何使用NPM将它们安装到我的网站主题文件夹中。
The question is where is the best place to install all the dependencies like the node_modules folder. I'm breaking up the HTML code from the index.html file inside the src folder that comes with the NPM install from the tutorial and adding them to the CSS and JS folders for a SilverStripe project.
问题是最佳位置来安装所有依赖项,比如node_modules文件夹。我正在将index.html文件中的HTML代码从教程中随NPM安装而来的src文件夹中分离出来,并将它们添加到SilverStripe项目的CSS和JS文件夹中。
I am specifically trying to install this module:
我特别想安装这个模块:
Letters Animation by Codrops
I'm trying to work this out for myself whilst still asking if anyone has direct advice for best practice for adding these modules to SilverStripe.
我正在尝试自己解决这个问题,同时还在询问是否有人有直接的建议,以便将这些模块添加到SilverStripe中。
英文:
I love all the tutorials and code examples on the Codrops website. Codrops Website
I would like to include some of them in my SilverStripe projects. SilverStripe CMS
I've learnt how to install them to my site theme folder using NPM.
The question is where is the best place to install all the dependencies like the node_modules folder. I'm breaking up the HTML code from the index.html file inside the src folder that comes with the NPM install from the tutorial and adding them to the CSS and JS folders for a SilverStripe project.
I am specifically trying to install this module:
Letters Animation by Codrops
I'm trying to work this out for myself whilst still asking if anyone has direct advice for best practice for adding these modules to SilverStripe.
答案1
得分: 1
听起来你没有使用Silverstripe CMS进行开发的经验。我建议你查看入门文档和教程,这些资源应该会指导你了解所有必要的知识。
在Silverstripe CMS中,你可能不会得到关于如何在Codrops教程中使用具体建议,但听起来你有一堆静态HTML代码,希望将其转换为使用Silverstripe的动态数据?如果是这样,第二节课涵盖了这种情况。
关于在哪里安装所有依赖项,比如node_modules
文件夹,你不希望直接暴露实际的依赖项。你需要构建一些分发文件,然后暴露那些文件。通常,你可以将它们放在app/client/dist
中,源文件放在app/client/src
中,或者你可以将它们放在主题的适当位置(例如themes/my-theme/client/
)。然后,你可以通过将以下内容添加到你的composer.json
文件来暴露分发文件:
"extra": {
"expose": [
"app/client/dist"
]
}
然后运行composer vendor-expose
。
你可以使用<% require javascript("app/client/dist/some_file.js") %>
或者<% require themedJavascript("client/dist/some_file") %>
在你的模板中包含这些分发文件。
你还可以通过页面控制器的PHP代码在响应中包含这些分发文件:
Requirements::javascript('app/client/dist/some_file.js');
// 或者
Requirements::themedJavascript('client/dist/some_file');
免责声明:我上面提到的代码是根据我的记忆编写的。如果它不能立即运行,请参考我提供的链接中的文档。
英文:
It sounds like you don't have any prior experience developing with Silverstripe CMS. I recommend you check out the getting started docs and the lessons which should walk you through all you need to know.
You aren't likely to get any specific advise for using Codrops tutorials in Silverstripe CMS, but it sounds like you have a bunch of static HTML code which you want to convert to use dynamic data from Silverstripe? If that's the case, lesson 2 covers that use case.
> The question is where is the best place to install all the dependencies like the node_modules folder
You don't want to expose the actual dependencies. You'll want to build out some distribution files and then expose those. It's pretty standard to put them in app/client/dist
, with the source files in app/client/src
- or you can put them somewhere appropriate in your theme (e.g. themes/my-theme/client/
). You can then expose the dist files by adding this to your composer.json file:
"extra": {
"expose": [
"app/client/dist"
]
}
and then running composer vendor-expose
.
You can include those dist files in your templates using <% require javascript("app/client/dist/some_file.js") %>
or <% require themedJavascript("client/dist/some_file") %>
You can also include those dist files in your response via PHP from your page controller:
Requirements::javascript('app/client/dist/some_file.js');
// or
Requirements::themedJavascript('client/dist/some_file');
Disclaimer: The code I've written above is from memory. If it doesn't work immediately, refer back to the documentation I've linked to.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论