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

最新推荐文章于 2021-06-27 16:54:33 发布

灰熊起舞

最新推荐文章于 2021-06-27 16:54:33 发布

阅读量4.1k

点赞数 2

分类专栏： Liferay Portal 文章标签： Liferay Portal

本文链接：https://blog.csdn.net/tangdelong/article/details/39475059

版权

本文详细介绍了如何使用Liferay IDE进行Liferay Portal主题开发，包括创建主题项目、选择模板语言（Velocity）、定制CSS、JS和VM模板页面。通过实例展示了【portal_normal.vm】、【top.vm】、【left.vm】和【navigation.vm】等关键页面的代码，并提供了主题中引入jQuery和解决滚动条问题的方法。最后，讲解了部署主题的步骤。

摘要由CSDN通过智能技术生成

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】页：

代码如下：

	<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="