d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #909 from tangly1024/fix/animation

Browse Source 
Fix/animation
This commit is contained in:
tangly1024
2023-03-24 12:32:23 +08:00
committed by GitHub
parent 5a1e8c3f70 7ae0e828c3
commit 6dbd16fdcf
68 changed files with 1335 additions and 772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blog.config.js
View File

@@ -28,8 +28,8 @@ const BLOG = {
FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
FONT_URL: [// 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
'https://fonts.googleapis.com/css?family=Bitter&display=swap',
'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap',
'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap'
'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
],
FONT_SANS: [// 无衬线字体 例如'LXGW WenKai'
'Bitter', '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',

49
components/Collapse.js
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect, useImperativeHandle } from 'react'
/**
* 折叠面板组件，支持水平折叠、垂直折叠
@@ -6,12 +6,27 @@ import React from 'react'
* @returns
*/
const Collapse = props => {
const collapseRef = React.useRef(null)
const { collapseRef } = props
const ref = React.useRef(null)
const type = props.type || 'vertical'
useImperativeHandle(collapseRef, () => {
return {
/**
* 当子元素高度变化时，可调用此方法更新折叠组件的高度
* @param {*} param0
*/
updateCollapseHeight: ({ height, increase }) => {
ref.current.style.height = ref.current.scrollHeight
ref.current.style.height = 'auto'
}
}
})
/**
* 折叠
* @param {*} element
*/
* 折叠
* @param {*} element
*/
const collapseSection = element => {
const sectionHeight = element.scrollHeight
const sectionWidth = element.scrollWidth
@@ -34,9 +49,9 @@ const Collapse = props => {
}
/**
* 展开
* @param {*} element
*/
* 展开
* @param {*} element
*/
const expandSection = element => {
const sectionHeight = element.scrollHeight
const sectionWidth = element.scrollWidth
@@ -58,22 +73,20 @@ const Collapse = props => {
clearTimeout(clearTime)
}
const updateHeight = () => {
collapseRef.current.style.height = 'auto'
}
React.useEffect(() => {
useEffect(() => {
if (props.isOpen) {
expandSection(collapseRef.current)
expandSection(ref.current)
} else {
collapseSection(collapseRef.current)
collapseSection(ref.current)
}
// 通知父组件高度变化
props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
}, [props.isOpen])
return (
<div ref={collapseRef} onClick={updateHeight} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
{props.children}
</div>
<div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
{props.children}
</div>
)
}
Collapse.defaultProps = { isOpen: false }

14
components/FlutteringRibbon.js
View File

@@ -1,10 +1,21 @@
/* eslint-disable */
import React from 'react'
const id = 'canvasFlutteringRibbon'
export const FlutteringRibbon = () => {
const destroyRibbon = ()=>{
const ribbon = document.getElementById(id)
if(ribbon && ribbon.parentNode){
ribbon.parentNode.removeChild(ribbon)
}
}
React.useEffect(() => {
createFlutteringRibbon()
return () => destroyRibbon()
}, [])
return <></>
}
/**
@@ -125,6 +136,7 @@ function createFlutteringRibbon() {
init: function () {
try {
;(this._canvas = document.createElement('canvas')),
(this._canvas.id = id),
(this._canvas.style.display = 'block'),
(this._canvas.style.position = 'fixed'),
(this._canvas.style.margin = '0'),

17
components/Nest.js
View File

@@ -1,10 +1,19 @@
/* eslint-disable */
import React from 'react'
import { useEffect } from 'react'
const id = 'canvasNestCreated'
export const Nest = () => {
React.useEffect(() => {
const destroyNest = ()=>{
const nest = document.getElementById(id)
if(nest && nest.parentNode){
nest.parentNode.removeChild(nest)
}
}
useEffect(() => {
createNest()
return () => destroyNest()
}, [])
return <></>
}
/**
@@ -65,7 +74,7 @@ function createNest() {
m(o)
}
var i = document.createElement('canvas')
i.id = 'canvasNestCreated'
i.id = id
var a = (function () {
const t = e
return {

15
components/Ribbon.js
View File

@@ -1,10 +1,20 @@
/* eslint-disable */
import React from 'react'
import { useEffect } from 'react'
const id = 'canvasRibbon'
export const Ribbon = () => {
React.useEffect(() => {
const destroyRibbon = ()=>{
const ribbon = document.getElementById(id)
if(ribbon && ribbon.parentNode){
ribbon.parentNode.removeChild(ribbon)
}
}
useEffect(() => {
createRibbon()
return () => destroyRibbon()
}, [])
return <></>
}
/**
@@ -29,6 +39,7 @@ function createRibbon() {
a = window.innerWidth,
l = window.innerHeight,
d = e.s
i.id= id
let r, s
const u = Math
let h = 0

22
components/Sakura.js
View File

@@ -1,10 +1,19 @@
/* eslint-disable */
import React from 'react'
import { useEffect } from 'react'
const id = 'canvas_sakura'
export const Sakura = () => {
React.useEffect(() => {
const destroySakura = ()=>{
const sakura = document.getElementById(id)
if(sakura && sakura.parentNode){
sakura.parentNode.removeChild(sakura)
}
}
useEffect(() => {
createSakura({})
return () => destroySakura()
}, [])
return <></>
}
/**
@@ -129,7 +138,7 @@ function createSakura() {
'style',
'position: fixed;left: 0;top: 0;pointer-events: none;'
)
canvas.setAttribute('id', 'canvas_sakura')
canvas.setAttribute('id', id)
document.getElementsByTagName('body')[0].appendChild(canvas)
cxt = canvas.getContext('2d')
var sakuraList = new SakuraList()
@@ -165,15 +174,12 @@ function createSakura() {
stop = requestAnimationFrame(asd)
}
}
window.onresize = function () {
var canvasSnow = document.getElementById('canvas_snow')
}
img.onload = function () {
startSakura()
}
function stopp() {
if (staticx) {
var child = document.getElementById('canvas_sakura')
var child = document.getElementById(id)
child.parentNode.removeChild(child)
window.cancelAnimationFrame(stop)
staticx = false

4
components/SideBarDrawer.js
View File

@@ -37,8 +37,8 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
}
}
return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
<div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
<div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-56 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
{children}
</div>

2
components/StarrySky.js
View File

@@ -7,7 +7,7 @@ export const StarrySky = () => {
}, [])
return (
<div className="relative">
<canvas id="starry-sky-vixcity" className="fixed pointer-events-none"></canvas>
<canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
</div>
)
}

17
lib/notion/getNotionData.js
View File

@@ -95,8 +95,13 @@ function getCustomNav({ allPages }) {
return customNav
}
/**
* 获取自定义菜单
* @param {*} allPages
* @returns
*/
function getCustomMenu({ collectionData }) {
const menuPages = collectionData.filter(post => (post.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) && post.status === 'Published')
const menuPages = collectionData.filter(post => (post.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) && post.status === BLOG.NOTION_PROPERTY_NAME.status_publish)
const menus = []
if (menuPages && menuPages.length > 0) {
menuPages.forEach(e => {
@@ -216,14 +221,12 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
// 文章计数
let postCount = 0
const allPages = collectionData.filter(post => {
if (post.type === 'Post' && post.status === 'Published') {
if (post.type === BLOG.NOTION_PROPERTY_NAME.type_post && post.status === BLOG.NOTION_PROPERTY_NAME.status_publish) {
postCount++
}
return post &&
post.type &&
(post.type === 'Post' || post.type === 'Page') &&
(post.status === 'Published' || post.status === 'Invisible') &&
(!post.slug.startsWith('http'))
(!post?.slug?.startsWith('http')) &&
(post?.status === BLOG.NOTION_PROPERTY_NAME.status_publish || post?.status === BLOG.NOTION_PROPERTY_NAME.status_invisible)
})
// Sort by date
@@ -241,7 +244,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
const siteInfo = getBlogInfo({ collection, block })
const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') })
// 新的菜单
const customMenu = getCustomMenu({ collectionData })
const customMenu = await getCustomMenu({ collectionData })
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
return {

2
pages/[...slug].js
View File

@@ -49,7 +49,7 @@ const Slug = props => {
})
}
}
}, 8 * 1000) // 404时长
}, 8 * 1000) // 404时长 8秒
const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading`, image: siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE }
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
}

15
public/css/theme-hexo.css Normal file
View File

@@ -0,0 +1,15 @@
/* 菜单下划线动画 */
#theme-hexo .menu-link {
text-decoration: none;
background-image: linear-gradient(#928CEE, #928CEE);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0 2px;
transition: background-size 100ms ease-in-out;
}
#theme-hexo .menu-link:hover {
background-size: 100% 2px;
color: #928CEE;
}

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

@@ -17,7 +17,7 @@
/* 菜单下划线动画 */
.menu-link {
#theme-simple .menu-link {
text-decoration: none;
background-image: linear-gradient(#dd3333, #dd3333);
background-repeat: no-repeat;
@@ -26,7 +26,7 @@
transition: background-size 100ms ease-in-out;
}
.menu-link:hover {
#theme-simple .menu-link:hover {
background-size: 100% 2px;
color: #dd3333;
}

38
themes/example/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,38 @@
import Link from 'next/link'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
return <li className='cursor-pointer' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{!hasSubMenu &&
<div className="rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
<Link href={link?.to} >
{link?.icon && <i className={link?.icon} />} {link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>
</div>
}
{hasSubMenu &&
<div className='rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
</div>
}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</li>
}

37
themes/example/components/Nav.js
View File

@@ -1,6 +1,7 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import CONFIG_EXAMPLE from '../config_example'
import { MenuItemDrop } from './MenuItemDrop'
/**
* 菜单导航
@@ -8,8 +9,9 @@ import CONFIG_EXAMPLE from '../config_example'
* @returns
*/
export const Nav = (props) => {
const { customNav } = props
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_EXAMPLE.MENU_SEARCH },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_EXAMPLE.MENU_ARCHIVE },
@@ -21,26 +23,25 @@ export const Nav = (props) => {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则不再使用 Page生成菜单。
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
if (!links || links.length === 0) {
return null
}
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="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
{links.map(link => {
if (link.show) {
return link && <Link
href={link.to}
key={link.to}
className="px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
{link.name}
</Link>
} else {
return null
}
})}
</div>
<div className="w-full md:w-1/3 text-center md:text-right">
<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 => <NormalMenuItem key={link.id} link={link}/>)} */}
{links.map(link => <MenuItemDrop key={link.id} link={link} />)}
</ul>
{/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
{/* <!-- extra links --> */}
</div>
{/* </div> */}
</div>
</nav>
)

14
themes/example/components/NormalMenuItem.js Normal file
View File

@@ -0,0 +1,14 @@
import Link from 'next/link'
/**
* 旧的普通菜单
* @param {*} props
* @returns
*/
export const NormalMenuItem = (props) => {
const { link } = props
return link?.show && <Link href={link.to} key={link.to}
className="px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
{link.name}
</Link>
}

7
themes/fukasawa/LayoutBase.js
View File

@@ -34,14 +34,17 @@ const LayoutBase = (props) => {
return (<div id='theme-fukasawa' >
<CommonHead meta={meta} />
<TopNav {...props}/>
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
<AsideLeft {...props} slot={leftAreaSlot}/>
<main id='wrapper' className='relative flex w-full py-8 justify-center'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
<main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
<div> {headerSlot} </div>
<div>{children}</div>
</div>
</main>
</div>
</div>)

6
themes/fukasawa/components/AsideLeft.js
View File

@@ -1,6 +1,6 @@
import Logo from './Logo'
import GroupCategory from './GroupCategory'
import GroupMenu from './GroupMenu'
import { MenuList } from './MenuList'
import GroupTag from './GroupTag'
import SearchInput from './SearchInput'
import SiteInfo from './SiteInfo'
@@ -11,12 +11,12 @@ import DarkModeButton from '@/components/DarkModeButton'
function AsideLeft (props) {
const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo } = props
const router = useRouter()
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-10'>
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
<Logo {...props}/>
<section className='flex flex-col text-gray-600'>
<hr className='w-12 my-8' />
<GroupMenu {...props}/>
<MenuList {...props}/>
</section>
<section className='flex flex-col text-gray-600'>

51
themes/fukasawa/components/GroupMenu.js
View File

@@ -1,51 +0,0 @@
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import CONFIG_FUKA from '../config_fuka'
function GroupMenu ({ customNav }) {
const { locale } = useGlobal()
const router = useRouter()
let links = [
{ name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
{ name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
{ name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
]
if (customNav) {
links = links.concat(customNav)
}
return (
<nav id='nav' className='font-sans text-sm'>
{links.map(link => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<div className={ 'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
</Link>
)
} else {
return null
}
})}
</nav>
)
}
export default GroupMenu

62
themes/fukasawa/components/MenuItemCollapse.js Normal file
View File

@@ -0,0 +1,62 @@
import Collapse from '@/components/Collapse'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
/**
* 折叠菜单
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = (props) => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
const [isOpen, changeIsOpen] = useState(false)
const router = useRouter()
if (!link || !link.show) {
return null
}
const selected = (router.pathname === link.to) || (router.asPath === link.to)
const toggleShow = () => {
changeShow(!show)
}
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
return <>
<div className={ (selected ? 'bg-gray-600 text-white hover:text-white' : 'hover:text-gray-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
{!hasSubMenu && <Link href={link?.to} className='py-2 w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
</Link>}
{hasSubMenu && <div
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="py-2 font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
<div className='inline-flex items-center '><i className='px-2 fa fa-plus text-gray-400'></i></div>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to}>
<div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
</Link>
</div>
})}
</Collapse>}
</>
}

36
themes/fukasawa/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,36 @@
import Link from 'next/link'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
return <li onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}
className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
{!hasSubMenu &&
<Link href={link?.to} className='w-full my-auto items-center justify-between flex ' >
<div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
{link.slot}
</Link>}
{hasSubMenu &&
<div className='w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
{link.slot}
{hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
</div>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} py-1 absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
<i className={`${sLink.icon} w-4 text-center`} />
<div className={'ml-2'}>{sLink.name}</div>
{sLink.slot}
</li>
})}
</ul>}
</li>
}

24
themes/fukasawa/components/MenuItemNormal.js Normal file
View File

@@ -0,0 +1,24 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
export const MenuItemNormal = props => {
const { link } = props
const router = useRouter()
const selected = (router.pathname === link.to) || (router.asPath === link.to)
if (!link || !link.show) {
return null
}
return <Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<div className={'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
</Link>
}

38
themes/fukasawa/components/MenuList.js Normal file
View File

@@ -0,0 +1,38 @@
import { useGlobal } from '@/lib/global'
import CONFIG_FUKA from '../config_fuka'
import BLOG from '@/blog.config'
import { MenuItemDrop } from './MenuItemDrop'
import { MenuItemCollapse } from './MenuItemCollapse'
export const MenuList = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
{ name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
{ name: locale.NAV.SEARCH, to: '/search', show: CONFIG_FUKA.MENU_SEARCH }
]
if (customNav) {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (<>
<nav id='nav-pc' className='hidden md:block font-sans text-sm z-20'>
{links?.map(link => <MenuItemDrop key={link.id} link={link} />)}
</nav>
<nav id='nav-mobile' className='block md:hidden font-sans text-sm z-20 pb-1'>
{links?.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={props.onHeightChange}/>)}
</nav>
</>
)
}

9
themes/fukasawa/components/TopNav.js
View File

@@ -1,6 +1,6 @@
import { useState } from 'react'
import { useState, useRef } from 'react'
import Collapse from '@/components/Collapse'
import GroupMenu from './GroupMenu'
import { MenuList } from './MenuList'
import Logo from './Logo'
import SearchInput from './SearchInput'
@@ -11,6 +11,7 @@ import SearchInput from './SearchInput'
*/
const TopNav = props => {
const [isOpen, changeShow] = useState(false)
const collapseRef = useRef(null)
const toggleMenuOpen = () => {
changeShow(!isOpen)
@@ -20,9 +21,9 @@ const TopNav = props => {
{/* 导航栏 */}
<div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
<Collapse type='vertical' isOpen={isOpen}>
<Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
<div className='py-1 px-5'>
<GroupMenu {...props} />
<MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
<SearchInput {...props} />
</div>
</Collapse>

4
themes/hexo/LayoutBase.js
View File

@@ -11,6 +11,7 @@ import LoadingCover from './components/LoadingCover'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { isBrowser, loadExternalResource } from '@/lib/utils'
const FacebookPage = dynamic(
() => {
@@ -61,6 +62,9 @@ const LayoutBase = props => {
return () => document.removeEventListener('scroll', scrollListener)
}, [])
if (isBrowser()) {
loadExternalResource('/css/theme-hexo.css', 'css')
}
return (
<div id='theme-hexo'>
<CommonHead meta={meta} siteInfo={siteInfo}/>

43
themes/hexo/components/Collapse.js
View File

@@ -1,43 +0,0 @@
import React, { useEffect, useRef } from 'react'
const Collapse = props => {
const { id, className } = props
const collapseRef = useRef(null)
const collapseSection = element => {
const sectionHeight = element.scrollHeight
const currentHeight = element.style.height
if (currentHeight === '0px') {
return
}
requestAnimationFrame(function () {
element.style.height = sectionHeight + 'px'
requestAnimationFrame(function () {
element.style.height = 0 + 'px'
})
})
}
const expandSection = element => {
const sectionHeight = element.scrollHeight
element.style.height = sectionHeight + 'px'
const clearTime = setTimeout(() => {
element.style.height = 'auto'
}, 400)
clearTimeout(clearTime)
}
useEffect(() => {
const element = collapseRef.current
if (props.isOpen) {
expandSection(element)
} else {
collapseSection(element)
}
}, [props.isOpen])
return (
<div id={id} ref={collapseRef} style={{ height: '0px' }} className={'overflow-hidden duration-200 ' + className}>
{props.children}
</div>
)
}
Collapse.defaultProps = { isOpen: false }
export default Collapse

23
themes/hexo/components/Header.js
View File

@@ -83,23 +83,14 @@ const Header = props => {
}, throttleMs))
return (
<header
id="header"
className="w-full h-screen bg-black text-white relative"
>
<div className={`w-full h-full ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`}>
{/* <Image src={siteInfo.pageCover} fill
style={{ objectFit: 'cover' }}
className='opacity-70'
placeholder='blur'
blurDataURL='/bg_image.jpg' /> */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
</div>
<header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
<div className="absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
<div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
className={`w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
<div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-lg'>
<span id='typed' />
</div>

48
themes/hexo/components/MenuButtonGroupTop.js
View File

@@ -1,48 +0,0 @@
import React from 'react'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import CONFIG_HEXO from '../config_hexo'
const MenuButtonGroupTop = (props) => {
const { customNav } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG_HEXO.MENU_INDEX },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }
// { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
// { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
]
if (customNav) {
links = links.concat(customNav)
}
return (
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
{links.map(link => {
if (link.show) {
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
className={'py-1.5 my-1 px-3 text-base justify-center items-center cursor-pointer'}>
<div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
<i className={`${link.icon} mr-1`}/>
<div className='text-center'>{link.name}</div>
</div>
</Link>
)
} else {
return null
}
})}
</nav>
)
}
export default MenuButtonGroupTop

54
themes/hexo/components/MenuItemCollapse.js Normal file
View File

@@ -0,0 +1,54 @@
import Collapse from '@/components/Collapse'
import Link from 'next/link'
import { useState } from 'react'
/**
* 折叠菜单
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
const [isOpen, changeIsOpen] = useState(false)
const toggleShow = () => {
changeShow(!show)
}
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
if (!link || !link.show) {
return null
}
return <>
<div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
{!hasSubMenu && <Link
href={link?.to}
className="font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
<span className=' transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
</Link>}
{hasSubMenu && <div
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1">
<span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
<i className={`px-2 fas ${isOpen ? 'fa-chevron-down' : 'fa-chevron-left'} text-gray-400`}></i>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='dark:bg-black text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
<Link href={sLink.to}>
<span className='text-sm ml-4'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
</Link>
</div>
})}
</Collapse>}
</>
}

41
themes/hexo/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,41 @@
import Link from 'next/link'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
if (!link || !link.show) {
return null
}
return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{!hasSubMenu &&
<Link
href={link?.to}
className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
{link?.icon && <i className={link?.icon}/>} {link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>}
{hasSubMenu && <>
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
{link?.icon && <i className={link?.icon}/>} {link?.name}
<i className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
</div>
</>}
{/* 子菜单 */}
{hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</div>
}

52
themes/hexo/components/MenuList.js
View File

@@ -1,52 +0,0 @@
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import CONFIG_HEXO from '../config_hexo'
const MenuList = (props) => {
const { postCount, customNav } = props
const { locale } = useGlobal()
const router = useRouter()
const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
let links = [
{ icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH }
]
if (customNav) {
links = links.concat(customNav)
}
return (
<nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
{links.map(link => {
if (link && link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-1.5 px-5 text-base justify-between hover:bg-indigo-400 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
(selected ? 'bg-gray-200 text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<i className={`${link.icon} w-4 text-center`} />
<div className={'ml-4'}>{link.name}</div>
</div>
{link.slot}
</Link>
);
} else {
return null
}
})}
</nav>
);
}
export default MenuList

32
themes/hexo/components/MenuListSide.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import { MenuItemCollapse } from './MenuItemCollapse'
import CONFIG_HEXO from '../config_hexo'
export const MenuListSide = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
]
if (customNav) {
links = customNav.concat(links)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<nav>
{/* {links.map(link => <MenuItemNormal key={link.id} link={link} />)} */}
{links?.map(link => <MenuItemCollapse key={link.id} link={link} />)}
</nav>
)
}

33
themes/hexo/components/MenuListTop.js Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG_HEXO from '../config_hexo'
import BLOG from '@/blog.config'
import { MenuItemDrop } from './MenuItemDrop'
export const MenuListTop = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG_HEXO.MENU_INDEX },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }
// { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
// { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
]
if (customNav) {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (<>
<nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
{links?.map(link => link && link.show && <MenuItemDrop key={link.id} link={link} />)}
</nav>
</>)
}

