Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e3c8157c44 | |||
| bd1dd1b309 | |||
| 66aaefebe9 | |||
| 8dad4fd45b | |||
| 82a9fe0e1f | |||
| f39fbb8800 | |||
| 5345171145 | |||
| 8b06a94852 |
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"java.configuration.updateBuildConfiguration": "interactive",
|
||||
"java.compile.nullAnalysis.mode": "automatic"
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
# Hướng Dẫn Chuyển Đổi HTML Tĩnh Sang Spring Boot (Thymeleaf)
|
||||
|
||||
Tài liệu này hướng dẫn bạn cách tự tay chuyển đổi các file HTML tĩnh (như các trang của UMass) sang giao diện động dùng Thymeleaf trong Spring Boot.
|
||||
|
||||
## 4 Bước Chuyển Đổi Thủ Công
|
||||
|
||||
### Bước 1: Tạo file giao diện mới
|
||||
1. Mở thư mục chứa giao diện của dự án: `sisvietnamvn/src/main/resources/templates/`
|
||||
2. Tạo một file `.html` mới (Ví dụ: `schools-colleges.html`)
|
||||
3. Dán "khung xương" cơ bản sau vào file vừa tạo:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{fragments/layout}">
|
||||
<body>
|
||||
|
||||
<!-- Nội dung của trang sẽ nằm trong thẻ main này -->
|
||||
<main role="main" layout:fragment="content">
|
||||
|
||||
<!-- DÁN NỘI DUNG TỪ FILE GỐC VÀO ĐÂY -->
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Bước 2: Copy "phần ruột" từ file gốc
|
||||
1. Mở file HTML gốc (Ví dụ: `UMASS_sample\Schools & Colleges _ UMass Amherst.html`).
|
||||
2. Bấm `Ctrl + F`, tìm thẻ `<main`.
|
||||
3. Bôi đen và Copy toàn bộ nội dung nằm **từ thẻ mở `<main>` đến thẻ đóng `</main>`**.
|
||||
> **Lưu ý:** Không copy các thẻ `<html>`, `<head>`, `<header>`, `<footer>` ở file gốc vì file `layout.html` đã lo phần đó. Đảm bảo bạn đang copy mã nguồn HTML của trang UMass, chứ không copy nhầm giao diện của cửa sổ chat.
|
||||
4. Dán nội dung vừa copy vào giữa thẻ `<main layout:fragment="content">` ở Bước 1.
|
||||
|
||||
### Bước 3: Sửa lại đường dẫn Ảnh / Video (Rất quan trọng)
|
||||
Sau khi dán xong, các bức ảnh sẽ bị lỗi đường dẫn. Bạn cần bấm `Ctrl + F` trong file mới tạo, tìm các thẻ `<img>` và sửa lại:
|
||||
|
||||
1. **Xóa** tất cả các thuộc tính `srcset="..."` hoặc `data-src="..."` hoặc `data-srcset="..."`. (Nếu để lại, trình duyệt sẽ ưu tiên tải các link lỗi này).
|
||||
2. **Đổi** thuộc tính `src="..."` thành **`th:src="@{/images/umass/tên_file_ảnh.jpg}"`**.
|
||||
|
||||
**Ví dụ sửa ảnh:**
|
||||
```html
|
||||
<!-- TRƯỚC KHI SỬA (Lỗi 404): -->
|
||||
<img src="./Schools & Colleges _ UMass Amherst_files/anh_truong.jpg" srcset="https://drupal..." />
|
||||
|
||||
<!-- SAU KHI SỬA (Chuẩn Spring Boot): -->
|
||||
<img th:src="@{/images/umass/anh_truong.jpg}" />
|
||||
```
|
||||
|
||||
### Bước 4: Khai báo URL trong Controller
|
||||
Để khi gõ link trên trình duyệt, Spring Boot biết đường mở file HTML của bạn lên, bạn cần cấu hình Java:
|
||||
|
||||
1. Mở file `src/main/java/com/sisvietnamvn/web/controller/HomeController.java`.
|
||||
2. Thêm một hàm để ánh xạ URL tới file HTML bạn vừa tạo:
|
||||
```java
|
||||
package com.sisvietnamvn.web.controller;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
|
||||
@Controller
|
||||
public class HomeController {
|
||||
|
||||
@GetMapping("/")
|
||||
public String home() {
|
||||
return "index";
|
||||
}
|
||||
|
||||
// --- THÊM CÁC TRANG MỚI Ở ĐÂY ---
|
||||
|
||||
// Ví dụ cho trang Schools & Colleges:
|
||||
@GetMapping("/schools-colleges")
|
||||
public String schoolsColleges() {
|
||||
return "schools-colleges"; // Phải khớp với tên file schools-colleges.html
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Hoàn tất
|
||||
1. Bạn vào Terminal và gõ: `.\gradlew bootRun` (nhớ nhấn `Ctrl + C` tắt cái cũ nếu đang chạy).
|
||||
2. Mở trình duyệt gõ: `http://localhost:8082/schools-colleges`.
|
||||
3. Bấm `Ctrl + F5` để tải lại giao diện hoàn chỉnh có đầy đủ CSS!
|
||||
|
Before Width: | Height: | Size: 8.9 MiB After Width: | Height: | Size: 8.9 MiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 4.0 MiB After Width: | Height: | Size: 4.0 MiB |
@@ -95,3 +95,5 @@ If you have run out of energy or time for your project, put a note at the top of
|
||||
|
||||
cd ..\sisvietnamvn\
|
||||
.\gradlew bootRun
|
||||
|
||||
dùng JHipster
|
||||
|
Before Width: | Height: | Size: 265 KiB After Width: | Height: | Size: 265 KiB |
|
Before Width: | Height: | Size: 484 KiB After Width: | Height: | Size: 484 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 630 KiB After Width: | Height: | Size: 630 KiB |
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 203 KiB |
|
Before Width: | Height: | Size: 314 KiB After Width: | Height: | Size: 314 KiB |
|
Before Width: | Height: | Size: 408 KiB After Width: | Height: | Size: 408 KiB |
|
Before Width: | Height: | Size: 607 KiB After Width: | Height: | Size: 607 KiB |
|
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 281 KiB |
|
Before Width: | Height: | Size: 466 KiB After Width: | Height: | Size: 466 KiB |
|
Before Width: | Height: | Size: 200 KiB After Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 182 KiB After Width: | Height: | Size: 182 KiB |
|
Before Width: | Height: | Size: 370 KiB After Width: | Height: | Size: 370 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 309 KiB |
|
Before Width: | Height: | Size: 618 KiB After Width: | Height: | Size: 618 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
@@ -1 +1 @@
|
||||
/* PLEASE DO NOT COPY AND PASTE THIS CODE. */(function(){var w=window,C='___grecaptcha_cfg',cfg=w[C]=w[C]||{},N='grecaptcha';var gr=w[N]=w[N]||{};gr.ready=gr.ready||function(f){(cfg['fns']=cfg['fns']||[]).push(f);};w['__recaptcha_api']='https://www.google.com/recaptcha/api2/';(cfg['render']=cfg['render']||[]).push('onload');(cfg['anchor-ms']=cfg['anchor-ms']||[]).push(20000);(cfg['execute-ms']=cfg['execute-ms']||[]).push(30000);w['__google_recaptcha_client']=true;var d=document,po=d.createElement('script');po.type='text/javascript';po.async=true; po.charset='utf-8';po.src='https://www.gstatic.com/recaptcha/releases/Br0hYqpfWeFzYCAXLD4UuCIV/recaptcha__vi.js';po.crossOrigin='anonymous';po.integrity='sha384-RlvUaS/WP+VFANloY9HVcTp1NL1nrUcsT0LhTKPL4fsvkjsGBs46nSC+Du7t8lAB';var e=d.querySelector('script[nonce]'),n=e&&(e['nonce']||e.getAttribute('nonce'));if(n){po.setAttribute('nonce',n);}var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(po, s);})();
|
||||
/* PLEASE DO NOT COPY AND PASTE THIS CODE. */(function(){var w=window,C='___grecaptcha_cfg',cfg=w[C]=w[C]||{},N='grecaptcha';var gr=w[N]=w[N]||{};gr.ready=gr.ready||function(f){(cfg['fns']=cfg['fns']||[]).push(f);};w['__recaptcha_api']='https://www.google.com/recaptcha/api2/';(cfg['render']=cfg['render']||[]).push('onload');(cfg['anchor-ms']=cfg['anchor-ms']||[]).push(20000);(cfg['execute-ms']=cfg['execute-ms']||[]).push(30000);w['__google_recaptcha_client']=true;var d=document,po=d.createElement('script');po.type='text/javascript';po.async=true; po.charset='utf-8';po.src='https://www.gstatic.com/recaptcha/releases/hsFBb1u5wWWWkWP4in1ua2cQ/recaptcha__vi.js';po.crossOrigin='anonymous';po.integrity='sha384-3hQs73wO7LyiswjVqa+8n2EcRJELqidW4D0HnIjSdAGJAlkQC0gnDjaT+jQoSaHe';var e=d.querySelector('script[nonce]'),n=e&&(e['nonce']||e.getAttribute('nonce'));if(n){po.setAttribute('nonce',n);}var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(po, s);})();
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,4 @@
|
||||
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
|
||||
.c--card-grid [data-component-id="umass_base:description"].f--description a.field-stat-link{display:inline-flex;justify-content:center;align-items:center;position:relative;width:auto;min-width:10.625rem;height:3.125rem;padding:0 0.9375rem;font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:0.875rem;font-weight:800;line-height:1.2858;text-align:center;text-decoration:none;text-transform:uppercase;white-space:normal;appearance:none;border:0;border-radius:0;color:#fff;background-color:#881c1c;transition:background-color 0.1s ease-in-out;}.c--card-grid [data-component-id="umass_base:description"].f--description a.field-stat-link:hover{background-color:var(--color-brand-dark);color:var(--color-white);}
|
||||
.block-microsite-menu-block svg.ext,.block-microsite-menu-block svg.mailto,.block-microsite-menu-block svg.tel{fill:#ffffff;}.block-microsite-menu-block svg.ext path,.block-microsite-menu-block svg.mailto path,.block-microsite-menu-block svg.tel path{stroke:#ffffff;}
|
||||
.page-node-type-story .publication-date,.story-listing .publication-date{display:none;}.story-listing .f--field.f--eyebrow{display:none;}
|
||||