Skip to main content

首页技术栈

1.配置方法

  • 在src\components\landing\FeaturesSection\Github.tsx添加以下代码:
import Translate from '@docusaurus/Translate'
import GitHubCalendar from 'react-github-calendar'

import { useColorMode } from '@docusaurus/theme-common'
import { Icon } from '@iconify/react'

interface GithubProps {
className?: string
}

export default function Github({ className }: GithubProps) {
const { isDarkTheme } = useColorMode()

const githubStatsUrl = (type: 'overview' | 'languages') =>
`https://raw.githubusercontent.com/kuizuo/github-stats/master/generated/${type}.svg#gh-${
isDarkTheme ? 'dark' : 'light'
}-mode-only`
return (
<div className={className}>
<h2 className="mb-2 flex items-center gap-1 justify-center md:justify-start md:px-4 text-base">
<Icon icon="ri:github-line" />
<Translate id="homepage.feature.github.title">Github</Translate>
</h2>
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background">
<div className="mb-4 flex w-full justify-between gap-4 px-4">
<img src={githubStatsUrl('overview')} alt="GitHub Overview Stats" />
<img src={githubStatsUrl('languages')} alt="GitHub Languages Stats" />
</div>
<GitHubCalendar username="kuizuo" blockSize={11} colorScheme={isDarkTheme ? 'dark' : 'light'} />
</div>
</div>
)
}
  • 在src\components\landing\FeaturesSection\index.tsx加入以下代码:
import Translate from '@docusaurus/Translate'
import features from '@site/data/features'
import { BentoGrid, BentoGridItem } from '../../magicui/bento-grid'
import { Section } from '../Section'
import Github from './Github'
import Skill from './Skill'

export default function FeaturesSection() {
return (
<Section title={<Translate id="homepage.feature.title">🐱‍🚀 个人特点</Translate>}>
<BentoGrid className="mx-auto w-full">
{features.map((item, i) => (
<BentoGridItem
key={i}
title={item.title}
description={item.description}
header={item.header}
icon={item.icon}
className={i === 3 || i === 6 ? 'md:col-span-2' : ''}
/>
))}
</BentoGrid>

<div className="mt-4 grid grid-cols-1 justify-center gap-4 md:grid-cols-6 md:grid-rows-2 max-md:px-4">
<Skill className="md:col-span-2 md:row-span-2" />
<Github className="h-full md:col-span-4 md:row-span-2" />
</div>
</Section>
)
}