diff --git a/.env.local b/.env.local index 4d7893db..92406827 100644 --- a/.env.local +++ b/.env.local @@ -1,2 +1,2 @@ # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables -NEXT_PUBLIC_VERSION=3.11.1 +NEXT_PUBLIC_VERSION=3.12.0" diff --git a/blog.config.js b/blog.config.js index 98baf066..fd3274ba 100644 --- a/blog.config.js +++ b/blog.config.js @@ -10,6 +10,8 @@ const BLOG = { SINCE: 2021, // e.g if leave this empty, current year will be used. APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式 + CUSTOM_MENU: process.env.NEXT_PUBLIC_CUSTOM_MENU || false, // 支持Menu 类型，从3.12.0版本起，各主题将逐步支持灵活的二级菜单配置，替代了原来的Page类型，此配置是试验功能、默认关闭。 + AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', // 您的昵称 例如 tangly1024 BIO: process.env.NEXT_PUBLIC_BIO || '一个普通的干饭人🍚', // 作者简介 LINK: process.env.NEXT_PUBLIC_LINK || 'https://tangly1024.com', // 网站地址 @@ -198,6 +200,8 @@ const BLOG = { type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // 当type文章类型与此值相同时，为博文。 type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // 当type文章类型与此值相同时，为单页。 type_notice: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。 + type_menu: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_MENU || 'Menu', // 当type文章类型与此值相同时，为菜单。 + type_sub_menu: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_SUB_MENU || 'SubMenu', // 当type文章类型与此值相同时，为子菜单。 title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 文章标题 status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status', status_publish: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文 diff --git a/components/Collapse.js b/components/Collapse.js index 798e2b86..a787bfa2 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -8,6 +8,10 @@ import React from 'react' const Collapse = props => { const collapseRef = React.useRef(null) const type = props.type || 'vertical' + /** + * 折叠 + * @param {*} element + */ const collapseSection = element => { const sectionHeight = element.scrollHeight const sectionWidth = element.scrollWidth @@ -54,17 +58,20 @@ const Collapse = props => { clearTimeout(clearTime) } + const updateHeight = () => { + collapseRef.current.style.height = 'auto' + } + React.useEffect(() => { - const element = collapseRef.current if (props.isOpen) { - expandSection(element) + expandSection(collapseRef.current) } else { - collapseSection(element) + collapseSection(collapseRef.current) } }, [props.isOpen]) return ( -
+
{props.children}
) diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js index 2b8cd5b8..869a36b3 100644 --- a/components/DarkModeButton.js +++ b/components/DarkModeButton.js @@ -13,7 +13,7 @@ const DarkModeButton = (props) => { htmlElement.classList?.add(newStatus ? 'dark' : 'light') } - return
+ return
diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js index 93a22d29..44d97f2f 100644 --- a/lib/notion/getNotionData.js +++ b/lib/notion/getNotionData.js @@ -85,18 +85,39 @@ function getCustomNav({ allPages }) { const customNav = [] if (allPages && allPages.length > 0) { allPages.forEach(p => { - if (p?.status === 'Published' && p?.type === 'Page') { - if (p?.slug?.indexOf('http') === 0) { - customNav.push({ icon: p.icon || null, name: p.title, to: p.slug, show: true }) - } else { - customNav.push({ icon: p.icon || null, name: p.title, to: '/' + p.slug, show: true }) - } + if (p?.slug?.indexOf('http') === 0) { + customNav.push({ icon: p.icon || null, name: p.title, to: p.slug, show: true }) + } else { + customNav.push({ icon: p.icon || null, name: p.title, to: '/' + p.slug, show: true }) } }) } return customNav } +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 menus = [] + if (menuPages && menuPages.length > 0) { + menuPages.forEach(e => { + e.show = true + if (e.type === BLOG.NOTION_PROPERTY_NAME.type_menu) { + menus.push(e) + } else if (e.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) { + const parentMenu = menus[menus.length - 1] + if (parentMenu) { + if (parentMenu.subMenus) { + parentMenu.subMenus.push(e) + } else { + parentMenu.subMenus = [e] + } + } + } + }) + } + return menus +} + /** * 获取标签选项 * @param schema @@ -214,11 +235,13 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) { }) } - const notice = await getNotice(collectionData.filter(post => { return post?.type === 'Notice' && post.status === 'Published' })?.[0]) + const notice = await getNotice(collectionData.filter(post => { return post && post?.type && post?.type === 'Notice' && post.status === 'Published' })?.[0]) const categoryOptions = getAllCategories({ allPages, categoryOptions: getCategoryOptions(schema) }) const tagOptions = getAllTags({ allPages, tagOptions: getTagOptions(schema) }) const siteInfo = getBlogInfo({ collection, block }) const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') }) + // 新的菜单 + const customMenu = getCustomMenu({ collectionData }) const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 }) return { @@ -236,6 +259,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) { categoryOptions, rawMetadata, customNav, + customMenu, postCount, pageIds, latestPosts diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index eb3428d0..0a328868 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -76,10 +76,14 @@ export default async function getPageProperties(id, block, schema, authToken, ta // 映射值：用户个性化type和status字段的下拉框选项，在此映射回代码的英文标识 mapProperties(properties) - if (properties.type === 'Post') { + if (properties.type === BLOG.NOTION_PROPERTY_NAME.type_post) { properties.slug = BLOG.POST_URL_PREFIX ? (BLOG.POST_URL_PREFIX + '/' + (properties.slug ?? properties.id)) : (properties.slug ?? properties.id) - } else { - properties.slug = (properties.slug ?? properties.id) + } else if (properties.type === BLOG.NOTION_PROPERTY_NAME.type_page) { + properties.slug = properties.slug ?? properties.id + } else if (properties.type === BLOG.NOTION_PROPERTY_NAME.type_menu || properties.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) { + // 菜单路径为空、作为可展开菜单使用 + properties.to = properties.slug ?? null + properties.name = properties.title ?? '' } // 开启伪静态路径 diff --git a/lib/theme.js b/lib/theme.js index 61314289..a8e24505 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -28,7 +28,8 @@ export const initDarkMode = (isDarkMode, updateDarkMode) => { */ export const initTheme = (theme, changeTheme) => { if (isBrowser()) { - const queryTheme = getQueryVariable('theme') || loadThemeFromCookies() || BLOG.THEME + // const queryTheme = getQueryVariable('theme') || loadThemeFromCookies() || BLOG.THEME + const queryTheme = getQueryVariable('theme') || BLOG.THEME let currentTheme = theme if (queryTheme !== theme && ALL_THEME.indexOf(queryTheme) > -1) { currentTheme = queryTheme diff --git a/package.json b/package.json index 7c6f6737..f2370af1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notion-next", - "version": "3.11.1", + "version": "3.12.0", "homepage": "https://github.com/tangly1024/NotionNext.git", "license": "MIT", "repository": { 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 new file mode 100644 index 00000000..43c514c1 --- /dev/null +++ b/public/css/theme-simple.css @@ -0,0 +1,33 @@ +#theme-simple #announcement-content { + /* background-color: #f6f6f6; */ +} + +#theme-simple #blog-item-title { + color: #276077; +} + +.dark #theme-simple #blog-item-title { + color: #d1d5db; +} + +.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/notion.css b/styles/notion.css index 2476a6ac..e6e1e596 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -207,7 +207,6 @@ .medium-zoom-image { border-radius: 0; - @apply bg-gray-100 dark:bg-black } .medium-zoom-image--opened { @@ -939,7 +938,7 @@ code[class*='language-'] { align-self: flex-start; width: 24px; height: 24px; - font-size: 1.3em; + font-size: 1em; line-height: 1em; } @@ -1118,10 +1117,11 @@ code[class*='language-'] { .notion-table-of-contents { width: 100%; margin: 4px 0; + @apply bg-gray-50 dark:bg-black p-2 } .notion-table-of-contents-item { - color: inherit; + /* color: inherit; */ text-decoration: none; user-select: none; transition: background 20ms ease-in 0s; @@ -1137,6 +1137,8 @@ code[class*='language-'] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + @apply text-blue-600 dark:text-blue-200 } .notion-table-of-contents-item:hover { diff --git a/tailwind.config.js b/tailwind.config.js index 6da86610..76f8e710 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -21,9 +21,10 @@ module.exports = { } }, maxWidth: { - side: '14rem' + side: '14rem', + '9/10': '90%' } - }, + } }, variants: { extend: {} diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js index 83193866..90ec3ff9 100644 --- a/themes/example/LayoutBase.js +++ b/themes/example/LayoutBase.js @@ -16,7 +16,7 @@ import BLOG from '@/blog.config' const LayoutBase = props => { const { children, meta } = props return ( -
+
{/* 顶栏LOGO */}
diff --git a/themes/example/components/ArticleLock.js b/themes/example/components/ArticleLock.js index 6e90f7b2..f21ce74a 100644 --- a/themes/example/components/ArticleLock.js +++ b/themes/example/components/ArticleLock.js @@ -26,7 +26,7 @@ export const ArticleLock = props => {
{locale.COMMON.ARTICLE_LOCK_TIPS}
- +
 {locale.COMMON.SUBMIT}
diff --git a/themes/example/components/Header.js b/themes/example/components/Header.js index 7651018b..0cd85268 100644 --- a/themes/example/components/Header.js +++ b/themes/example/components/Header.js @@ -21,5 +21,5 @@ export const Header = (props) => {
- ); + ) } diff --git a/themes/example/components/Nav.js b/themes/example/components/Nav.js index 701e902c..9e05646b 100644 --- a/themes/example/components/Nav.js +++ b/themes/example/components/Nav.js @@ -1,6 +1,6 @@ import { useGlobal } from '@/lib/global' import Link from 'next/link' -import CONFIG_EMPTY from '../config_empty' +import CONFIG_EXAMPLE from '../config_example' /** * 菜单导航 @@ -11,10 +11,10 @@ export const Nav = (props) => { const { customNav } = props const { locale } = useGlobal() let links = [ - { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_EMPTY.MENU_SEARCH }, - { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_EMPTY.MENU_ARCHIVE }, - { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_EMPTY.MENU_CATEGORY }, - { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_EMPTY.MENU_TAG } + { 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 }, + { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_EXAMPLE.MENU_CATEGORY }, + { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_EXAMPLE.MENU_TAG } ] if (customNav) { diff --git a/themes/example/components/SearchInput.js b/themes/example/components/SearchInput.js index 6a95ba01..fdb129b9 100644 --- a/themes/example/components/SearchInput.js +++ b/themes/example/components/SearchInput.js @@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => { ref={searchInputRef} type='text' 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} onCompositionStart={lockSearchInput} onCompositionUpdate={lockSearchInput} diff --git a/themes/example/config_empty.js b/themes/example/config_example.js similarity index 75% rename from themes/example/config_empty.js rename to themes/example/config_example.js index 1c349a89..c77b1d2d 100644 --- a/themes/example/config_empty.js +++ b/themes/example/config_example.js @@ -1,8 +1,8 @@ -const CONFIG_EMPTY = { +const CONFIG_EXAMPLE = { // 菜单配置 MENU_CATEGORY: true, // 显示分类 MENU_TAG: true, // 显示标签 MENU_ARCHIVE: true, // 显示归档 MENU_SEARCH: true // 显示搜索 } -export default CONFIG_EMPTY +export default CONFIG_EXAMPLE diff --git a/themes/example/index.js b/themes/example/index.js index 95b0a6b2..dd762bd4 100644 --- a/themes/example/index.js +++ b/themes/example/index.js @@ -1,4 +1,4 @@ -import CONFIG_EMPTY from './config_empty' +import CONFIG_EXAMPLE from './config_example' import { LayoutIndex } from './LayoutIndex' import { LayoutSearch } from './LayoutSearch' import { LayoutArchive } from './LayoutArchive' @@ -11,7 +11,7 @@ import { LayoutTag } from './LayoutTag' import { LayoutTagIndex } from './LayoutTagIndex' export { - CONFIG_EMPTY as THEME_CONFIG, + CONFIG_EXAMPLE as THEME_CONFIG, LayoutIndex, LayoutSearch, LayoutArchive, diff --git a/themes/fukasawa/LayoutBase.js b/themes/fukasawa/LayoutBase.js index d06e92d1..b54fcae6 100644 --- a/themes/fukasawa/LayoutBase.js +++ b/themes/fukasawa/LayoutBase.js @@ -25,7 +25,7 @@ const LayoutBase = (props) => { meta } = props const leftAreaSlot = - return (<> + return (
@@ -38,7 +38,7 @@ const LayoutBase = (props) => {
- ) +
) } export default LayoutBase diff --git a/themes/fukasawa/components/ArticleLock.js b/themes/fukasawa/components/ArticleLock.js index 1dedba16..9a8e6081 100644 --- a/themes/fukasawa/components/ArticleLock.js +++ b/themes/fukasawa/components/ArticleLock.js @@ -30,7 +30,7 @@ export const ArticleLock = props => {
{ { // changePercent(per) } useEffect(() => { - smoothscroll.polyfill() document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [show]) return ( -
+
diff --git a/themes/hexo/components/ArticleLock.js b/themes/hexo/components/ArticleLock.js index 24f4b55f..0a56f39e 100644 --- a/themes/hexo/components/ArticleLock.js +++ b/themes/hexo/components/ArticleLock.js @@ -25,7 +25,7 @@ export const ArticleLock = props => {
{locale.COMMON.ARTICLE_LOCK_TIPS}
- +
 {locale.COMMON.SUBMIT}
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index c66ed5ff..1baa3d82 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -5,7 +5,7 @@ import TagItemMini from './TagItemMini' import CONFIG_HEXO from '../config_hexo' import NotionPage from '@/components/NotionPage' -const BlogPostCard = ({ post, showSummary, index, siteInfo }) => { +const BlogPostCard = ({ post, showSummary, siteInfo }) => { const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap if (post && !post.page_cover && CONFIG_HEXO.POST_LIST_COVER_DEFAULT) { post.page_cover = siteInfo?.pageCover @@ -19,9 +19,9 @@ const BlogPostCard = ({ post, showSummary, index, siteInfo }) => { data-aos-easing="ease-in-out" data-aos-once="true" data-aos-anchor-placement="top-bottom" - className={`flex md:flex-row flex-col-reverse ${index % 2 === 0 ? 'md:flex-row-reverse' : ''} - w-full md:h-72 h-96 justify-between overflow-hidden drop-shadow-md - border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray `}> + className='flex md:flex-row flex-col-reverse even:md:flex-row-reverse + w-full md:h-72 h-96 justify-between overflow-hidden drop-shadow-md + border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray'>
{ {/* 文章列表 */}
{posts.map(post => ( - + ))}
{showPagination && } diff --git a/themes/hexo/components/BlogPostListScroll.js b/themes/hexo/components/BlogPostListScroll.js index a65eb4ee..569df9ae 100644 --- a/themes/hexo/components/BlogPostListScroll.js +++ b/themes/hexo/components/BlogPostListScroll.js @@ -58,7 +58,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HE {/* 文章列表 */}
{postsToShow.map(post => ( - + ))}
diff --git a/themes/hexo/components/Progress.js b/themes/hexo/components/Progress.js index eeb40fd2..c54f422b 100644 --- a/themes/hexo/components/Progress.js +++ b/themes/hexo/components/Progress.js @@ -25,7 +25,7 @@ const Progress = ({ targetRef, showPercent = true }) => { useEffect(() => { document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) - }, [percent]) + }, []) return (
diff --git a/themes/hexo/components/SearchInput.js b/themes/hexo/components/SearchInput.js index fefca73a..462c58b3 100644 --- a/themes/hexo/components/SearchInput.js +++ b/themes/hexo/components/SearchInput.js @@ -69,7 +69,7 @@ const SearchInput = props => { ref={searchInputRef} type="text" 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} onCompositionStart={lockSearchInput} diff --git a/themes/index.js b/themes/index.js index 386a45dc..7f87efb1 100644 --- a/themes/index.js +++ b/themes/index.js @@ -8,6 +8,25 @@ import * as medium from './medium' import * as nobelium from './nobelium' import * as matery from './matery' import * as example from './example' +import * as simple from './simple' -export const ALL_THEME = ['hexo', 'matery', 'next', 'medium', 'fukasawa', 'nobelium', 'example'] -export { hexo, next, medium, fukasawa, nobelium, matery, example } +export const ALL_THEME = [ + 'hexo', + 'matery', + 'next', + 'medium', + 'fukasawa', + 'nobelium', + 'example', + 'simple' +] +export { + hexo, + next, + medium, + fukasawa, + nobelium, + matery, + example, + simple +} diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js index c529c788..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,13 +36,12 @@ const LayoutBase = props => { // changePercent(per) } useEffect(() => { - smoothscroll.polyfill() document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [show]) return ( -
+
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js index 02fc3060..5c076f7b 100644 --- a/themes/matery/LayoutSlug.js +++ b/themes/matery/LayoutSlug.js @@ -50,7 +50,7 @@ export const LayoutSlug = props => { {lock && } {!lock &&
- {post?.type === 'Post' && <> + { post?.type && post?.type === 'Post' && <>
{
{locale.COMMON.ARTICLE_LOCK_TIPS}
- +
 {locale.COMMON.SUBMIT}
diff --git a/themes/matery/components/Progress.js b/themes/matery/components/Progress.js index eeb40fd2..c54f422b 100644 --- a/themes/matery/components/Progress.js +++ b/themes/matery/components/Progress.js @@ -25,7 +25,7 @@ const Progress = ({ targetRef, showPercent = true }) => { useEffect(() => { document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) - }, [percent]) + }, []) return (
diff --git a/themes/matery/components/SearchInput.js b/themes/matery/components/SearchInput.js index fefca73a..462c58b3 100644 --- a/themes/matery/components/SearchInput.js +++ b/themes/matery/components/SearchInput.js @@ -69,7 +69,7 @@ const SearchInput = props => { ref={searchInputRef} type="text" 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} onCompositionStart={lockSearchInput} diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js index 83ee9807..3cdddd5a 100644 --- a/themes/medium/LayoutBase.js +++ b/themes/medium/LayoutBase.js @@ -28,7 +28,7 @@ const LayoutBase = props => { return ( -
+
diff --git a/themes/medium/components/ArticleLock.js b/themes/medium/components/ArticleLock.js index af7b4ec1..8ffe4044 100644 --- a/themes/medium/components/ArticleLock.js +++ b/themes/medium/components/ArticleLock.js @@ -26,7 +26,7 @@ export const ArticleLock = props => {
{locale.COMMON.ARTICLE_LOCK_TIPS}
- +
 {locale.COMMON.SUBMIT}
diff --git a/themes/medium/components/GroupMenu.js b/themes/medium/components/GroupMenu.js index ee1ddb43..a64cf4e7 100644 --- a/themes/medium/components/GroupMenu.js +++ b/themes/medium/components/GroupMenu.js @@ -4,7 +4,7 @@ import { useRouter } from 'next/router' import { useGlobal } from '@/lib/global' import CONFIG_MEDIUM from '../config_medium' -function GroupMenu ({ customNav }) { +function GroupMenu ({ customMenu, customNav }) { const { locale } = useGlobal() const router = useRouter() @@ -39,13 +39,13 @@ function GroupMenu ({ customNav }) { {link.slot} - ); + ) } else { return null } })} - ); + ) } export default GroupMenu diff --git a/themes/medium/components/Progress.js b/themes/medium/components/Progress.js index 77be3c3d..48ba8e14 100644 --- a/themes/medium/components/Progress.js +++ b/themes/medium/components/Progress.js @@ -25,7 +25,7 @@ const Progress = ({ targetRef, showPercent = true }) => { useEffect(() => { document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) - }, [percent]) + }, []) return (
diff --git a/themes/medium/components/SearchInput.js b/themes/medium/components/SearchInput.js index 5b037540..f6c84d9c 100644 --- a/themes/medium/components/SearchInput.js +++ b/themes/medium/components/SearchInput.js @@ -61,7 +61,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => { - ); + ) } else { return null } @@ -82,5 +82,5 @@ export default function TopNavBar(props) {
- ); + ) } diff --git a/themes/next/LayoutBase.js b/themes/next/LayoutBase.js index 647dbcc8..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) { @@ -59,7 +56,7 @@ const LayoutBase = (props) => { return () => document.removeEventListener('scroll', scrollListener) }, [show]) - return (<> + return (
@@ -90,7 +87,7 @@ const LayoutBase = (props) => {
- +
) } diff --git a/themes/next/components/ArticleLock.js b/themes/next/components/ArticleLock.js index 1f1c6b6b..6d2ec730 100644 --- a/themes/next/components/ArticleLock.js +++ b/themes/next/components/ArticleLock.js @@ -30,7 +30,7 @@ export const ArticleLock = props => {
{ - if (!CONFIG_NEXT.WIDGET_TO_BOTTOM) { - return <> - } - const [show, switchShow] = useState(false) const [percent, changePercent] = useState(0) + + useEffect(() => { + document.addEventListener('scroll', scrollListener) + return () => document.removeEventListener('scroll', scrollListener) + }, [show]) + const scrollListener = () => { const targetRef = document.getElementById('wrapper') const clientHeight = targetRef?.clientHeight @@ -36,12 +37,9 @@ const JumpToBottomButton = ({ showPercent = false }) => { window.scrollTo({ top: targetRef.clientHeight, behavior: 'smooth' }) } - useEffect(() => { - smoothscroll.polyfill() - - document.addEventListener('scroll', scrollListener) - return () => document.removeEventListener('scroll', scrollListener) - }, [show]) + if (!CONFIG_NEXT.WIDGET_TO_BOTTOM) { + return <> + } return (
diff --git a/themes/next/components/JumpToTopButton.js b/themes/next/components/JumpToTopButton.js index ce7685a1..9ff51635 100644 --- a/themes/next/components/JumpToTopButton.js +++ b/themes/next/components/JumpToTopButton.js @@ -11,10 +11,10 @@ import CONFIG_NEXT from '../config_next' * @constructor */ const JumpToTopButton = ({ showPercent = true, percent }) => { + const { locale } = useGlobal() if (!CONFIG_NEXT.WIDGET_TO_TOP) { return <> } - const { locale } = useGlobal() return (
window.scrollTo({ top: 0, behavior: 'smooth' })} >
diff --git a/themes/next/components/Progress.js b/themes/next/components/Progress.js index 91dfecc5..ab59fafd 100644 --- a/themes/next/components/Progress.js +++ b/themes/next/components/Progress.js @@ -25,7 +25,7 @@ const Progress = ({ targetRef, showPercent = true }) => { useEffect(() => { document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) - }, [percent]) + }, []) return (
diff --git a/themes/next/components/SearchInput.js b/themes/next/components/SearchInput.js index 9ba7d04b..0f1e667a 100644 --- a/themes/next/components/SearchInput.js +++ b/themes/next/components/SearchInput.js @@ -66,7 +66,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => { ref={searchInputRef} type='text' 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} onCompositionStart={lockSearchInput} onCompositionUpdate={lockSearchInput} diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js index 26372663..915316b2 100644 --- a/themes/next/components/SideAreaRight.js +++ b/themes/next/components/SideAreaRight.js @@ -22,7 +22,7 @@ const NextRecentComments = dynamic(() => import('./NextRecentComments')) * @constructor */ const SideAreaRight = (props) => { - const { tags, currentTag, slot, categories, currentCategory, notice } = props + const { tagOptions, currentTag, slot, categoryOptions, currentCategory, notice } = props const { locale } = useGlobal() const router = useRouter() return (