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

typography主題微調

Browse Source
This commit is contained in:
tangly1024
2025-07-07 15:57:54 +08:00
parent b72e8e91cb
commit 57bc81700f
3 changed files with 67 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/themes-preview/typography.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 KiB

69
themes/typography/components/MenuItemDrop.js
View File

@@ -1,21 +1,78 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const hasSubMenu = link?.subMenus?.length > 0
const [show, changeShow] = useState(false)
const router = useRouter()
if (!link || !link.show) {
return null
}
const selected = router.pathname === link.href || router.asPath === link.href
return (
<div className='menu-item'>
<Link
href={link?.href}
target={link?.target}
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>
{!hasSubMenu && (
<Link
href={link?.href}
target={link?.target}
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>
)
}
{hasSubMenu && (
<>
<div
onMouseOver={() => changeShow(true)}
onMouseOut={() => changeShow(false)}
className={
'relative ' +
(selected
? 'bg-green-600 text-white hover:text-white'
: 'hover:text-green-600')
}>
<div>
<span 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?.icon && <i className={link?.icon} />} {link?.name}
</span>
{hasSubMenu && (
<i
className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
)}
</div>
{/* 子菜單 */}
<ul
className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} absolute glassmorphism md:left-28 md:top-0 top-6 w-full border-gray-100 transition-all duration-300 z-20 block`}>
{link?.subMenus?.map((sLink, index) => {
return (
<li
key={index}
className='dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 pb-3'>
<Link href={sLink.href} target={link?.target}>
<span 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?.icon && <i className={sLink?.icon}> &nbsp; </i>}
{sLink.title}
</span>
</Link>
</li>
)
})}
</ul>
</div>
</>
)}
</div>
)
}

6
themes/typography/config.js
View File

@@ -1,12 +1,14 @@
const CONFIG = {
// 博客標題 雙語言
TYPOGRAPHY_BLOG_NAME: process.env.NEXT_PUBLIC_TYPOGRAPHY_BLOG_NAME || '活字印刷',
TYPOGRAPHY_BLOG_NAME_EN: process.env.NEXT_PUBLIC_TYPOGRAPHY_BLOG_NAME || 'Typography',
TYPOGRAPHY_POST_AD_ENABLE: process.env.NEXT_PUBLIC_TYPOGRAPHY_POST_AD_ENABLE || false, // 文章列表是否插入广告
TYPOGRAPHY_POST_COVER_ENABLE: process.env.NEXT_PUBLIC_TYPOGRAPHY_POST_COVER_ENABLE || false, // 是否展示博客封面
TYPOGRAPHY_ARTICLE_RECOMMEND_POSTS: process.env.NEXT_PUBLIC_TYPOGRAPHY_ARTICLE_RECOMMEND_POSTS || true, // 文章详情底部显示推荐
TYPOGRAPHY_BLOG_NAME: process.env.NEXT_PUBLIC_TYPOGRAPHY_BLOG_NAME || '活字印刷',
TYPOGRAPHY_BLOG_NAME_EN: process.env.NEXT_PUBLIC_TYPOGRAPHY_BLOG_NAME || 'Typography',
// 菜单配置
TYPOGRAPHY_MENU_CATEGORY: true, // 显示分类
TYPOGRAPHY_MENU_TAG: true, // 显示标签