我如何在MVC站点上共享常见的样式信息(CS,图像等)



跨多个MVC项目共享功能很简单。您只需将代码放入自己的项目中,然后将其引用到您内心想要的尽可能多的解决方案中。干净,标准,光荣。

有什么手段来实现样式代码?我想拥有我们的Common CSS文件,这些文件仅在一个地方就可以使我们的应用程序具有相似的外观和感觉。现在,我必须为每个新应用程序产生新副本。因此,如果需要修复某些东西,则需要在十几个地方修复十二次。

还有其他人处理这个吗?我无法将CSS文件分离到他们自己的项目中,也不想真正拥有一个 Just CSS坐在某个地方的Web应用程序,以便所有应用程序都可以通过完全合格的远程使用该文件。URL。您可以使用源控件来进行TFS技巧以将文件链接在一起?有什么我没有想到的吗?

这是在不使用CDN,SILES,SASS的项目之间共享Web资源的" Dead Simple"解决方案,nuget等:

  1. 创建Common 解决方案文件夹包含要共享的资源,或者简单地将其中一个项目指定为主。
  2. 使用"添加AS Link",根据需要将共享资源文件添加到每个项目。
  3. 在每个项目文件中添加后建筑任务,将链接的文件复制到项目文件夹。这仅需要以便视觉工作室测试/调试(F5)在本地工作。

如果您需要有关如何执行此操作的详细信息,请继续阅读。

为共享资源配置解决方案文件夹

** 请注意,如果您只需直接将文件从一个项目共享到一个或多个其他项目,则可以跳过此步骤。

Visual Studio解决方案文件夹不必反映物理文件系统文件夹,但是这样做将有助于保持您的理智。因此,首先在本地文件系统上创建文件夹,然后将资源文件复制到其中。新文件夹应位于解决方案文件夹下。例如:

MySolution
   Common
      Images
      Scripts
      Styles

回到Visual Studio中,右键单击解决方案项目文件夹,然后使用添加解决方案文件夹以复制新的文件系统文件夹。

接下来,通过右键单击每个文件夹并使用添加现有项目添加文件夹中的内容,将文件添加到新的解决方案文件夹中。

添加共享资源作为链接

对于将使用共享资源的每个项目,右键单击项目文件夹,然后选择添加现有项目。浏览到公共文件夹,选择所需的文件,单击"添加"按钮旁边的下拉箭头,然后选择"添加为链接"。

您可能会获得有关添加项目目录结构之外的文件的源控制警告,但这可以忽略,因为链接的文件将在其源源控制下。

添加 After Build 任务复制文件

当您将应用程序发布到服务器上时,链接文件将复制到链接到的项目文件夹,一切都按预期工作。但是,在开发环境中,链接的文件在项目文件夹中不存在。因此,当您击中F5以在VS中测试您的应用程序时,将缺少共享资源。

简单的解决方案是添加MSBUILD任务,以在每个构建后从其源复制链接文件。对于包含共享资源链接的每个项目,需要做到这一点。

右键单击项目,然后选择卸载项目。右键单击该项目,然后选择编辑< projectFileName> 。滚动到底部并添加以下内容(在上方"</project>"):

  <Target Name="AfterBuild">
    <!-- Copy linked content files to local folders so that they are available in the debugger. 
         This is only an issue when running the application locally. The linked files should 
         be automatically published to the correct folder when publishing to a web server. -->
    <Copy SourceFiles="%(Content.Identity)"
          DestinationFiles="%(Content.Link)"
          SkipUnchangedFiles='true'
          OverwriteReadOnlyFiles='true'
          Condition="'%(Content.Link)' != ''" />
  </Target>

** 复制任务从thecodedestroyer答案中的此链接改编。

保存项目文件,然后右键单击,然后选择 reload project

为什么不只是一个站点主机基础样式和其他站点参考这些样式?我没有看到任何问题。

您也可以创建一种CDN应用程序来执行此操作。

MVC应用#1

<link src="~/css/styles.css" />

MVC应用#2

<link src="http://mvcapp1.com/css/styles.css" />

好吧,我对ASP.NET开发不太了解,请原谅我,如果不是这样,但是

如果您的项目中的资源文件构建操作将设置为 none content and 复制到输出目录设置为复制... ,您可以轻松创建类库项目类型,然后将所有文件放置在此处(保留路径),然后引用此"类库"在每个需要文件的项目中。每个文件都将复制到解决方案构建上的每个引用项目。

