
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.