Hướng dẫn quản lý hộp công cụ

Mục công cụ vs Trang chức năng công cụ

Hệ thống công cụ được chia thành hai lớp độc lập:

Lớp	Vị trí tệp	Chức năng
Lớp siêu dữ liệu	src/content/tools/[danh mục]/[slug].md	Điều khiển cách hiển thị công cụ trong danh sách: tiêu đề, mô tả, danh mục, thẻ, v.v.
Lớp chức năng	src/pages/tools/[slug].astro	Trang tương tác thực tế của công cụ (HTML + JS), cần tạo thủ công

Bảng điều khiển chỉ quản lý tệp siêu dữ liệu .md, trang chức năng cần được tạo thủ công trên máy chủ và kích hoạt xây dựng lại.

Quản lý mục công cụ qua bảng điều khiển

Đi đến bảng điều khiển → quản lý công cụ (than bên trái).

Tạo công cụ mới

1. Nhấn nút “Tạo công cụ mới”
2. Điền các trường bắt buộc (tiêu đề, mô tả, danh mục, Slug) và thông tin tùy chọn
3. Nhấn “Lưu”
4. Đến trang kích hoạt xây dựng lại để xây dựng lại trang web

Nếu công cụ có chức năng tương tác (không phải liên kết ngoài), bạn cũng cần tạo tệp .astro tương ứng trên máy chủ, xem phần “Thêm trang chức năng” dưới đây.

Chỉnh sửa công cụ

Nhấn “Chỉnh sửa” trong danh sách công cụ, sửa đổi các trường cần thiết, lưu và kích hoạt xây dựng lại.

Xóa công cụ

Nhấn “Xóa” trong danh sách công cụ, xác nhận sau đó tệp .md của công cụ sẽ bị xóa. Kích hoạt xây dựng lại để công cụ biến mất khỏi danh sách.

Lưu ý: Xóa siêu dữ liệu không tự động xóa trang chức năng ( .astro). Nếu công cụ có trang chức năng riêng, bạn cần xóa src/pages/tools/[slug].astro trên máy chủ.

Thêm trang chức năng tương tác

Khi isExternal của công cụ là false và downloadUrl được đặt thành /tools/xxx/, tệp .astro tương ứng cần tồn tại.

Các bước

1. Tạo tệp trang trên máy chủ

Với Slug là account-management/ip-checker, hãy tạo:

src/pages/tools/ip-checker.astro

Tên tệp chỉ cần đoạn cuối cùng của slug, không cần bao gồm thư mục danh mục.

2. Cấu trúc cơ bản của trang

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Breadcrumb from '@/components/Breadcrumb.astro';

const breadcrumbs = [
  { label: 'Trang chủ', href: '/' },
  { label: 'Hộp công cụ', href: '/tools/' },
  { label: 'Kiểm tra IP' },
];
---

<BaseLayout title="Kiểm tra IP - Hộp công cụ Honeycomb" description="Kiểm tra địa điểm IP hiện tại">
  <section class="py-16 bg-dark-900 min-h-screen">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="mb-8"><Breadcrumb crumbs={breadcrumbs} /></div>
      <h1 class="text-3xl font-bold text-white mb-8">Kiểm tra IP</h1>

      <!-- Giao diện người dùng công cụ -->
      <div id="result" class="card p-6 text-gray-300"></div>
      <button id="btn" class="mt-4 btn-primary">Kiểm tra</button>
    </div>
  </section>
</BaseLayout>

<script>
  document.getElementById('btn')?.addEventListener('click', async () => {
    const res  = await fetch('https://api.ipify.org?format=json');
    const data = await res.json();
    document.getElementById('result').textContent = 'IP: ' + data.ip;
  });
</script>

3. Kích hoạt xây dựng lại

Kích hoạt một lần xây dựng lại từ bảng điều khiển để áp dụng.

Giải thích các trường công cụ

Trường	Bắt buộc	Giải thích
Slug	✓	Định dạng danh mục/tên, chữ thường, số, dấu gạch ngang
Tiêu đề	✓	Tên hiển thị của công cụ
Mô tả	✓	Mô tả ngắn gọn về công cụ, sử dụng cho thẻ danh sách và SEO
Danh mục	✓	Hiển thị theo nhóm trong danh sách công cụ
Nền tảng		Nền tảng áp dụng, phân cách bằng dấu phẩy, ví dụ android, web
Thẻ		Thẻ công cụ, phân cách bằng dấu phẩy, ví dụ vân tay, tách tài khoản
Liên kết tải xuống/sử dụng		Đường dẫn trang công cụ (/tools/xxx/) hoặc URL bên ngoài
Công cụ bên ngoài		Đánh dấu để chuyển hướng đến trang bên thứ ba
Nổi bật		Đánh dấu để hiển thị trong khu vực “Công cụ nổi bật” trên trang chủ hộp công cụ
Bản nháp		Đánh dấu để không hiển thị trong danh sách phía trước, nhưng URL vẫn có thể truy cập
Sắp xếp		Số càng nhỏ càng ở trên, mặc định là 0
Hình ảnh bìa		URL hình ảnh cho thẻ công cụ và đầu trang chi tiết
Nội dung		Định dạng Markdown, hiển thị trên trang chi tiết công cụ