Question

我正在尝试将我购买的主题中的所有文件（css，js，插件）合并到我自行搭建的MEAN.js应用程序中。我不确定在layout.server.view.html页面中放置主题文件夹/如何调用它们的位置，或者即使这是调用文件的正确页面。任何建议都会很棒，因为我没有太多运气在google上研究这个话题。

Answer 1

FOR MEANJS 0.4 :(没试过，但应该为meanjs 0.3工作）

我做了一个定制服务以满足我的需求。一个默认皮肤和用户可以选择个人皮肤。皮肤来自Bootswatch并且可以免费使用。

'use strict';

angular.module( 'core' )
  .service( 'ThemeService', [ 'Authentication', '$rootScope', '$document', '$q', '$timeout',
      function (Authentication, $rootScope, $document, $q, $timeout ) {

      var defaultTheme = 'flatly';
      var defaultPath = 'themes/';
      var defaultExtension = '.min.css';
      var defaultIgnore = 'require';
      var themes = [
        'bootstrap',
        'cerulean',
        'custom',
        'cyborg',
        'darkly',
        'flatly',
        'journal',
        'lumen',
        'paper',
        'readable',
        'sandstone',
        'simplex',
        'slate',
        'spacelab',
        'superhero',
        'united',
        'yeti'
      ];


      this.themes = themes;

      var loadCSS = function (href) {
        var deferred = $q.defer();
        var style = $document[0].createElement('link');
        style.rel = 'stylesheet';
        style.type = 'text/css';
        style.href = href;
        style.onload = style.onreadystatechange = function (e) {
          $timeout(function () {
            deferred.resolve(e);
          });
        };
        style.onerror = function (e) {
          $timeout(function () {
            deferred.reject(e);
          });
        };
        $document[0].head.appendChild(style);
        return deferred.promise;
      };


      var theme = defaultTheme;
      if ( Authentication.user !== undefined )
        theme = Authentication.user.theme;



      var currentTheme = defaultTheme;

      var disableThemes = function (name) {
        var links = [];
        links = document.getElementsByTagName( 'link' );
        for ( var i = links.length - 1; i >= 0; i-- ) {
          if ( links[ i ].href.indexOf( defaultPath ) > -1 ){
            if( (links[ i ].href.indexOf( defaultPath + name ) === -1) && (links[ i ].href.indexOf( defaultPath + defaultIgnore ) === -1))
              links[ i ].disabled = true;
            else 
              links[ i ].disabled = false;
          }
        }
      };

      var enableTheme = function ( name ) {
        var links = [];
        links = document.getElementsByTagName( 'link' );
        for ( var i = links.length - 1; i >= 0; i-- ) {
          if ( links[ i ].href.indexOf( defaultPath + name ) > -1 )
            links[ i ].disabled = false;
          currentTheme = name;
        }
      };

      var loadTheme = function ( name ) {
        if ( themes.indexOf( name ) === -1 ) // Theme do not exist
          return false;
        if ( name === currentTheme ) // Theme is already the current theme
          return console.log('Current theme');

        loadCSS( defaultPath + name + defaultExtension ).then( function ( ) {
          disableThemes(name);
          currentTheme = name;
        } ).
        catch ( function () {
          loadTheme( defaultTheme );
        } );
      };

      this.loadTheme = loadTheme;

      loadTheme( theme );

      $rootScope.$on( 'themeChange', function (e, theme) {
        loadTheme( Authentication.user.theme );
      } );

    } ] );

要更改皮肤，您只需向根范围发送一个事件：“themeChange”，如：

$rootScope.$emit( 'themeChange', 'readable' );

这应该在皮肤更换和登录时调用。

此外，您应该将personnal主题添加到用户模型。

如果您只想设置一个自定义主题，请修改./config/assets/production.js和./config/assets/default.js。

否则，您只需将CSS文件添加到客户端模块的CSS文件夹中即可。

Answer 2

有很多方法可以做到这一点......但我不能告诉你哪一种适合你。

在应用程序的公共存储库中创建一个主题文件夹，并假设您使用scss。在此主题文件夹中，您可以拥有scss，fonts，images的文件夹。在主题文件夹的根目录中，父scss文件，它将调用scss文件夹中所有文件的部分内容。每个部分都可以以包的名字命名。你得到了要点。

或者使用均值包生成器，对于每个包，您可以在其中包含css文件。 Mean.js会自动将所有这些文件一起编译，这是一项艰巨的任务(clientCSS: ['public/modules/**/*.css'] ...)

这两种方法都有效，您的团队可以选择。

Answer 3

我自己一直这样做，根据你想要带入项目的内容，它会变得棘手。在我看来，最好的方法是保持模块化并坚持设置meanjs设置。您可以为主题css创建一个单独的文件夹，并在default.js中引用这些文件，只是为了保持井井有条。

接下来，看看正在使用的插件，你很有可能使用bower将这些包/插件包含到你的项目中。请确保将这些内容包含在您的依赖项中，以便在整个应用中使用。

查看您当前的主题，了解您可以将指令放入指令（例如：导航，侧面菜单，滑块等），这是您组织可重用代码的方式。通过使用这些指令来构建您的视图。

一次做一件事，你就能慢慢地带来一个主题。祝你好运！

将主题代码合并到MEAN.js应用程序中的最佳方法

3 个答案: