d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-18 15:09:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Example主题支持配置：标题栏背景、文章页布局

Browse Source
This commit is contained in:
tangly1024.com
2024-06-14 16:16:58 +08:00
parent e3ce491aca
commit 45aec39a64
6 changed files with 146 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
themes/example/components/SideBar.js
View File

@@ -3,6 +3,7 @@ import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import CONFIG from '../config'
import Announcement from './Announcement'
const ExampleRecentComments = dynamic(
() => import('./RecentCommentListForExample')
@@ -13,10 +14,26 @@ const ExampleRecentComments = dynamic(
*/
export const SideBar = props => {
const { locale } = useGlobal()
const { latestPosts, categoryOptions, notice } = props
const { latestPosts, categoryOptions, notice, post } = props
// 评论相关
const COMMENT_WALINE_SERVER_URL = siteConfig(
'COMMENT_WALINE_SERVER_URL',
false
)
const COMMENT_WALINE_RECENT = siteConfig('COMMENT_WALINE_RECENT', false)
// 文章详情页特殊布局
const HIDDEN_NOTIFICATION =
post && siteConfig('EXAMPLE_ARTICLE_HIDDEN_NOTIFICATION', false, CONFIG)
// 文章详情页左右布局改为上下布局
const LAYOUT_VERTICAL =
post && siteConfig('EXAMPLE_ARTICLE_LAYOUT_VERTICAL', false, CONFIG)
return (
<div className='w-full md:w-64 sticky top-8'>
<aside className='rounded shadow overflow-hidden mb-6'>
<>
{/* 分类 */}
<aside className='w-full 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>
@@ -34,7 +51,7 @@ export const SideBar = props => {
{' '}
<a
href={`/category/${category.name}`}
className='text-gray-darkest text-sm'>
className='text-gray-darkest text-sm hover:underline'>
{category.name}({category.count})
</a>
</li>
@@ -44,7 +61,9 @@ export const SideBar = props => {
</ul>
</div>
</aside>
<aside className='rounded shadow overflow-hidden mb-6'>
{/* 最新文章 */}
<aside className='w-full 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>
@@ -58,7 +77,7 @@ export const SideBar = props => {
{' '}
<a
href={`/${p.slug}`}
className='text-gray-darkest text-sm'>
className='text-gray-darkest text-sm hover:underline'>
{p.title}
</a>
</li>
@@ -68,25 +87,29 @@ export const SideBar = props => {
</ul>
</div>
</aside>
{/* 公告 */}
{/* 公告栏 */}
<Announcement post={notice} />
{!HIDDEN_NOTIFICATION && <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>
{COMMENT_WALINE_SERVER_URL && COMMENT_WALINE_RECENT && (
<aside className='w-full 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'>
<div className='p-4'>
<ExampleRecentComments />
</div>
</aside>
)}
{/* 宠物挂件 */}
<aside
className={`rounded overflow-hidden mb-6 ${LAYOUT_VERTICAL ? 'hidden md:fixed right-4 bottom-20' : ''}`}>
<Live2D />
</aside>
</div>
</>
)
}