mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
黑暗模式
This commit is contained in:
@@ -19,7 +19,7 @@ module.exports = {
|
||||
BUNDLE_ANALYZER: process.env.ANALYZE === 'true' || false, // 是否展示编译依赖内容与大小
|
||||
VERSION: (() => {
|
||||
try {
|
||||
// 优先使用环境变量,否则从package.json中获取版本号
|
||||
// 优先使用环境变量,否则从 package.json 中获取版本号
|
||||
return (
|
||||
process.env.NEXT_PUBLIC_VERSION || require('../package.json').version
|
||||
)
|
||||
|
||||
@@ -15,9 +15,7 @@ export const BlogItem = props => {
|
||||
const showPreview =
|
||||
siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post.blockMap
|
||||
return (
|
||||
<div
|
||||
key={post.id}
|
||||
className='h-42 my-6 pb-7'>
|
||||
<div key={post.id} className='h-42 my-6 pb-7'>
|
||||
{/* 文章标题 */}
|
||||
|
||||
<div className='flex'>
|
||||
@@ -39,7 +37,7 @@ export const BlogItem = props => {
|
||||
<h2 className='mb-2'>
|
||||
<Link
|
||||
href={post.href}
|
||||
className='text-xl underline decoration-2 font-bold text-[var(--primary-color)]'>
|
||||
className='text-xl underline decoration-2 font-bold text-[var(--primary-color)] dark:text-white dark:hover:bg-white dark:hover:text-[var(--primary-color)] px-2 duration-200 transition-all rounded-sm'>
|
||||
{siteConfig('POST_TITLE_ICON') && (
|
||||
<NotionIcon icon={post.pageIcon} />
|
||||
)}
|
||||
@@ -99,7 +97,6 @@ export const BlogItem = props => {
|
||||
</main>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@ export default function BlogListPage(props) {
|
||||
.replace('.html', '')
|
||||
|
||||
return (
|
||||
<div className='w-full md:pr-8 mb-12'>
|
||||
<div className='w-full md:pr-8 mb-12 px-5'>
|
||||
<div id='posts-wrapper'>
|
||||
{posts?.map((p, index) => (
|
||||
<div key={p.id}>
|
||||
|
||||
@@ -18,19 +18,11 @@ export default function Footer(props) {
|
||||
<footer>
|
||||
<DarkModeButton className='pt-4' />
|
||||
|
||||
<div className='font-bold text-[var(--primary-color)] py-6 text-sm flex flex-col gap-2 items-center'>
|
||||
<div className='font-bold text-[var(--primary-color)] dark:text-white py-6 text-sm flex flex-col gap-2 items-center'>
|
||||
<div>
|
||||
©{`${copyrightDate}`} {siteConfig('AUTHOR')}.
|
||||
</div>
|
||||
<div>All rights reserved.</div>
|
||||
<div>
|
||||
Powered by
|
||||
<a
|
||||
href='https://github.com/tangly1024/NotionNext'
|
||||
className=' hover:underline'>
|
||||
NotionNext {siteConfig('VERSION')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
@@ -13,7 +13,7 @@ export const MenuItemDrop = ({ link }) => {
|
||||
<Link
|
||||
href={link?.href}
|
||||
target={link?.target}
|
||||
className=' menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)] dark:text-gray-200 tracking-widest pb-1 font-bold'>
|
||||
className='dark:hover:text-[var(--primary-color)] dark:hover:bg-white menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)] dark:text-gray-200 tracking-widest pb-1 font-bold'>
|
||||
{link?.name}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -14,19 +14,19 @@ import Link from 'next/link'
|
||||
export default function NavBar(props) {
|
||||
return (
|
||||
<div className='flex flex-col justify-between md:mt-20 md:h-[70vh]'>
|
||||
<header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] hover:text-white ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4'>
|
||||
<header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 dark:md:border-white dark:text-white md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] dark:hover:bg-white hover:text-white dark:hover:text-[var(--primary-color)] ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4 mb-2'>
|
||||
<Link href='/'>
|
||||
<div className='flex flex-col-reverse md:flex-col items-center md:items-start'>
|
||||
<div className='font-bold text-4xl text-center' id='blog-name'>
|
||||
活版印字
|
||||
</div>
|
||||
<div className='font-bold text-xl text-center' id='blog-name-en'>
|
||||
Typography
|
||||
山野
|
||||
</div>
|
||||
{/* <div className='font-bold text-xl text-center' id='blog-name-en'>
|
||||
Blog
|
||||
</div> */}
|
||||
</div>
|
||||
</Link>
|
||||
</header>
|
||||
<nav className='md:pt-0 z-20 dark:border-hexo-black-gray dark:bg-black flex-shrink-0'>
|
||||
<nav className='md:pt-0 z-20 flex-shrink-0'>
|
||||
<div id='nav-bar-inner' className='text-sm md:text-md'>
|
||||
<MenuList {...props} />
|
||||
</div>
|
||||
|
||||
@@ -71,7 +71,7 @@ const LayoutBase = props => {
|
||||
<ThemeGlobalSimple.Provider value={{ searchModal }}>
|
||||
<div
|
||||
id='theme-typography'
|
||||
className={`${siteConfig('FONT_STYLE')} font-typography h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-black overflow-hidden`}>
|
||||
className={`${siteConfig('FONT_STYLE')} font-typography h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-[#232222] overflow-hidden`}>
|
||||
<Style />
|
||||
|
||||
{siteConfig('SIMPLE_TOP_BAR', null, CONFIG) && <TopBar {...props} />}
|
||||
|
||||
@@ -27,7 +27,7 @@ const Style = () => {
|
||||
}
|
||||
// 底色
|
||||
.dark body {
|
||||
background-color: black;
|
||||
background-color: rgb(35, 34, 34);
|
||||
}
|
||||
// 文本不可选取
|
||||
.forbid-copy {
|
||||
@@ -36,6 +36,15 @@ const Style = () => {
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.dark #theme-typography {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgb(255 255 255 / 0.04) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
#theme-typography {
|
||||
--primary-color: #2e405b;
|
||||
background-color: rgb(255 255 255) / 1;
|
||||
|
||||
Reference in New Issue
Block a user