【问题标题】:How to make custom theme in MEAN如何在 MEAN 中制作自定义主题
【发布时间】:2015-10-21 17:26:33
【问题描述】:

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

我已经使用命令mean package <package_name>MEAN中创建了包

我还使用自定义包的app.js 中的app.set('views', __dirname + '/server/views'); 命令覆盖了默认模板,但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

如何渲染自己的主题

【问题讨论】:

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


    【解决方案1】:

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

    现在在控制器文件夹中查找该函数。更改视图的名称以呈现如下:

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

    };

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

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

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

    【讨论】:

    • 我问的是如何渲染我们的服务器端视图基础布局页面,即使我在里面写了 Hello,而不是如何创建 UI。
    • 我们之间似乎完全沟通不畅。您问过如何更改主题,我认为您的意思是如何更改应用的外观和感觉(即不同的颜色组合和样式)。
    • 您可以根据自己的喜好更改 server-> views 文件夹中的视图,方法是更改​​其中的 html 元素。这能回答你的问题吗?
    • 是的,类似,但有没有办法通过在我的包中创建自己的布局而不是更改服务器布局来更改主题?
    • 您也可以创建自己的布局视图。然后,您将需要更改路由以加载您的视图而不是当前视图。路由路径在 config 文件夹中。
    【解决方案2】:

    您是否在 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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多