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 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

Chúc các bạn thành công !

Phần tiếp theo sẽ hướng dẫn cách chèn css, icon từ 2 tiện ích trên vào code.

 

 

HÃY CHIA SẺ NẾU BẠN THẤY THÍCH BÀI VIẾT


Bài viết cùng chuyên mục