liferay主题开发教程官方文档翻译版解析

《liferay主题开发教程官方文档翻译版解析》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、DevelopingaLiferayTheme作为一个开发者，你需要你的站点准确有效的传达你的想法。你不希望你设计的网站限制用户从你的内容总收到影响。这就是主题发挥作用的地方。主题允许你创造性的控制和讲述通过你的站点想要讲述的故事。他们可以是你控制网站的外观和感觉。后续为详细介绍。当你接近主题设计时，记住目标受众，你试图传达的信息，以及网站的目的。主题设计有助于回答这些问题。次学习路线使用Freemarker模板语言为Liferay'sLunarResort开发一套主题。你将学会如何使用CSS设计你的主题，怎样响应移动设备，怎样使用Bootst

2、rap'sandFontAwesome's 图标在主题中，和如何实现可配置的主题设置。在开始之前，需要确保你已经安装Liferay开发环境。LiferayIDE或LiferayDeveloperStudio的安装可查看其他文档。也可以选择其他开发工具，但是Liferay提供的开发工具是他们专门为开发Liferay而设计的，开发过程中可很自然的使用它。因为在整个学习过程中会做大量更改部署，所以需要确认你的Portal已经开启开发模式。可以在为主题开启开发模式查看如何开启开发模式。下面我们将开始学校开发主题：设置主题一、简介在此部分，将创建Luna

3、rResort主题的基础。我们将学校创建一个主题的流程和需要的目录结构。最后，我们将修改模板文件portal_normal.ftl和navigation.ftl使其符合LunarResort主题的样子。我们将通过此指南模拟完成一个如下样式的主题：开始之前，你资源下载在此处下载在联系中需要的资源文件，解压到你的目录中一、创建一个主题项目在后续的学习过程中需要根据指令操作LiferayIDE 或 LiferayDeveloperStudio。1.Select File → New → LiferayPluginProject.2.在项目向导中， P

4、rojectname输入 lunar-resort-theme ，Displayname输入LunarResortTheme， buildtype选择Ant，选择适当的PluginsSDK和匹配的Liferayruntime。（此处开发过程中由于出现问题，所以开发是选择为Maven）3.Plugintype选择Theme，然后点击Next4.Themeparent 选择_styled， Themeframework选择Freemarker ，然后点击Finish+$$$Note: 第一次创建项目时，请确保处于联网状态，在后台Liferay'sP

5、luginsSDK 下载几个必须得JAR文件，这使初始插件SDK下载小，但它可能需要几分钟的时间来创建您的第一个项目。随后的项目几乎立刻就被创造出来了。$$$我们将在左边的项目资源管理器中看见创建好的项目，我们创建的是基于Liferay's _styled theme的一个空的Liferay主题而不是从头开始建立一个主题，它是使用Liferay基地主题为出发点，确保完全兼容的最佳实践。我们对主题的修改将直接覆盖Liferay's _styled theme的默认设置一、设置主题目录结构当项目创建完成时目录结构应该和以下一样：（此处为Ant构建工

6、具时,Maven有所区别）主题是基于他们的基础主题的不同，在我们创建项目的时候，我们选择了_styled主题，Acopyofthistheme'scode,therefore,existsinmostofthesefolders.这将确保你页面的所有元素的默认样式。在编写自定义主题是，只需要定义当前主题和基础主题不同的地方即可。我们所有修改的文件都应该放到_diffs目录中，然后将其转移到父目录中的文件。因此，在_diffs文件夹中的目录必须是父目录的镜像，如果目录不匹配，你所有的修改将无法被应用，为了保持基础目录不变，我们只需要将我们修改或增

7、加的文件放到_diffs目录中。在最佳实践中，所有的CSSstyling 都应在_diffs/css/ 目录的custom.css文件中，因为他是最后加载的，所有放置在custom.css文件中的样式都将覆盖其父主题的样式，保持所有的样式在一个文件中，将更加有利于维护工作的开展。现在我们已经熟悉了主题的结构和开发流程，我们将开始开发自己的主题1.选择_diffs文件夹然后右键，选择 New → Folder.2.选择_diffs文件夹输入css文件名然后点击Finish3.重复步骤1和2创建images和templates 目录4.将custo

8、m.css文件从docroot/css/ 目录复制到_diffs/css.所有的修改都将放到_diffs 目录的中custom.css镜像文件中。5.