对于嵌入式资源构建操作也将起作用,但是,您需要找到一种指定包含这些文件的程序集的方法(因为它将与Assembly.GetEntryAssembly不同)。

我个人不喜欢或想要CDN解决方案,好像您有很多页面,它们依赖于CDNS 100%上升时间。经过一番研究,我发现了这种解决方案,非常适合我使用,我希望谁会寻找替代方案,这就是其中之一:

http://mattperdeck.com/post/copying-linked-content-files-files-at--build-build-using-sus-using-msbuild.aspx

1-查看CSS模板系统:

sass-lang少

http://css-tricks.com/sass-vs-less/(非常好的文章开始,与他的相关帖子中的许多相关项目)

这些允许您以有组织的方式对样式表进行编码。您可以快速添加动态配置和全局更改。

2-开发人员您自己的CSS全局清单系统:

如果您不想使用上述CSS样式表系统。示例

//cdn.com/assets/css/reset.css
//cdn.com/assets/css/main.css
//cdn.com/assets/css/page_home.css
//cdn.com/assets/css/page_cart.css

甚至...

//cdn.com/assets/global/form_styles.css
//cdn.com/assets/global/global_shortcuts.css

在其中,相同的形式填充,桌子和TR和其他填充规则。示例

.black{color:#000 !important}
.right{float:right}
.left{float:left}

我知道我听起来像框架的心态,但它有效。

您可以快速更改全局以确保所有页面都已更新。

CDN存储和指南针建议也有效。您会看到存储在CDN上会节省担心应用程序故障/速度/负载的头痛。

您的应用程序就像

一样
/cloud/servers/settings/global/db
/cloud/servers/settings/global/librarys
/cloud/servers/settings/global/css_config.php (example)
/cloud/servers/1/webapp.com/
/cloud/servers/1/webapp.com/model
/cloud/servers/1/webapp.com/view
/cloud/servers/1/webapp.com/view/themes/tpl
/cloud/servers/1/webapp.com/inc
/cloud/servers/1/webapp2.com/
/cloud/servers/1/webapp2.com/model
/cloud/servers/1/webapp2.com/view
/cloud/servers/1/webapp2.com/view/themes/tpl
/cloud/servers/1/webapp2.com/inc
//cdn.com/assets/css

3-方法的配置

我个人认为问题应该是关于您整体发展方法的方法。将CSS放在CDN应用程序上,或在单独的服务器上使用CSS,该服务器将其同步到CDN进行生产实时模式是一个好主意 - 将其分开并通过样式表语言维护它甚至更好。然后,您可以快速使用皮肤,CSS库,图像库等。保持井井有条,更快,更好,更愉快的事物,以观察并为与之编码感到自豪。

保持它并使用更好的系统是需要的。您应该使用手册和文件夹结构IMO的经典方法。您不必担心移动/平板电脑和其他轴承问题的响应式应用程序设计,并通过更新所有应用程序甚至单个应用程序的CSS系列(甚至是语言),并与多站点开发团队打交道。

只是我的谦虚意见

还强烈建议使用CSS样式表语言,确保许多人讨厌它们。但是它们变得非常有用,尤其是Saas,它不是像Nodejs那样炒作。它实际上是有效的。并做奇迹。查看TopShop,GorgeousCouture .. Arcadia站点..多种语言,多种货币..服务器和在同一跨品牌上工作的服务器和团队。>

我们遇到了相同的问题,出于我们的目的,我们将所有常规的CSS/JS/Images/Layout视图放入Nuget软件包中,并从每个应用程序中重复使用它。它对我们非常有用。

如果您愿意使用sass,则指南针扩展可能只是您所需要的。

http://compass-style.org/help/tutorials/extensions/

作为宝石捆绑的扩展名使您可以轻松地从已安装宝石的系统上的任何位置中包含宝石中包含的样式。我最近在我的最新应用程序中使用了此功能(一个专业的多用户CMS,每个用户都有自己的子域,该子域具有自定义的布局,但是所有组件/小部件在整个应用程序中具有相同的样式)。设置新的子域的样式就像运行单个命令并自定义我设置的模板一样简单,该模板具有简单布局的骨架。

Compass Extensions 可以用来保存图像和JavaScript文件作为A template 的一部分,但是部署的文件并未像样式一样自动更新(模板来自一个模板指南针扩展与样式表有所不同,因为模板用于复制,样式表用于导入)。

最新更新