Hướng dẫn chỉnh sửa giao diện Dspace – P6

[Dspace Tuts – chỉnh sửa cách hiển thị duyệt theo các tiêu chí sidebar-facet]

Bài viết này sẽ hướng dẫn thay đổi cách hiển thị duyệt theo tiêu chí như tác giả, chủ đề, năm xuất bản mặc định của Dspace.

Đầu tiên mở file static-sidebar-facet.jsp ( đường dẫn C:\dspace\webapps\jspui\discovery), bắt đầu chỉnh sửa  nằm đoạn code sau

<div class=”col-md-<%= discovery_panel_cols %>”>

// Phần code hiển thị Search Filter Facet có thể tùy chỉnh theo nhu cầu

</div>
<%
}
%>

Mẹo: để chỉnh sửa code dễ dàng hơn nên xóa toàn bộ dữ liệu nằm trong đoạn code trên và tường bước chèn code vào để tránh sai sót.

Để hiển thị như hình minh họa có thể sửa lại code như sau:

<div class=”col-md-<%= discovery_panel_cols %>”>

<div class=”panel panel-primary”>
<div class=”panel-heading”><span class=”glyphicon glyphicon-th-large”></span><fmt:message key=”jsp.search.facet.refine”/></div>
<div class=”panel-body”>
<%
for (DiscoverySearchFilterFacet facetConf : facetsConf)
{
String f = facetConf.getIndexFieldName();
List<FacetResult> facet = mapFacetes.get(f);
if (facet == null)
{
facet = mapFacetes.get(f+”.year”);
}
if (facet == null)
{
continue;
}
String fkey = “jsp.search.facet.refine.”+f;
int limit = facetConf.getFacetLimit()+1;
%><div id=”facet_<%= f %>” class=”facet col-md-<%= discovery_facet_cols %>”>
<span class=”facetName”><fmt:message key=”<%= fkey %>” /></span>

<ul class=”list-group facet”><%
int idx = 1;
int currFp = UIUtil.getIntParameter(request, f+”_page”);
if (currFp < 0)
{
currFp = 0;
}
if (facet != null)
{
for (FacetResult fvalue : facet)
{
if (idx != limit)
{
%><li class=”list-group-item”><span class=”badge”><%= fvalue.getCount() %></span> <a href=”<%= request.getContextPath()
+ searchScope
+ “/simple-search?filterquery=”+URLEncoder.encode(fvalue.getAsFilterQuery(),”UTF-8”)
+ “&amp;filtername=”+URLEncoder.encode(f,”UTF-8”)
+ “&amp;filtertype=”+URLEncoder.encode(fvalue.getFilterType(),”UTF-8″) %>”
title=”<fmt:message key=”jsp.search.facet.narrow”><fmt:param><%=fvalue.getDisplayedValue() %></fmt:param></fmt:message>”>
<%= StringUtils.abbreviate(fvalue.getDisplayedValue(),36) %></a></li><%
}
idx++;
}
if (currFp > 0 || idx > limit)
{
%><li class=”list-group-item”><span style=”visibility: hidden;”>.</span>
<% if (currFp > 0) { %>
<a class=”pull-left” href=”<%= request.getContextPath()
+ searchScope
+ “?”+f+”_page=”+(currFp-1) %>”><fmt:message key=”jsp.search.facet.refine.previous” /></a>
<% } %>
<% if (idx > limit) { %>
<a href=”<%= request.getContextPath()
+ searchScope
+ “?”+f+”_page=”+(currFp+1) %>”><span class=”pull-right”><fmt:message key=”jsp.search.facet.refine.next” /></span></a>
<%
}
%></li><%
}
}
%></ul></div><%
}
%>

</div>

</div>
<%
}
%>

  Tiếp theo mở dspace-theme.css để định dạng lại cho vị trí này , ví dụ:

/* Home facet */
.list-group-item:first-child, .list-group-item:last-child{border-radius:0px;}
.facetName{padding-bottom:10px;}
.list-group.facet{padding-top:5px;}

  Cuối cùng mở home.jsp (đường dẫn C:\dspace\webapps\jspui), tìm đoạn code sau và thay đổi một chút:

<%
int discovery_panel_cols = 12;
int discovery_facet_cols = 4;
%>

Giải thích 

int discovery_panel_cols = 12 // độ rộng của khu vực chứa toàn bộ facet (theo bootsrap css)

int discovery_facet_cols = 4; độ rộng của mỗi vị trí facet như  tác giả, chủ đề , năm xuất bản (theo bootsrap css)

  Khởi động lại trình duyệt để xem sự thay đổi ( ở một số trình duyệt phải xóa bộ nhớ đệm mới có hiệu lực).

Bài viết trên hướng dẫn vị trí facet (duyệt theo các tiêu chí ở trang chủ ) nếu bạn muốn thay đổi, còn cách thay đổi như thế nào phụ thuộc vào nhu cầu của mỗi cá nhân. Bài viết sẽ có sai sót , rất mong các bạn góp ý để hoàn thiện hơn, chúc các bạn thành công.

THAM KHẢO THÊM