昨天打开博客，发现谷歌分析更新到

以后，博客上接入谷歌分析的数据统计就失效了，想到不久前我搭建了

，同时又接入了百度统计，感觉这个东西就没什么存在的必要了，外加我博客的流量并不高，那点数字只能为小站徒增些寒酸，索性一不做二不休，直接打算给这个统计功能给去掉。

我打开Github，删除了所有关于统计的代码，提交-部署一气呵成，部署期间没有任何报错，直接出来了站点，但是，看着右上角光秃秃的卡牌，我陷入沉思——这也太丑了！

于是，加什么功能折磨我整整一天，加图片，感觉华而不实又显突兀，加时钟又显得多余，加天气又显得杂乱，最后熬一晚上大夜给他加了一个最近说说美美睡觉。

一觉睡到下午，起来看了看新加的功能，我又觉得碍眼，这点空间，说说也显示不全，这个功能又显得非常愚蠢，于是打开几个大佬的博客找找灵感，一个翻转的公众号卡片吸引了我，我也有个荒废已久的公众号啊，看看空间大小又比较合适，于是便开始在博客加入公众号卡片的探索。

，修改这个文件，修改代码如下：

import { FC } from "react";
import { Colors } from "../../lib/colors";

export const WidgetOverViewSmall: FC<{ posts: any[] }> = ({ posts }) => {
    const tagsMap = posts.map(p => ({ tags: p.tags, date: p.updateDate }));
    const dateMap = posts.map(p => ({ date: new Date(p.updateDate) }));
    const count = 0;
    const tagsAmount = tagsMap.reduce(
        (prev, cur) => prev + cur.tags.length,
        count
    );

    const categoryCount = 5;

    return (
        <div data-aos="fade-up">
            <div className="aspect-square overflow-hidden transition duration-500 ease-in-out shadow-sm transform-gpu rounded-3xl mobile-hover:hover:scale-105 mobile-hover:hover:shadow-lg hover:rotate-0 hover:active:scale-105 hover:active:shadow-lg border-[0.5px] border-true-gray-100" dark="border-true-gray-900 border-none">
                <div className="flex flex-row justify-between h-full bg-white shadow-sm p-3.5" dark="bg-true-gray-900">
                    <div className="flex flex-col justify-between">
                        <div className="w-12 xs:text-[40px] animate-wave inline origin-bottom-right text-3xl">
                            👋
                        </div>
                        <div className="xs:text-xl leading-4 xs:leading-6 font-semibold text-sm">
                            <p className={`${Colors["orange"]?.text.normal} line-clamp-1`}>{dateMap.length} 篇文章</p>
                            <p className={`${Colors["pink"]?.text.normal} line-clamp-1`}>{tagsAmount} 个话题</p>
                            <p className={`${Colors["blue"]?.text.normal} line-clamp-1`}>{categoryCount} 个分类</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export const WidgetOverViewMedium: FC<{ posts: any[], fix?: boolean }> = ({ posts, fix }) => {
    const tagsMap = posts.map(p => ({ tags: p.tags, date: p.updateDate }));
    const dateMap = posts.map(p => ({ date: new Date(p.updateDate) }));
    const count = 0;
    const tagsAmount = tagsMap.reduce(
        (prev, cur) => prev + cur.tags.length,
        count
    );

    const categoryCount = 5;

    return (
        <div data-aos="fade-up">
            <div className={`overflow-hidden transition duration-500 ease-in-out shadow-sm transform-gpu ${fix ? "h-35 lg:h-40" : "h-40 lg:h-48"} rounded-3xl mobile-hover:hover:scale-105 mobile-hover:hover:shadow-lg hover:rotate-0 hover:active:scale-105 hover:active:shadow-lg border-[0.5px] border-true-gray-100`} dark="border-true-gray-900 border-none">
                <div className="flex flex-row justify-between h-full bg-white shadow-sm px-3 py-2 lg:(px-4 py-3)" dark="bg-true-gray-900">
                    <div className="flex flex-col justify-between w-1/3">
                        <div className={`text-4xl ${fix ? "" : "lg:text-5xl"} animate-wave inline origin-bottom-right w-12`}>
                            👋
                        </div>
                        <div className={`text-lg leading-6 md:leading-7 ${fix ? "" : "lg:text-2xl"} font-semibold`}>
                            <p className={`${Colors["orange"]?.text.normal}`}>{dateMap.length} 篇文章</p>
                            <p className={`${Colors["pink"]?.text.normal}`}>{tagsAmount} 个话题</p>
                            <p className={`${Colors["blue"]?.text.normal}`}>{categoryCount} 个分类</p>
                        </div>
                    </div>
                    <div className="flex flex-col justify-between ml-4 w-2/3 h-90%">
                        <div id="flip-wrapper" className="relative w-full h-full">
                            <div id="flip-content" className="w-full h-full transition-transform duration-300 ease-in-out transform-style-3d">
                                <div className="face absolute w-full h-full bg-cover bg-center" style={{ backgroundImage: 'url(https://cdn.dribbble.com/userupload/16422706/file/original-a06a962276454c2b0613f9d4b2f6898f.webp)' }}></div>
                                <div className="back face absolute w-full h-full bg-cover bg-center transform rotateY(180deg)" style={{ backgroundImage: 'url(https://cdn.dribbble.com/userupload/16416992/file/original-25a4c429ef77925ec1ed925504c63f9d.webp)' }}></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

对于翻转的图片，我代码里提供了链接，可以仿照我的图片样式自己制作。

当然，下面就是加入样式。打开

#flip-wrapper {
    perspective: 1000px;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #57bd6a; 
    border-radius: 24px; /* Set border radius for rounded corners */
}

#flip-content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

#flip-wrapper:hover #flip-content {
    transform: rotateY(180deg);
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
}

然后等待网站部署完成，这个翻转的公众号卡片就成功了。

本来还想给自己的博客加入AI摘要和客服，但是想想对于我这样的穷鬼，接入这种服务大概需要白嫖，白嫖的话就不稳定，不稳定就得下线，以后维护起来别说多烦了，直接打消了这个念头。再说一句，

起因

懵圈

修改过程

最后