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

4.0 仿Youtube界面样式

Browse Source
This commit is contained in:
tangly1024
2021-10-11 18:32:42 +08:00
parent 05d79a3db9
commit 4b88b7b418
7 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer.js
View File

@@ -6,7 +6,7 @@ const Footer = ({ fullWidth = true }) => {
const y = d.getFullYear()
return (
<footer
className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 text-xs text-gray-400 p-6'
className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 text-sm text-gray-400 p-6'
>
<span className='fa fa-shield leading-6'> <a href='https://beian.miit.gov.cn/' className='ml-1'>闽ICP备20010331号</a></span>
<br />

2
components/SideBarResponsive.js
View File

@@ -4,7 +4,7 @@ import TocBar from '@/components/TocBar'
import SocialButton from '@/components/SocialButton'
const SideBarResponsive = ({ tags, currentTag, post }) => {
return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 hidden md:block'>
return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 hidden lg:block'>
<div
className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>

3
components/Tags.js
View File

@@ -10,7 +10,8 @@ import Link from 'next/link'
const Tags = ({ tags, currentTag }) => {
if (!tags) return <></>
return (<div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
<ul id='tag-container' className='px-20 flex py-1 space-x-3'>
<ul id='tag-container' className='px-10 flex py-1 space-x-3'>
<li className='w-10 py-2'>标签:</li>
{Object.keys(tags).map(key => {
const selected = key === currentTag
return (

4
components/TocBar.js
View File

@@ -50,11 +50,11 @@ const TocBar = ({ toc }) => {
setActiveSection(currentSectionId)
}, throttleMs)
return <div className='bg-white dark:bg-gray-800 pb-10 w-52 hidden md:block min-h-screen'>
return <div className='bg-white dark:bg-gray-800 pb-10 hidden md:block min-h-screen'>
<div className='border-t dark:border-gray-600 border-b text-2xl bg-gray-100 font-bold text-black dark:bg-black dark:text-white py-6 px-6'>
文章目录
</div>
<nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto overflow-x-hidden'>
<nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto overflow-x-auto'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (

12
components/TopNav.js
View File

@@ -30,11 +30,11 @@ const TopNav = ({ tags, currentTag, post }) => {
}
return (
<div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700'>
<div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 shadow'>
<div className='fixed top-0 left-0 z-30 h-full'>
<div className={(showDrawer ? 'shadow-2xl' : '-ml-52') + ' duration-200 w-52 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
<div className='flex space-x-4 px-5 dark:bg-gray-600'>
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
<div className='flex space-x-4 px-5 py-1 dark:border-gray-500 border-b dark:bg-gray-600'>
<div
className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
<i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick}/>
@@ -64,7 +64,7 @@ const TopNav = ({ tags, currentTag, post }) => {
</div>
<Link href='/'>
<a
className='flex justify-center font-bold font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200
className='hidden md:block flex justify-center font-bold font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200
dark:text-gray-300
'>{BLOG.title}</a>
</Link>
@@ -76,12 +76,12 @@ const TopNav = ({ tags, currentTag, post }) => {
<input
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'md:w-80 transition border-r dark:border-gray-700 duration-200 leading-10 pl-2 block border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
className={'md:w-80 w-32 transition duration-200 leading-10 pl-2 block border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => setSearchValue(e.target.value)}
defaultValue={router.query.s ?? ''}
/>
<div className='py-3 px-5 bg-gray-50 flex dark:bg-gray-500 justify-center align-middle cursor-pointer'
<div className='py-3 px-5 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
onClick={handleSearch}>
<i className='fa fa-search text-black absolute cursor-pointer' />
</div>

4
layouts/ArticleLayout.js
View File

@@ -48,7 +48,7 @@ const ArticleLayout = ({
<Progress targetRef={targetRef} />
<div className=' fixed w-full top-0 z-20'>
<div className='fixed w-full top-0 z-20'>
<TopNav post={frontMatter}/>
</div>
@@ -63,7 +63,7 @@ const ArticleLayout = ({
<div>
<header
className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-10 lg:mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
{/* 封面图 */}
{frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
<img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}

2
layouts/DefaultLayout.js
View File

@@ -62,7 +62,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
<Tags tags={tags} currentTag={currentTag} />
</div>
<main id='post-list-wrapper' className='py-24 px-8 md:px-20'>
<main id='post-list-wrapper' className='py-24 px-2 md:px-20'>
{(!page || page === 1) && (<div className='py-5' />)}
{/* 当前搜索 */}