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 => {
{/*
*/}
-
+
{children}
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 <>
-
-
{ Router.push('/') }}>
- {/* eslint-disable-next-line @next/next/no-img-element */}
-

-
-
{BLOG.AUTHOR}
-
{BLOG.BIO}
-
-
- >
-}
-
-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 && (
-
+ return <>{post && (
+
)} >
}
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
+
+
+ {post.title}
+
+
+
+
+
{BLOG.AUTHOR}
+
- {post.date?.start_date || post.createdTime}
+ {post.category &&
- {post.category}}
+ {post.tags && post.tags?.length > 0 && post.tags.map(t =>
/ {t})}
+
+
+
+ {post.summary}
+ {post.summary && ...}
+
+
+
+
+ Continue Reading
+
+
+
+}
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 (
-
+
{posts?.map(p => (
-
-
-
- {p.title}
-
-
-
-
-
-
- {p.summary}
-
- {/* 搜索结果 */}
- {p.results && (
-
- {p.results.map(r => (
- {r}
- ))}
-
- )}
-
+
))}
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 (
-
+
{postsToShow.map(p => (
-
-
-
- {p.title}
-
-
-
-
-
-
- {p.summary}
-
-
+
))}
-
+
{' '}
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
- );
+ )
}
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 changeShow(true)}
onMouseOut={() => changeShow(false)}
>
+ 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 &&
}
+ {/* 子菜单 */}
{hasSubMenu &&
{link.subMenus.map(sLink => {
return -
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 (
-
+
)
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
window.scrollTo({ top: 0, behavior: 'smooth' })}
- >
+ 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
window.scrollTo({ top: 0, behavior: 'smooth' })}
+ >
}
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 (