今天UI组有个需求，需要把Liferay的默认的header改为自定义的header,并且用ext-js来展示动态header的效果，于是我们想到了用Liferay Hook的功能。

展示效果

初始状态：


当鼠标滚轮往下滚动时候，header会缩成一条横杠：

当鼠标滚轮往上滚动时，header会恢复为初始状态：


 

实现：

为了实现这个功能，我们必须创建一个Liferay Hook功能, 然后我们在META-INF下创建一个目录叫modify_liferay_defaults作为我们需要更改的部分。与此同时，我们配置liferay-hook.xml，让其指向这个目录：

        /META-INF/modify_liferay_defaults 

 

紧接着，我们必须在modify_liferay_defaults目录下面建立和ROOT的html目录结构完全相同的目录结构来起到覆盖作用：

因为我们要加上自己的header,而Liferay自带的header在/html/themes/classic/templates/portal_normal.vm中，所以我们也在modify_liferay_defaults目录中建立相同的文件结构和文件，然后吧内容修改为我们要的，见第27-84行：

 

  #parse ($init)         $the_title - $company_name      $theme.include($top_head_include)     $theme.include($body_top_include)  #if ($is_signed_in)     #dockbar() #end       #language("skip-to-content")                                         
Charles has modified the header by Hook.
                                                                                                                  
                                                                                                                                 Welcome to Joe Doe                                                                                                          Change View