From ff8ae782b7b3d2973b198756df56efb504cb9d38 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 8 Mar 2023 21:50:08 +0800 Subject: [PATCH] optimize theme --- pages/_app.js | 2 ++ public/css/theme-simple.css | 23 ++++++++++++- styles/globals.css | 18 +--------- themes/hexo/LayoutBase.js | 2 -- themes/matery/LayoutBase.js | 2 -- themes/next/LayoutBase.js | 3 -- themes/next/components/JumpToBottomButton.js | 18 +++++----- themes/simple/LayoutBase.js | 4 +-- themes/simple/components/About.js | 21 ------------ themes/simple/components/Announcement.js | 4 +-- themes/simple/components/BlogItem.js | 36 ++++++++++++++++++++ themes/simple/components/BlogListPage.js | 33 ++---------------- themes/simple/components/BlogListScroll.js | 34 ++++-------------- themes/simple/components/DropMenu.js | 6 ++-- themes/simple/components/Header.js | 25 ++++++++++---- themes/simple/components/JumpToTopButton.js | 20 +++++++++-- themes/simple/components/Nav.js | 2 +- themes/simple/components/SideBar.js | 7 +--- themes/simple/components/TopBar.js | 13 +++---- themes/simple/config_simple.js | 2 +- 20 files changed, 131 insertions(+), 144 deletions(-) delete mode 100644 themes/simple/components/About.js create mode 100644 themes/simple/components/BlogItem.js diff --git a/pages/_app.js b/pages/_app.js index 980f1638..9a881d47 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -21,6 +21,7 @@ import { StarrySky } from '@/components/StarrySky' import MusicPlayer from '@/components/MusicPlayer' import ExternalScript from '@/components/ExternalScript' import { isBrowser } from '@/lib/utils' +import smoothscroll from 'smoothscroll-polyfill' import AOS from 'aos' import 'aos/dist/aos.css' // You can also use for styles @@ -57,6 +58,7 @@ const MyApp = ({ Component, pageProps }) => { if (isBrowser()) { AOS.init() + smoothscroll.polyfill() } return ( diff --git a/public/css/theme-simple.css b/public/css/theme-simple.css index f09aebd2..80f093dd 100644 --- a/public/css/theme-simple.css +++ b/public/css/theme-simple.css @@ -1,8 +1,29 @@ #theme-simple #announcement-content { - background-color: #f6f6f6; + /* background-color: #f6f6f6; */ +} + +#theme-simple #blog-item-title { + color: #276077; } .notion { margin-top: 0 !important; margin-bottom: 0 !important; } + + +/* 菜单下划线动画 */ +.menu-link { + text-decoration: none; + background-image: linear-gradient(#dd3333, #dd3333); + background-repeat: no-repeat; + background-position: bottom center; + background-size: 0 2px; + transition: background-size 100ms ease-in-out; +} + +.menu-link:hover { + background-size: 100% 2px; + color: #dd3333; +} + diff --git a/styles/globals.css b/styles/globals.css index 07163cf9..69097839 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -215,20 +215,4 @@ nav { /* twikoo 评论区超链接样式 */ .tk-main a { @apply text-blue-700 -} - - -/* 菜单下划线动画 */ -.menu-link { - text-decoration: none; - background-image: linear-gradient(#dd3333, #dd3333); - background-repeat: no-repeat; - background-position: bottom center; - background-size: 0 2px; - transition: background-size 100ms ease-in-out; -} - -.menu-link:hover { - background-size: 100% 2px; - color: #dd3333; -} +} \ No newline at end of file diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js index 0d74522d..2e17addc 100644 --- a/themes/hexo/LayoutBase.js +++ b/themes/hexo/LayoutBase.js @@ -5,7 +5,6 @@ import Footer from './components/Footer' import JumpToTopButton from './components/JumpToTopButton' import SideRight from './components/SideRight' import TopNav from './components/TopNav' -import smoothscroll from 'smoothscroll-polyfill' import FloatDarkModeButton from './components/FloatDarkModeButton' import Live2D from '@/components/Live2D' import LoadingCover from './components/LoadingCover' @@ -53,7 +52,6 @@ const LayoutBase = props => { // changePercent(per) } useEffect(() => { - smoothscroll.polyfill() document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [show]) diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js index 949c02aa..dbd5a488 100644 --- a/themes/matery/LayoutBase.js +++ b/themes/matery/LayoutBase.js @@ -4,7 +4,6 @@ import { useEffect, useState } from 'react' import Footer from './components/Footer' import JumpToTopButton from './components/JumpToTopButton' import TopNav from './components/TopNav' -import smoothscroll from 'smoothscroll-polyfill' import Live2D from '@/components/Live2D' import LoadingCover from './components/LoadingCover' import { useGlobal } from '@/lib/global' @@ -37,7 +36,6 @@ const LayoutBase = props => { // changePercent(per) } useEffect(() => { - smoothscroll.polyfill() document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [show]) diff --git a/themes/next/LayoutBase.js b/themes/next/LayoutBase.js index b96144b3..37e7c21f 100644 --- a/themes/next/LayoutBase.js +++ b/themes/next/LayoutBase.js @@ -10,7 +10,6 @@ import TopNav from './components/TopNav' import { useGlobal } from '@/lib/global' import PropTypes from 'prop-types' import React from 'react' -import smoothscroll from 'smoothscroll-polyfill' import CONFIG_NEXT from './config_next' import Live2D from '@/components/Live2D' import BLOG from '@/blog.config' @@ -45,8 +44,6 @@ const LayoutBase = (props) => { } React.useEffect(() => { - smoothscroll.polyfill() - // facebook messenger 插件需要调整右下角悬浮按钮的高度 const fb = document.getElementsByClassName('fb-customerchat') if (fb.length === 0) { diff --git a/themes/next/components/JumpToBottomButton.js b/themes/next/components/JumpToBottomButton.js index a629c78d..8da40c86 100644 --- a/themes/next/components/JumpToBottomButton.js +++ b/themes/next/components/JumpToBottomButton.js @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react' -import smoothscroll from 'smoothscroll-polyfill' import CONFIG_NEXT from '../config_next' /** @@ -11,12 +10,18 @@ import CONFIG_NEXT from '../config_next' * @constructor */ const JumpToBottomButton = ({ showPercent = false }) => { + const [show, switchShow] = useState(false) + const [percent, changePercent] = useState(0) + + useEffect(() => { + document.addEventListener('scroll', scrollListener) + return () => document.removeEventListener('scroll', scrollListener) + }, [show]) + if (!CONFIG_NEXT.WIDGET_TO_BOTTOM) { return <> } - const [show, switchShow] = useState(false) - const [percent, changePercent] = useState(0) const scrollListener = () => { const targetRef = document.getElementById('wrapper') const clientHeight = targetRef?.clientHeight @@ -36,13 +41,6 @@ const JumpToBottomButton = ({ showPercent = false }) => { window.scrollTo({ top: targetRef.clientHeight, behavior: 'smooth' }) } - useEffect(() => { - smoothscroll.polyfill() - - document.addEventListener('scroll', scrollListener) - return () => document.removeEventListener('scroll', scrollListener) - }, [show]) - return (
diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js index 714733ae..cbb11c37 100644 --- a/themes/simple/LayoutBase.js +++ b/themes/simple/LayoutBase.js @@ -25,7 +25,7 @@ const LayoutBase = props => {
- {CONFIG_SIMPLE.TOP_BAR && } + {CONFIG_SIMPLE.TOP_BAR && } {/* 顶部LOGO */}
@@ -38,7 +38,7 @@ const LayoutBase = props => { {/* */} - <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'w-full relative container mx-auto justify-start md:flex items-start py-8 px-2'}> + <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 className='w-full max-w-6xl'>{children}</div> diff --git a/themes/simple/components/About.js b/themes/simple/components/About.js deleted file mode 100644 index 4665e48f..00000000 --- a/themes/simple/components/About.js +++ /dev/null @@ -1,21 +0,0 @@ -import BLOG from '@/blog.config' -import Router from 'next/router' -import React from 'react' -import SocialButton from './SocialButton' - -const About = (props) => { - const { siteInfo } = props - return <> - <div className='flex flex-col items-center justify-center '> - <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}> - {/* eslint-disable-next-line @next/next/no-img-element */} - <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/> - </div> - <div className='text-2xl 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> - <SocialButton/> - </div> - </> -} - -export default About diff --git a/themes/simple/components/Announcement.js b/themes/simple/components/Announcement.js index 368296da..13d069d8 100644 --- a/themes/simple/components/Announcement.js +++ b/themes/simple/components/Announcement.js @@ -6,8 +6,8 @@ const Announcement = ({ post, className }) => { if (!post) { return <></> } - return <>{post && (<div id="announcement-content"> - <NotionPage post={post} className='text-center ' /> + return <>{post && (<div id="announcement-content" className='px-3'> + <NotionPage post={post} /> </div>)} </> } export default Announcement diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js new file mode 100644 index 00000000..55d84089 --- /dev/null +++ b/themes/simple/components/BlogItem.js @@ -0,0 +1,36 @@ +import BLOG from '@/blog.config' +import Link from 'next/link' + +export const BlogItem = props => { + const { post } = props + console.log(post) + + return <div key={post.id} className="mb-10 pb-12 border-b" > + <h2 className="mb-5 "> + <Link + id='blog-item-title' + href={`/${post.slug}`} + className="font-bold text-black text-xl md:text-2xl no-underline hover:underline"> + {post.title} + </Link> + </h2> + + <div className="mb-4 text-sm text-gray-700"> + <span> <i className="fa-regular fa-user"></i> <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a></span> + <span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span> + {post.category && <span> - <i className="fa-regular fa-folder"></i> <a href="#" className="text-gray-700 hover:text-red-400 transition-all duration-200">{post.category}</a></span>} + {post.tags && post.tags?.length > 0 && post.tags.map(t => <span key={t}> / <Link href={`tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)} + </div> + + <div className="text-gray-700 leading-normal mb-6"> + {post.summary} + {post.summary && <span>...</span>} + </div> + + <div className='block'> + <Link href={post.slug} className='inline-block rounded-sm text-blue-400 text-xs border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'> + Continue Reading <i className="fa-solid fa-angle-right align-middle"></i> + </Link> + </div> + </div> +} diff --git a/themes/simple/components/BlogListPage.js b/themes/simple/components/BlogListPage.js index b6f85781..b86cc83f 100644 --- a/themes/simple/components/BlogListPage.js +++ b/themes/simple/components/BlogListPage.js @@ -3,6 +3,7 @@ import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' import { useRouter } from 'next/router' import Link from 'next/link' +import { BlogItem } from './BlogItem' export const BlogListPage = props => { const { page = 1, posts, postCount } = props @@ -16,39 +17,11 @@ export const BlogListPage = props => { const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '') return ( - <div className="w-full md:pr-12 mb-12"> + <div className="w-full md:pr-8 mb-12"> <div id="container"> {posts?.map(p => ( - <article key={p.id} className="mb-12" > - <h2 className="mb-4"> - <Link - href={`/${p.slug}`} - className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline"> - {p.title} - </Link> - </h2> - - <div className="mb-4 text-sm text-gray-700 dark:text-gray-300"> - <i className='fas fa-user'/> <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime} - <span className="font-bold mx-1"> | </span> - <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a> - {/* <span className="font-bold mx-1"> | </span> */} - {/* <a href="#" className="text-gray-700">2 Comments</a> */} - </div> - - <p className="text-gray-700 dark:text-gray-400 leading-normal"> - {p.summary} - </p> - {/* 搜索结果 */} - {p.results && ( - <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7"> - {p.results.map(r => ( - <span key={r}>{r}</span> - ))} - </p> - )} - </article> + <BlogItem key={p.id} post={p}/> ))} </div> diff --git a/themes/simple/components/BlogListScroll.js b/themes/simple/components/BlogListScroll.js index d70e4bc5..b1a12bc5 100644 --- a/themes/simple/components/BlogListScroll.js +++ b/themes/simple/components/BlogListScroll.js @@ -1,8 +1,8 @@ import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' -import Link from 'next/link' import React from 'react' import throttle from 'lodash.throttle' +import { BlogItem } from './BlogItem' export const BlogListScroll = props => { const { posts } = props @@ -44,39 +44,17 @@ export const BlogListScroll = props => { }) return ( - <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}> + <div id="container" className="w-full md:pr-8 mb-12" ref={targetRef}> {postsToShow.map(p => ( - <article key={p.id} className="mb-12" > - <h2 className="mb-4"> - <Link - href={`/${p.slug}`} - className="text-black text-xl md:text-2xl no-underline hover:underline"> - {p.title} - </Link> - </h2> - - <div className="mb-4 text-sm text-gray-700"> - by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime} - <span className="font-bold mx-1"> | </span> - <a href="#" className="text-gray-700">{p.category}</a> - <span className="font-bold mx-1"> | </span> - {/* <a href="#" className="text-gray-700">2 Comments</a> */} - </div> - - <p className="text-gray-700 leading-normal"> - {p.summary} - </p> - </article> + <BlogItem key={p.id} post={p}/> ))} - <div - onClick={handleGetMore} - className="w-full my-4 py-4 text-center cursor-pointer " - > + <div onClick={handleGetMore} + className="w-full my-4 py-4 text-center cursor-pointer "> {' '} {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} </div> </div> - ); + ) } diff --git a/themes/simple/components/DropMenu.js b/themes/simple/components/DropMenu.js index 45591ed6..2058a032 100644 --- a/themes/simple/components/DropMenu.js +++ b/themes/simple/components/DropMenu.js @@ -5,18 +5,18 @@ export const DropMenu = ({ link }) => { const [show, changeShow] = useState(false) const hasSubMenu = link?.subMenus?.length > 0 - return <div className='my-4 mr-4' + return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} > <Link href={link?.to} - - className="menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest"> + className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1"> {link?.name} {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} </Link> + {/* 子菜单 */} {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} transition-all duration-300 z-20 top-12 absolute block border border-gray-100 bg-white drop-shadow-lg `}> {link.subMenus.map(sLink => { return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 tracking-widest transition-all duration-200 border-b py-3 pr-6 pl-2'> diff --git a/themes/simple/components/Header.js b/themes/simple/components/Header.js index fa61fcfa..e1cc33f0 100644 --- a/themes/simple/components/Header.js +++ b/themes/simple/components/Header.js @@ -1,5 +1,6 @@ +import BLOG from '@/blog.config' import Link from 'next/link' -import CONFIG_SIMPLE from '../config_simple' +// import CONFIG_SIMPLE from '../config_simple' /** * 网站顶部 @@ -9,13 +10,23 @@ export const Header = (props) => { const { siteInfo } = props return ( - <header className="text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10"> + <header className="text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10"> <div className="float-none inline-block py-12"> - <Link href='/'> - {/* eslint-disable-next-line @next/next/no-img-element */} - <img className='max-h-48 hover:opacity-60 duration-200 transition-all cursor-pointer' src={CONFIG_SIMPLE.LOGO_IMG}/> - </Link> - <div className='text-xs text-gray-600 dark:text-gray-300'>{siteInfo?.description}</div> + <Link href='/'> + {/* 可使用一张单图作为logo */} + {/* eslint-disable-next-line @next/next/no-img-element */} + {/* <img className='max-h-48 hover:opacity-60 duration-200 transition-all cursor-pointer' src={CONFIG_SIMPLE.LOGO_IMG}/> */} + <div> + <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'> + {/* eslint-disable-next-line @next/next/no-img-element */} + <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} /> + </div> + <div className='text-2xl 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> + + </Link> + <div className='text-xs text-gray-500 dark:text-gray-300'>{siteInfo?.description}</div> </div> </header> ) diff --git a/themes/simple/components/JumpToTopButton.js b/themes/simple/components/JumpToTopButton.js index 30e684a8..2ed28ab4 100644 --- a/themes/simple/components/JumpToTopButton.js +++ b/themes/simple/components/JumpToTopButton.js @@ -11,8 +11,24 @@ import React from 'react' */ const JumpToTopButton = () => { const { locale } = useGlobal() - return <div title={locale.POST.TOP} className='cursor-pointer p-2 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} - ><i className='fas fa-angle-up text-2xl' /> + const [show, switchShow] = React.useState(false) + const scrollListener = () => { + const scrollY = window.pageYOffset + const shouldShow = scrollY > 200 + if (shouldShow !== show) { + switchShow(shouldShow) + } + } + + React.useEffect(() => { + document.addEventListener('scroll', scrollListener) + return () => document.removeEventListener('scroll', scrollListener) + }, [show]) + + return <div title={locale.POST.TOP} + className={(show ? ' opacity-100 ' : 'invisible opacity-0') + ' transition-all duration-300 flex items-center justify-center cursor-pointer bg-black h-10 w-10 bg-opacity-40 rounded-sm'} + onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} + ><i className='fas fa-angle-up text-white ' /> </div> } diff --git a/themes/simple/components/Nav.js b/themes/simple/components/Nav.js index 53831860..bfc7a501 100644 --- a/themes/simple/components/Nav.js +++ b/themes/simple/components/Nav.js @@ -31,7 +31,7 @@ export const Nav = ({ customNav, customMenu }) => { 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"> <div className="container mx-auto max-w-8xl 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"> + <div className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start py-4 space-x-4"> {links?.map(link => { if (link?.show) { diff --git a/themes/simple/components/SideBar.js b/themes/simple/components/SideBar.js index b9fec433..ae89a1c5 100644 --- a/themes/simple/components/SideBar.js +++ b/themes/simple/components/SideBar.js @@ -1,20 +1,15 @@ import Live2D from '@/components/Live2D' -import About from './About' import Announcement from './Announcement' export const SideBar = (props) => { const { notice } = props return ( - <div className="w-full md:w-96 sticky top-8 border-l pl-12 border-gray-100"> + <div className="w-full max-w-lg sticky top-8 border-l pl-12 border-gray-100"> <aside> <Announcement post={notice}/> </aside> - <aside> - <About {...props}/> - </aside> - <aside className=" overflow-hidden mb-6"> <Live2D /> </aside> diff --git a/themes/simple/components/TopBar.js b/themes/simple/components/TopBar.js index 3fe9a834..acd3a5cd 100644 --- a/themes/simple/components/TopBar.js +++ b/themes/simple/components/TopBar.js @@ -1,13 +1,14 @@ import CONFIG_SIMPLE from '../config_simple' /** - * 网站顶部 + * 网站顶部 提示栏 * @returns */ export const TopBar = (props) => { - return ( - <header className="w-full flex justify-between items-center px-20 h-10 bg-black dark:bg-hexo-black-gray z-10"> - <div className='text-xs text-white' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/> - </header> - ) + 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"> + <div className='text-xs text-white' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/> + </header> + } + return <></> } diff --git a/themes/simple/config_simple.js b/themes/simple/config_simple.js index 662671bc..0eeb23fe 100644 --- a/themes/simple/config_simple.js +++ b/themes/simple/config_simple.js @@ -2,7 +2,7 @@ const CONFIG_SIMPLE = { LOGO_IMG: '/Logo.webp', TOP_BAR: true, // 显示顶栏 - TOP_BAR_CONTENT: '<div>欢迎访问我的网站，NotionNext最新版本已更新至3.12.0，欢迎体验！<div>', + TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '', // 菜单配置 MENU_CATEGORY: true, // 显示分类