34
themes/hexo/components/SideBar.js Normal file
View File

@@ -0,0 +1,34 @@
import BLOG from '@/blog.config'
import { useRouter } from 'next/router'
import MenuGroupCard from './MenuGroupCard'
import { MenuListSide } from './MenuListSide'
/**
* 侧边抽屉
* @param tags
* @param currentTag
* @returns {JSX.Element}
* @constructor
*/
const SideBar = (props) => {
const { siteInfo } = props
const router = useRouter()
return (
<div id='side-bar'>
<div className="h-52 w-full flex justify-center">
<div>
<div onClick={() => { router.push('/') }}
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
</div>
<MenuGroupCard {...props} />
</div>
</div>
<hr className=' border-dashed'/>
<MenuListSide {...props} />
</div>
)
}
export default SideBar

51
themes/hexo/components/SideBarDrawer.js Normal file
View File

@@ -0,0 +1,51 @@
import { useRouter } from 'next/router'
import React from 'react'
/**
* 侧边栏抽屉面板，可以从侧面拉出
* @returns {JSX.Element}
* @constructor
*/
const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
const router = useRouter()
React.useEffect(() => {
const sideBarDrawerRouteListener = () => {
switchSideDrawerVisible(false)
}
router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
return () => {
router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
}
}, [router.events])
// 点击按钮更改侧边抽屉状态
const switchSideDrawerVisible = (showStatus) => {
if (showStatus) {
onOpen && onOpen()
} else {
onClose && onClose()
}
const sideBarDrawer = window.document.getElementById('sidebar-drawer')
const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
if (showStatus) {
sideBarDrawer.classList.replace('-mr-72', 'mr-0')
sideBarDrawerBackground.classList.replace('hidden', 'block')
} else {
sideBarDrawer.classList.replace('mr-0', '-mr-72')
sideBarDrawerBackground.classList.replace('block', 'hidden')
}
}
return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
<div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
{children}
</div>
{/* 背景蒙版 */}
<div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
</div>
}
export default SideBarDrawer

