feature: 调整Hexo 页面

This commit is contained in:
tangly1024
2022-01-25 16:42:29 +08:00
parent b1e7fd6f50
commit 13f53b2bad
29 changed files with 403 additions and 203 deletions

View File

@@ -10,55 +10,96 @@ import CategoryGroup from './CategoryGroup'
import LatestPostsGroup from './LatestPostsGroup'
import TagGroups from './TagGroups'
import SocialButton from './SocialButton'
import Catalog from './Catalog'
export default function SideRight (props) {
const { postCount, currentCategory, categories, latestPosts, tags, currentTag } = props
return <div id='left' className='w-96 mx-4 space-y-4 hidden lg:block'>
<Card>
<div className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
<Image
alt={BLOG.AUTHOR}
width={120}
height={120}
loading='lazy'
src='/avatar.jpg'
className='rounded-full'
/>
</div>
<div className='text-center text-xl pb-4'>{BLOG.TITLE}</div>
<SocialButton/>
</Card>
<Card>
<MenuButtonGroup/>
<SearchInput/>
</Card>
<Card>
<div className='text-xs font-light ml-2 mb-3 font-sans'>
<FontAwesomeIcon icon={faChartArea}/> 统计
</div>
<div className='text-xs font-sans font-light justify-center mx-6'>
const {
post,
postCount,
currentCategory,
categories,
latestPosts,
tags,
currentTag,
showCategory,
showTag
} = props
return (
<div className='w-80 space-y-4 hidden lg:block'>
<Card>
<div
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 transform duration-200 cursor-pointer'
onClick={() => {
Router.push('/')
}}
>
<Image
alt={BLOG.AUTHOR}
width={120}
height={120}
loading='lazy'
src='/avatar.jpg'
className='rounded-full'
/>
</div>
<div className='text-center font-sans text-xl pb-4'>{BLOG.TITLE}</div>
<SocialButton />
</Card>
<Card>
<MenuButtonGroup {...props}/>
<SearchInput />
</Card>
<Card>
<div className='ml-2 mb-3 font-sans'>
<FontAwesomeIcon icon={faChartArea} /> 统计
</div>
<div className='text-xs font-sans font-light justify-center mx-7'>
<div className='inline'>
<div className='flex justify-between'><div>文章数:</div> <div>{postCount}</div></div>
<div className='flex justify-between'>
<div>文章数:</div>
<div>{postCount}</div>
</div>
</div>
<div className="hidden busuanzi_container_page_pv ml-2">
<div className='flex justify-between'><div>访问量:</div><div className="busuanzi_value_page_pv"/></div>
<div className='hidden busuanzi_container_page_pv ml-2'>
<div className='flex justify-between'>
<div>访问量:</div>
<div className='busuanzi_value_page_pv' />
</div>
</div>
<div className="hidden busuanzi_container_site_uv ml-2">
<div className='flex justify-between'><div>访客数:</div><div className="busuanzi_value_site_uv"/></div>
<div className='hidden busuanzi_container_site_uv ml-2'>
<div className='flex justify-between'>
<div>访客数:</div>
<div className='busuanzi_value_site_uv' />
</div>
</div>
</div>
</Card>
<Card>
<div className='text-xs font-light ml-2 mb-1 font-sans'>
<FontAwesomeIcon icon={faTh}/> 分类
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories}/>
</Card>
<Card>
<TagGroups tags={tags} currentTag={currentTag}/>
</Card>
<Card>
<LatestPostsGroup posts={latestPosts}/>
</Card>
</div>
</Card>
{showCategory && (
<Card>
<div className='ml-2 mb-1 font-sans'>
<FontAwesomeIcon icon={faTh} /> 分类
</div>
<CategoryGroup
currentCategory={currentCategory}
categories={categories}
/>
</Card>
)}
{showTag && (
<Card>
<TagGroups tags={tags} currentTag={currentTag} />
</Card>
)}
{latestPosts && <Card>
<LatestPostsGroup posts={latestPosts} />
</Card>}
{post && post.toc && (
<Card className='sticky top-4'>
<Catalog toc={post.toc} />
</Card>
)}
</div>
)
}