Question

我喜欢使用Brackets代码编辑器来完成大部分项目。但是，我的团队正在做一个特定的项目，我们需要创建多个可重用的组件来提供原型演示。我们使用GIT工作流来构建所有各种组件，并将它们放在多个原型HTML页面上。

但是，每次设计人员想要更新特定组件/小部件时，我们都需要在所有原型页面上手动更新它。

我正在寻找一种方法来制作可重复使用的代码块，就像Adobe Dreamweaver如何使用库项目来简化此工作流程https://helpx.adobe.com/dreamweaver/using/library-items.html

我无法在Brackets中找到相应的内容。我查看了这个插件https://github.com/chuyik/brackets-snippets - 但我不认为这是我需要的。

有一个方便的解决方案吗？也许我可以使用嵌入在HTML代码中的导入函数来插入/导入来自另一个目录的小部件HTML代码？

更新

我刚刚尝试使用这里提出的JQuery解决方案Include another HTML file in a HTML file但是在本地预览文件 - 它似乎不起作用。它给出了如此错误

XMLHttpRequest cannot load file:///D:/Ryan%20GitHub/SLQ-Homepage-with-packery/html/widget-social.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.k.cors.a.crossDomain.send @ jquery.js:8625

我想我需要在本地服务器上试试这个 - 很遗憾它不会在本地预览上工作：@

Answer 1

我暂时可以提出的最佳解决方案是使用jQuery，因为我已经在我们的页面上使用该库进行交互。

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

不幸的是，由于跨域阻止协议，它在我的Chrome浏览器中无法正常工作或在本地预览。这不是那么快，但它会做到。

Answer 2

你可以使用PHP包含。它们与您使用jquery描述的内容类似。简单地说，创建具有所需代码的文件并将其命名为something.php然后执行简单的php include。

<?php 
    include('something.php');
?>

您还可以将包含组织到名为inc的文件夹中，以使其更有条理。我在我的所有网站上为页脚，导航，菜单等执行此操作。我更新了一个文件并繁荣，它会立即更新每个网页。多年来一直这样做。希望这可以帮助遇到这个的任何其他人，因为它是一个较老的线程。

我可以在Brackets中使用代码库项目/片段，就像它们在Dreamweaver中实现一样吗？

2 个答案: