头像读取Notion

This commit is contained in:
tangly1024
2022-05-11 10:59:37 +08:00
parent ce046bff22
commit c5167d9fdd
10 changed files with 52 additions and 66 deletions

View File

@@ -1,11 +1,10 @@
import BLOG from '@/blog.config'
import Image from 'next/image'
import { useRouter } from 'next/router'
import Card from './Card'
import SocialButton from './SocialButton'
import MenuGroupCard from './MenuGroupCard'
export function InfoCard (props) {
const { className } = props
const { className, siteInfo } = props
const router = useRouter()
return <Card className={className}>
<div
@@ -14,14 +13,8 @@ export function InfoCard (props) {
router.push('/')
}}
>
<Image
alt={BLOG.AUTHOR}
width={120}
height={120}
loading='lazy'
src={BLOG.AVATAR}
className='rounded-full'
/>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120}/>
</div>
<div className='text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
<div className='text-sm text-center'>{BLOG.BIO}</div>

View File

@@ -46,7 +46,7 @@ const LayoutBase = props => {
{slotRight}
<div key={locale.NAV.ABOUT}>
{router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />}
{showInfoCard && <InfoCard />}
{showInfoCard && <InfoCard {...props} />}
{CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
</div>
</Tabs>

View File

@@ -1,5 +1,4 @@
import Comment from '@/components/Comment'
import Image from 'next/image'
import Link from 'next/link'
import ArticleAround from './ArticleAround'
import CategoryItem from './CategoryItem'
@@ -11,7 +10,7 @@ import BLOG from '@/blog.config'
import NotionPage from '@/components/NotionPage'
export const ArticleDetail = props => {
const { post, prev, next } = props
const { post, prev, next, siteInfo } = props
const { locale } = useGlobal()
const date = formatDate(
@@ -23,14 +22,10 @@ export const ArticleDetail = props => {
<section className="flex py-4 items-center font-sans px-1">
<Link href="/about" passHref>
<>
<Image
alt={BLOG.AUTHOR}
width={25}
height={25}
loading="lazy"
src="/avatar.jpg"
className="rounded-full cursor-pointer"
/>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={25}/>
<div className="mr-3 ml-1 text-green-500 cursor-pointer">
{BLOG.AUTHOR}
</div>

View File

@@ -1,22 +1,16 @@
import BLOG from '@/blog.config'
import Image from 'next/image'
import Router from 'next/router'
import React from 'react'
import SocialButton from './SocialButton'
const InfoCard = () => {
const InfoCard = (props) => {
const { siteInfo } = props
return <div id='info-card' className='py-4'>
<div className='items-center justify-center font-sans '>
<div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
<Image
alt={BLOG.AUTHOR}
width={120}
height={120}
loading='lazy'
src={BLOG.AVATAR}
className='rounded-full'
/>
</div>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120}/>
</div>
<div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
<div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
<SocialButton/>

View File

@@ -1,21 +1,15 @@
import BLOG from '@/blog.config'
import Image from 'next/image'
import Router from 'next/router'
import React from 'react'
import SocialButton from './SocialButton'
const InfoCard = () => {
const InfoCard = (props) => {
const { siteInfo } = props
return <>
<div className='flex flex-col items-center justify-center '>
<div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
<Image
alt={BLOG.AUTHOR}
width={120}
height={120}
loading='lazy'
src={BLOG.AVATAR}
className='rounded-full'
/>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120}/>
</div>
<div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
<div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.BIO}</div>

View File

@@ -47,7 +47,7 @@ const SideAreaLeft = props => {
)}
<div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
<InfoCard />
<InfoCard {...props} />
<>
<div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
<span className='px-1 '>

View File

@@ -16,14 +16,15 @@ import React from 'react'
* @returns {JSX.Element}
* @constructor
*/
const SideBar = ({ tags, currentTag, post, slot, categories, currentCategory }) => {
const SideBar = (props) => {
const { tags, currentTag, post, slot, categories, currentCategory } = props
const { locale } = useGlobal()
return <aside id='sidebar' className='bg-white dark:bg-gray-900 w-80 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
<div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
<section className='py-5'>
<InfoCard />
<InfoCard {...props} />
</section>
{/* 分类 */}