如何寫一個漂亮的Liferay Theme 6.2

只要你看到的、想做出來的頁面，都可以通過liferay theme來實現，至於具體實現凡方式，那就見仁見智了。

下面，我將介紹如何快速地建一個簡單漂亮的liferay theme.

工具：liferay IDE 3.0, liferay SDK 6.2，liferay portal 6.2(至於怎么在哪里下載，請參考前面教程)

以上工具准備好了以后，就可以在網上隨便找一個你喜歡的模板作為參考下載下來，等下我們就可以把你的theme改造成你想要的樣紙啦。

下面是我做的成品：

下面就是具體制作過程啦：

1.打開liferay IDE選擇建一個liferay的plugin項目

2.然后選擇classic模式的，這個是liferay默認的theme,我們會在它的基礎上進行修改，然后模板語言選擇velocity,因為在62中liferay自己默認用的就是velocity,如果選freemaker的話，還需要對導航欄進行更多的修改。

3，然后theme就建成功啦，你可以把它部署到liferay portal上，發現它就是liferay傳統的theme，然后我們就可以在它的基礎上進行我們自己的修改了。

打開我們所建theme的目錄結構，你會發現里面有一個differs的文件夾，等下你所要做的修改都要放在這個文件夾下才能生效，不建議直接修改portal原有的文件。

4.我現在主要要修改的就是導航欄部分和頁腳。發現其實它的代碼就在template/portal_normal.vm文件中，我就把這個文件夾連同文件一起拷貝到_diffs文件夾下，頁腳是最好改的，找到頁腳標簽，原來代碼如下

<footer id="footer" role="contentinfo">
        <p class="powered-by">
            #language ("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>
        </p>
    </footer>

把它換成我想要的代碼，我直接從模板中把它html頁腳的代碼拷進來了，如下：

<footer id="footer" role="contentinfo">
        <div class="footer">
            <div class="footer-mid">
                    <div class="container">
                        <div class="col-sm-3 ft-grid1">
                            <h3>Location</h3>
                            <p>Contrary to popular</p>
                            <p>perspiciatis</p>
                            <p>[phone]</p>
                        </div>
                        <div class="col-sm-3 ft-grid2">
                        <h3>Follow Us</h3>
                            <ul class="social-in">
                                <li><a href="#"><i> </i></a></li>                       
                                <li><a href="#"><i class="twitter"> </i></a></li>
                                <li><a href="#"><i class="dribbble"> </i></a></li>                      
                            </ul>
                        </div>
                        <div class="col-sm-6 ft-grid1">
                            <h3>Newsletter</h3>
                            <form>
                                <input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
                                <input type="submit" value="Subscribe">
                            </form>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                <div class="class-footer">
                    <div class="container">
                        <div class="col-md-6 footer-grid">
                            <p >Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">hello</a> - Collect from <a href="http://www.cssmoban.com/" title="網頁模板" target="_blank">joye</a></p>
                        </div>
                            <div class="clearfix"> </div>
                </div>
            </div>
         </div>
</footer>

這時你保存一下，在重新部署一下theme,你會發現footer的文字都上去了，但是沒有css樣式與圖片，偷懶的方式就是，把原來模板文件中的css,image,js文件夾都拷貝到_diffs文件夾下。然后怎么把模板的css和liferay的theme關聯起來呢，把liferay自帶的main.css拷貝到_diffs文件夾下去，然后仿照里面的格式把模板的css文件全部包含進去。

然后再部署上去試一下效果，發現它的頁腳部分就跟我們模板上的頁腳一模一樣啦。

需要注意的是，模板里面的某些css屬性跟liferay的屬性重合了，會改變原來的頁面布局。這時你可能需要做的就是用不那么偷懶的方法了，不是把模板所有的css都包括進去，而是把你需要的屬性包括進去。

5.然后導航修改的方法差不多，我隨便 寫了一個作為參考，可以看看我改的是哪些地方，有什么問題，哈哈，下次再改。

The most import thing is show u the code.

my-classic-theme