Thư viện số hay thư viện trực tuyến là thư viện mà ở đó các bộ sưu tập các văn bản, tài liệu hình ảnh, tài liệu âm thanh, tài liệu video được lưu trữ dưới dạng số. Vì vậy bạn cần 1 mã nguồn để quản lý và cung cấp cho người dùng các tài liệu này.
Tuy nhiên hầu hết các Thư viện trường học đều có nguồn kinh phí thấp, vì vậy giải pháp mã nguồn mở là tối ưu nhất.
OpensourceVn xin giới thiệu tới 1 mã nguồn mở có thể đáp ứng yêu cầu này đó là Dspace.
Xem demo dspace: https://demo.dspace.org/jspui/
Tài liệu hướng dẫn cài đặt: https://wiki.duraspace.org/display/DSPACE/Documentation
Ưu điểm:
– Hỗ trợ xây dựng và quản lý các tài liệu số theo bộ sưu tập.
– Phân quyền chi tiết đến từng tài liệu, từng thành viên
– Cho phép tìm kiếm toàn văn
– Lưu trữ dữ liệu lớn
– Cho phép xem trực tuyến nội dung toàn văn tài liệu hoặc tải về
– Chạy tốt trên mọi giao diện, trình duyệt
– Không yêu cầu cấu hình máy chủ cao
– Thường xuyên được cập nhật để bổ sung tính năng mới và bảo mật
Tuy nhiên có hạn chế:
– Việc cài đặt hơi phức tạp, yêu cầu nhiều phần mềm đi kèm mới có thể chạy được
– Trong quá trình cài đặt mạng phải ổn định
– Viết bằng jsp nên bug lỗi rất khó hiểu
Một số hình ảnh khi cài dspace
Mã nguồn này hiện nay được rất nhiều thư viện trường cao đẳng, đại học học sử dụng để quản lý tài liệu số
Nếu các bạn muốn trải nghiệm có thể xem hướng dẫn và tải về tại: http://www.dspace.org/
Ở bài viết sau sẽ cung cấp 1 số tài liệu hướng dẫn việc cấu hình và cài đặt Dspace (do anh Phan Ngọc Đông – Thư viện Đh Đà Lạt biên soạn)
Bạn cũng có thể tham khảo thêm tại : https://www.facebook.com/Dspacetuts/
hoặc tại diễn đàn này
Tài liệu hướng dẫn cài đặt Dspace
Đây là tài liệu hướng dẫn rất chi tiết cách cài đặt mã nguồn Dspace do anh Phan Ngọc Đông biên soạn, tài liệu sẽ hướng dẫn từng bước cài đặt các phần mềm cần thiết để cài Dspace, tạo gói cài đặt Dspace, tiến hành cài đặt Dspace..
Cách tạo tài khoản administrator để đăng nhập vào trang quản lý sau khi cài đặt thành công như sau:
Mở phần mềm Total Commander để chạy câu lệnh, trỏ đến đường dẫn sau để chạy câu lệnh tạo tài khoản
dspace\bin>
gõ CMD để mở giao diện DOS
Nhập vào câu lệnh tạo tài khoản admin như sau:
dspace create-administrator
Tiến hành nhập các thông tin tài khoản theo yêu cầu, nhập Y để hoàn thành việc tạo tài khoản.
Hướng dẫn chỉnh sửa giao diện Dspace
[Dspace Tuts – Một số thông tin cơ bản]
Các chỉnh sửa áp dụng cho Dspace 4x trở lên.
Backup dữ liệu trước khi chỉnh sửa – rất quan trọng để khi bị lỗi có thể phục hồi lại nhanh chóng mà không cần phải cài đặt lại dspace (có thể backup toàn bộ source dspace hoặc chỉ cần tạo bản backup cho thư mục "jspui " vì mình chỉ chỉnh sửa thư mục này)
Các thay đổi được thực hiện chủ yếu ở thư mục Jspui (C:\dspace\webapps\jspui), bao gồm các thư mục con và file nằm trong thư mục này.
Các class code CSS khi chỉnh sửa được đặt trong mục dspace-theme.css (C:\dspace\webapps\jspui\static\css\bootstrap). Không ghi đè trực tiếp lên các tập tin CSS của bootstrap để tránh phát sinh lỗi.
Không nên xóa code của dspace, nếu muốn ẩn một vị trí nào đó có thể sử dụng chức năng responsive utilities của Bootstrap hoặc thêm class ẩn vị trí bằng css.
Trong một số trường hợp phải khởi động lại dịch vụ của Apache Tomcat (stop service sau đó start service apache tomcat) để hoàn thành việc thay đổi.
Xem qua tài liệu dspace tại trang chủ dspace www.dspace.org/ , và https://wiki.duraspace.org/
Xem qua công nghệ bootstrap : http://bootstrapdocs.com/v3.0.0/docs/
Công cụ edit code : có thể dùng notepad++ ( nhẹ , miễn phí, dễ dàng cài đặt)
Một số kiến thức cơ bản về css, html
Demo một số hình ảnh sau khi chỉnh sửa giao diện Dspace
[Dspace Tuts – Chỉnh sửa thanh Navbar]
Bài viết này sẽ hướng dẫn cách thay đổi màu sắc và thêm biểu tượng icon cho thanh menu Navbar, xem qua thông tin cơ bản trước khi thực hiện tại đây
Thay đổi màu sắc color
Mặc định màu sắc của thanh navbar là đen , bây giờ mình sẽ thay đổi màu của nó theo tùy thích. Đầu tiên mở file dspace-theme.css thêm đoạn mã code sau :
/* thay doi mau cho navbar */
.navbar-inverse { background:#205081 !important; }
#205081 là mã màu css, bạn có thể thay đổi mã màu theo tùy thích (sử dụng color picker) sau đó save lại dspace-theme.css , reload lại trang web để xem kết quả
Thay đổi biểu tượng (icon) trên thanh navbar
Truy cập website http://bootstrapdocs.com/v3.0.0/docs/
Chuyển qua tab components , bạn sẽ nhìn thấy mục Glyphicons, ở đây có rất nhiều icon các bạn có thể chọn tùy thích, tương ứng với nó là các đoạn code css, để sử dụng các icon này các bạn chỉ việc coppy đoạn code này và đặt nó trong thẻ <span class=""></span>:
Vd : <span class="glyphicon glyphicon-user"></span>
Chú ý : xóa bỏ dấu "." Trước các đoạn mã code css
Tiếp theo mở file navbar-default.jsp (đường dẫn jspui >> layout >> navbar-default.jsp)
Bây giờ chỉ cần thêm đoạn mã code icon vào trước tiêu đề là được.
Vd: thêm icon cho tiêu đề "Hướng dẫn" như sau :
Tìm đoạn mã <fmt:message key="jsp.layout.navbar-default.help"/> thêm vào trước nó đoạn code icon <span class="glyphicon glyphicon-book"></span>, như vậy đoạn code hoàn chỉnh sẽ là
<span class="glyphicon glyphicon-book"></span><fmt:message key="jsp.layout.navbar-default.help"/>
Để tạo khoảng cách giữa các icon với tiêu đề có thể làm như sau: mở file dspace-theme.css thêm đoạn code css
.glyphicon{padding-right:5px;}
Save lại file navbar-default.jsp, reload lại trang web để xem thành quả. Làm tương tự cho các tiêu đề menu khác.
[Dspace Tuts – Thêm menu trên navbar]
Dspace mặc định có các menu : trang chủ, duyệt theo, hướng dẫn. Nếu muốn thêm một menu liên kết khác (vd Tin tức đến trang web của cơ quan) có thể làm như sau:
Mở file ngôn ngữ Messages_vi.properties và Messages.properties (theo đường dẫn: C:\dspace\webapps\jspui\WEB-INF\classes\). Phải thêm vào cả 02 file ngôn ngữ vì sử dụng đa ngôn ngữ.
Thêm đoạn code ngôn ngữ sau ở cuối cùng:
jsp.layout.navbar-default.news = Tin tức (Messages_vi.properties)
jsp.layout.navbar-default.news = News (Messages.properties)
Tiếp theo mở file navbar-default.jsp theo đường dẫn (C:\dspace\webapps\jspui\layout\navbar-default.jsp)
trong cặp thẻ <ul class="nav navbar-nav"></ul> thêm đoạn code sau:
<ul class="nav navbar-nav">
<%– Them menu tin tuc –%>
<li><a href="/http://www.google.com"><span class="glyphicon glyphicon-info-sign"></spanfmt:message key="jsp.layout.navbar-default.news"/></a></li>
</ul>
Giải thích:
<a href="/http://www.google.com"> : Link đến trang liên kết
<span class="glyphicon glyphicon-info-sign">: truy cập trang https://getbootstrap.com/docs/3.3/components/#glyphicons chọn icon tùy thích .
[Dspace Tuts – Thay đổi banner mặc định]
Mặc định banner của Dspace không được bắt mắt cho lắm ? , bài viết này sẽ hướng dẫn thay đổi một chút cho vị trí này.
Banner đã thay đổi của Dspace
Banner mặc định của Dspace
Bạn có thể tham khảo thử 2 cách sau:
Cách 1: dùng hình ảnh (thiết kế hình ảnh sau đó chèn hình ảnh này vào vị trí banner này).
Thiết kế 1 banner sau đó chép vào thư mục image (đường dẫn C:\dspace\webapps\jspui\image)
Mở file home.jsp (theo đường dẫn C:\dspace\webapps\jspui\home.jsp), dưới thẻ <dspace:layout>
thêm đoạn code sau:
<div class="banner-header-top hidden-xs">
<img src="/<%= request.getContextPath() %>/image/banner_top.png" alt="DSpace logo" />
</div>
Mở tiếp file dspace-theme.css thêm đoạn code css để định dạng cho vị trí này:
.banner-header-top{
padding-top:5px;
padding-bottom:5px;
}
Cách 2: dùng hình ảnh kết hợp với module tin tức bên trên trong trang quản trị.
Thiết kế 1 hình ảnh sau đó chép vào thư mục image (đường dẫn C:\dspace\webapps\jspui\image)
Mở file home.jsp (theo đường dẫn C:\dspace\webapps\jspui\home.jsp), dưới thẻ <dspace:layout>
thêm đoạn code sau:
<div class="row banner-header-top">
<div class="col-md-2 hidden-xs">
<img src="/<%= request.getContextPath() %>/image/images_elibrary.jpg" alt="DSpace logo" class="thumbnail"/>
</div>
<div class="col-md-10 topNews">
<%= topNews %>
</div>
</div>
Mở tiếp file dspace-theme.css thêm đoạn code css để định dạng cho vị trí này:
.banner-header-top{
padding-top:5px;
padding-bottom:5px;
}
.topNews{
background: #0077a4;
color: #eff0f2;
height: 175px;
}
Tiếp theo đăng nhập vào trang quản trị, vào phần chỉnh sửa tin tức , chọn chỉnh sửa tin tức bên trên và cập nhật thông tin.
Giải thích:
Ở 2 cách trên đều có đoạn code css hidden-xs mục đích để ẩn vị trí này trên điện thoại có kích thước màn hình nhỏ, không gây nên cảm giác khó chịu cho người dùng. tham khảo thêm chức năng responsive utilities của Bootstrap.
Mỗi cách đều có ưu điểm khác nhau, bạn có thể tham khảo cách nào cũng được, tuy nhiên cách 2 thi dữ liệu có thể thay đổi nhanh trong module tin tức ở trang quản trị. Và có thể tùy biến theo nhiều cách khác thông qua css không nhất thiết phải theo 2 cách trên.
[Dspace Tuts – chỉnh sửa cách hiển thị bộ sưu tập trang chủ ]
Bài viết này sẽ hướng dẫn thay đổi cách hiển bộ sưu tập trang chủ, để hiển thị gọn gàng hơn cho trang chủ Dspace thì có thể tắt feed, submissions, carousel mặc định của Dspace (hầu như không thấy ai dùng và cách hiển thị của nó khá chuối !), có nhiều cách để vô hiệu hóa chức năng này như : tắt trong dspace.config, đặt code cần ẩn trong thẻ <!– –> hoặc có thể xóa luôn đoạn code này (không khuyến khích và backup source code trước khi xóa).
Mở home.jsp (đường dẫn C:\dspace\webapps\jspui), tìm đoạn code dưới đây và đặt nó trong thẻ <!–// hidden –> để ẩn vị trí này:
<!–// hidden
<%
if (submissions != null && submissions.count() > 0)
{
%>
<%
}
%>
–>
TIẾP THEO LÀ ĐỊNH DẠNG LẠI CÁCH HIỂN THỊ BỘ SƯU TẬP CHO TRANG CHỦ NHƯ SAU
Mở home.jsp (đường dẫn C:\dspace\webapps\jspui), đoạn code hiển thị bộ sưu tập của dspace như sau:
<%
if (communities != null && communities.length != 0)
{
%>
// code hien thị bo suu tap
<%
}
%>
Bây giờ có thể sửa lai như sau
<div class="row communities-home">
<%
if (communities != null && communities.length != 0)
{
%>
<div class="panel panel-primary">
<div class="panel-heading"><span class="glyphicon glyphicon-th-large"></span><fmt:message key="jsp.home.com1″/></div>
<div class="panel-body">
<p><fmt:message key="jsp.home.com2″/></p>
<div class="list-group-home">
<%
boolean showLogos = ConfigurationManager.getBooleanProperty("jspui.home-page.logos", true);
for (int i = 0; i < communities.length; i++)
{
%><div class="list-collection">
<%
Bitstream logo = communities[i].getLogo();
if (showLogos && logo != null) { %>
<div class="col-md-3″>
<img alt="Logo" class="img-responsive" src="/<%= request.getContextPath() %>/retrieve/<%= logo.getID() %>" />
</div>
<div class="col-md-12″>
<% } else { %>
<div class="col-md-3″>
<% } %>
<h4 class="list-group-item-heading-home"><span class="glyphicon glyphicon-folder-open"></span> <a href="/<%= request.getContextPath() %>/handle/<%= communities[i].getHandle() %>"><%= communities[i].getMetadata("name") %></a>
<%
if (ConfigurationManager.getBooleanProperty("webui.strengths.show"))
{
%>
<span class="badge pull-custom"><%= ic.getCount(communities[i]) %></span>
<%
}
%>
</h4>
<p><!–//hidden <%= communities[i].getMetadata("short_description") %> –>
</p>
</div>
</div>
<%
}
%>
</div>
</div>
</div>
</div>
<%
}
%>
</div>
Mở tiếp file dspace-theme.css thêm đoạn code css để định dạng cho vị trí này:
.panel-primary {
border-color: #e9e9e9 ;
border-radius: 0px;
}
.panel-primary > .panel-heading{
background-image:none;
background-color: #3c6478;
border-radius:0px;
}
.panel-primary > .panel-heading {
color: #fff;
border-color: transparent;
}
.communities-home{
padding-top:15px;
}
.badge.pull-custom{ margin-left:5px;}
.glyphicon{padding-right:5px;}
h4.list-group-item-heading-home {
font-size:14px;
font-weight:600;
text-transform:uppercase;}
span.glyphicon.glyphicon-folder-open{color:#E2C17A; font-size:14px;}
Mở file dspace.config (đường dẫn C:\dspace\config), tìm và sửa lại đoạn code dưới đây để hiển thị số lượng tài liệu trong mỗi bộ sưu tập (nếu như đã thực hiện thì có thể bỏ qua).
webui.strengths.show = false sửa lại thành webui.strengths.show = true
Khởi động lại dịch vụ của Apache tomcat để thay đổi có hiệu lực.
Giải thích
Có nhiều cách để chỉnh sửa cho vị trí này nhằm bắt mắt hơn, phụ thuộc vào cách tùy biến của mỗi người, không nhất thiết phải giống như trên. Theo phần hướng dẫn trên thì short_description sẽ được ẩn đi, vị trí này sẽ chia làm 4 cột, chèn thêm biểu tượng icon, hiển thị số lượng bài viết của mỗi bộ sưu tập trong thẻ css badge và ghi đè css mặc định của bootsrap .
[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")
+ "&filtername="+URLEncoder.encode(f,"UTF-8")
+ "&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.
[Dspace Tuts – hiển thị tài liệu mới cập nhật theo kiểu tự động chạy scroller ]
Bài viết này sử dụng plugin scroller jQuery để hiển thị tài liệu mới theo kiểu chuyển động và có tích hợp thêm nút để người dùng có thể di chuyển qua lại các tài liệu mới ngay trên trang chủ.
Đầu tiên cần phải download plugin jQuery này về tại đây
Sau khi tải về, giải nén và copy file jquery.bootstrap.newsbox.min.js (nằm trong thư mục scripts) vào thư mục js (đường dẫn C:\dspace\webapps\jspui\static) của thư mục dspace đã cài.
Tiếp theo mở file header-default.jsp ( đường dẫn C:\dspace\webapps\jspui\layout), thêm đoạn code sau để gọi file jquery.bootstrap.newsbox.min.js chạy.
<script type="text/javascript" src="/<%= request.getContextPath() %>/static/js/jquery.bootstrap.newsbox.min.js"> </script>
Tiếp tục download code hiển thị tài liệu mới cập nhật (được đặt tên tailieumoi.jsp) tại đây, sau khi tải về copy vào thư bỏ vào mục discovery ( đường dẫn C:\dspace\webapps\jspui\discovery)
Mở file tailieumoi.jsp lên bạn sẽ thấy đoạn code hiển thị tài liệu mới (có thể tùy chỉnh cách hiển thị tài liệu mới trong file này), tuy nhiên có thêm đoạn code javascript sau cần lưu ý:
<script type="text/javascript">
$(function () {
$(".recentsub-home").bootstrapNews({
newsPerPage: 5, // số tài liệu hiển thị
autoplay: true, // tự động chạy
pauseOnHover:true, // dừng lại khi đưa con trỏ chuột vào
direction: 'up', // kiểu chạy dưới lên
newsTickerInterval: 4000, // thời gian tự động chạy
onToDo: function () {
//console.log(this);
}
});
});
</script>
Mở tiếp file dspace.cfg (đường dẫn C:\dspace\config), tìm đoạn recent.submissions.count = 10, thay đổi để số lượng hiển thị này phải lớn hơn newsPerPage ở code javascript trên (ecent.submissions.count > newsPerPage).
Tiếp theo mở dspace-theme.css để định dạng lại cho vị trí này , ví dụ:
/* getRecentSubmissions */
.panel-footer{
background:#fff;
}
Cuối cùng mở home.jsp (đường dẫn C:\dspace\webapps\jspui), thêm đoạn code sau vào vị trí tùy chọn, ví dụ dưới Duyệt theo các đơn vị:
<%@ include file="discovery/tailieumoi.jsp" %>
Giải thích
Code hiển thị tài liệu mới ra trang chủ vẫn có thể chèn trực tiếp ngay file home.jsp, tuy nhiền để dễ dàng chỉnh sửa code mình tách ra thành một file , đặt nó nằm trong thư mục discovery sau đó dùng hàm include gọi ra .
Để cấu hình thêm cho plugin scroller jQuery, bạn có thể mở file hướng dẫn How to use it.doc nằm cùng với thư mục chứa plugin scroller jQuery đã tải về.
[Dspace Tuts – chỉnh sửa Footer dspace ]
Bài viết này sẽ hướng dẫn chỉnh sửa lại Footer mặc định của Dspace, để chỉnh sửa Footer cần mở file footer-default.jsp cần mở file footer-default.jsp (đường dẫn: C:\dspace\webapps\jspui\layout\footer-default.jsp), code footer cần chỉnh sửa sẽ bắt đầu từ đoạn
<%– Page footer –%>
<footer>// tùy chỉnh code theo ý muốn</<footer>
Đầu tiên mở file ngôn ngữ Messages.properties , Messages_vi.properties để thêm các thông theo nhu cầu (đường dẫn C:\dspace\webapps\jspui\WEB-INF\classes), lưu lại file khi hoàn thành
Ví dụ:
jsp.layout.footer-default.phone = thong tin cua ban
jsp.layout.footer-default.email = thong tin cua ban
jsp.layout.footer-default.adress = thong tin cua ban
jsp.layout.footer-default.connect = thong tin cua ban
Mở footer-default.jsp (đường dẫn: C:\dspace\webapps\jspui\layout\footer-default.jsp) để gọi các thông tin đã thêm ở ngôn ngữ ra, lưu lại file khi hoàn thành
Ví dụ:
<%– Page footer –%>
<footer class="navbar navbar-inverse-footer navbar-bottom">
<div class="container footer">
<div class="col-md-4″>
<p><img src="/<%= request.getContextPath() %>/image/dome-bluewhite-smaller.gif" alt="DSpace logo" class="logo"/></p>
</div>
<div class="col-md-4″>
<p><i class="fas fa-map-marker-alt"></i> <fmt:message key="jsp.layout.footer-default.adress"/>
</p>
<p><i class="fas fa-phone-volume"></i> <fmt:message key="jsp.layout.footer-default.phone"/></p>
<p><i class="fas fa-envelope"></i> <fmt:message key="jsp.layout.footer-default.email"/></p>
</div>
<div class="col-md-4″>
<p><fmt:message key="jsp.layout.footer-default.connect"/></p>
<p>
<a href="#"><i class="fab fa-facebook-square" style="font-size: 25px;"></i></a>
<a href="#"><i class="fab fa-twitter" style="font-size: 25px;"></i></a>
<a href="#"><i class="fab fa-linkedin" style="font-size: 25px;"></i></a>
</p>
</div>
</div>
</footer>
Restart lại trình duyệt để xem thay đổi
Tóm lại: Code footer cần sửa sẽ nằm trong file footer-default.jsp với nội dung được gọi ra từ file ngôn ngữ Messages.properties , Messages_vi.properties. Bạn có thể trình bày footer tùy theo nhu cầu sử dụng.
Tích hợp Bootstrap Css và Font Awesome vào Dspace
Đối với Dspace phiên bản 1.7x – 3.x thì giao diện chưa có chức năng responsive và giao diện chưa được nổi bật. Để tùy biến giao diện thân thiện hơn, bắt mắt hơn có thể tự viết CSS mới ( cách này khá mất thời gian) ,vì vậy sẽ dùng Bootstrap Css và Font Awesome để tiết kiệm thời gian hơn trong việc thay đổi giao diện cho Dspace.
Bạn có thể tìm hiểu chức năng của Bootstrap Css và Font Awesome trên mạng.
Bài này chỉ tập trung hướng dẫn cách tích hợp vào DSPACE.
Đầu tiên cần vào các trang sau để tải 2 tiện ích này:
Font Awesome: https://fontawesome.com/v4.7.0/ (dùng bản này cho nhẹ hoặc có thể tải bản mới nhất 5.0 tại ttps://fontawesome.com)
Bootstrap Css: https://getbootstrap.com
Vào thư mục jspui trên ổ đĩa cài đặt Dspace (vd: C:Dspace/ webapps/jspui) tạo một thư mục có tên libhitc (hoặc tên tùy thích), giải nén và copy 2 bộ source của bootstrap css , font awesome paste vào đây:
Tiếp theo vào thư mục layout (jspui/layout) mở file header-default.jsp chèn link css của bostrap và font awesome như sau:
<!– Bootsrap CSS –>
<link href="/<%= request.getContextPath() %>/libhitu/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/<%= request.getContextPath() %>/libhitu/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!– Font Awesome CSS –>
<link href="/<%= request.getContextPath() %>/libhitu/font-awesome/css/font-awesome.min.css" rel="stylesheet">
Note: libhitu thay đổi thành tên thư mục chứa source mà bạn đã tạo.
Tiếp tục mở footer-default.jsp (jspui/layout) chèn link javascript như sau:
<!– Bootstrap core JavaScript
================================================== –>
<!– Placed at the end of the document so the pages load faster –>
<script src="/<%= request.getContextPath() %>/libhitu/js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/<%= request.getContextPath() %>/libhitu/bootstrap/js/bootstrap.min.js"></script>
<!– IE10 viewport hack for Surface/desktop Windows 8 bug –>
<script src="/<%= request.getContextPath() %>/libhitu/js/ie10-viewport-bug-workaround.js"></script>
Note: libhitu thay đổi thành tên thư mục chứa source mà bạn đã tạo.
Bây giờ xóa cache trình duyệt và chạy lại dspace để kiểm tra việc tích hợp.
Lưu ý:
- Sao lưu dữ liệu (thư mục jspui trước khi thực hiện)
- Bạn nên lên mạng tìm cách sử dụng 2 tiện ích trên
Tích hợp WYSIWYG HTML editor cho biên tập tin tức Dspace
Mặc định khung soạn thảo tin tức (tin tức bên trên và tin tức thanh slidebar) của Dspace chỉ là form html cơ bản, nếu người sử dụng không biết code html thì khá khó khăn khi định dạng văn bản cho nội dung (tô màu, tạo chữ in nghiêng, đậm, chèn link…). Hôm nay Dspace Tuts sẽ hướng dẫn cơ bản cách chèn trình soạn thảo WYSIWYG HTML editor cho tin tức slidebar.
Mặc định khung soạn thảo tin tức Dspace
Định dạng khi sử dụng ckeditor
Định dạng khi sử dụng ckeditor
Để tích hợp trình soạn thảo đa chức năng khi biên tập tin tức của Dspace bạn có thể sử dụng các WYSIWYG HTML editor phổ biến như TinyMCE, CKEditor, YUI Rich Text Editor, Summernote…Tuy nhiên bài viết này sẽ sử dụng CKEditor để tích hợp cho form biên tập tin tức dspace.
Chi tiết cách tích hợp như sau:
Đầu tiên truy cập website để tải về souce code CKEditor theo link : https://ckeditor.com/ckeditor-4/ ( ở đây mình sẽ tải phiên bản CKEditor 4.)
Chọn mục Download , ở đây sẽ cho bạn 4 tùy chọn tải về bao gồm: các phiên bản basic, stand, full, customize, tùy nhu cầu sử dụng bạn có thể tải bản phù hợp, mình sẽ tải bản full để trải nghiệm thử).
Nếu không muốn tải về bạn có thể sử dụng nhanh liên kết tập tin ckeditor.js thông qua tùy chọn CKEditor CDN
Sau khi tải source về, tiến hành giải nén vào copy thư mục chứa source ckeditor vào mục static của dspace theo đường dẫn C:\dspace\webapps\jspui\static\ckeditor (đường dẫn có thể thay đổi theo thư mục cài đặt dspace trên máy của bạn).
Mở file footer-default.jsp ( đường dẫn C:\dspace\webapps\jspui\layout), thêm đoạn code sau trước thẻ </footer>
<script type="text/javascript" src="/<%= request.getContextPath() %>/static/ckeditor/ckeditor.js"> </script>
<script>
<script>
CKEDITOR.replace( 'news' );
</script>
Lưu ý: nếu bạn sử dụng ckeditor.js thông qua tùy chọn CKEditor CDN thì thay thế link liên kết đến tập tin ckeditor.js, ví dụ:
<script src="//cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'news' );
</script>
Reload lại trình duyệt và mở biên tập tin tức trên Dspace để sử dụng.
Mẹo: để trình soạn thảo nhẹ nhàng khi load thì nên sử dụng bản stand hoặc bỏ bớt các chức năng không sử dụng bằng cách chọn chức năng Online Builder trước khi tải source về, còn nếu bạn đã tải bản full về mà muốn loại bỏ bớt chức năng thì có thể làm như sau:
Trong source ckeditor tải về, bạn mở file index.html ( trong đường dẫn ckeditor\samples) để try cập chức năng config ckeditor.
Giao diện config mở lên, bạn chọn Toolbar Configurator, và tiến hành bỏ các chức năng không sử dụng ( bằng cách click bỏ dấu check vào chức năng không dùng đến).
Tiếp theo chọn Get toolbar config, copy code và dán vào file config.js nằm trong thư mục chứa ckeditor.
Reload lại trình duyệt để kiểm tra sự thay đổi.
Ngoài ra bạn có thể đọc file Documentation để xem hướng dẫn cách cấu hình, tùy biến CKEditor.
DVMS via opensourcevn
Quý vị nào muốn đầu tư một MXH bài bản và thực chiến thì có thể liên hệ với DVMS để tư vấn thêm (This email address is being protected from spambots. You need JavaScript enabled to view it.).
* Lưu ý: chi phí xây dựng một MXH thực chiến ở mức chấp nhận được là khoảng 700.000 USD - 2.000.000 USD.
DVMS
Có thể bạn chưa biết:
Tại sao app Facebook lại có id là Katana (kiếm Nhật)
Danh sách facebook lớn về xuất nhập khẩu, logistics, giao nhận ...
Chạy tự động video Facebook và Youtube khi gắn vào website, blog ...
Cách chặn và report tin nhắn spam trên Facebook
Facebook bị hack và những nguy hiểm khó lường hết
Bán hàng trên Facebook có cần đăng ký với Bộ Công Thương không?
Tại sao người Mỹ ưa dùng Twitter hơn so với Facebook?
Tặng mã nguồn mạng xã hội giống y Facebook
Hack tài khoản Facebook, Twitter... trong nháy mắt
Cách vô cùng đơn giản để gửi tin trực tiếp từ web vào sms ...
Hack khách hàng của Facebook Fanpage
Báo cho Facebook các nội dung xấu, nội dung sex...
Làm sao để mọi người có thể checkin fanpage của bạn?
Viết một facebook messenger bot đơn giản cùng Go + ngrok
Quy trình cấp phép mạng xã hội, điều kiện thiết lập mạng xã hội đầy
12 Open Source cho việc xây dựng mạng xã hội
Tài liệu lập trình mạng xã hội với Open Social
Sử dụng Mạng xã hội để tạo giá trị cho start-up ?
Ứng dụng bán hàng trên smartphone, smart TV, mạng xã hội...
DVMS chuyên:
* Viết ứng dụng cho smartphone và máy tính bảng: iPhone, iPad , Android, Tablet, Windows Phone, Blackberry, Uber app, Grab app, mạng xã hội, vận tải thông minh, thực tế ảo, game mobile,...
* Viết ứng dụng tìm và đặt xe, các hệ thống theo mô hình kinh tế chia sẻ, uber for x, ứng dụng giúp việc,...
* Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
* Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup, ...
Quý khách xem Hồ sơ năng lực của DVMS tại đây >>
Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>
