Nutch1.2二次开发详细攻略(三)【图文】------Nutch1.2二次开发(关于界面修改)

前言：作者(守望者MS)在实际搭建并开发Nutch的过程中参阅很多中文资料，但内容并不详尽且有错误，于是在此记录个人实战过程，纠正一些文章错误，以详细的过程展现一次简单的二次开发流程，为初学者降低门槛。但不能保证完全没有错误，如有发现希望大家指正。

目录：

1.Nutch1.2二次开发详细攻略(一)【图文】------Windows平台下Cygwin环境的搭建

2.Nutch1.2二次开发详细攻略(二)【图文】------Windows平台下Nutch1.2的搭建

3.Nutch1.2二次开发详细攻略(三)【图文】------Nutch1.2二次开发(关于界面修改)

4.Nutch1.2二次开发详细攻略(四)【图文】------Nutch1.2二次开发(关于中文分词)

本文出自 “守望者MS” 博客，谢绝转载！

一、开发环境介绍(以我个人为例)：

个人开发端：windows Server 2003 + Cygwin + Eclipse3.2

二、具体步骤：

Nutch原来的首页和结果也非常难看，因此在二次开发中修改这两个页面也是非常重要的。

<1>.首页的修改

下图是Nutch原始的首页，除了页面难看之外，你会发现有很多你不想要的东西。下面

我们就开始修改首页。

(1).首先我们在tomcat中找到刚刚部署的Nutch首页(index.jsp)，查看其源代码。

<%@ page
  session="false"
  import="java.io.*"
  import="java.util.*"
%><%
  String language =
    ResourceBundle.getBundle("org.nutch.jsp.search", request.getLocale())
    .getLocale().getLanguage();
  String requestURI = HttpUtils.getRequestURL(request).toString();
  String base = requestURI.substring(0, requestURI.lastIndexOf('/'));
  response.sendRedirect(language + "/");
%>

经过分析发现，其首页也就是做一个单一的参数传递和跳转罢了，而且对与我的二次开发来说，并不需要这么多的语言支持。

所以：

第一步，我将根目录下所有的语言包(包括EN，和ZH)全部删除，并且删除index.jsp。

第二步，自己新建一个首页，我的是index.html（这个首页可以找一个UI设计人员帮你设计一下，就是一个简单的静态页），其中唯一特殊的就是表单提交的地方，例如我的代码：

<form action="./search.jsp" method="get">   
<input type="hidden" name="page1" value="1">
<input type="text" name="query" class="searchInputBot" id="keyword" autocomplete="off" disableautocomplete maxlength="100"/>
<input type="submit" value="电力搜索" class="searchBUtton"/>
</form>

说白了就是传参和跳转。

下图是修改后的首页(图中擦去了一些相关信息，因为我的二次开发还没有完全结束)

 

 

<2>.搜索结果页的修改

跟首页的修改一样，先自行设计一个静态的页面，然后在search.jsp的源码中在相应的位置删除原来的代码，加上你的代码。由于这个页面是你自己写的，所以原来Nutch自带的一些引用之类的都可以不要，比如<jsp:include page="include/style.html"/>之类的，懂页面设计的在这个地方应该会很熟悉。

下图是我修改后的页面

 

 

<3>.分页显示的修改

在结果页中最重要的修改要数分页显示那个地方，由于Nutch原来提供的分页既不美观，也不满足用户体验。所以我们重点是修改分页显示功能。

找到原来代码中的分页代码:

<%

if ((hits.totalIsExact() && end < hits.getTotal()) // more hits to show
    || (!hits.totalIsExact() && (hits.getLength() > start+hitsPerPage))) {
%>
    <form name="next" action="../search.jsp" method="get">
    <input type="hidden" name="query" value="<%=htmlQueryString%>">
    <input type="hidden" name="lang" value="<%=queryLang%>">
    <input type="hidden" name="start" value="<%=end%>">
    <input type="hidden" name="hitsPerPage" value="<%=hitsPerPage%>">
    <input type="hidden" name="hitsPerSite" value="<%=hitsPerSite%>">
    <input type="hidden" name="clustering" value="<%=clustering%>">
    <input type="submit" value="<i18n:message key="next"/>">
<% if (sort != null) { %>
    <input type="hidden" name="sort" value="<%=sort%>">
    <input type="hidden" name="reverse" value="<%=reverse%>">
<% } %>
    </form>
<%
    }

