angular - 如何将购买的主题合并到 Angular 6 + Bootstrap 4 应用程序中

Question

我多年来一直是后端开发人员，但对前端非常陌生。在过去的几周里，我一直在为一个工作项目学习 Angular 6 和 Bootstrap 4。

我有一个基本的 Angular 6 应用程序设置，并且我成功地使用了具有默认主题/样式的 Bootstrap 4。为了获得我目前的位置，我做了以下事情：

1. 通过 创建 Angular 项目ng new project-name --style=scss –routing，所以我有一个src/styles.scss文件
2. src/styles.scss文件包含：
   • @import "~bootstrap/scss/bootstrap"; // Bootstrap 4 and it's defaults
3. angular.json文件在projects.architect.build.options下包含以下内容： "styles": [ "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

已决定使用Maisonnette 主题为应用程序提供更“企业化”的外观。我们已经购买了主题，我已经下载并扩展了 .zip 文件……现在我迷路了。我不确定：

1. 我需要将 .zip 的哪些部分复制到我的项目中
2. 在我的项目中我需要复制它们的位置
3. 我需要更新哪些 Angular 6 配置文件才能使用 Mainsonnette。

感觉这应该很简单，应该有大量的例子可以在谷歌、YouTube 和/或 StackOverflow 上找到。但是，我没有找到任何运气。一切似乎都是关于用一些变量调整默认主题；不是批发替代品。

任何帮助将不胜感激。

谢谢。

标签： angularbootstrap-4angular6

Answer 1

经过一些试验和错误，并多次重新阅读文档，我想出了一些似乎适用于 Mainsonnette主题的最小安装/使用的东西。我不保证这是正确的方法。

我曾认为主题将是相当标准的，并且需要一组步骤来合并任何主题，但显然我错了。我现在相信下面的前几个步骤概述了任何主题所必需的；但是，每个文件中需要指定的内容会因主题而异。最后一步可能是可选的，具体取决于主题。

祝你好运。

1. 我将解压缩主题的dist/html/assets/css/文件夹的内容复制到我的 Angular 应用程序的src/assets/maisonnette/css/文件夹中。
   • 如果您不想要/不需要主题子文件夹，可以省略它们。
2. 我将解压后主题的dist/html/assets/img/文件夹中的以下内容复制到我的 Angular 应用程序的src/assets/maisonnette/img/文件夹中（您应该将这些替换为您自己的徽标的适当版本）：
   • 标志.png
   • logo-2x.png
   • 标志-inv-2x.png
3. 我将以下内容从解压缩主题的dist/html/assets/js/文件夹复制到我的 Angular 应用程序的src/assets/maisonnette/js/文件夹中：
   • 应用程序.js
   • app.min.js
4. 我将以下内容从解压缩主题的dist/html/assets/lib/文件夹复制到我的 Angular 应用程序的src/assets/maisonnette/lib/文件夹中：
   • 引导程序/
   • jQuery/
   • 开放式/
   • 完美滚动条/
   • 雷威/
   • 中风7/

5. 我将src/styles.scss更新为如下所示：

   // The Maisonnette theme dependencies
   @import "assets/lib/stroke-7/style.css";
   @import "assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css";
   
   // The Maisonnette theme itself (includes BS4 CSS)
   @import "assets/css/app.min.css";
   

6. 在angular.json中，我更新了projects...architect.build.options.scripts看起来像这样：

   "scripts": [
     "src/assets/maisonette/lib/jquery/jquery.min.js",
     "src/assets/maisonette/lib/perfect-scrollbar/js/perfect-scrollbar.min.js",
     "src/assets/maisonette/lib/bootstrap/dist/js/bootstrap.bundle.min.js",
     "src/assets/maisonette/js/app.min.js"
   ]
   

7. 在index.html中，我将以下 JavaScript 放在了body标记的底部：

   <!-- Initialize Maisonnette theme -->
   <script type="text/javascript">
     $(document).ready(function(){
       //initialize the javascript
       App.init();
     });
   </script>