上文我們分析了商品詳情頁面靜態化方案，本文我將帶著大家把jsp頁面改造為freemarker模板。
我們需要把原來屬於jsp目錄下面的檔案都改造成freemarker模板，把taotao-item-web工程的jsp目錄下的所有檔案都放到ftl目錄下，如下圖所示。

先修改commons目錄下的shortcut.jsp，將它的名字改為shortcut.htm，然後將檔案頭部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>去掉，該檔案其它地方不用修改，如下圖所示。

接著修改commons目錄下的header.jsp，將它的名字改為header.htm，把檔案頭部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>去掉，然後將<jsp:include page="shortcut.jsp" />這行程式碼修改為<#include "shortcut.htm" />，如下圖所示。

接著修改commons目錄下的footer-links.jsp，將它的名字修改為footer-links.htm，開啟它，把檔案頭部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>這行程式碼去掉，如下圖所示。

接著我們修改commons目錄下的footer.jsp，將它的名字修改為footer.htm，開啟它，把檔案頭部的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>這行程式碼去掉，如下圖所示。

刪除掉之後，找到<jsp:include page="footer-links.jsp"></jsp:include>這行程式碼，並將其改為<#include "footer-links.htm"/>，將var _searchValue = "${query}";這行程式碼加上null值處理，即修改為var _searchValue = "${query!}";，如下圖所示。

下面我們把ftl目錄下的item.jsp，把名字修改為item.htm，然後開啟這個檔案，把頭部所有<%@的引用都刪掉，如下圖所示。

然後找到<jsp:include page="commons/header.jsp" />這行程式碼，並將其修改為<#include "commons/header.htm" />，如下圖所示。

找到價格這一行程式碼，如下所示：

<strong class="p-price"  id="jd-price">￥<fmt:formatNumber groupingUsed="false" maxFractionDigits="2" minFractionDigits="2" value="${item.price / 100 }"/> </strong>

將其修改為：

<strong class="p-price"  id="jd-price">￥${item.price / 100 }</strong>

如下圖所示：

接著找到下面這段程式碼：

<c:forEach items="${item.images}" var="pic" varStatus="status">  
    <c:choose>
        <c:when test="${status.index == 0 }">
            <li>
                <img data-img="1" class="img-hover"  alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
            </li>
        </c:when>
        <c:otherwise>
            <li>
                <img data-img="1" alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
            </li>
        </c:otherwise>
    </c:choose>
</c:forEach>

將其修改為：

<#list item.images as pic>  
    <#if pic_index == 0>
        <li>
            <img data-img="1" class="img-hover"  alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
        </li>
    <#else>
        <li>
            <img data-img="1" alt="${item.title}" src="${pic}" width="50" height="50" data-url="${pic}">
        </li>
    </#if>
</#list>

接著再找到${itemParam}，並將其修改為${itemParam!}，如下圖所示。

最後再找到<jsp:include page="commons/footer.jsp" />這句程式碼，將其修改為<#include "commons/footer.htm" />，如下圖所示。

下面我們改造error目錄下的exception.jsp，將它的名字修改為exception.htm，將頭部的<%@開頭的引用都刪除掉，如下圖所示。

然後找到<jsp:include page="../commons/footer.jsp" />這句程式碼，並將其修改為<#include "../commons/footer.htm" />，如下圖所示。

這樣模板改造便完成了。