if ((!hits.totalIsExact() && (hits.getLength() <= start+hitsPerPage))) {
%>
    <form name="showAllHits" action="../search.jsp" method="get">
    <input type="hidden" name="query" value="<%=htmlQueryString%>">
    <input type="hidden" name="lang" value="<%=queryLang%>">
    <input type="hidden" name="hitsPerPage" value="<%=hitsPerPage%>">
    <input type="hidden" name="hitsPerSite" value="0">
    <input type="hidden" name="clustering" value="<%=clustering%>">
    <input type="submit" value="<i18n:message key="showAllHits"/>">
<% if (sort != null) { %>
    <input type="hidden" name="sort" value="<%=sort%>">
    <input type="hidden" name="reverse" value="<%=reverse%>">
<% } %>
    </form>
<%
    }
%>

将其修改为：

注意下面代码中的两个<div>标签的样式是自己写的，用CSS控制其样式。

<div id="pager">
<div class="pg">
           <%       
            if (start >= hitsPerPage)
            {
            %>              
                <a class="flag_pg" href="/search.jsp?query=<%=htmlQueryString%>&page1=<%=page1-1%>&lang=<%=queryLang%>&start=<%=start - hitsPerPage%>&hitsPerPage=<%=hitsPerPage%>&hitsPerSite=<%=hitsPerSite%>&clustering=<%=clustering%>"><<</a>
           <%} %>
     <%
     //显示页码按钮
    int startnum=1; 
    String current_select="";
    int select=-1;
    //页面中最前面的页码编号，我设定（满足）共10页，当页为第6页
    //若果结果大于等于11页，每次显示11个按钮，当前按钮在最中间，即第6个
    if((int)(start/hitsPerPage)>=5)
     startnum=(int)(start/hitsPerPage)-4;
    for(int i=hitsPerPage*(startnum-1),j=0;i<=hits.getTotal()&&j<=10;)
    {
        if(hits.getTotal()%10==0&&i==hits.getTotal()) break; //搜索结果为整数的时候处理
        if(page1 == (i/hitsPerPage+1))
        {
    %>
        <span class="current"><%=page1%></span>
    <%
        }
        else
        {
    %>
    <a class="flag_pg" href="/search.jsp?query=<%=htmlQueryString%>&page1=<%=i/hitsPerPage+1 %>&lang=<%=queryLang%>&start=<%=i%>&hitsPerPage=<%=hitsPerPage%>&hitsPerSite=<%=hitsPerSite%>&clustering=<%=clustering%>"><%=i/hitsPerPage+1 %></a>
    <%
    }
    i=i+10;
    j++;
    }
    %>
    <%
    if ((hits.totalIsExact() && end < hits.getTotal()) // more hits to show
              || (!hits.totalIsExact() && (hits.getLength() > start  + hitsPerPage))) {
    %>
     <a class="flag_pg" href="/search.jsp?query=<%=htmlQueryString%>&page1=<%=page1+1%>&lang=<%=queryLang%>&start=<%=end%>&hitsPerPage=<%=hitsPerPage%>&hitsPerSite=<%=hitsPerSite%>&clustering=<%=clustering%>">>></a>
    <%} %>    
</div></div>

除此之外还需要在search.jsp源码的变量声明部分添加以下代码：

int page1 = 0;
  String s_page = request.getParameter("page1");
  if(s_page != null)
  {
    page1 = Integer.parseInt(s_page);
  }

在这个修改代码中以下代码需要注意：

   if(page1 == (i/hitsPerPage+1))
        {
    %>
        <span class="current"><%=page1%></span>

    …

其中page1 是一个URL参数,其代表当前页码

<span class="current"><%=page1%></span>这段代码则是为了将分页图标中的当前页标识出来。

下图是我修改的分页样式：

 

 

<4>.摘要中关键字红色高亮显示

在之前参阅的文章中对这个方案的解决方式是全部是去改源码，然后在编译部署。

这让我很是不明白，为什么要弄的那么复杂呢？

对此，我的解决办法是，通过CSS控制其显示样式。

例如我在控制我结果页样式的CSS文件中加入一下代码：

.highlight {

color: #FF0000;

}

保存，刷新，看看是不是已经变为红色啦。

<5>.关于其他要修改的请点击查看该文章(注：可以参考在本文中没有提及的一些要修改的点，对于已经提及的建议以参考本文为主，因为我采用的方式要更为简单，并且实际实践过)