Metronic 与 VS2013/2015 合作开发
Metronic 与 VS2013/2015 合作开发
去年购买了一个:METRONIC (http://www.keenthemes.com/) ,最近下了最新的版本:V3.7 ,解压缩后,目录如下:(没有列出RTL 部分)
- _documentation - Contains of admin and frontend themes general documentation files.
- _resources - Contains of commercially licensed and free stock photos and the theme's PSD files.
- theme - Metronic HTML theme's main folder(Default version).
- assets - Contains of theme related files(css, js, images, etc).
- admin - Contains of admin theme related files(css, js, images, etc).
- frontend - Contains of admin theme related files(css, js, images, etc).
- global - Contains of global Metronic framework components, customized 3rd party plugins.
All the features under global folder can be used both in frontend theme and admin theme.
- sass - Contains of SASS(sass-lang.com) files for the admin theme(only the admin default version fully supports SASS).
- templates - Contains of admin and frontend theme template pages.
- admin - Contains of admin theme templates pages.
- frontend - Contains of frontend theme template pages.
1、建立一个 VS 2013 的解决方案,在方案中,创建一个顶级文件夹(Metronic),与 Models、Controllers 等平列,将:解压缩的 METRONIC软件 下的 theme 文件夹下的内容 COPY 过来到:文件夹(metronic)下。 可以只保留有关的管理主题Admin,对 frontend 文件夹(前端主题)可以删除,而且对ADMIN 主题下的四个,可以仅保留一个。
运行VS,通过游览器本地地址:http://localhost:XXXX/metronic/templates/admin/index.html HTML 版本;
http://localhost:9087/metronic/templates/admin/angularjs/#/dashboard.html angularjs 版本;
2、对于 VS2015 的解决方案 ,由于静态文件放置于:WWWROOT 文件夹下,因此在其中创建一个文件夹(Metronic),复制 METRONIC软件下 theme 文件夹下的内容,类似 VS2013 的操作。
运行VS,同样通过游览器本地地址 http://localhost:XXXX/metronic/templates/admin/index.html 访问 HTML 版本。
3、本人只关注:Metronic 的 angularjs 版本。 (服务目录:E:/ZXL_CDREPORT)
4、将解决方案 Views\Home 目录的 Index.cshtml 的内容,全部置换为 metronic 软件 admin 主题下 angularjs 版本的 index.html 文件的内容。
(注意:如果直接修改 metronic 的文件,需要保存为 UTF8 格式,原文件不是UTF8。)
A、 修改 CSS 文件的相对引用路径为直接引用。即: href="../../../ 修改为 href="/metronic/ .
B、 修改JAVASCRIPT (JS) 文件的引用 src="js/app.js" 及 src="js/directives.js" 为:
src="~/metronic/templates/admin/angularjs/js/app.js"
src="~/metronic/templates/admin/angularjs/js/directives.js"
C、 将 data-ng-include="'tpl/XXXX.html'" 几个 包含引入的文件,涉及:METRONIC\templates\admin\angularjs\tpl 下的几个文件。
使用 ASPNET 5 的 WEBCOMPONENT 技术实现。需要 增加控制器。 在 Controllers下增加 ViewComponents 文件夹,设计一个类:
public class LayoutTplViewComponent : ViewComponent
{
private readonly ApplicationDbContext db;
public LayoutTplViewComponent(ApplicationDbContext context)
{
db = context;
}
public async Task<IViewComponentResult> InvokeAsync(string tpl)
{
return View(tpl);
}
}
将 INDEX 文件中 <div data-ng-include="'tpl/XXX.html'" data-ng-controller="XXXController" class="XXX hidden-xs hidden-sm">
</div>
更换为:
<div data-ng-controller="XXXController" class="XXX hidden-xs hidden-sm">
@await Component.InvokeAsync("LayoutTpl", "XXX") //异步调用上述类的方法。
</div>
主题 theme-panel.html 可以不用处理,否则,好像按钮没有了作用。
实际 Footer.html 也可以不用处理。否则回到顶部的按钮不见。可能是JS脚本没有执行。
重点处理:Header 及 sidebar 菜单,SIDEBAR 的菜单希望从数据获取后使用 RAZOR 语法生成。
5、修改 app.js 文件 的路由配置。MetronicApp.config() 方法
1)$urlRouterProvider.otherwise("XXXX"); 是默认的路由,系统初始打开的内容页面,由其确定。
2)将各个路由配置的资源路径,修改为绝对引用路径。
3) 为了自动配置,此处配置可以考虑使用 单独的JS 文件。!!!
6、修改 app.js 文件 的控制器的初始化 MetronicApp.controller()
在此方法中,在一段备注:Init entire layout(header, footer, sidebar, etc) on page load if the partials included in server side instead of loading with ng-include directive ,意思是:如果主页(INDEX)的一部分内容(比如 header,sidebar 等)不是用:ng-include 标注引入,而且通过服务器端写入,则在页面载入时,需要初始化全部 或者 部分。 取决于 通过服务器插入的部分。
全部通过服务端插入,使用 Layout.init();
(推荐:本人只是考虑 header,sidebar)部分通过服务端插入,写入相应部分,Layout.initHeader(); Layout.initSidebar();
/* Setup App Main Controller */
MetronicApp.controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.$on('$viewContentLoaded', function() {
Metronic.initComponents(); // init core components
//Layout.init(); // Init entire layout(header, footer, sidebar, etc) on page load
if the partials included in server side instead of loading with ng-include directive
Layout.initHeader(); // init header 初始化移动到此处。
Layout.initSidebar(); 初始化移动到此处。
});
}]);
同时,取消 各自控制器的初始化。如:
/* Setup Layout Part - Header */
MetronicApp.controller('HeaderController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
// Layout.initHeader(); // init header 取消此部分。
});
}]);
/* Setup Layout Part - Sidebar */
MetronicApp.controller('SidebarController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
// Layout.initSidebar(); // init sidebar 取消此部分。
});
}]);
7、控制器的修改,使用“点击展开菜单”出现立即关闭(缩回)的问题,实际是:引发了两次动作。
问题解决方法是:修改此“点击”引发的JS方法,只处理一次动作。
修改文件:/metronic/assets/admin/layout/scripts/layout.js 文件,此文件是返回一个对象,
return {} 中 initSidebar: function () 就是前面谈到的 初始化方法。
1)在文件的开始处(layout 函数外),定义一个变量
var zxl = 0;
2)在 initSidebar 函数的开始,判断处理的次数,第二次,直接返回。
initSidebar: function () {
zxl = zxl + 1;
if (zxl % 2 === 0) {
zxl = 1;
return;
}
//layout handlers
。。。。。