如何在MEAN中制作自定义主题

时间:2015-07-30 11:18:48

标签: angularjs node.js mean-stack mean.io

我是MEAN的新用户,并将使用MEAN创建新网站。

我使用命令MEAN

mean package <package_name>中创建了包

我还使用自定义程序包app.set('views', __dirname + '/server/views');中的app.js命令覆盖默认模板,但MEAN仍然在MEAN's内呈现我的角度视图默认布局。

我的MEAN包文件夹的结构是

packages
--core
----admin
----articles
----circles
----swagger
----system
----users
--custom
----<my_package>
------public
--------assets
--------controllers
--------directives
--------routes
--------services
--------views
------server
--------config
--------controllers
--------models
--------routes
--------views
------.bowerrc
------app.js
------bower.json
------package.json
----i18n
----theme

如何渲染自己的主题

2 个答案:

答案 0 :(得分:2)

将布局视图更改为与默认视图不同的布局视图 在服务器父文件夹下的routes文件夹中,查找具有映射到路由&#39; /&#39;的函数的文件。

现在在controllers文件夹中查找该功能。更改视图的名称以进行渲染:

exports.index = function(req, res) {
res.render('differentviewfile', {
    user: req.user || null,
    request: req
});

};

更改网站的外观 您可以利用那里提供的众多Bootstrap主题。很多都是免费的。要使用它们,您所要做的就是更改对css文件的引用(您将在服务器端视图基本布局页面中找到它)。

将其从默认引导程序文件更改为其他文件,并更改整个应用程序。对于例如看看https://bootswatch.com提供的16个主题您可以直接参考他们拥有的任何主题的CDN链接,或者您可以下载它的css文件并将其添加到您自己的项目中。

如果您想添加自己的样式,您当然可以创建自己的css文件并添加适当的CSS样式。

答案 1 :(得分:0)

您是否在app.js文件中为系统包注入了依赖项?

var MyCustomModule = new Module('mycustommodule');

/*
 * All MEAN packages require registration
 * Dependency injection is used to define required modules
 */
MyCustomModule.register(function(system, app, auth, database) {

您需要这样做才能等到系统包加载完毕。这一行:

app.set('views', __dirname + '/server/views');

将覆盖系统包中设置的视图配置:D