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

input outline

Browse Source
This commit is contained in:
tangly1024.com
2023-03-09 14:00:57 +08:00
parent 6ec9dd97aa
commit 883e2cd7a1
25 changed files with 118 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tailwind.config.js
View File

@@ -21,9 +21,10 @@ module.exports = {
} }
}, },
maxWidth: { maxWidth: {
side: '14rem' side: '14rem',
'9/10': '90%'
} }
}, }
}, },
variants: { variants: {
extend: {} extend: {}

2
themes/example/components/ArticleLock.js
View File

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'> <div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input> <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" > <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
<i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i> <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div> </div>

2
themes/example/components/SearchInput.js
View File

@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
ref={searchInputRef} ref={searchInputRef}
type='text' type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`} placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'} className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput} onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput} onCompositionUpdate={lockSearchInput}

2
themes/fukasawa/components/ArticleLock.js
View File

@@ -30,7 +30,7 @@ export const ArticleLock = props => {
<div className="flex mx-4"> <div className="flex mx-4">
<input <input
id="password" type='password' id="password" type='password'
className="w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500" className="outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
></input> ></input>
<div <div
onClick={submitPassword} onClick={submitPassword}

2
themes/fukasawa/components/SearchInput.js
View File

@@ -53,7 +53,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
<input <input
ref={searchInputRef} ref={searchInputRef}
type='text' type='text'
className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'} className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput} onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput} onCompositionUpdate={lockSearchInput}

2
themes/hexo/components/ArticleLock.js
View File

@@ -25,7 +25,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'> <div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input> <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" > <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
<i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i> <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div> </div>

2
themes/hexo/components/SearchInput.js
View File

@@ -69,7 +69,7 @@ const SearchInput = props => {
ref={searchInputRef} ref={searchInputRef}
type="text" type="text"
className={ className={
'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500' 'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
} }
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput} onCompositionStart={lockSearchInput}

2
themes/matery/components/ArticleLock.js
View File

@@ -25,7 +25,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'> <div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input> <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" > <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
<i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i> <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div> </div>

2
themes/matery/components/SearchInput.js
View File

@@ -69,7 +69,7 @@ const SearchInput = props => {
ref={searchInputRef} ref={searchInputRef}
type="text" type="text"
className={ className={
'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500' 'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
} }
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput} onCompositionStart={lockSearchInput}

2
themes/medium/components/ArticleLock.js
View File

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'> <div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input> <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" > <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
<i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i> <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div> </div>

2
themes/medium/components/SearchInput.js
View File

@@ -61,7 +61,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
<input <input
ref={searchInputRef} ref={searchInputRef}
type='text' type='text'
className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'} className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput} onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput} onCompositionUpdate={lockSearchInput}

2
themes/next/components/ArticleLock.js
View File

@@ -30,7 +30,7 @@ export const ArticleLock = props => {
<div className="flex mx-4"> <div className="flex mx-4">
<input <input
id="password" type='password' id="password" type='password'
className="w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500" className="outline-none w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
></input> ></input>
<div <div
onClick={submitPassword} onClick={submitPassword}

2
themes/next/components/SearchInput.js
View File

@@ -66,7 +66,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
ref={searchInputRef} ref={searchInputRef}
type='text' type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`} placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'} className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput} onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput} onCompositionUpdate={lockSearchInput}

2
themes/nobelium/LayoutTag.js
View File

@@ -25,7 +25,7 @@ export const LayoutTag = props => {
placeholder={ placeholder={
currentTag ? `Search in #${currentTag}` : 'Search Articles' currentTag ? `Search in #${currentTag}` : 'Search Articles'
} }
className="block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white" className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
onChange={e => setSearchValue(e.target.value)} onChange={e => setSearchValue(e.target.value)}
/> />
<svg <svg

2
themes/nobelium/components/ArticleLock.js
View File

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex'> <div className='flex'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input> <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" > <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
<i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i> <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div> </div>

2
themes/nobelium/components/SearchInput.js
View File

@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
ref={searchInputRef} ref={searchInputRef}
type='text' type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`} placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'} className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onCompositionStart={lockSearchInput} onCompositionStart={lockSearchInput}
onCompositionUpdate={lockSearchInput} onCompositionUpdate={lockSearchInput}

14
themes/simple/LayoutBase.js
View File

@@ -1,7 +1,7 @@
import CommonHead from '@/components/CommonHead' import CommonHead from '@/components/CommonHead'
import React from 'react' import React from 'react'
import { Header } from './components/Header' import { Header } from './components/Header'
import { Nav } from './components/Nav' import { NavBar } from './components/NavBar'
import { Footer } from './components/Footer' import { Footer } from './components/Footer'
// import { Title } from './components/Title' // import { Title } from './components/Title'
import { SideBar } from './components/SideBar' import { SideBar } from './components/SideBar'
@@ -30,17 +30,17 @@ const LayoutBase = props => {
{/* 顶部LOGO */} {/* 顶部LOGO */}
<Header {...props} /> <Header {...props} />
{/* 菜单 */} {/* 导航栏 */}
<Nav {...props} /> <NavBar {...props} />
{/* 主体 */} {/* 主体 */}
<div id='container-inner' className="w-full relative z-10"> <div id='container-wrap' className="w-full relative">
{/* <Title {...props} /> */} {/* <Title {...props} /> */}
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full relative container mx-auto justify-start md:flex items-start pt-12 px-2'}> <div id='container-inner' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' max-w-9/10 w-full relative container mx-auto flex justify-center items-start pt-12'}>
<div className='w-full max-w-6xl'>{children}</div> <div className='w-full flex-grow'>{children}</div>
<SideBar {...props} /> <SideBar {...props} />
@@ -48,7 +48,7 @@ const LayoutBase = props => {
</div> </div>
<div className='fixed right-4 bottom-4 z-10'> <div className='fixed right-4 bottom-4'>
<JumpToTopButton /> <JumpToTopButton />
</div> </div>

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

@@ -26,7 +26,7 @@ export const ArticleLock = props => {
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'> <div className='flex mx-4'>
<input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input> <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" > <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
<i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i> <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
</div> </div>

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

@@ -5,23 +5,26 @@ export const DropMenu = ({ link }) => {
const [show, changeShow] = useState(false) const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0 const hasSubMenu = link?.subMenus?.length > 0
return <div className='pt-3' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} > return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
<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
{link?.name} href={link?.to}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
</Link> {link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs'>{sLink.title}</span>
</Link>
</li>
})}
</ul>}
{/* 子菜单 */}
{hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
{link.subMenus.map(sLink => {
return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6 pl-2'>
<Link href={sLink.to}>
<span className='text-xs'>{sLink.title}</span>
</Link>
</li>
})}
</ul>}
</div> </div>
} }

7
themes/simple/components/Header.js
View File

@@ -1,5 +1,6 @@
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import Link from 'next/link' import Link from 'next/link'
import CONFIG_SIMPLE from '../config_simple'
// import CONFIG_SIMPLE from '../config_simple' // import CONFIG_SIMPLE from '../config_simple'
/** /**
@@ -19,12 +20,12 @@ export const Header = (props) => {
<div className='flex space-x-12'> <div className='flex space-x-12'>
<div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'> <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} /> <img src={siteInfo?.icon} className='rounded-full' width={160} alt={BLOG.AUTHOR} />
</div> </div>
<div> <div>
<div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div> <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
<div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div> <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.LOGO_DESCRIPTION }}/>
</div> </div>
</div> </div>
</Link> </Link>

27
themes/simple/components/Nav.js → themes/simple/components/NavBar.js
View File

@@ -3,14 +3,15 @@ import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useState } from 'react' import { useState } from 'react'
import CONFIG_SIMPLE from '../config_simple' import CONFIG_SIMPLE from '../config_simple'
import { DropMenu } from './DropMenu' import { NavBarMenu } from './NavBarMenu'
/** /**
* 菜单导航 * 菜单导航
* @param {*} props * @param {*} props
* @returns * @returns
*/ */
export const Nav = ({ customNav, customMenu }) => { export const NavBar = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal() const { locale } = useGlobal()
const [showSearchInput, changeShowSearchInput] = useState(false) const [showSearchInput, changeShowSearchInput] = useState(false)
const router = useRouter() const router = useRouter()
@@ -47,23 +48,17 @@ export const Nav = ({ customNav, customMenu }) => {
} }
return ( return (
<nav className="w-full bg-white md:pt-0 px-6 relative z-20 shadow-md border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black"> <nav className="w-full bg-white md:pt-0 relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
<div className="container mx-auto max-w-8xl md:flex justify-between items-center text-sm md:text-md md:justify-start"> <div id="nav-bar-inner" className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start">
<div className="w-full h-12 text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start space-x-4"> {/* 左侧菜单 */}
{showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='h-full px-4 w-full' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..."/>} <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 && links?.map(link => { {!showSearchInput && (<NavBarMenu {...props}/>)}
if (link?.show) {
return <DropMenu key={link.id} link={link}/>
} else {
return null
}
})}
</div> </div>
<div className="w-full md:w-1/3 text-center md:text-right hidden md:block"> <div className="absolute right-12 h-full text-center px-2 flex items-center">
{/* <!-- extra links --> */} {/* <!-- extra links --> */}
<i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass ' + ' cursor-pointer'} onClick={toggleShowSearchInput}></i> <i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass' + ' align-middle cursor-pointer'} onClick={toggleShowSearchInput}></i>
</div> </div>
</div> </div>
</nav> </nav>

51
themes/simple/components/NavBarMenu.js Normal file
View File

@@ -0,0 +1,51 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import CONFIG_SIMPLE from '../config_simple'
import { DropMenu } from './DropMenu'
/**
* 菜单导航
* @param {*} props
* @returns
*/
export const NavBarMenu = ({ customNav, customMenu }) => {
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_SIMPLE.MENU_SEARCH },
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_SIMPLE.MENU_ARCHIVE },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_SIMPLE.MENU_CATEGORY },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_SIMPLE.MENU_TAG }
]
if (customNav) {
links = links.concat(customNav)
}
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
}
})}
</div>
<div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
<div className='cursor-pointer hover:text-red-400 transition-all duration-200'>
<i className='fa fa-bars mr-3'/>
<span>MENU</span>
</div>
</div>
</>
)
}

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

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

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

@@ -6,8 +6,10 @@ import CONFIG_SIMPLE from '../config_simple'
*/ */
export const TopBar = (props) => { export const TopBar = (props) => {
if (CONFIG_SIMPLE.TOP_BAR_CONTENT) { if (CONFIG_SIMPLE.TOP_BAR_CONTENT) {
return <header className="w-full flex justify-between items-center px-20 h-10 bg-black dark:bg-hexo-black-gray z-10"> return <header className="flex justify-center items-center bg-black dark:bg-hexo-black-gray">
<div className='text-xs text-white z-50' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/> <div id='top-bar-inner' className='max-w-9/10 w-full'>
<div className='text-xs text-center float-left text-white z-50 leading-5 py-2.5' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/>
</div>
</header> </header>
} }
return <></> return <></>

1
themes/simple/config_simple.js
View File

@@ -3,6 +3,7 @@ const CONFIG_SIMPLE = {
LOGO_IMG: '/Logo.webp', LOGO_IMG: '/Logo.webp',
TOP_BAR: true, // 显示顶栏 TOP_BAR: true, // 显示顶栏
TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '', TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
LOGO_DESCRIPTION: process.env.NEXT_PUBLIC_THEME_SIMPLE_LOGO_DESCRIPTION || '<div>程序员<br/>互联网爱好者/人文历史<br/>创业财富</div>',
AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#', AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',