javascript - 如何在 Next.js 中使用 tailwind css 构建词云/标签云

Question

我有以下数据结构。对于每个标签，我们都有该标签在博客文章中使用的次数。

tags = {
    go: 12,
    html: 6,
    js: 9,
    .....
}

目前我正在考虑使用地图功能来构建标签云。

export default function TagCloud({ tags }) {
  const tagCount = Object.keys(tags).length;
  return (
    <div className="flex flex-row flex-wrap content-around items-center align-middle w-full">
      {Object.entries(tags).map((t) => {
        const slug = t[0].toLowerCase().replace(" ", "-").replace("/", "-");

        return (
          <Link key={slug} href={`/blog/tags/${slug}`}>
            <a
              className={cn("p-1 mx-1 hover:underline hover:text-gray-600", {
                "text-xs": t[1],
                "text-sm": t[1],
                "text-base": t[1],
                "text-lg": t[1],
                "text-xl": t[1],
                "text-2xl": t[1],
                "text-3xl": t[1],
              })}
            >
              {t[0]}
            </a>
          </Link>
        );
      })}
    </div>
  );
}

t[1]结合使用我们tagCount需要在地图之前捕获的其他值，然后我们应该能够定义tailwind-css类名来定义字体大小。但是，我一直在思考如何定义要使用的类名的公式。

其次，根据使用标签的次数和使用了多少不同的标签，我们可能还需要或多或少地改变标签大小，就像我目前在代码中那样。我认为使用类名库这将最容易定义标签是否应该获得某个类名。

我是否过于简化了我试图实现的目标？

标签： javascripthtmlcssreactjs