Liferay Portal 主题开发让项目的样式更加随心所欲（五）

来源：互联网发布：sql server2008和2016 编辑：程序博客网时间：2024/06/04 18:44

Liferay Portal主题开发

主题可以为不同的项目实现个性化配置。我们用Liferay 提供的IDE进行开发。

Liferay IDE 下载地址（这里用的是2.1.1 GA2版本）：http://sourceforge.net/projects/lportal/files/Liferay%20IDE/
创建主题项目。

完成后点击【NEXT】选择模板语言，我们用的是Velocity模板(VM)语言。
对主题项目进行讲解，这里我用已经创建好的【XZSP-theme】项目进行讲解。

我们在开发中用到的css、js、vm都可从系统默认生成代码中复制粘贴到相应目录中来。我们的CSS要写在custom.css中。
在开发主题样式前，我们可以让美工出套HTML静态图，这样开发主题就事半功倍了。

【portal_normal.vm】页：

【top.vm】页：

代码如下：
[html] view plain copy
print?
1. <header id="banner" role="banner">
2. <div class="myHeader">
3. <div class="bg">
4. <a class="$logo_css_class" href="$site_default_url" title="#language_format ("go-to-x", [$site_name])">
5. <img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />
6. </a>
9. #if ($is_signed_in)
10. <div class="header_R">
11. $user_name
12. <a href="/c/portal/logout ">退出</a>
13. </div>
14. #end
16. #if (!$is_signed_in)
17. <div class="header_R">
18. <a data-redirect="$is_login_redirect_required" href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
19. </div>
20. #end
21. </div>
22. </div>
23. </header>
【left.vm】页，我的【left.vm】页中没有做具体处理而是引用了【portal_normal.vm】页。
[html] view plain copy
print?
1. <div id="menu">
2. #if ($has_navigation || $is_signed_in)
3. #parse ("$full_templates_path/navigation.vm")
4. #end
5. </div>
【navigation.vm】页：

代码如下：
[html] view plain copy
print?
1. <nav role="navigation">
2. <div id="leftContent" class="myNavigation">
3. <a href="javascript:;" class="btn-toggle"><span></span></a>
4. <ul class="accordion" style="margin:0;" aria-label="#language ("site-pages")" role="menubar">
5. #foreach ($nav_item in $nav_items)
6. #set ($nav_item_attr_has_popup="")
7. #set ($nav_item_attr_selected="")
8. #set ($nav_item_css_class = "")
10. #if ($nav_item.isSelected())
11. #set ($nav_item_attr_selected="aria-selected='true'")
12. #set ($nav_item_css_class = "selected")
13. #end
15. <li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
16. <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>
18. <div class="sub-menu">
19. #if ($nav_item.hasChildren())
20. #foreach ($nav_child in $nav_item.getChildren())
21. #set ($nav_child_attr_selected="")
22. #set ($nav_child_css_class = "false")
24. #if ($nav_child.isSelected())
25. #set ($nav_child_attr_selected="aria-selected='true'")
26. #set ($nav_child_css_class = "selected")
27. #end
29. <div class="sub-menu-div">
30. <a class="link_a" aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.getTarget() role="menuitem">$nav_child.getName()</a>
31. </div>
32. #end
33. #end
34. </div>
35. </li>
36. #end
37. </ul>
38. </div>
39. </nav>
小提示：如果想写JS也可以在模板页中去写<script>JS</script>。

【content.vm】页：

修改layout.css解决滚动条问题：
[plain] view plain copy
print?
1. #wrapper {
3. /* padding: 2em 5em 0; */
5. @include respond-to(phone) {
6. padding-left: 0.5em;
7. padding-right: 0.5em;
8. }
10. @include respond-to(tablet) {
11. padding-left: 2em;
12. padding-right: 2em;
13. }
14. }
小提示：用以上的方法来解决Liferay中嵌入url显示出滚动条的问题，iframe的高度根据自己需要设置。
主题中如何使用JQuery：
在F:\liferay-portal-tomcat-6.2-ce-ga2-20140319114139101\liferay-portal-6.2-ce-ga2\tomcat-7.0.42\webapps\ROOT\html\js\extjs目录下放入JQuery文件。

修改portal-ext.properties文件，添加jquery。

代码：
[plain] view plain copy
print?
1. javascript.fast.load=false
3. #
4. # 加载JS
5. #
6. javascript.barebone.files=\
8. \
9. #
10. # jquery-1.7.2.min.js
11. #
12. \
13. extjs/jquery-1.7.2.min.js,\
16. \
17. #
18. # YUI core
19. #
20. \
21. aui/aui/aui.js,\
22. aui/aui-base-html5-shiv/aui-base-html5-shiv.js,\
23. \
24. #
25. # Liferay module definitions
26. #
27. \
28. liferay/browser_selectors.js,\
29. liferay/modules.js,\
30. \
31. #
32. # AUI sandbox
33. #
34. \
35. liferay/aui_sandbox.js,\
36. \
37. #
38. # YUI modules
39. #
40. \
41. aui/arraylist-add/arraylist-add.js,\
42. aui/arraylist-filter/arraylist-filter.js,\
43. aui/arraylist/arraylist.js,\
44. aui/array-extras/array-extras.js,\
45. aui/array-invoke/array-invoke.js,\
46. aui/attribute-base/attribute-base.js,\
47. aui/attribute-complex/attribute-complex.js,\
48. aui/attribute-core/attribute-core.js,\
49. aui/attribute-observable/attribute-observable.js,\
50. aui/attribute-extras/attribute-extras.js,\
51. aui/base-base/base-base.js,\
52. aui/base-pluginhost/base-pluginhost.js,\
53. aui/classnamemanager/classnamemanager.js,\
54. aui/datatype-xml-format/datatype-xml-format.js,\
55. aui/datatype-xml-parse/datatype-xml-parse.js,\
56. aui/dom-base/dom-base.js,\
57. aui/dom-core/dom-core.js,\
58. aui/dom-screen/dom-screen.js,\
59. aui/dom-style/dom-style.js,\
60. aui/event-base/event-base.js,\
61. aui/event-custom-base/event-custom-base.js,\
62. aui/event-custom-complex/event-custom-complex.js,\
63. aui/event-delegate/event-delegate.js,\
64. aui/event-focus/event-focus.js,\
65. aui/event-hover/event-hover.js,\
66. aui/event-key/event-key.js,\
67. aui/event-mouseenter/event-mouseenter.js,\
68. aui/event-mousewheel/event-mousewheel.js,\
69. aui/event-outside/event-outside.js,\
70. aui/event-resize/event-resize.js,\
71. aui/event-simulate/event-simulate.js,\
72. aui/event-synthetic/event-synthetic.js,\
73. aui/intl/intl.js,\
74. aui/io-base/io-base.js,\
75. aui/io-form/io-form.js,\
76. aui/io-queue/io-queue.js,\
77. aui/io-upload-iframe/io-upload-iframe.js,\
78. aui/io-xdr/io-xdr.js,\
79. aui/json-parse/json-parse.js,\
80. aui/json-stringify/json-stringify.js,\
81. aui/node-base/node-base.js,\
82. aui/node-core/node-core.js,\
83. aui/node-event-delegate/node-event-delegate.js,\
84. aui/node-event-simulate/node-event-simulate.js,\
85. aui/node-focusmanager/node-focusmanager.js,\
86. aui/node-pluginhost/node-pluginhost.js,\
87. aui/node-screen/node-screen.js,\
88. aui/node-style/node-style.js,\
89. aui/oop/oop.js,\
90. aui/plugin/plugin.js,\
91. aui/pluginhost-base/pluginhost-base.js,\
92. aui/pluginhost-config/pluginhost-config.js,\
93. aui/querystring-stringify-simple/querystring-stringify-simple.js,\
94. aui/queue-promote/queue-promote.js,\
95. aui/selector-css2/selector-css2.js,\
96. aui/selector-css3/selector-css3.js,\
97. aui/selector-native/selector-native.js,\
98. aui/selector/selector.js,\
99. aui/widget-base/widget-base.js,\
100. aui/widget-htmlparser/widget-htmlparser.js,\
101. aui/widget-skin/widget-skin.js,\
102. aui/widget-uievents/widget-uievents.js,\
103. aui/yui-throttle/yui-throttle.js,\
104. \
105. #
106. # Alloy core
107. #
108. \
109. aui/aui-base-core/aui-base-core.js,\
110. aui/aui-base-lang/aui-base-lang.js,\
111. \
112. #
113. # Alloy modules
114. #
115. \
116. aui/aui-classnamemanager/aui-classnamemanager.js,\
117. aui/aui-component/aui-component.js,\
118. aui/aui-debounce/aui-debounce.js,\
119. aui/aui-delayed-task-deprecated/aui-delayed-task-deprecated.js,\
120. aui/aui-event-base/aui-event-base.js,\
121. aui/aui-event-input/aui-event-input.js,\
122. aui/aui-form-validator/aui-form-validator.js,\
123. aui/aui-node-base/aui-node-base.js,\
124. aui/aui-node-html5/aui-node-html5.js,\
125. aui/aui-selector/aui-selector.js,\
126. aui/aui-timer/aui-timer.js,\
127. \
128. #
129. # Liferay base utility scripts
130. #
131. \
132. liferay/dependency.js,\
133. liferay/events.js,\
134. liferay/language.js,\
135. liferay/liferay.js,\
136. liferay/util.js,\
137. \
138. #
139. # Liferay utility scripts
140. #
141. \
142. liferay/portal.js,\
143. liferay/portlet.js,\
144. liferay/portlet_sharing.js,\
145. liferay/workflow.js,\
146. \
147. #
148. # Liferay modules
149. #
150. \
151. liferay/form.js,\
152. liferay/form_placeholders.js,\
153. liferay/icon.js,\
154. liferay/menu.js,\
155. liferay/notice.js,\
156. liferay/poller.js
我们来部署刚才开发的主题。