Skip to content

[Feature] 支持 Frontmatter Tags 在文章头部可视化展示 #7

@sayunchuan

Description

@sayunchuan

@steven-ld 作者你好,这是一条功能建议。

当前 PowerWiki 已支持 Frontmatter 中 tags 字段的解析,但前端没有对其进行展示。

我建议在文章头部(日期/文件信息下方)添加 Tag 可视化展示功能。

实现方案

我已在本地实现了一个简单版本,主要特性:

  • 位置:文章头部 meta 信息下方独立一行
  • 样式:胶囊形 Outline 风格 + 标签图标
  • 颜色:基于 tag 内容自动计算(HSL 色相映射),每个 tag 颜色一致且可区分
  • 交互:悬停时浅色背景填充 + 轻微上移。

当前点击没有具体的交互逻辑,我认为可以未来再添加点击之后列出相同tag文章的功能。

效果预览

Image

涉及文件:

public/index.html - 添加 tags 容器
public/app.js - 添加颜色计算和渲染逻辑(约 25 行)
public/styles.css - 添加 tag 样式(约 20 行)

如果你有兴趣,我可以提交 PR。样式细节可根据项目整体风格调整。

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions