angular - 如何将购买的主题合并到 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 及其默认值
3. angular.json 文件在 projects.architect.build.options 下包含以下内容:
“样式”:[
“src/styles.scss”
],
“脚本”:[
“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 主题的最小安装/使用的方法。但我不能保证这是正确的方法。

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

祝你好运。

1. 我将解压主题的 dist/html/assets/css/ 文件夹的内容复制到我的 Angular 应用的 src/assets/maisonnette/css/ 文件夹中。
   • 如果您不想要/不需要主题子文件夹，可以省略它们。
2. 我将以下内容从解压主题的 dist/html/assets/img/ 文件夹复制到我的 Angular 应用的 src/assets/maisonnette/img/ 文件夹中(您应该将它们替换为您自己 Logo 的适当版本):
   • 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/ 文件夹中:
   • Bootstrap /
   • jquery/
   • open-sans/
   • 完美滚动条/
   • channel /
   • 中风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>