使用Alchemy框架,如何引用Bootstrap CSS文件?


7

我正在使用炼金框架0.62,并有一个GUI扩展在一个弹出窗口中打开一个.ASPX页面。

我想在弹出窗口中使用Bootstrap CSS库。做这个的最好方式是什么?

我正在用Nuget拉下Bootstrap。我看到炼金术有很多nice URL helpers (Static File Tokens) here.

我还看到一个很好的解释关于JavaScript文件和编译时会发生什么here.

我应该在引导css文件移动到文件夹的静态文件夹下? Nuget会在那里找到他们吗?最佳做法是什么?

我还计划使用SignalR库和的NuGet创建一个“脚本”的文件夹,并把在那里的所有.js文件。这可以吗?我发现最新版本的Alchemy会在构建时将所有.js文件放入其自己的文件夹中。

6

对于静态文件,如JS和CSS文件,他们需要被放入一个文件夹是命名“静态”或“资产”。正如你所提到的,炼金术会将这些文件排序到编译后的.a4t文件中的标准文件夹结构中,所有的JS文件都会进入JS文件夹,对于CSS来说也是一样,除了将文件放入“libs”文件夹,它将保留其文件夹结构以允许某些库需要特定的文件组织,如链接到的文档中所述。

因此,要回答你关于SignalR文件被放置到一个脚本文件夹的问题,这些将不会被炼金术发现,因为他们不是在一个静态或资产的文件夹。最简单的解决方案是将Bootstrap和SignalR的文件夹复制到静态文件夹中。但是,这意味着Nuget实际上会丢失这些文件,如果您想用Nuget更新软件包,您将不得不在未来手动移动它们。幸运的是,Nuget本身提供了一个解决这个问题的选项。正如在post中所讨论的那样,您现在可以通过在解决方案中包含nuget.config文件并使用它将Nuget下载的文件重定向到资产或静态文件夹来更改Nuget的包位置,在这种情况下,Nuget可以跟踪文件和炼金术仍然能够找到它们。

我还会向Alchemy github提交一个问题,让他们考虑将Bootstrap和/或SignalR添加到当前选择的库中,如果您觉得这些对其他开发者有用。

+2

很好的解释!只是想确认Robert,由于Bootstrap库包含多个文件(图标位于与css所在位置相比的特定位置),因此您应该使用Tanner提到的JavaScript库方法。 “/ Static/Libs/Bootstrap/FILES HERE”。 19 10月. 152015-10-19 14:08:10


4

我会做什么:

  1. 里面添加Static-> Scrips和Static->样式respectivly你的JS和CSS文件。这是炼金术中的一个固定结构。

  2. 创建延伸的ResourceGroup基类的资源组对象。说“Mynamespace.MyResourceGroup”

  3. 在构造函数中使用AddFile方法添加的文件。

enter image description here

  • 添加您ResourceGroup到您Extension对象。根据您的扩​​展名使用Dependencies.Add<MyResourceGroup>()AddExtension<MyResourceGroup>("Tridion.Web.UI.Editors.CME.Views.{ViewToBeExtended}")

  • 在您的ASPX页面

    添加资源组类似如下:

    <head runat="server"> <title></title> <cc:tridionmanager runat="server" editor="CME"> <dependencies runat="server"> <dependency runat="server">Mynamespace.MyResourceGroup</dependency> </dependencies> </cc:tridionmanager> </head>

  • 可以使用标记 “$ {} CssUrl MyStyle.css”,以及访问它,但要确保你的CSS文件存在作为资源