如何仅用HTML、JS和CSS为Neocities网站文章添加标签系统？

一、调整HTML结构 #

在你现有代码基础上，给博客文章添加标签标记，同时新增标签导航区：

<!-- 标签导航区 -->
<div class="tag-nav">
  <span class="tag-item active" data-tag="all">全部</span>
  <span class="tag-item" data-tag="生活">生活</span>
  <span class="tag-item" data-tag="技术">技术</span>
  <span class="tag-item" data-tag="旅行">旅行</span>
</div>

<!-- 你的搜索栏 -->
<form class="searchBar" id="searchForm">
    <input type="text" placeholder="Search..." name="search" id="searchInput">
    <button type="submit"><img src="../img/logo_search.png"></button>
</form>

<!-- 博客文章列表 -->
<div class="blog-posts">
  <!-- 示例文章1 -->
  <article class="post" data-tags="生活,旅行">
    <h2>周末郊游记</h2>
    <p>记录周末去郊外徒步的趣事...</p>
    <div class="post-tags">
      <span class="tag">生活</span>
      <span class="tag">旅行</span>
    </div>
  </article>
  <!-- 示例文章2 -->
  <article class="post" data-tags="技术">
    <h2>纯前端实现标签系统</h2>
    <p>分享如何在静态网站上做标签筛选...</p>
    <div class="post-tags">
      <span class="tag">技术</span>
    </div>
  </article>
</div>

二、添加基础CSS美化 #

/* 标签导航样式 */
.tag-nav {
  margin: 20px 0;
}
.tag-item {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 8px;
  background: #eee;
  border-radius: 16px;
  cursor: pointer;
}
.tag-item.active {
  background: #333;
  color: white;
}

/* 文章标签样式 */
.post-tags .tag {
  display: inline-block;
  padding: 4px 8px;
  margin: 4px 4px 0 0;
  font-size: 12px;
  background: #f0f0f0;
  border-radius: 12px;
}

/* 搜索栏样式（可按需调整） */
.searchBar {
  margin-bottom: 20px;
}
.searchBar input {
  padding: 8px;
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}
.searchBar button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-left: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

/* 文章隐藏类 */
.post.hidden {
  display: none;
}

三、核心JS逻辑实现 #

// 获取DOM元素
const tagItems = document.querySelectorAll('.tag-item');
const searchForm = document.getElementById('searchForm');
const searchInput = document.getElementById('searchInput');
const posts = document.querySelectorAll('.post');

// 标签筛选函数
function filterByTag(tag) {
  posts.forEach(post => {
    const postTags = post.dataset.tags.split(',');
    if (tag === 'all' || postTags.includes(tag)) {
      post.classList.remove('hidden');
    } else {
      post.classList.add('hidden');
    }
  });
  // 更新标签激活状态
  tagItems.forEach(item => {
    item.classList.toggle('active', item.dataset.tag === tag);
  });
}

// 搜索筛选函数
function filterBySearch(query) {
  query = query.toLowerCase().trim();
  posts.forEach(post => {
    const title = post.querySelector('h2').textContent.toLowerCase();
    const content = post.querySelector('p').textContent.toLowerCase();
    const postTags = post.dataset.tags.toLowerCase();
    if (title.includes(query) || content.includes(query) || postTags.includes(query)) {
      post.classList.remove('hidden');
    } else {
      post.classList.add('hidden');
    }
  });
  // 重置标签激活状态
  tagItems.forEach(item => {
    item.classList.toggle('active', item.dataset.tag === 'all');
  });
}

// 绑定标签点击事件
tagItems.forEach(item => {
  item.addEventListener('click', () => {
    filterByTag(item.dataset.tag);
  });
});

// 绑定搜索表单提交事件
searchForm.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单默认提交行为
  filterBySearch(searchInput.value);
});

// 初始化：显示所有文章
filterByTag('all');

四、使用说明 #

1. 新增文章时，给<article>标签的data-tags属性添加对应标签，用英文逗号分隔即可，比如data-tags="美食,摄影"
2. 标签导航区的<span class="tag-item">可根据标签数量随意新增，保证data-tag的值和文章标签一致就行
3. 搜索功能会同时匹配文章标题、内容和标签，输入关键词就能筛选出相关内容

内容的提问来源于stack exchange，提问作者Eva Gabund