d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-17 07:26:46 +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

3
themes/example/components/Header.js
View File

@@ -4,12 +4,13 @@ import { MenuList } from './MenuList'
/**
* 网站顶部
* LOGO 和 菜单
* @returns
*/
export const Header = props => {
return (
<header className='w-full px-6 bg-white dark:bg-black relative z-20'>
<div className='container mx-auto max-w-4xl md:flex justify-between items-center'>
<div className='mx-auto max-w-4xl md:flex justify-between items-center'>
<Link
href='/'
className='py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>

2
themes/example/components/MenuList.js
View File

@@ -58,7 +58,7 @@ export const MenuList = props => {
return (
<nav className='w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black'>
<div className='container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start'>
<div className='mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start'>
<ul className='w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start'>
{links.map((link, index) => (
<MenuItemDrop key={index} link={link} />

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>
</>
)
}

48
themes/example/components/TitleBar.js Normal file
View File

@@ -0,0 +1,48 @@
import NotionIcon from '@/components/NotionIcon'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
/**
* 标题栏
*/
export default function TitleBar(props) {
const { post } = props
const { fullWidth, siteInfo } = useGlobal()
const title = post?.title || siteConfig('TITLE')
const description = post?.description || siteConfig('AUTHOR')
const headerImage = post?.pageCoverThumbnail
? post.pageCoverThumbnail
: siteInfo?.pageCover
const TITLE_BG = siteConfig('EXAMPLE_TITLE_IMAGE', false, CONFIG)
return (
<>
{/* 标题栏 */}
{!fullWidth && (
<div className='relative overflow-hidden text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b'>
<h1 className='title-1 relative text-xl md:text-4xl pb-4 z-10'>
{siteConfig('POST_TITLE_ICON') && (
<NotionIcon icon={post?.pageIcon} />
)}
{title}
</h1>
<p className='title-2 relative leading-loose text-gray-dark z-10'>
{description}
</p>
{TITLE_BG && (
<>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={headerImage}
className='absolute object-cover top-0 left-0 w-full h-full select-none opacity-70 z-0'
/>
</>
)}
</div>
)}
</>
)
}