HƯỚNG DẪN BÀN GIAO & QUẢN TRỊ WEBSITE SEAHORSE
HƯỚNG DẪN CHỌN GIAO DIỆN (TEMPLATE) TRONG HARAVAN ADMIN
Khi tạo mới hoặc chỉnh sửa một Trang nội dung tĩnh (Page), Danh mục (Collection), Sản phẩm (Product) hoặc Blog trong Haravan Admin, bạn cần chọn đúng Giao diện (Template) ở khung bên phải màn hình để trang hiển thị đúng cấu trúc đặc thù:
| Loại Trang / Phân hệ | Đích đến & Mục đích | Template cần chọn |
|---|---|---|
| Trang Câu chuyện Seahorse | Trang giới thiệu lịch sử, mốc thời gian | page.our-story hoặc page |
| Trang Tầm nhìn & Sứ mệnh | Khối Vision, Mission, Core Values | page.vision-mission-core-value hoặc page.our-vision |
| Trang Cơ cấu Tổ chức | Sơ đồ tổ chức & Ban lãnh đạo | page.company-organization |
| Trang Danh sách Dịch vụ | 4 dịch vụ chính & khối CTA | page.services |
| Trang Chi tiết Dịch vụ | Nội dung chuyên sâu & danh sách dự án | page.services-detail |
| Trang Ngành nghề & Lĩnh vực | 5 ngành trọng điểm & Why Seahorse | page.industries |
| Danh mục Dự án (Collection) | Danh sách các dự án theo nhóm / tất cả | collection hoặc collection.projects |
| Chi tiết Dự án (Product) | Trang chi tiết dự án, specs, gallery, other projects | product |
| Trang Liên hệ | Bản đồ, địa chỉ, hotline & form tư vấn | page.contact |
| Danh mục Tin tức & Sự kiện | Danh sách bài viết tin tức (Blog) | blog |
| Danh mục Tuyển dụng | Danh sách tin tuyển dụng (Blog) | blog.careers |
| Chi tiết Tin Tuyển dụng | Bài tuyển dụng kèm Form gửi CV (Article) | article.careers-detail |
1. Header & Footer (Đầu trang & Chân trang)
• Mô tả: Bao gồm Cấu hình Logo, Menu chính có mũi tên chevron tự động nhận biết menu con (dropdown), Nút liên hệ Header và Thông tin liên hệ, Mạng xã hội, Bản quyền, Chứng nhận DNV tại Chân trang.
2. Trang Chủ (Homepage)
• Đường dẫn xem trước: https://www.seahorse.com.vn/?themeid=1000668896
• Mô tả: Bao gồm Banner Hero chính, Giới thiệu & Số liệu năng lực, 4 thẻ Dịch vụ nổi bật, Đội tàu & Nguồn lực, Dự án tiêu biểu, Tin tức mới nhất và Logo Đối tác.
3. Trang Giới thiệu (Our Story)
• Đường dẫn xem trước: https://www.seahorse.com.vn/pages/about-us?themeid=1000668896
• Mô tả: Bao gồm Banner giới thiệu, 2 Trụ cột hiệu quả vận hành và Dòng thời gian lịch sử hình thành (Timeline các mốc: 2012, 2015, 2018, 2022).
4. Trang Tầm nhìn & Sứ mệnh (Vision - Mission)
• Đường dẫn xem trước: https://www.seahorse.com.vn/pages/about-us?view=vision-mission-core-value&themeid=1000668896
• Mô tả: Bao gồm Khẩu hiệu triết lý phát triển, Khối Tầm nhìn (Our Vision), Sứ mệnh (Our Mission) và 3 Thẻ Giá trị cốt lõi (Quality, Safety, Innovation).
5. Trang Cơ cấu Tổ chức (Company Organization)
• Đường dẫn xem trước: https://www.seahorse.com.vn/pages/about-us?view=company-organization&themeid=1000668896
• Mô tả: Bao gồm Sơ đồ cơ cấu tổ chức hiển thị trực quan và Ban Lãnh đạo cấp cao (Managing Director & COO) cùng các phòng ban chức năng.
6. Trang Dịch vụ (Services)
• Đường dẫn xem trước: https://www.seahorse.com.vn/pages/about-us?view=services&themeid=1000668896
• Mô tả: Bao gồm Danh sách 4 Dịch vụ chi tiết kèm hiệu ứng tương tác hiện đại và Khối kêu gọi hợp tác (CTA).
7. Trang Chi tiết Dịch vụ (Services Detail)
• Đường dẫn xem trước: https://www.seahorse.com.vn/pages/about-us?view=services-detail&themeid=1000668896
• Mô tả: Bao gồm Nội dung chi tiết chuyên sâu từng giải pháp kỹ thuật, Bảng danh sách các dự án tiêu biểu theo từng mảng và Nút liên hệ tư vấn.
8. Trang Ngành nghề & Lĩnh vực (Our Industries)
• Đường dẫn xem trước: https://www.seahorse.com.vn/pages/about-us?view=industries&themeid=1000668896
• Mô tả: Bao gồm Thông tin 5 ngành công nghiệp trọng điểm (Dầu khí, Cát biển & nạo vét, Điện gió biển, Xây lắp công trình biển, Giải pháp tích hợp), Năng lực cốt lõi và Khối Why Choose Us.
9. Trang Danh mục Dự án (Projects Collection)
• Đường dẫn xem trước: https://www.seahorse.com.vn/collections/rov-subsea-monitoring?themeid=1000668896
• Mô tả: Bao gồm Banner Hero dự án, Bộ lọc Tabs danh mục liên kết với số lượng dự án thực tế tự động đếm, và Lưới thẻ dự án (Product Cards) hiển thị hình ảnh đại diện, tên dự án, chủ đầu tư (Client) và tóm tắt.
📋 Hướng dẫn Quản lý Danh mục Dự án (Projects Collection):
- B1: Vào Haravan Admin -> Sản phẩm -> chọn Danh mục sản phẩm.
- B2: Bấm Tạo danh mục (ví dụ: ROV & Subsea Monitoring, Offshore Pipeline, Wind Farm Support...).
- B3: Trong mục Giao diện (Template) ở cột bên phải, chọn collection hoặc collection.projects.
- B4: Vào Website -> Menu -> Thêm các liên kết Danh mục dự án vào một Menu (ví dụ: Projects Menu).
- B5: Vào Thiết lập giao diện (Theme Settings) -> Mục 9: Trang Danh mục & Chi tiết Dự án, chọn Menu vừa tạo tại ô "Menu phân loại dự án (Collection Menu)" để hệ thống tự động sinh các nút Tabs lọc dự án và tự đếm số lượng dự án có trong từng danh mục.
10. Trang Chi tiết Dự án (Project Detail / Product)
• Đường dẫn xem trước: https://www.seahorse.com.vn/products/blogs-articles-bluewave-offshore-logistics-optimization?themeid=1000668896
• Mô tả: Bao gồm Cột thông tin tổng quan (About Projects) sticky cố định khi cuộn chuột, Bảng thông số kỹ thuật (Client, Location, Scope of Work, Period), Nội dung bài viết chi tiết bên phải, Thư viện hình ảnh (Gallery) và Slider các dự án liên quan (Other Projects).
📝 Hướng dẫn Nhập liệu Chi tiết Dự án (Sản phẩm - Product):
Mỗi Dự án trong hệ thống Seahorse được quản lý dưới dạng một Sản phẩm (Product) trong trang quản trị Haravan. Để trang chi tiết hiển thị đầy đủ cột thông tin Sticky, bảng thông số kỹ thuật và thư viện ảnh:
1. Cấu trúc Cột Giới thiệu (About Projects) và Nội dung Chi tiết bằng dấu phân cách ####
Trong ô Mô tả sản phẩm (Product Description), nhập theo cú pháp phân tách 2 phần bằng ký tự ####:
####
[Nội dung bài viết chi tiết, giải pháp kỹ thuật, bảng dữ liệu, quy trình triển khai hiển thị ở cột bên phải]
- Phần trước dấu ####: Hệ thống tự động đưa vào cột bên trái (About Projects) và cố định (sticky) khi cuộn chuột.
- Phần sau dấu ####: Hệ thống hiển thị vào vùng bài viết chính bên phải kèm hình ảnh minh họa.
2. Cú pháp Nhãn (Tags) cho Bảng Thông số Kỹ thuật Dự án (Project Specifications)
Để hiển thị bảng thông số dự án chuyên nghiệp ở cột trái (Khách hàng, Vị trí, Phạm vi công việc, Thời gian thực hiện), bạn chỉ cần nhập các Tags (Nhãn) tương ứng trong ô Tags của sản phẩm:
| Thông số | Cú pháp Tag cần nhập | Ví dụ thực tế |
|---|---|---|
| Khách hàng / Chủ đầu tư | client: [Tên khách hàng] | client: Vietsovpetro Joint Venture |
| Vị trí triển khai | location: [Địa điểm] | location: Cuu Long Basin, Block 09-1 |
| Phạm vi công việc (Scope of Work) | sow: [Nội dung công việc] | sow: Pipeline Inspection & Subsea Survey |
| Thời gian thực hiện | period: [Năm hoặc khoảng thời gian] | period: 2024 - 2025 |
3. Thư viện Hình ảnh Dự án (Project Gallery)
- Ảnh đại diện (Ảnh đầu tiên): Được sử dụng làm ảnh thẻ dự án tại Danh mục (Collection) và Trang chủ.
- Các ảnh phụ tiếp theo: Hệ thống tự động thu thập và trình bày thành lưới Thư viện hình ảnh dự án (Project Gallery) ở cuối bài viết.
4. Dự án liên quan (Other Projects Slider)
- Website tự động lấy các dự án khác thuộc cùng Danh mục (Collection) để hiển thị vào slider đề xuất.
- Nếu danh mục có từ 3 dự án trở xuống, slider tự động căn chỉnh cố định gọn gàng; nếu từ 4 dự án trở lên, hệ thống kích hoạt chế độ lướt (Swiper Navigation) mượt mà.
11. Trang Tin tức & Sự kiện (News & Events)
• Đường dẫn xem trước: https://www.seahorse.com.vn/blogs/all?themeid=1000668896
• Mô tả: Bao gồm Banner Hero, Bài viết nổi bật tâm điểm (Featured Story), Bộ lọc Tabs theo nhãn (All, Leadership, Technical, Vessel & Equipment), Danh sách tin tức theo dòng thời gian và phân trang tự động.
📋 Hướng dẫn Quản lý & Phân loại Tin tức theo Bộ lọc Tabs (Tags Filter):
Khu vực Tin tức & Sự kiện trang bị hệ thống Bộ lọc Tabs giúp phân loại bài viết theo các chủ đề chuyên sâu một cách trực quan:
1. Cơ chế hoạt động của các nút Tabs:
- Nút "All" (Tất cả): Mặc định hiển thị toàn bộ bài viết tin tức của công ty (khi chưa áp dụng bộ lọc nhãn).
- Nút "Leadership": Bộ lọc hiển thị các bài viết mang nhãn (tag) leadership (Đường dẫn:
/blogs/news/tagged/leadership). - Nút "Technical": Bộ lọc hiển thị các bài viết mang nhãn (tag) technical (Đường dẫn:
/blogs/news/tagged/technical). - Nút "Vessel & Equipment": Bộ lọc hiển thị các bài viết mang nhãn (tag) vessel-equipment (Đường dẫn:
/blogs/news/tagged/vessel-equipment).
2. Cách gán Nhãn (Tags) cho bài viết trong Haravan Admin:
Để một bài viết xuất hiện tự động khi người dùng bấm vào từng tab tương ứng:
- B1: Vào Haravan Admin -> Website -> chọn Bài viết (hoặc vào Blog -> chọn blog News).
- B2: Bấm vào bài viết cần phân loại (hoặc tạo bài viết mới).
- B3: Tại cột bên phải, tìm ô Nhãn (Tags) và nhập tag tương ứng:
Tab mục tiêu Nhãn (Tag) cần nhập vào bài viết Ghi chú Leadership leadership Bài viết lãnh đạo, chiến lược, thông điệp ban điều hành Technical technical Bài viết chuyên môn, giải pháp công nghệ kỹ thuật biển Vessel & Equipment vessel-equipment Bài viết về đội tàu, máy móc, trang thiết bị chuyên dụng - B4: Bấm Lưu bài viết. Khi đó người dùng xem website bấm vào tab tương ứng sẽ lọc ra chính xác các bài viết đã gắn tag.
3. Bật/Tắt và Tùy biến Tên Tab trong Theme Settings:
- Vào Thiết lập giao diện (Theme Settings) -> Mục 9.1: Tiêu đề danh mục & Bộ lọc Tabs.
- Bạn có thể bật hoặc tắt hiển thị từng tab (Tab Tất cả, Tab 1, Tab 2, Tab 3) qua các ô checkbox.
- Có thể thay đổi tên hiển thị của từng Tab (ví dụ: đổi All thành Tất cả, đổi tên danh mục theo ý muốn).
12. Trang Chi tiết Bài viết (Article Detail)
• Đường dẫn xem trước: https://www.seahorse.com.vn/blogs/recruitment/we-re-hiring-legal-contract-specialist-hse-officer?themeid=1000668896
• Mô tả: Bao gồm Trình bày nội dung bài viết tin tức, hình ảnh đính kèm, tác giả, ngày đăng và danh mục bài viết liên quan.
13. Trang Tuyển dụng (Careers)
• Đường dẫn xem trước: https://www.seahorse.com.vn/blogs/careers?themeid=1000668896
• Mô tả: Bao gồm Thông điệp môi trường làm việc (Working Environment), 3 Trụ cột văn hóa doanh nghiệp có tương tác accordion linh hoạt và Danh sách các vị trí đang mở tuyển dụng.
14. Trang Chi tiết Tuyển dụng (Careers Detail)
• Đường dẫn xem trước: https://www.seahorse.com.vn/blogs/recruitment/we-re-hiring-legal-contract-specialist-hse-officer?view=careers-detail&themeid=1000668896
• Mô tả: Bao gồm Mô tả công việc chi tiết, Tiêu chuẩn ứng viên, Chế độ phúc lợi và Form ứng tuyển gửi CV trực tuyến.
15. Trang Liên hệ (Contact Us)
• Đường dẫn xem trước: https://www.seahorse.com.vn/pages/contact?themeid=1000668896
• Mô tả: Bao gồm Bản đồ địa điểm văn phòng/trụ sở (chuyển đổi tab linh hoạt giữa các chi nhánh Hà Nội, TP.HCM), Thông tin liên lạc (Hotline, Email, Địa chỉ) và Form gửi tin nhắn yêu cầu hỗ trợ.
HƯỚNG DẪN LẤY LINK FILE HÌNH ẢNH, VIDEO
Để thay đổi hình ảnh (banner, ảnh dịch vụ, ảnh bài viết, logo đối tác) hoặc video:
- B1+2: Đăng nhập trang quản trị -> Vào mục Cấu hình -> chọn File.
- B3: Bấm nút Tải file để chọn hình ảnh hoặc video từ máy tính tải lên hệ thống.
- B4: Bấm vào biểu tượng Copy link bên cạnh file vừa tải lên để sao chép đường dẫn hình ảnh.
- B5: Chuyển sang tab Thiết lập giao diện (Theme Settings) đang mở, dán link vừa copy vào ô hình ảnh tương ứng rồi bấm Lưu.
.mp4 (qua công cụ như yt5s.biz) rồi tải trực tiếp lên mục Cấu hình > File của Haravan để lấy link CDN sạch, không dính logo/quảng cáo.
HƯỚNG DẪN TẠO VÀ ĐIỀU CHỈNH MENU
- B1: Đăng nhập hệ thống quản trị -> Chọn Website -> chọn Menu.
- B2: Chọn 1 menu cần điều chỉnh (ví dụ: Menu chính hoặc Menu chân trang) hoặc bấm Thêm menu mới.
- B3: Khi thêm 1 liên kết mới, nhập Tên liên kết và Đích đến liên kết:
- Trang chủ: Dẫn về trang chủ website.
- Trang nội dung: Dẫn tới các trang tĩnh (Our Story, Services, Vision - Mission, Company Organization, Contact Us...).
- Danh mục Dự án: Dẫn tới phân loại nhóm dự án (ROV, Subsea Monitoring...).
- Danh mục Blog: Dẫn tới mục tin tức (News & Events) hoặc tuyển dụng (Careers).
- Địa chỉ web (URL): Dán đường dẫn tùy chỉnh bất kỳ mà bạn muốn.
- B4: Khi hoàn tất, bấm vào nút “Cập nhật menu” (tại góc phải ở dưới màn hình) để lưu lại.
Cách tạo menu con (Dropdown):
1. Tạo 1 liên kết menu mới, di chuyển menu đó xuống nằm dưới menu cha.
2. Sau đó, đè chuột kéo menu đó nhích sang bên phải, liên kết sẽ tự động trở thành menu con của menu phía trên nó.
3. Trên website, menu cha sẽ tự động xuất hiện biểu tượng mũi tên nhận diện (chevron-down) và tự động xoay chuyển khi người dùng rê chuột (hover).
4. Cuối cùng bấm Cập nhật menu để lưu.
