swizzle 标签页面🏷

本文写于 2024 年 01 月，距今 2 年。部分依赖版本与界面细节可能已有变化。

自定义调整标签页面, swizzle 标签页面 🏷!

swizzle 标签页面

npm run swizzle @docusaurus/theme-classic TagsListByLetter -- --eject

引入组件

antd、react-tagcloud、randomcolor

调整标签页面

import React from 'react';
import { TagCloud } from 'react-tagcloud';
import { Badge } from 'antd';
import Link from '@docusaurus/core/lib/client/exports/Link';
var randomColor = require('randomcolor');

function TagsListByLetter({ tags }) {
    const data = tags.map(v => {
        return {
            value: v.label,
            count: v.count,
            to: v.permalink
        };
    });
    return (
        <TagCloud
            className="simple-cloud"
            minSize={32}
            maxSize={32}
            tags={data}
            style={{ textAlign: 'center' }}
            renderer={(tag, size) => {
                return (
                    <Link to={tag.to} key={tag.value}>
                        <span
                            style={{
                                fontSize: size,
                                margin: '6px',
                                padding: '6px',
                                display: 'inline-block'
                            }}
                        >
                            <Badge
                                key={tag.value}
                                color={randomColor()}
                                count={tag.count}
                                offset={[5]}
                            >
                                <p
                                    type="text"
                                    style={{ fontSize: tag.count + 20, color: randomColor() }}
                                >
                                    {tag.value}
                                </p>
                            </Badge>
                        </span>
                    </Link>
                );
            }}
        />
    );
}

export default TagsListByLetter;