d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark

Browse Source
This commit is contained in:
tangly1024
2023-03-08 22:06:34 +08:00
parent ff8ae782b7
commit 29fe28a66a
9 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/DarkModeButton.js
View File

@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
}
return <div className={'z-10 duration-200 text-xl py-2 ' + props.className}>
return <div className={'text-white z-10 duration-200 text-xl py-2 ' + props.className}>
<i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
onClick={handleChangeDarkMode} />
</div>

4
public/css/theme-simple.css
View File

@@ -6,6 +6,10 @@
color: #276077;
}
.dark #theme-simple #blog-item-title {
color: #d1d5db;
}
.notion {
margin-top: 0 !important;
margin-bottom: 0 !important;

5
themes/simple/LayoutBase.js
View File

@@ -48,11 +48,12 @@ const LayoutBase = props => {
</div>
<Footer {...props} />
<div className='fixed right-4 bottom-4 z-10'>
<JumpToTopButton />
</div>
<Footer {...props} />
</div>
)
}

13
themes/simple/components/BlogItem.js
View File

@@ -1,11 +1,12 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
import CONFIG_SIMPLE from '../config_simple'
export const BlogItem = props => {
const { post } = props
console.log(post)
return <div key={post.id} className="mb-10 pb-12 border-b" >
return <div key={post.id} className="mb-10 pb-12 border-b dark:border-gray-800" >
<h2 className="mb-5 ">
<Link
id='blog-item-title'
@@ -15,20 +16,20 @@ export const BlogItem = props => {
</Link>
</h2>
<div className="mb-4 text-sm text-gray-700">
<span> <i className="fa-regular fa-user"></i> <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a></span>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
<span> <i className="fa-regular fa-user"></i> <a href={CONFIG_SIMPLE.AUTHOR_LINK}>{BLOG.AUTHOR}</a></span>
<span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span>
{post.category && <span> - <i className="fa-regular fa-folder"></i> <a href="#" className="text-gray-700 hover:text-red-400 transition-all duration-200">{post.category}</a></span>}
{post.category && <span> - <i className="fa-regular fa-folder"></i> <a href="#" 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>)}
</div>
<div className="text-gray-700 leading-normal mb-6">
<div className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
{post.summary}
{post.summary && <span>...</span>}
</div>
<div className='block'>
<Link href={post.slug} className='inline-block rounded-sm text-blue-400 text-xs border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
<Link href={post.slug} className='inline-block rounded-sm text-blue-400 text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
Continue Reading <i className="fa-solid fa-angle-right align-middle"></i>
</Link>
</div>

10
themes/simple/components/BlogListPage.js
View File

@@ -1,13 +1,11 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import Link from 'next/link'
import { BlogItem } from './BlogItem'
export const BlogListPage = props => {
const { page = 1, posts, postCount } = props
const { locale } = useGlobal()
const router = useRouter()
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const currentPage = +page
@@ -28,13 +26,13 @@ export const BlogListPage = props => {
<div className="flex justify-between text-xs">
<Link
href={{ pathname: currentPage - 1 === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}
className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
{locale.PAGINATION.PREV}
className={`${showPrev ? 'text-blue-400 border-b border-blue-400 ' : 'bg-gray pointer-events-none '} text-white no-underline pb-1 px-3`}>
NEWER POSTS <i className="fa-solid fa-arrow-left"></i>
</Link>
<Link
href={{ pathname: `${pagePrefix}/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}
className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
{locale.PAGINATION.NEXT}
className={`${showNext ? 'text-blue-400 border-b border-blue-400 ' : 'bg-gray pointer-events-none '} text-white no-underline pb-1 px-3`}>
OLDER POSTS <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>

4
themes/simple/components/DropMenu.js
View File

@@ -17,9 +17,9 @@ export const DropMenu = ({ link }) => {
</Link>
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} transition-all duration-300 z-20 top-12 absolute block border border-gray-100 bg-white drop-shadow-lg `}>
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 tracking-widest transition-all duration-200 border-b py-3 pr-6 pl-2'>
return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs'>{sLink.title}</span>
</Link>

6
themes/simple/components/Footer.js
View File

@@ -11,16 +11,16 @@ export const Footer = (props) => {
return currentYear
})()
return <footer className="z-10 relative w-full bg-white px-6 border-t dark:border-hexo-black-gray dark:bg-hexo-black-gray ">
return <footer className="z-10 relative w-full bg-black px-6 border-t">
<DarkModeButton className='text-center pt-4'/>
<div className="container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm">
<div className="text-yellow-300 container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm">
<div className='text-center'> &copy;{`${copyrightDate}`} {BLOG.AUTHOR}. All rights reserved.</div>
<div className="md:p-0 text-center md:text-right text-xs">
{/* 右侧链接 */}
{/* <a href="#" className="text-black no-underline hover:underline">Privacy Policy</a> */}
{BLOG.BEI_AN && (<a href="https://beian.miit.gov.cn/" className="text-black dark:text-gray-200 no-underline hover:underline ml-4">{BLOG.BEI_AN} </a>)}
<span className='dark:text-gray-200 no-underline ml-4'>
<span className='no-underline ml-4'>
Powered by
<a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {BLOG.VERSION} </a>
</span>

2
themes/simple/components/SideBar.js
View File

@@ -4,7 +4,7 @@ import Announcement from './Announcement'
export const SideBar = (props) => {
const { notice } = props
return (
<div className="w-full max-w-lg sticky top-8 border-l pl-12 border-gray-100">
<div className="w-full max-w-lg sticky top-8 border-l dark:border-gray-800 pl-12 border-gray-100">
<aside>
<Announcement post={notice}/>

2
themes/simple/config_simple.js
View File

@@ -4,6 +4,8 @@ const CONFIG_SIMPLE = {
TOP_BAR: true, // 显示顶栏
TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',
// 菜单配置
MENU_CATEGORY: true, // 显示分类
MENU_TAG: true, // 显示标签