Example主题调整,规范组件命名

This commit is contained in:
tangly1024.com
2024-04-28 15:03:48 +08:00
parent cda0890785
commit 2385ad868f
26 changed files with 773 additions and 638 deletions

View File

@@ -1,68 +1,92 @@
import { siteConfig } from '@/lib/config'
import Live2D from '@/components/Live2D'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import Announcement from './Announcement'
const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
const ExampleRecentComments = dynamic(
() => import('./RecentCommentListForExample')
)
export const SideBar = (props) => {
/**
* 侧边栏
*/
export const SideBar = props => {
const { locale } = useGlobal()
const { latestPosts, categoryOptions, notice } = props
return (
<div className="w-full md:w-64 sticky top-8">
<aside className="rounded shadow overflow-hidden mb-6">
<h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.CATEGORY}</h3>
<div className="p-4">
<ul className="list-reset leading-normal">
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<li> <a href={`/category/${category.name}`} className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
</Link>
)
})}
</ul>
</div>
</aside>
<aside className="rounded shadow overflow-hidden mb-6">
<h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.LATEST_POSTS}</h3>
<div className="p-4">
<ul className="list-reset leading-normal">
{latestPosts?.map(p => {
return (
<Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
<li> <a href={`/${p.slug}`} className="text-gray-darkest text-sm">{p.title}</a></li>
</Link>
)
})}
</ul>
</div>
</aside>
<Announcement post={notice}/>
{siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('COMMENT_WALINE_RECENT') && <aside className="rounded shadow overflow-hidden mb-6">
<h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
<div className="p-4">
<ExampleRecentComments/>
</div>
</aside>}
<aside className="rounded overflow-hidden mb-6">
<Live2D />
</aside>
<div className='w-full md:w-64 sticky top-8'>
<aside className='rounded shadow overflow-hidden mb-6'>
<h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
{locale.COMMON.CATEGORY}
</h3>
<div className='p-4'>
<ul className='list-reset leading-normal'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<li>
{' '}
<a
href={`/category/${category.name}`}
className='text-gray-darkest text-sm'>
{category.name}({category.count})
</a>
</li>
</Link>
)
})}
</ul>
</div>
</aside>
<aside className='rounded shadow overflow-hidden mb-6'>
<h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
{locale.COMMON.LATEST_POSTS}
</h3>
<div className='p-4'>
<ul className='list-reset leading-normal'>
{latestPosts?.map(p => {
return (
<Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
<li>
{' '}
<a
href={`/${p.slug}`}
className='text-gray-darkest text-sm'>
{p.title}
</a>
</li>
</Link>
)
})}
</ul>
</div>
</aside>
{/* 公告栏 */}
<Announcement post={notice} />
{/* 最近评论 */}
{siteConfig('COMMENT_WALINE_SERVER_URL') &&
siteConfig('COMMENT_WALINE_RECENT') && (
<aside className='rounded shadow overflow-hidden mb-6'>
<h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
{locale.COMMON.RECENT_COMMENTS}
</h3>
<div className='p-4'>
<ExampleRecentComments />
</div>
</aside>
)}
<aside className='rounded overflow-hidden mb-6'>
<Live2D />
</aside>
</div>
)
}