主题管理器 - AntStudio/moon GitHub Wiki

Moon 主题管理器

Moon提供了用于主题切换的管理器，用于满足实际项目中对于主题切换、换肤功能的支持，该主题切换器是可拔插的组件。系统预定义了两套主题，包括：蓝色单页面主题和黑色导航多标签（iframe）主题。主题管理器提供了很多切入点，开发者可以很方便地定制自定义主题。

首先了解下moon中关于主题的两个定义：主题和主题管理器

主题

moon中的主题是指包含如下属性的对象：

  1. name 主题的名称，所有的主题名称应该唯一

  2. description 主题描述

  3. indexPage 主题对应的主页(欢迎页)。因为实际项目中，不同主题的欢迎页面差别一般会很大，所以单独定义此属性

  4. themeResource 主题资源，目前资源支持JS和CSS两种类型，如果需要支持其他类型资源，可以拓展ThemeResource枚举类实现，但一般不会使用。 主题资源支持多个资源，配合moon require标签使用，具体使用的引入名称可以通过require的配置文件进行配置（配置键为theme.name），默认为moonTheme. 也就是说默认情况下，只需要在需要引入主题资源的页面使用<m:require src="moonTheme"/>即可

  5. isDefault 标示主题是否是默认主题，默认为false.注意只能注册一个默认主题。

  6. themeHandlePage 主题的处理页面，该页面主要用处理如何包含指定内容页面，可以方便的定义页面最后组装的格式，如单页面或iframe形式等等；如果处理页面未定义，则直接跳转到内容页面。

主题管理器

ThemeManager是一个接口，定义了四个接口方法，具体如下：

  1. register(theme) 注册主题，该接口可以在应用运行时动态地注册添加主题
  2. Theme getTheme(name) 根据主题的名字获取主题，如果没有对应名字的主题，则返回null
  3. Theme getDefaultTheme() 获取默认的主题
  4. Collection<Theme> getThemes() 获取所有已注册的主题，应该返回只读的主题集合

moon提供了一个默认的主题管理器实现:DefaultThemeManager,该管理器会在没有注册默认主题时，使用最早注册的主题作为默认的主题。一般情况可以直接使用该管理器，如果有特殊的逻辑，可以实现ThemeManager接口，自定义自己的主题管理器。

工作机制

Moon主题管理通过定义cookie的方式来判定当前所设置的主题，cookie名字默认为MOON_THEME,可以通过修改Themes类中的themeCookieName来修改。然后使用拦截器，将主页请求转发给主题对应的主题主页面；将其他内容页面转发给处理页面（如果有定义处理页面，否则直接跳转内容页面）

主题管理器功能是可拔插的功能，如果为定义主题管理器时，则不会启动主题设置相关的功能，否则使用定义了的主题管理来管理应用的主题。

超简单的主题配置

只需要将主题管理器和主题的初始配置注册到spring容器即可。比如：

<bean class="org.moon.support.theme.DefaultThemeManager">
        <property name="themes">
            <list>
                <bean class="org.moon.support.theme.Theme">
                    <constructor-arg name="name" value="tab"/>
                    <constructor-arg name="description" value="多标签形式(iframe)"/>
                    <constructor-arg name="indexPage" value="pages/tab_index"/>
                    <constructor-arg name="themeResources">
                        <list>
                            <bean class="org.moon.support.theme.ThemeResource">
                                <constructor-arg name="type" value="CSS"/>
                                <constructor-arg name="path" value="css/tab_base.css"/>
                            </bean>
                        </list>
                    </constructor-arg>
                    <constructor-arg name="isDefault" value="true"/>
                    <property name="themeHandlePage" value="pages/tab_common"/>
                </bean>
            </list>
        </property>
    </bean>

这里就配置了一个主题管理器，并且配置了一个默认的"tab"主题，使用了pages/tab_index作为主页，pages/tab_common作为页面处理器，同时引入了一个css资源，资源路径为css/tab_base.css.

也就是说在新增加一套自定义主题时，只需要定义主题的欢迎页和主题的资源即可，必要时增加处理页面。其他就全部交给moon的主题管理器吧。另外moon还提供了主题切换器的web操作页面，可以在任何需要主题设置的页面切入该页面即可，该页面的访问路径为:/theme. 比如以弹出框的形式展示： image

optimizeStructure标签

一般来说，我们的处理页面已经具有基本的html结构，而具体的页面只负责数据的展示。这时对于具体页面的资源(css/js)引入，会直接生成到处理页面包含具体内容页面的地方。而css的引入我们应该放入到head标签内。optimizeStructure标签正是为了解决此问题而创建，只需要将需要优化引入的html包含在optimizeStructure标签内，在内容渲染时，会自动将资源引入提到head标签内。注意此标签只处理require标签进行的资源导入和使用了如下格式的资源导入:

<!--moon required resources start-->
the css/js import statements
<!--moon required resources end-->
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️