基本上，我有一个网站来显示我拥有的所有项目，但我希望这些项目自动排序到它们自己的类别页面中，而不是将它们全部显示在单个页面中。 我对编码不是很了解，但我相信我需要一个包含所有单独条目的数据库文件，以及一个调用其中具有指定类别的条目以在页面中显示的代码。我什至不知道如何开始编写所有这些内容，而且我正在使用 neocities 的免费版本，因此我可以使用的文件和代码类型受到一些限制。 我很感激您能给我的任何想法或指导！
我一直在跟踪谷歌工作表中的项目，并在额外嵌入的谷歌工作表中显示所述项目，但这需要我在每个类别的不同电子表格中手动添加/排序条目，这将是现在无法管理，因为我想要更多的类别。更不用说我什至无法对类别电子表格中的项目进行排序，因为我必须垂直而不是水平显示每个条目上的数据！ 每个条目都需要以下类型的信息：项目图像、我何时获得它、我从谁那里获得、我如何获得它、主类别、子类别和个人笔记
创建一个 JSON 文件来存储您的项目数据。它可能看起来像这样：
[
{
"itemName": "Item 1",
"image": "item1.jpg",
"acquisitionDate": "2023-01-01",
"acquiredFrom": "John Doe",
"acquisitionMethod": "Gift",
"mainCategory": "Category A",
"subCategory": "Subcategory A1",
"notes": "Lorem ipsum dolor sit amet."
},
// Add more items as needed
]
创建 HTML 文件来构建您的网页。您可以使用像这样的简单模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Item Collection</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="categories"></div>
<div id="items"></div>
<script src="script.js"></script>
</body>
</html>
编写 JavaScript 代码来加载 JSON 数据并为每个类别和项目动态创建 HTML 元素。
document.addEventListener('DOMContentLoaded', function () {
// Load JSON data
fetch('data.json')
.then(response => response.json())
.then(data => organizeItems(data));
});
function organizeItems(items) {
// Organize items by category
const categories = {};
items.forEach(item => {
const category = item.mainCategory;
categories[category] = categories[category] || [];
categories[category].push(item);
});
// Display categories
const categoriesContainer = document.getElementById('categories');
Object.keys(categories).forEach(category => {
const categoryButton = document.createElement('button');
categoryButton.textContent = category;
categoryButton.addEventListener('click', () => displayItems(categories[category]));
categoriesContainer.appendChild(categoryButton);
});
}
function displayItems(items) {
// Display items for the selected category
const itemsContainer = document.getElementById('items');
itemsContainer.innerHTML = ''; // Clear previous items
items.forEach(item => {
const itemElement = document.createElement('div');
itemElement.innerHTML = `
<h3>${item.itemName}</h3>
<img src="${item.image}" alt="${item.itemName}">
<p>Date: ${item.acquisitionDate}</p>
<p>Acquired from: ${item.acquiredFrom}</p>
<p>Method: ${item.acquisitionMethod}</p>
<p>Notes: ${item.notes}</p>
`;
itemsContainer.appendChild(itemElement);
});
}
将您的 HTML、CSS、JavaScript 和 JSON 文件上传到您的 neocities 帐户。
访问您的 neocities 网站查看分类项目。
这是一个基本示例，您可能需要根据您的具体要求调整代码。此外，请注意，此解决方案不会在会话之间保留数据，因为 neocities 不支持服务器端脚本或数据库。如果您想要更高级的功能或数据持久性，您可能需要考虑支持服务器端脚本和数据库的不同托管解决方案。