« 返回到 Themes

Fast Theme Development

Overview2 #

As a theme developer, you might find it time consuming to continuously have to compile (jar) and deploy your theme plugin during development. The following describes a methodology that can be used to assist a theme developer from having to continuously compile and deploy to the server as you refine things like CSS, JavaScript, Theme Images with this simple trick.

Currently this trick is only easily available using Liferay 5.2 and for a logged in user. Variants for any version are certainly imaginable once you understand how this works.

Instructions #

Step 1 : Create a custom attribute for your user #

Go to the control panel, and add a new custom attribute to your user. In this example I'll use a variable named "AlternatePath". As the value for "AlternatePath" set it to the patch to your local _diffs (or base directory depending upon which is relevant to you) of your theme plugin. For myself, on Mac OS, I use:

file:///Users/jklo/Documents/source/liferay-plugins/themes/my-theme/docroot/_diffs

Linux/Unix users will have a very similar file reference. Windows users will differ slightly as it will need to reference a drive letter in the path. The easiest way to get the right path, use your web browser to open a file locally within the _diffs directory. The URL in your browser should use the correct file:// syntax.

Step 2 : Modify the init_custom.vm to reference the variable you just set #

You can copy and paste the code below into your init_custom.vm. Then compile and deploy your theme plugin. What it does is get the value of the AlternatePath variable we set above, and if it exists and is not empty, it disables theme caching, and then modifies the $imagePath, $javaPath, $cssPath, and $css_main_file variables so that they reference the location on your local computer, instead of the ones within the deployed theme.

#set ($altPath = $user.getExpandoBridge().getAttribute('AlternatePath'))
#if ($altPath && $altPath != "")
	#set ($ignore = $theme_display.setThemeCssFastLoad(false))
	#set ($ignore = $theme_display.setThemeImagesFastLoad(false))
	#set ($ignore = $theme_display.setThemeJsBarebone(false))
	#set ($ignore = $theme_display.setThemeJsFastLoad(false))
	
	#set ($imagePath = $theme_display.setPathThemeImage("$altPath/images"))
	#set ($javaPath = $theme_display.setPathThemeJavascript("$altPath/javascript"))
	
	#set ($cssPath = $theme_display.setPathThemeCss("$altPath/css"))
	#set ($css_main_file = $htmlUtil.escape($portalUtil.getStaticResourceURL($request, "$altPath/main.css")))
#end

You should now be able to make modifications to files within your local images, javascript, css, and main.css and the changes become instantly viewable within the portal only to yourself. Once you are satisfied with your changes you can compile and deploy your theme, and then clear the value of the AlternatePath variable you set.

0 附件
46233 查看
平均 (2 票)
满分为 5,平均得分为 4.5。
评论
讨论主题回复 作者 日期
Neat trick. Thanks for sharing. I haven't tried... Olaf Kock 2009年9月28日 上午2:34
I've not tried it against the "Same Origin... Jim Klo 2009年9月28日 下午6:58
In MS Windwos beware the Mozilla Firefox... Joosep Simm 2010年2月22日 下午11:06
I can't get it to work with the 6.x release of... Aaron Harshbarger 2010年6月24日 上午2:48
Our shop can't get it to work either on 6.0.... James Collings 2011年2月10日 上午9:27
The only real criticism I've received from... Stian Sigvartsen 2011年12月11日 上午9:23
Stian, for the redeployment issue, check out... Bijan Vakili 2012年9月11日 下午8:54

Neat trick. Thanks for sharing. I haven't tried this yet - does it work with the Javascript "Same Origin Policy" or would we run into problems there? Or would this only apply if JS would contain some Ajax-code that tries to connect back to the server?

As the majority of theme-work I do is CSS, this is very useful even if JS was limited...
在 09-9-28 上午2:34 发帖。
I've not tried it against the "Same Origin Policy", as we're actually using 2 domains for this - so not sure. Most of our JavaScript is all JSONP thus it gets around that limitation. If your'e working against a development portal. I would think you'd be okay to change settings in browsers and such to workaround those issues (being sure to change those back on a production environment).

Our team here has been extremely happy with this method - you can use tools like Dreamweaver to make CSS edits - and see your results without going through the deployment hassle. We can have 4-5 individuals making changes to different parts of the theme plugin without conflicting with each other until they commit on SVN.
在 09-9-28 下午6:58 发帖以回复 Olaf Kock
In MS Windwos beware the Mozilla Firefox browser as the file:///.... url doesn't work there. It works ok with IE though.
在 10-2-22 下午11:06 发帖以回复 Jim Klo
I can't get it to work with the 6.x release of Liferay. It's like the parent CSS files aren't getting loaded...it's just taking my custom.css as the only CSS files to be applied. Any suggestions? I know it's referencing my custom.css file because any changes I do make get applied immediately. It's just the origial base.css, forms.css, navigation.css, etc files don't seem to get loaded.
在 10-6-24 上午2:48 发帖。
Our shop can't get it to work either on 6.0. Sure could use an update on how to do this, if it is still possible..
在 11-2-10 上午9:27 发帖以回复 Aaron Harshbarger
The only real criticism I've received from those who have been evaluating Liferay for general use at our company has been related to the fact that you have to continuously compile and deploy themes to test them whereas other products like Wordpress appear to cater for this via web user interface. So I would be very interested in hearing if this elegant solution to this "problem" can work in Liferay 6.x too
在 11-12-11 上午9:23 发帖以回复 James Collings
Stian, for the redeployment issue, check out JRebel http://zeroturnaround.com/jrebel/using-jrebel-with-liferay-neil-griffins-approac­h/
在 12-9-11 下午8:54 发帖以回复 Stian Sigvartsen