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

Question

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

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

1. 通过ng new project-name --style=scss –routing 创建了 Angular 项目，所以我有一个 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 theme 为应用程序提供更“企业化”的外观。我们已经购买了主题，我已经下载并扩展了 .zip 文件……现在我迷路了。我不确定：

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

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

任何帮助将不胜感激。

谢谢。

Answer 1

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

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

祝你好运。

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