Skip to main content

Docusaurus LinkCard 样式

· 2 min read
Richard Wang
Note

在浏览Docusaurus官方推荐的案例中，发现了一个很好看的卡片连接的样式，Copy一下实现过程。

样式的参考的链接如下

Clutch说明文档
Clutch is a modular, extensible platform for infrastructure management.

创建LinkCard组件​

创建LinkCard样式文件夹​

在项目目录src/components文件夹下创建LinkCard文件夹。

创建index.tsx文件​

src/components/LinkCard/index.tsx
// @ts-ignore
import React from "react";
// @ts-ignore
import Link from "@docusaurus/Link";
// @ts-ignore
import type { Props as LinkProps } from "@docusaurus/Link";

import "./styles.css";

interface LinkCardProps extends Pick<LinkProps, "to"> {
    title: string;
    description: string;
}

const LinkCard = ({ to, title, description }: LinkCardProps): JSX.Element => (
    <Link className="lc-container" to={to}>
        <div className="lc-title">{title}</div>
        <div className="lc-description">{description}</div>
    </Link>
);

export default LinkCard;

创建styles.css文件​

src/components/LinkCard/styles.css
.lc-container {
    border: 1px solid var(--ifm-color-emphasis-300);
    border-radius: var(--ifm-global-radius);
    padding: 0.75rem;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    max-width: 45em;
    display: block;
}

.lc-container:hover {
    border-color: var(--ifm-color-primary);
    text-decoration: none;
}

.lc-title {
    font-weight: 600;
    margin-right: 0.5em;
}

.lc-description {
    font-size: 0.875rem;
    color: var(--ifm-font-color-secondary);
}

使用LinkCard组件​

在md文件中引入LinkCard组件​

import LinkCard from '@site/src/components/LinkCard';

<LinkCard title="<title>" description="<description" to="<URL or filepath>"></LinkCard>