d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-08 15:10:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

simple theme

Browse Source
This commit is contained in:
tangly1024.com
2023-12-01 17:17:45 +08:00
parent 0ebddba378
commit fc04a01356
5 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Tabs.js
View File

@@ -39,7 +39,7 @@ const Tabs = ({ className, children }) => {
<ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'> <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'>
{children.map((item, index) => { {children.map((item, index) => {
return <li key={index} return <li key={index}
className={(currentTab === index ? 'font-black border-b-2 border-red-500 text-red-500 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '} className={(currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
onClick={() => { onClick={() => {
tabClickHandle(index) tabClickHandle(index)
}}> }}>

3
styles/notion.css
View File

@@ -1130,9 +1130,10 @@ code[class*='language-'] {
transition: background 20ms ease-in 0s; transition: background 20ms ease-in 0s;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
opacity: 0.9;
padding: 6px 2px; padding: 6px 2px;
font-size: 14px; font-size: 15px;
line-height: 1.2; line-height: 1.2;
display: flex; display: flex;
align-items: center; align-items: center;

25
themes/simple/components/ArticleInfo.js
View File

@@ -11,21 +11,21 @@ export const ArticleInfo = (props) => {
return ( return (
<section className="mt-2 text-gray-600 dark:text-gray-400 leading-8"> <section className="mt-2 text-gray-600 dark:text-gray-400 leading-8">
<h2 <h2
className="blog-item-title mb-5 font-bold text-black text-xl md:text-2xl no-underline"> className="blog-item-title mb-5 font-bold text-black text-xl md:text-2xl no-underline">
{post?.title} {post?.title}
</h2> </h2>
{post?.type !== 'Page' && (<> <div className='flex flex-wrap text-gray-700 dark:text-gray-300'>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300"> {post?.type !== 'Page' && (
<div className="space-x-3 mr-4">
<span> <i className="fa-regular fa-user"></i> <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)}>{siteConfig('AUTHOR')}</a></span> <span> <i className="fa-regular fa-user"></i> <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)}>{siteConfig('AUTHOR')}</a></span>
<span> - <i className="fa-regular fa-clock"></i> {post?.publishDay}</span> <span> <i className="fa-regular fa-clock"></i> {post?.publishDay}</span>
{post?.category && <span> - <i className="fa-regular fa-folder"></i> <a href={`/category/${post?.category}`} className="hover:text-red-400 transition-all duration-200">{post?.category}</a></span>} {post?.category && <span> <i className="fa-regular fa-folder"></i> <a href={`/category/${post?.category}`} className="hover:text-red-400 transition-all duration-200">{post?.category}</a></span>}
{post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)} {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
</div> </div>)}
</>)}
{post?.type !== 'Page' && (<> {post?.type !== 'Page' && (<div className=''>
<span>{locale.COMMON.POST_TIME}: <span>{locale.COMMON.POST_TIME}:
<Link <Link
href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`} href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
@@ -44,8 +44,9 @@ export const ArticleInfo = (props) => {
&nbsp; &nbsp;
<span className="mr-2 busuanzi_value_page_pv" /> <span className="mr-2 busuanzi_value_page_pv" />
</span> </span>
</>)} </div>)}
</div>
</section> </section>
) )
} }

44
themes/simple/components/Catalog.js
View File

@@ -57,31 +57,33 @@ const Catalog = ({ post }) => {
} }
return <div className='px-3 '> return <div className='px-3 '>
<div className='dark:text-white'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div> <div className='dark:text-white mb-2'>
<i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<div className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden' ref={tRef}> <div className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden' ref={tRef}>
<nav className='h-full text-black'> <nav className='h-full text-black'>
{post?.toc?.map((tocItem) => { {post?.toc?.map((tocItem) => {
const id = uuidToId(tocItem.id) const id = uuidToId(tocItem.id)
return ( return (
<a <a
key={id} key={id}
href={`#${id}`} href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200 className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `} notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
> >
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
className={`${activeSection === id && ' font-bold text-red-500 underline overflow-ellipsis truncate'}`} className={`${activeSection === id && ' font-bold text-red-600 underline overflow-ellipsis truncate'}`}
> >
{tocItem.text} {tocItem.text}
</span> </span>
</a> </a>
) )
})} })}
</nav> </nav>
</div>
</div> </div>
</div>
} }
export default Catalog export default Catalog

2
themes/simple/config.js
View File

@@ -17,4 +17,4 @@ const CONFIG = {
SIMPLE_MENU_ARCHIVE: true, // 显示归档 SIMPLE_MENU_ARCHIVE: true, // 显示归档
SIMPLE_MENU_SEARCH: true // 显示搜索 SIMPLE_MENU_SEARCH: true // 显示搜索
} }
export default CO export default CONFIG