25
themes/hexo/components/TopNav.js
View File

@@ -2,14 +2,14 @@ import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useCallback, useEffect, useRef, useState } from 'react'
import CategoryGroup from './CategoryGroup'
import Collapse from './Collapse'
import Logo from './Logo'
import SearchDrawer from './SearchDrawer'
import TagGroups from './TagGroups'
import MenuButtonGroupTop from './MenuButtonGroupTop'
import MenuList from './MenuList'
import { MenuListTop } from './MenuListTop'
import { useRouter } from 'next/router'
import throttle from 'lodash.throttle'
import SideBar from './SideBar'
import SideBarDrawer from './SideBarDrawer'
let windowTop = 0
@@ -31,6 +31,10 @@ const TopNav = props => {
changeShow(!isOpen)
}
const toggleSideBarClose = () => {
changeShow(false)
}
// 监听滚动
useEffect(() => {
scrollTrigger()
@@ -129,7 +133,7 @@ const TopNav = props => {
<SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
{/* 导航栏 */}
<div id='sticky-nav' style={{ 'backdrop-filter': 'blur(3px)' }} className={'top-0 duration-200 transition-all shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
<div id='sticky-nav' style={{ backdropFilter: 'blur(3px)' }} className={'top-0 duration-300 transition-all shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform border-transparent dark:border-transparent'}>
<div className='w-full flex justify-between items-center px-4 py-2'>
<div className='flex'>
<Logo {...props} />
@@ -137,19 +141,18 @@ const TopNav = props => {
{/* 右侧功能 */}
<div className='mr-1 justify-end items-center '>
<div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
<div className='hidden lg:flex'> <MenuListTop {...props} /></div>
<div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
</div>
</div>
</div>
<Collapse type='vertical' isOpen={isOpen} className='shadow-xl'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
<MenuList {...props} />
</div>
</Collapse>
</div>
{/* 折叠侧边栏 */}
<SideBarDrawer isOpen={isOpen} onClose={toggleSideBarClose}>
<SideBar {...props} />
</SideBarDrawer>
</div>)
}

75
themes/matery/components/Collapse.js
View File

@@ -1,75 +0,0 @@
import React from 'react'
/**
* 折叠面板组件，支持水平折叠、垂直折叠
* @param {type:['horizontal','vertical'],isOpen} props
* @returns
*/
const Collapse = props => {
const collapseRef = React.useRef(null)
const type = props.type || 'vertical'
const collapseSection = element => {
const sectionHeight = element.scrollHeight
const sectionWidth = element.scrollWidth
requestAnimationFrame(function () {
switch (type) {
case 'horizontal':
element.style.width = sectionWidth + 'px'
requestAnimationFrame(function () {
element.style.width = 0 + 'px'
})
break
case 'vertical':
element.style.height = sectionHeight + 'px'
requestAnimationFrame(function () {
element.style.height = 0 + 'px'
})
}
})
}
/**
* 展开
* @param {*} element
*/
const expandSection = element => {
const sectionHeight = element.scrollHeight
const sectionWidth = element.scrollWidth
let clearTime = 0
switch (type) {
case 'horizontal':
element.style.width = sectionWidth + 'px'
clearTime = setTimeout(() => {
element.style.width = 'auto'
}, 400)
break
case 'vertical':
element.style.height = sectionHeight + 'px'
clearTime = setTimeout(() => {
element.style.height = 'auto'
}, 400)
}
clearTimeout(clearTime)
}
React.useEffect(() => {
const element = collapseRef.current
if (props.isOpen) {
expandSection(element)
} else {
collapseSection(element)
}
}, [props.isOpen])
return (
<div ref={collapseRef} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }}
className={'overflow-hidden duration-200 fixed z-50 ' + props.className }>
{props.children}
</div>
)
}
Collapse.defaultProps = { isOpen: false }
export default Collapse

16
themes/matery/components/Header.js
View File

@@ -86,18 +86,9 @@ const Header = props => {
return (
<header
id="header"
className="md:bg-fixed w-full h-screen bg-black text-white relative"
id="header" style={{ zIndex: 1 }}
className=" w-full h-screen bg-black text-white relative"
>
<div className='w-full h-full absolute'>
{/* <Image src={siteInfo.pageCover} fill
style={{ objectFit: 'cover' }}
className='opacity-70'
placeholder='blur'
blurDataURL='/bg_image.jpg' /> */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
</div>
<div className="absolute flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
@@ -110,6 +101,9 @@ const Header = props => {
</div>
</div>
<div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
className={`w-full h-screen bg-cover ${CONFIG_MATERY.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
</header>
)
}

47
themes/matery/components/MenuButtonGroupTop.js
View File

@@ -1,47 +0,0 @@
import React from 'react'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import CONFIG_MATERY from '../config_matery'
const MenuButtonGroupTop = (props) => {
const { customNav } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
]
if (customNav) {
links = customNav.concat(links)
}
return (
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
{links.map(link => {
if (link.show) {
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
className={'py-1.5 my-1 px-3 text-base justify-center items-center cursor-pointer'}>
<div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
<i className={`${link.icon} mr-1`}/>
<div className='text-center'>{link.name}</div>
</div>
</Link>
)
} else {
return null
}
})}
</nav>
)
}
export default MenuButtonGroupTop

61
themes/matery/components/MenuItemCollapse.js Normal file
View File

@@ -0,0 +1,61 @@
import Collapse from '@/components/Collapse'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
/**
* 折叠菜单
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
const router = useRouter()
const [isOpen, changeIsOpen] = useState(false)
const toggleShow = () => {
changeShow(!show)
}
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
if (!link || !link.show) {
return null
}
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <>
<div onClick={toggleShow} className={'py-2 px-5 duration-300 text-base justify-between hover:bg-indigo-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
(selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
{!hasSubMenu && <Link href={link?.to}>
<div className='my-auto items-center justify-between flex '>
<i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
<div >{link.name}</div>
</div>
{link.slot}
</Link>}
{hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} className='my-auto items-center w-full justify-between flex '>
<div className=''>{link?.name}</div>
<i className={`px-2 fas ${isOpen ? 'fa-chevron-down' : 'fa-chevron-left'}`}></i>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='cursor-pointer w-full font-extralight dark:bg-black text-left px-10 justify-start bg-gray-100 hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
<Link href={sLink.to}>
<span className='text-sm'>{sLink.title}</span>
</Link>
</div>
})}
</Collapse>}
</>
}

41
themes/matery/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,41 @@
import Link from 'next/link'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
if (!link || !link.show) {
return null
}
return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{!hasSubMenu &&
<Link
href={link?.to}
className="font-sans menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
{link?.icon && <i className={link?.icon} />} {link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>}
{hasSubMenu && <>
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
</div>
</>}
{/* 子菜单 */}
{hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</div>
}

24
themes/matery/components/MenuItemNormal.js Normal file
View File

@@ -0,0 +1,24 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
export const MenuItemNormal = props => {
const router = useRouter()
const { link } = props
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link
key={link.to}
title={link.to}
href={link.to}
className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
(selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
<div className='my-auto items-center justify-between flex '>
<i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
<div >{link.name}</div>
</div>
{link.slot}
</Link>
}

32
themes/matery/components/MenuListSide.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG_MATERY from '../config_matery'
import BLOG from '@/blog.config'
import { MenuItemCollapse } from './MenuItemCollapse'
export const MenuListSide = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
]
if (customNav) {
links = customNav.concat(links)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<nav>
{/* {links.map(link => <MenuItemNormal key={link.id} link={link} />)} */}
{links.map(link => <MenuItemCollapse key={link.id} link={link} />)}
</nav>
)
}

31
themes/matery/components/MenuListTop.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG_MATERY from '../config_matery'
import { MenuItemDrop } from './MenuItemDrop'
import BLOG from '@/blog.config'
export const MenuListTop = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MATERY.MENU_SEARCH },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
]
if (customNav) {
links = customNav.concat(links)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
{links.map(link => <MenuItemDrop key={link.id} link={link}/>)}
</nav>
)
}

51
themes/matery/components/SideBar.js
View File

@@ -1,34 +1,18 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
import CONFIG_MATERY from '../config_matery'
import { MenuListSide } from './MenuListSide'
/**
* 标签组
* 侧边抽屉
* @param tags
* @param currentTag
* @returns {JSX.Element}
* @constructor
*/
const SideBar = (props) => {
const { siteInfo, customNav } = props
const { locale } = useGlobal()
const router = useRouter()
const defaultLinks = [
{ icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MATERY.MENU_ARCHIVE },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MATERY.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MATERY.MENU_TAG }
]
let links = [].concat(defaultLinks)
if (customNav) {
links = defaultLinks.concat(customNav)
}
const { siteInfo } = props
return (
<div id='side-bar' className=''>
<div id='side-bar'>
<div className="mh-48 w-full bg-indigo-700">
<div className='mx-5 pt-6 pb-2'>
{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -37,32 +21,7 @@ const SideBar = (props) => {
<div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
</div>
</div>
<nav>
{links.map(link => {
if (link && link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={link.to}
title={link.to}
href={link.to}
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
(selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')}>
<div className='my-auto items-center justify-between flex '>
<i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />
<div >{link.name}</div>
</div>
{link.slot}
</Link>
)
} else {
return <></>
}
})}
</nav>
<MenuListSide {...props} />
</div>
)
}

4
themes/matery/components/TopNav.js
View File

@@ -5,7 +5,7 @@ import CategoryGroup from './CategoryGroup'
import Logo from './Logo'
import SearchDrawer from './SearchDrawer'
import TagGroups from './TagGroups'
import MenuButtonGroupTop from './MenuButtonGroupTop'
import { MenuListTop } from './MenuListTop'
import SideBarDrawer from '@/components/SideBarDrawer'
import SideBar from './SideBar'
import throttle from 'lodash.throttle'
@@ -144,7 +144,7 @@ const TopNav = props => {
{/* 右侧功能 */}
<div className='mr-1 justify-end items-center '>
<div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
<div className='hidden lg:flex'> <MenuListTop {...props} /></div>
<div className='block lg:hidden'><Link href={'/search'} passHref>
<i className='fas fa-search' />
</Link></div>

1
themes/matery/config_matery.js
View File

@@ -3,6 +3,7 @@ const CONFIG_MATERY = {
HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动
// 菜单配置
MENU_CATEGORY: true, // 显示分类

21
themes/medium/LayoutBase.js
View File

@@ -28,28 +28,30 @@ const LayoutBase = props => {
return (
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
<CommonHead meta={meta} />
<div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
<CommonHead meta={meta} />
<main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
{/* 桌面端左侧菜单 */}
{/* <LeftMenuBar/> */}
<div id='container-inner' className='w-full relative z-10'>
{/* 移动端顶部菜单 */}
{/* 顶部导航栏 */}
<TopNavBar {...props} />
<div className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
<div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
{slotTop}
{children}
{/* 回顶按钮 */}
<div
data-aos="fade-up"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
<i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }}/>
data-aos="fade-up"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
<i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
</div>
</div>
@@ -73,6 +75,7 @@ const LayoutBase = props => {
</div>
</main>
{/* 移动端底部导航栏 */}
<BottomMenuBar {...props} className='block md:hidden' />
</div>
</ThemeGlobalMedium.Provider>

51
themes/medium/components/GroupMenu.js
View File

@@ -1,51 +0,0 @@
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import CONFIG_MEDIUM from '../config_medium'
function GroupMenu ({ customMenu, customNav }) {
const { locale } = useGlobal()
const router = useRouter()
let links = [
// { name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
{ name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }
// { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
]
if (customNav) {
links = links.concat(customNav)
}
return (
<nav id='nav' className=' text-md'>
{links.map(link => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<div className={ 'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
</Link>
)
} else {
return null
}
})}
</nav>
)
}
export default GroupMenu

35
themes/medium/components/MenuBarMobile.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG_MEDIUM from '../config_medium'
import BLOG from '@/blog.config'
import { MenuItemCollapse } from './MenuItemCollapse'
export const MenuBarMobile = (props) => {
const { customMenu, customNav } = props
const { locale } = useGlobal()
let links = [
// { name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
{ name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
{ name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }
// { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
]
if (customNav) {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则不再使用 Page生成菜单。
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<nav id='nav' className=' text-md'>
{/* {links.map(link => <NormalMenu key={link.id} link={link}/>)} */}
{links.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link.id} link={link}/>)}
</nav>
)
}

62
themes/medium/components/MenuItemCollapse.js Normal file
View File

@@ -0,0 +1,62 @@
import Collapse from '@/components/Collapse'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
/**
* 折叠菜单
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = (props) => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
const [isOpen, changeIsOpen] = useState(false)
const router = useRouter()
if (!link || !link.show) {
return null
}
const selected = (router.pathname === link.to) || (router.asPath === link.to)
const toggleShow = () => {
changeShow(!show)
}
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
return <>
<div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-5 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} >
{!hasSubMenu && <Link href={link?.to} className='py-2 w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
</Link>}
{hasSubMenu && <div
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="py-2 font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
<div className='inline-flex items-center '><i className='px-2 fa fa-plus text-gray-400'></i></div>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to}>
<div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
</Link>
</div>
})}
</Collapse>}
</>
}

48
themes/medium/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,48 @@
import Link from 'next/link'
import { useState } from 'react'
import { useRouter } from 'next/router'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const router = useRouter()
if (!link || !link.show) {
return null
}
const hasSubMenu = link?.subMenus?.length > 0
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <li className='cursor-pointer list-none items-center flex' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{hasSubMenu &&
<div className={'h-full whitespace-nowrap px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<div className='px-1'>
{link?.icon && <i className={link?.icon} />} {link?.name}
{hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
</div>
</div>
}
{!hasSubMenu &&
<div className={'h-full whitespace-nowrap px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<Link href={link?.to} className='px-1'>
{link?.icon && <i className={link?.icon} />} {link?.name}
</Link>
</div>
}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-0 '} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</li>
}

27
themes/medium/components/MenuItemMobileNormal.js Normal file
View File

@@ -0,0 +1,27 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
export const NormalMenu = props => {
const { link } = props
const router = useRouter()
if (!link || !link.show) {
return null
}
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link
key={`${link.to}`}
title={link.to}
href={link.to}
className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<div className={ 'hover:text-black'}>{link.name}</div>
</div>
{link.slot}
</Link>
}

24
themes/medium/components/MenuItemPCNormal.js Normal file
View File

@@ -0,0 +1,24 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
export const MenuItemPCNormal = props => {
const { link } = props
const router = useRouter()
const selected = (router.pathname === link.to) || (router.asPath === link.to)
if (!link || !link.show) {
return null
}
return <Link
key={`${link.id}-${link.to}`}
title={link.to}
href={link.to}
className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<div className='items-center justify-center flex '>
<i className={link.icon} />
<div className='ml-2 whitespace-nowrap'>{link.name}</div>
</div>
{link.slot}
</Link>
}

62
themes/medium/components/TopNavBar.js
View File

@@ -1,11 +1,11 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
import LogoBar from './LogoBar'
import React from 'react'
import { useRef, useState } from 'react'
import Collapse from '@/components/Collapse'
import GroupMenu from './GroupMenu'
import { MenuBarMobile } from './MenuBarMobile'
import { useGlobal } from '@/lib/global'
import CONFIG_MEDIUM from '../config_medium'
import BLOG from '@/blog.config'
import { MenuItemDrop } from './MenuItemDrop'
/**
* 顶部导航栏 + 菜单
@@ -13,9 +13,9 @@ import CONFIG_MEDIUM from '../config_medium'
* @returns
*/
export default function TopNavBar(props) {
const { className, customNav } = props
const router = useRouter()
const [isOpen, changeShow] = React.useState(false)
const { className, customNav, customMenu } = props
const [isOpen, changeShow] = useState(false)
const collapseRef = useRef(null)
const { locale } = useGlobal()
@@ -26,59 +26,43 @@ export default function TopNavBar(props) {
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
]
const navs = defaultLinks.concat(customNav)
let links = defaultLinks.concat(customNav)
const toggleMenuOpen = () => {
changeShow(!isOpen)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
{/* 折叠菜单 */}
<Collapse type='vertical' isOpen={isOpen} className='md:hidden'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-7 lg:hidden '>
<GroupMenu {...props} />
{/* 移动端折叠菜单 */}
<Collapse type='vertical'collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
<MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
</div>
</Collapse>
{/* 导航栏菜单 */}
<div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
{/* 图标Logo */}
{/* 左侧图标Logo */}
<LogoBar {...props} />
{/* 右侧功能 */}
{/* 折叠按钮、仅移动端显示 */}
<div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div onClick={toggleMenuOpen} className='cursor-pointer'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
</div>
</div>
{/* 顶部菜单 */}
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex'>
{navs && navs.map(link => {
if (link?.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={`${link.id}-${link.to}`}
title={link.to}
href={link.to}
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<div className='items-center justify-center flex '>
<i className={link.icon} />
<div className='ml-2 whitespace-nowrap'>{link.name}</div>
</div>
{link.slot}
</Link>
)
} else {
return null
}
})}
{links && links.map(link => <MenuItemDrop key={link.id} link={link}/>)}
</div>
</div>
</div>

38
themes/next/components/Collapse.js
View File

@@ -1,38 +0,0 @@
import React, { useEffect, useRef } from 'react'
const Collapse = props => {
const collapseRef = useRef(null)
const collapseSection = element => {
const sectionHeight = element.scrollHeight
requestAnimationFrame(function () {
element.style.height = sectionHeight + 'px'
requestAnimationFrame(function () {
element.style.height = 0 + 'px'
})
})
}
const expandSection = element => {
const sectionHeight = element.scrollHeight
element.style.height = sectionHeight + 'px'
const clearTime = setTimeout(() => {
element.style.height = 'auto'
}, 400)
clearTimeout(clearTime)
}
useEffect(() => {
const element = collapseRef.current
if (props.isOpen) {
expandSection(element)
} else {
collapseSection(element)
}
}, [props.isOpen])
return (
<div ref={collapseRef} style={{ height: '0px' }} className='overflow-hidden duration-200'>
{props.children}
</div>
)
}
Collapse.defaultProps = { isOpen: false }
export default Collapse

54
themes/next/components/CollapseMenu.js Normal file
View File

@@ -0,0 +1,54 @@
import Collapse from '@/components/Collapse'
import Link from 'next/link'
import { useState } from 'react'
/**
* 折叠菜单
* @param {*} param0
* @returns
*/
export const CollapseMenu = (props) => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
const [isOpen, changeIsOpen] = useState(false)
const toggleShow = () => {
changeShow(!show)
}
const toggleOpenSubMenu = () => {
changeIsOpen(!isOpen)
}
return <>
<div className='px-5 py-2 w-full text-left duration-200 hover:bg-gray-700 hover:text-white not:last-child:border-b-0 border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
{!hasSubMenu && <Link
href={link?.to}
className='w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
</Link>}
{hasSubMenu && <div
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
<div className='inline-flex items-center '><i className='px-2 fa fa-plus text-gray-400'></i></div>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map(sLink => {
return <div key={sLink.id} className='
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
<Link href={sLink.to}>
<div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div>
</Link>
</div>
})}
</Collapse>}
</>
}

53
themes/next/components/MenuButtonGroup.js
View File

@@ -1,53 +0,0 @@
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import CONFIG_NEXT from '../config_next'
const MenuButtonGroup = (props) => {
const { postCount, customNav } = props
const { locale } = useGlobal()
const router = useRouter()
const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
const defaultLinks = [
{ icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE }
]
let links = [].concat(defaultLinks)
if (customNav) {
links = defaultLinks.concat(customNav)
}
return (
<nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans'>
{links.map(link => {
if (link && link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return (
<Link
key={link.to}
title={link.to}
href={link.to}
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
className={'py-1.5 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
(selected ? 'bg-gray-200 text-black' : ' ')}>
<div className='my-auto items-center justify-center flex '>
<i className={`${link.icon} w-4 text-center`} />
<div className={'ml-4'}>{link.name}</div>
</div>
{link.slot}
</Link>
)
} else {
return <></>
}
})}
</nav>
)
}
export default MenuButtonGroup

35
themes/next/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,35 @@
import Link from 'next/link'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
return <li onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}
className='relative py-1.5 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center '>
{!hasSubMenu &&
<Link href={link?.to} className='w-full my-auto items-center justify-between flex ' >
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
{link.slot}
</Link>}
{hasSubMenu &&
<div className='w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
{link.slot}
{hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
</div>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
<i className={`${sLink.icon} w-4 text-center`} />
<div className={'ml-4'}>{sLink.name}</div>
{sLink.slot}
</li>
})} </ul>}
</li>
}

43
themes/next/components/MenuList.js Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG_NEXT from '../config_next'
import BLOG from '@/blog.config'
import { MenuItemDrop } from './MenuItemDrop'
import { CollapseMenu } from './CollapseMenu'
export const MenuList = (props) => {
const { postCount, customNav, customMenu } = props
const { locale } = useGlobal()
const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
const defaultLinks = [
{ icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_NEXT.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_NEXT.MENU_TAG },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_NEXT.MENU_ARCHIVE }
]
let links = [].concat(defaultLinks)
if (customNav) {
links = defaultLinks.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<>
{/* 大屏模式菜单 */}
<nav id='nav' className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
{links.map(link => link && link.show && <MenuItemDrop key={link.id} link={link} />)}
</nav>
{/* 移动端菜单 */}
<div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
{links?.map(link => link && link.show && <CollapseMenu onHeightChange={props.onHeightChange} key={link.id} link={link} />)}
</div>
</>
)
}

6
themes/next/components/SideAreaLeft.js
View File

@@ -1,5 +1,5 @@
import InfoCard from './InfoCard'
import MenuButtonGroup from './MenuButtonGroup'
import { MenuList } from './MenuList'
import SearchInput from './SearchInput'
import Toc from './Toc'
import { useGlobal } from '@/lib/global'
@@ -23,7 +23,7 @@ const SideAreaLeft = props => {
const { post, slot, postCount } = props
const { locale } = useGlobal()
const showToc = post && post.toc && post.toc.length > 1
return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-10 relative'}>
return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>
<section
data-aos="fade-down"
@@ -35,7 +35,7 @@ const SideAreaLeft = props => {
<section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
<Logo {...props} className='h-32' />
<div className='pt-2 px-2 font-sans'>
<MenuButtonGroup allowCollapse={true} {...props} />
<MenuList allowCollapse={true} {...props} />
</div>
{CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
<SearchInput {...props} />

121
themes/next/components/TopNav.js
View File

@@ -3,9 +3,9 @@ import throttle from 'lodash.throttle'
import Link from 'next/link'
import { useCallback, useEffect, useRef, useState } from 'react'
import CategoryGroup from './CategoryGroup'
import Collapse from './Collapse'
import Collapse from '@/components/Collapse'
import Logo from './Logo'
import MenuButtonGroup from './MenuButtonGroup'
import { MenuList } from './MenuList'
import SearchDrawer from './SearchDrawer'
import TagGroups from './TagGroups'
import CONFIG_NEXT from '../config_next'
@@ -21,6 +21,7 @@ const TopNav = (props) => {
const { tags, currentTag, categories, currentCategory } = props
const { locale } = useGlobal()
const searchDrawer = useRef()
const collapseRef = useRef(null)
const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY
@@ -53,76 +54,74 @@ const TopNav = (props) => {
}
const searchDrawerSlot = <>
{ categories && (
<section className='mt-8'>
<div className='text-sm flex flex-nowrap justify-between font-light px-2'>
<div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
<Link
href={'/category'}
passHref
className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{categories && (
<section className='mt-8'>
<div className='text-sm flex flex-nowrap justify-between font-light px-2'>
<div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
<Link
href={'/category'}
passHref
className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
{locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
) }
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
)}
{ tags && (
<section className='mt-4'>
<div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
<div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag'/>{locale.COMMON.TAGS}</div>
<Link
href={'/tag'}
passHref
className='text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
{tags && (
<section className='mt-4'>
<div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
<div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}</div>
<Link
href={'/tag'}
passHref
className='text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
</Link>
</div>
<div className='p-2'>
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</section>
) }
</Link>
</div>
<div className='p-2'>
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</section>
)}
</>
return (<div id='top-nav' className='block lg:hidden'>
<SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
<SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
{/* 导航栏 */}
<div id='sticky-nav' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'fixed' : 'relative'} lg:relative w-full top-0 z-20 transform duration-500`}>
<div className='w-full flex justify-between items-center p-4 bg-black dark:bg-gray-800 text-white'>
{/* 左侧LOGO 标题 */}
<div className='flex flex-none flex-grow-0'>
<div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
{ isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
</div>
{/* 导航栏 */}
<div id='sticky-nav' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'fixed' : 'relative'} lg:relative w-full top-0 z-20 transform duration-500`}>
<div className='w-full flex justify-between items-center p-4 bg-black dark:bg-gray-800 text-white'>
{/* 左侧LOGO 标题 */}
<div className='flex flex-none flex-grow-0'>
<div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
</div>
</div>
<div className='flex'>
<Logo {...props} />
</div>
{/* 右侧功能 */}
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
<i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
</div>
</div>
</div>
<Collapse collapseRef={collapseRef} type='vertical' isOpen={isOpen}>
<MenuList onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} {...props} from='top' />
</Collapse>
</div>
<div className='flex'>
<Logo {...props}/>
</div>
{/* 右侧功能 */}
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
<i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
</div>
</div>
</div>
<Collapse type='vertical' isOpen={isOpen}>
<div className='bg-white py-1 px-5'>
<MenuButtonGroup {...props} from='top'/>
</div>
</Collapse>
</div>
</div>)
</div>)
}
export default TopNav

38
themes/nobelium/components/MenuItemDrop.js Normal file
View File

@@ -0,0 +1,38 @@
import Link from 'next/link'
import { useState } from 'react'
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
return <li className='cursor-pointer' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{!hasSubMenu &&
<div className="block ml-4 text-black dark:text-gray-50 nav">
<Link href={link?.to} >
{link?.icon && <i className={link?.icon} />} {link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>
</div>
}
{hasSubMenu &&
<div className='block ml-4 text-black dark:text-gray-50 nav'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
</div>
}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-0 '} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</li>
}

25
themes/nobelium/components/Nav.js
View File

@@ -4,6 +4,7 @@ import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import CONFIG_NOBELIUM from '../config_nobelium'
import { SvgIcon } from './SvgIcon'
import { MenuItemDrop } from './MenuItemDrop'
const Nav = props => {
const { navBarTitle, fullWidth, siteInfo } = props
@@ -54,12 +55,12 @@ const Nav = props => {
</Link>
{navBarTitle
? (
<p className="ml-2 font-medium text-day dark:text-night header-name">
<p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
{navBarTitle}
</p>
)
: (
<p className="ml-2 font-medium text-day dark:text-night header-name">
<p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
{siteInfo?.title}
{/* ,{' '}<span className="font-normal">{siteInfo?.description}</span> */}
</p>
@@ -71,7 +72,7 @@ const Nav = props => {
}
const NavBar = props => {
const { customNav } = props
const { customMenu, customNav } = props
const { locale } = useGlobal()
let links = [
@@ -84,21 +85,17 @@ const NavBar = props => {
if (customNav) {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
return (
<div className="flex-shrink-0">
<ul className="flex flex-row">
{links.map(
link =>
link.show && (
<li
key={link.id}
className="block ml-4 text-black dark:text-gray-50 nav"
>
<Link href={link.to} target={link.target}>
{link.name}
</Link>
</li>
)
link => link && link.show && <MenuItemDrop key={link.id} link={link}/>
)}
</ul>
</div>

4
themes/simple/LayoutBase.js
View File

@@ -35,7 +35,7 @@ const LayoutBase = props => {
loadExternalResource('/css/theme-simple.css', 'css')
}
return (
<div id='theme-simple' className='dark:text-gray-300 bg-white dark:bg-black'>
<div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-black'>
<CommonHead meta={meta} />
{CONFIG_SIMPLE.TOP_BAR && <TopBar {...props} />}
@@ -47,7 +47,7 @@ const LayoutBase = props => {
<NavBar {...props} />
{/* 主体 */}
<div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex items-start max-w-9/10 mx-auto pt-12'}>
<div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
<div id='container-inner ' className='w-full flex-grow'>
{onLoading ? LoadingCover : children}
</div>

6
themes/simple/components/CollapseMenu.js → themes/simple/components/MenuItemCollapse.js
View File

@@ -7,7 +7,7 @@ import { useState } from 'react'
* @param {*} param0
* @returns
*/
export const CollapseMenu = ({ link }) => {
export const MenuItemCollapse = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -21,6 +21,10 @@ export const CollapseMenu = ({ link }) => {
changeIsOpen(!isOpen)
}
if (!link || !link.show) {
return null
}
return <>
<div className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
{!hasSubMenu && <Link

14
themes/simple/components/DropMenu.js → themes/simple/components/MenuItemDrop.js
View File

@@ -1,10 +1,14 @@
import Link from 'next/link'
import { useState } from 'react'
export const DropMenu = ({ link }) => {
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
if (!link || !link.show) {
return null
}
return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
{!hasSubMenu &&
@@ -18,16 +22,16 @@ export const DropMenu = ({ link }) => {
{hasSubMenu && <>
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
{link?.name}
<i className='px-2 fa fa-angle-down'></i>
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
</div>
</>}
{/* 子菜单 */}
{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 `}>
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className=' text-blue-500 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'>
return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-blue-500 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs font-extralight'>{sLink.title}</span>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>
</li>
})}

26
themes/simple/components/NavBarMenu.js → themes/simple/components/MenuList.js
View File

@@ -4,15 +4,15 @@ import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import CONFIG_SIMPLE from '../config_simple'
import { CollapseMenu } from './CollapseMenu'
import { DropMenu } from './DropMenu'
import { MenuItemCollapse } from './MenuItemCollapse'
import { MenuItemDrop } from './MenuItemDrop'
/**
* 菜单导航
* @param {*} props
* @returns
*/
export const NavBarMenu = ({ customNav, customMenu }) => {
export const MenuList = ({ customNav, customMenu }) => {
const { locale } = useGlobal()
const [isOpen, changeIsOpen] = useState(false)
const toggleIsOpen = () => {
@@ -37,23 +37,21 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
links = links.concat(customNav)
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
links = customMenu
}
if (!links || links.length === 0) {
return null
}
return (<>
{/* 大屏模式菜单 */}
<div id='nav-menu-pc' className='hidden md:flex my-auto'>
{links?.map(link => {
if (link?.show) {
return <DropMenu key={link.id} link={link} />
} else {
return null
}
})}
{links?.map(link => <MenuItemDrop key={link.id} link={link} />)}
</div>
{/* 移动端小屏菜单 */}
<div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
<div onClick={toggleIsOpen} className='cursor-pointer hover:text-red-400 transition-all duration-200'>
<i className='fa fa-bars mr-3' />
@@ -62,13 +60,7 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
<Collapse className='absolute w-full top-12 left-0' isOpen={isOpen}>
<div id='menu-wrap' className='bg-white dark:border-hexo-black-gray border'>
{links?.map(link => {
if (link?.show) {
return <CollapseMenu key={link.id} link={link} />
} else {
return null
}
})}
{links?.map(link => <MenuItemCollapse key={link.id} link={link} />)}
</div>
</Collapse>
</div>

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

@@ -3,7 +3,7 @@ import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import { useState } from 'react'
import CONFIG_SIMPLE from '../config_simple'
import { NavBarMenu } from './NavBarMenu'
import { MenuList } from './MenuList'
/**
* 菜单导航
@@ -53,7 +53,7 @@ export const NavBar = (props) => {
{/* 左侧菜单 */}
<div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
{showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='float-left w-full outline-none h-full px-4' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..." />}
{!showSearchInput && (<NavBarMenu {...props}/>)}
{!showSearchInput && (<MenuList {...props}/>)}
</div>
<div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400">