Liferay Portal （二）主题开发

程序员文章站 2022-04-28 16:36:09

...

一、新建

完成后点击【NEXT】选择模板语言，我们用的是Velocity模板(VM)语言

Liferay Portal （二）主题开发

二、代码编写

Liferay Portal （二）主题开发

portal_normal.vm源码

<!DOCTYPE html>

#parse ($init)

<html class="$root_css_class" dir="#language ("lang.dir")" lang="$w3c_language_id">

<head>
	<title>$the_title - $company_name</title>

	<meta content="initial-scale=1.0, width=device-width" name="viewport" />

	$theme.include($top_head_include)
</head>

<body class="$css_class">

<a href="#main-content" id="skip-to-content">#language ("skip-to-content")</a>

$theme.include($body_top_include)

#if ($is_signed_in)
	#dockbar()
#end

<div class="container-fluid" id="wrapper">
	<header id="banner" role="banner">
		<div id="heading">
			<h1 class="site-title">
				<a class="$logo_css_class" href="$site_default_url" title="#language_format ("go-to-x", [$site_name])">
					<img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />
				</a>

				#if ($show_site_name)
					<span class="site-name" title="#language_format ("go-to-x", [$site_name])">
						$site_name
					</span>
				#end
			</h1>

			<h2 class="page-title">
				<span>$the_title</span>
			</h2>
		</div>

		#if (!$is_signed_in)
			<a data-redirect="$is_login_redirect_required" href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
		#end

		#if ($has_navigation || $is_signed_in)
			#parse ("$full_templates_path/navigation.vm")
		#end
	</header>

	<div id="content">
		<nav id="breadcrumbs">#breadcrumbs()</nav>

		#if ($selectable)
			$theme.include($content_include)
		#else
			$portletDisplay.recycle()

			$portletDisplay.setTitle($the_title)

			$theme.wrapPortlet("portlet.vm", $content_include)
		#end
	</div>

	<footer id="footer" role="contentinfo">
		<p class="powered-by">
			#language ("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>
		</p>
	</footer>
</div>

$theme.include($body_bottom_include)

$theme.include($bottom_include)

</body>

</html>

top.vm源码

    <header id="banner" role="banner">  
        <div class="myHeader">  
            <div class="bg">  
                <a class="$logo_css_class" href="$site_default_url" title="#language_format ("go-to-x", [$site_name])">  
                    <img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />  
                </a>  
                  
                  
                #if ($is_signed_in)  
                    <div class="header_R">  
                        $user_name  
                        <a href="/c/portal/logout ">退出</a>  
                    </div>  
                #end   
                  
                #if (!$is_signed_in)  
                    <div class="header_R">  
                        <a data-redirect="$is_login_redirect_required" href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>  
                    </div>  
                #end  
            </div>  
        </div>  
    </header>

left.vm

    <div id="menu">  
        #if ($has_navigation || $is_signed_in)  
            #parse ("$full_templates_path/navigation.vm")  
        #end  
    </div>

navigation.vm

    <nav role="navigation">  
        <div id="leftContent" class="myNavigation">  
        <a href="javascript:;" class="btn-toggle"><span></span></a>  
        <ul class="accordion" style="margin:0;" aria-label="#language ("site-pages")" role="menubar">  
            #foreach ($nav_item in $nav_items)  
                #set ($nav_item_attr_has_popup="")  
                #set ($nav_item_attr_selected="")  
                #set ($nav_item_css_class = "")  
      
                #if ($nav_item.isSelected())  
                    #set ($nav_item_attr_selected="aria-selected='true'")  
                    #set ($nav_item_css_class = "selected")  
                #end  
      
                <li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">  
                    <a class="menu_a" aria-labelledby="layout_$nav_item.getLayoutId()" href="$nav_item.getURL()" $nav_item_attr_has_popup $nav_item.getTarget() role="menuitem"><span>$nav_item.icon() $nav_item.getName()</span></a>  
                      
                    <div class="sub-menu">  
                        #if ($nav_item.hasChildren())  
                                #foreach ($nav_child in $nav_item.getChildren())  
                                    #set ($nav_child_attr_selected="")  
                                    #set ($nav_child_css_class = "false")  
      
                                    #if ($nav_child.isSelected())  
                                        #set ($nav_child_attr_selected="aria-selected='true'")  
                                        #set ($nav_child_css_class = "selected")  
                                    #end  
                                      
                                    <div class="sub-menu-div">  
                                        <a class="link_a" aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.getTarget() role="menuitem">$nav_child.getName()</a>  
                                    </div>  
                                #end  
                        #end  
                    </div>  
                </li>  
            #end  
        </ul>  
        </div>  
    </nav>

content.vm

<div id="content" class="myContent">
		

		#if ($selectable)
			$theme.include($content_include) //内容显示区
		#else
			$portletDisplay.recycle()

			$portletDisplay.setTitle($the_title)

			$theme.wrapPortlet("portlet.vm", $content_include)
		#end
</div>
	<script type="text/javascript>
	$(funtion(){
		//改变iframe的高度以适应内容的大小
		$("iframe").css({height:$(window).height-117+'px"});
		$("iframe").remove();
		$("iframe").css({height:$(window).height-topHeight+'px"});
	
	});
</script>

修改layout.css解决滚动条问题：

    #wrapper {  
      
    /*  padding: 2em 5em 0; */  
          
        @include respond-to(phone) {  
            padding-left: 0.5em;  
            padding-right: 0.5em;  
        }  
      
        @include respond-to(tablet) {  
            padding-left: 2em;  
            padding-right: 2em;  
        }  
    }

portal.properties是liferay中一个非常核心的配置文件。我们可以在liferay源代码或者解压liferay部署包中的portal-impl.jar中获得。以liferay6.2为例，portal.properties的具体路径如下：
liferay源代码：liferay-portal-src-6.2-ce-ga2\portal-impl\src\portal.properties；
liferay部署包：liferay-portal-6.2-ce-ga2\tomcat-7.0.42\webapps\ROOT\WEB-INF\lib\portal-impl.jar。

属性重写

指定在哪里得到重写属性。更新不应该在portal.properties 或者 portal-bundle.properties中，而是应该在portal-ext.properties中。
默认的读取顺序是：portal.properties，portal-bundle.properties，portal-ext.properties，portal-setup-wizard.properties。
include-and-override=portal-bundle.properties
include-and-override=${liferay.home}/portal-bundle.properties
include-and-override=portal-ext.properties
include-and-override=${liferay.home}/portal-ext.properties
include-and-override=portal-setup-wizard.properties
include-and-override=${liferay.home}/portal-setup-wizard.properties
根据以上官方解释，我们可以知道如果要重写某个属性，我们通常在portal-ext.properties，portal-setup-wizard.properties这两个文件中配置。
${liferay.home}其实就是liferay-portal-6.2-ce-ga2目录。
portal-ext.properties默认是位置是liferay-portal-6.2-ce-ga2\tomcat-7.0.42\webapps\ROOT\WEB-INF\classes目录下，不存在的话我们可以自己创建。
添加

portal-ext.properties里添加

#  
javascript.barebone.files=\  
      
    \  
        #  
        # jquery-1.7.2.min.js  
        #  
        \  
        extjs/jquery-1.7.2.min.js,\  
  
  
        \  
        #

上一篇： Restful风格API接口开发springMVC篇

下一篇： Spring Boot 使用 Maven 定制一个 parent 简化开发

Liferay Portal （二） 主题开发

一、新建

属性重写

Liferay Portal学习笔记（二）：使用CMS