Toolbox Management Guide

Tool Entries vs. Tool Function Pages

The tool system is divided into two independent layers:

Layer	File Location	Purpose
Metadata Layer	src/content/tools/[category]/[slug].md	Controls the display of tools in the list: title, description, category, tags, etc.
Functionality Layer	src/pages/tools/[slug].astro	The actual interactive page (HTML + JS) for the tool, which needs to be manually created

The admin backend only manages the metadata .md files, and the functionality pages need to be manually created on the server by developers and a rebuild triggered.

Managing Tool Entries via the Backend

Go to Backend → Tool Management (sidebar).

Creating a New Tool

1. Click the “Create New Tool” button
2. Fill in the required fields (title, description, category, slug) and optional information
3. Click “Save”
4. Go to the Trigger Rebuild page to rebuild the website

If the tool has interactive features (not an external link), you also need to manually create the corresponding .astro page on the server. See the section below on “Adding Interactive Function Pages”.

Editing a Tool

In the tool list, click “Edit”, make the necessary changes, save, and then trigger a rebuild.

Deleting a Tool

In the tool list, click “Delete”. After confirmation, the tool’s .md file will be removed. Trigger a rebuild, and the tool will disappear from the list.

Note: Deleting the metadata does not automatically delete the corresponding function page (.astro). If the tool has a standalone function page, you need to manually delete src/pages/tools/[slug].astro on the server.

Adding Interactive Function Pages

When the tool’s isExternal is false and downloadUrl is set to /tools/xxx/, the corresponding .astro file must exist.

Steps

1. Create the Page File on the Server

If the Slug is account-management/ip-checker, create:

src/pages/tools/ip-checker.astro

The filename should only include the last segment of the slug, without the category directory.

2. Basic Page Structure

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

const breadcrumbs = [
  { label: 'Home', href: '/' },
  { label: 'Toolbox', href: '/tools/' },
  { label: 'IP Checker' },
];
---

<BaseLayout title="IP Checker - Hive Toolbox" description="Check the current IP location">
  <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">IP Checker</h1>

      <!-- Tool UI -->
      <div id="result" class="card p-6 text-gray-300"></div>
      <button id="btn" class="mt-4 btn-primary">Check</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. Trigger Rebuild

Trigger a rebuild once in the admin backend to make it effective.

Explanation of Tool Fields

Field	Required	Description
Slug	✓	Format: category/name, lowercase letters, numbers, hyphens
Title	✓	Display name of the tool
Description	✓	A brief description of the tool, used for list cards and SEO
Category	✓	Tools are grouped and displayed by this category in the list
Platform		Applicable platforms, comma-separated, e.g., android, web
Tags		Tool tags, comma-separated, e.g., fingerprint, account isolation
Download/Usage Link		Path to the tool page (/tools/xxx/) or an external link
External Tool		If checked, the link redirects to a third-party page
Featured		If checked, the tool is displayed in the “Featured Tools” area on the toolbox homepage
Draft		If checked, the tool is not shown in the front-end list, but the URL is still accessible
Order		The smaller the number, the higher the priority; default is 0
Cover Image		URL of the image at the top of the tool card and detail page
Body		Markdown format, displayed on the tool detail page