From 378a22a6c8b3ef93ec154d035e3da5bda603284f Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 5 Jul 2023 21:52:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5transition=E8=BF=87=E5=BA=A6?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/globals.css | 17 +++++--- themes/example/components/BlogPostCard.js | 2 +- themes/example/components/MenuItemDrop.js | 2 +- themes/example/index.js | 28 ++++++++++-- themes/fukasawa/components/ArticleDetail.js | 8 ++-- themes/fukasawa/components/TopNav.js | 2 +- themes/fukasawa/config_fuka.js | 2 +- themes/fukasawa/index.js | 48 +++++++++++++++------ themes/gitbook/components/MenuItemDrop.js | 2 +- themes/gitbook/index.js | 48 +++++++++++++-------- themes/hexo/components/HeaderArticle.js | 8 ---- themes/hexo/components/InfoCard.js | 40 ++++++++++------- themes/hexo/components/MenuItemDrop.js | 2 +- themes/hexo/index.js | 35 ++++++++++++--- themes/matery/components/HeaderArticle.js | 14 ++---- themes/matery/components/MenuItemDrop.js | 2 +- themes/matery/index.js | 33 ++++++++++++-- themes/medium/components/MenuItemDrop.js | 2 +- themes/medium/index.js | 19 ++++++-- themes/next/index.js | 16 ++++++- themes/nobelium/components/MenuItemDrop.js | 2 +- themes/nobelium/components/Nav.js | 2 +- themes/nobelium/index.js | 28 +++++++----- themes/simple/index.js | 32 +++++++------- 24 files changed, 262 insertions(+), 132 deletions(-) diff --git a/styles/globals.css b/styles/globals.css index 79e490de..ae4d6aca 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -286,7 +286,7 @@ a.avatar-wrapper { font-weight: 500; } -.p-4-lines { +.line-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; @@ -294,14 +294,21 @@ a.avatar-wrapper { text-overflow: ellipsis; } -.p-3-lines { +.line-clamp-3 { + overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; - text-overflow: ellipsis; + -webkit-line-clamp: 3; } +.line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + + /* fukasawa的首页响应式分栏 */ #theme-fukasawa .grid-item { height: auto; diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js index 3bc3b720..fef41d60 100644 --- a/themes/example/components/BlogPostCard.js +++ b/themes/example/components/BlogPostCard.js @@ -4,7 +4,7 @@ import Link from 'next/link' import TwikooCommentCount from '@/components/TwikooCommentCount' const BlogPostCard = ({ post }) => { - const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER + const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER && post?.pageCoverThumbnail return
diff --git a/themes/example/components/MenuItemDrop.js b/themes/example/components/MenuItemDrop.js index 756b57df..2e0370d4 100644 --- a/themes/example/components/MenuItemDrop.js +++ b/themes/example/components/MenuItemDrop.js @@ -26,7 +26,7 @@ export const MenuItemDrop = ({ link }) => { {/* 子菜单 */} {hasSubMenu &&
    {link.subMenus.map((sLink, index) => { - return
  • + return
  • {link?.icon &&   }{sLink.title} diff --git a/themes/example/index.js b/themes/example/index.js index b0d154e3..9e627734 100644 --- a/themes/example/index.js +++ b/themes/example/index.js @@ -21,11 +21,11 @@ import ShareBar from '@/components/ShareBar' import SearchInput from './components/SearchInput' import Mark from 'mark.js' import { isBrowser } from '@/lib/utils' -import LoadingCover from './components/LoadingCover' import BlogListGroupByDate from './components/BlogListGroupByDate' import CategoryItem from './components/CategoryItem' import TagItem from './components/TagItem' import { useRouter } from 'next/router' +import { Transition } from '@headlessui/react' /** * 基础布局框架 @@ -38,6 +38,14 @@ const LayoutBase = props => { const { children, meta, slotTop } = props const { onLoading } = useGlobal() + // 增加一个状态以触发 Transition 组件的动画 + // const [showTransition, setShowTransition] = useState(true) + // useEffect(() => { + // // 当 location 或 children 发生变化时，触发动画 + // setShowTransition(false) + // setTimeout(() => setShowTransition(true), 5) + // }, [onLoading]) + return (
    {/* 网页SEO信息 */} @@ -59,9 +67,21 @@ const LayoutBase = props => { {/* 内容 */}
    - {/* 嵌入模块 */} - {slotTop} - {onLoading ? : children} + + {/* 嵌入模块 */} + {slotTop} + {children} +
    {/* 侧边栏 */} diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js index 7347b9c0..d46ff07a 100644 --- a/themes/fukasawa/components/ArticleDetail.js +++ b/themes/fukasawa/components/ArticleDetail.js @@ -28,11 +28,10 @@ export default function ArticleDetail(props) { {post.title}
    )} -
    -
    +
    + +
    {/* 文章Title */}
    @@ -41,7 +40,6 @@ export default function ArticleDetail(props) {
    - {post?.category && (<> { {/* 右侧功能 */}
    -
    +
    {isOpen ? : }
    diff --git a/themes/fukasawa/config_fuka.js b/themes/fukasawa/config_fuka.js index 2f737433..d1b0422a 100644 --- a/themes/fukasawa/config_fuka.js +++ b/themes/fukasawa/config_fuka.js @@ -10,7 +10,7 @@ const FUKA_CONFIG = { MENU_ARCHIVE: true, // 显示归档 MENU_SEARCH: false, // 显示搜索 - SIDEBAR_COLLAPSE_DEFAULT: false // 侧边栏默认折叠 + SIDEBAR_OPEN_SATUS_DEFAULT: true // 侧边栏默认开启 } export default FUKA_CONFIG diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js index 0e2df4d3..73c99599 100644 --- a/themes/fukasawa/index.js +++ b/themes/fukasawa/index.js @@ -8,7 +8,6 @@ import Live2D from '@/components/Live2D' import BLOG from '@/blog.config' import { isBrowser, loadExternalResource } from '@/lib/utils' import { useGlobal } from '@/lib/global' -import LoadingCover from './components/LoadingCover' import BlogListPage from './components/BlogListPage' import BlogListScroll from './components/BlogListScroll' import BlogArchiveItem from './components/BlogPostArchive' @@ -16,9 +15,10 @@ import ArticleDetail from './components/ArticleDetail' import { ArticleLock } from './components/ArticleLock' import TagItemMini from './components/TagItemMini' import { useRouter } from 'next/router' -import { createContext, useContext, useEffect, useMemo, useState } from 'react' +import { createContext, useContext, useEffect, useState } from 'react' import Mark from 'mark.js' import Link from 'next/link' +import { Transition } from '@headlessui/react' // 主题全局状态 const ThemeGlobalFukasawa = createContext() @@ -42,21 +42,14 @@ const LayoutBase = (props) => { const { children, headerSlot, meta } = props const leftAreaSlot = const { onLoading } = useGlobal() - // 侧边栏折叠从 本地存储中获取 open 状态的初始值 + // 侧边栏折叠从 本地存储中获取 open 状态的初始值 const [open, setOpen] = useState(() => { if (typeof window !== 'undefined') { - return localStorage.getItem('fukasawa-sidebarOpen') === 'true' || FUKA_CONFIG.SIDEBAR_COLLAPSE_DEFAULT + return localStorage.getItem('fukasawa-sidebarOpen') === 'true' || FUKA_CONFIG.SIDEBAR_OPEN_SATUS_DEFAULT } - return FUKA_CONFIG.SIDEBAR_COLLAPSE_DEFAULT + return FUKA_CONFIG.SIDEBAR_OPEN_SATUS_DEFAULT }) - const memoizedOpen = useMemo(() => open, []) - - console.log('base', FUKA_CONFIG.SIDEBAR_COLLAPSE_DEFAULT, open, memoizedOpen) - - if (isBrowser()) { - loadExternalResource('/css/theme-fukasawa.css', 'css') - } // 在组件卸载时保存 open 状态到本地存储中 useEffect(() => { @@ -65,6 +58,18 @@ const LayoutBase = (props) => { } }, [open]) + // 增加一个状态以触发 Transition 组件的动画 + const [showTransition, setShowTransition] = useState(true) + useEffect(() => { + // 当 location 或 children 发生变化时，触发动画 + setShowTransition(false) + setTimeout(() => setShowTransition(true), 5) + }, [onLoading]) + + if (isBrowser()) { + loadExternalResource('/css/theme-fukasawa.css', 'css') + } + return ( @@ -78,8 +83,23 @@ const LayoutBase = (props) => {
    -
    {headerSlot}
    -
    {onLoading ? : children}
    + + +
    {headerSlot}
    +
    {children}
    + +
    diff --git a/themes/gitbook/components/MenuItemDrop.js b/themes/gitbook/components/MenuItemDrop.js index 4e8feeb0..78a5a0dd 100644 --- a/themes/gitbook/components/MenuItemDrop.js +++ b/themes/gitbook/components/MenuItemDrop.js @@ -38,7 +38,7 @@ export const MenuItemDrop = ({ link }) => { {/* 子菜单 */} {hasSubMenu &&
      {link?.subMenus?.map((sLink, index) => { - return
    • + return
    • {link?.icon &&   }{sLink.title} diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js index 176a063e..862fe1ca 100644 --- a/themes/gitbook/index.js +++ b/themes/gitbook/index.js @@ -19,7 +19,6 @@ import PageNavDrawer from './components/PageNavDrawer' import FloatTocButton from './components/FloatTocButton' import { AdSlot } from '@/components/GoogleAdsense' import JumpToTopButton from './components/JumpToTopButton' -import LoadingCover from './components/LoadingCover' import ShareBar from '@/components/ShareBar' import CategoryItem from './components/CategoryItem' import TagItemMini from './components/TagItemMini' @@ -28,6 +27,7 @@ import Comment from '@/components/Comment' import TocDrawer from './components/TocDrawer' import NotionPage from '@/components/NotionPage' import { ArticleLock } from './components/ArticleLock' +import { Transition } from '@headlessui/react' // 主题全局变量 const ThemeGlobalGitbook = createContext() @@ -81,7 +81,20 @@ const LayoutBase = (props) => {
      {slotTop} - {onLoading ? : children} + + {children} + + {/* 回顶按钮 */} @@ -89,7 +102,7 @@ const LayoutBase = (props) => { {/* 底部 */}
      -
      +
      @@ -144,22 +157,21 @@ const LayoutBase = (props) => { */ const LayoutIndex = (props) => { const router = useRouter() - useEffect(() => { - router.push(CONFIG_GITBOOK.INDEX_PAGE).then(() => { - // console.log('跳转到指定首页', CONFIG_GITBOOK.INDEX_PAGE) - setTimeout(() => { - if (isBrowser()) { - const article = document.getElementById('notion-article') - if (!article) { - console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG_GITBOOK.INDEX_PAGE) - const containerInner = document.getElementById('container-inner') - const newHTML = `

      配置有误

      请在您的notion中添加一个slug为${CONFIG_GITBOOK.INDEX_PAGE}的文章
      ` - containerInner?.insertAdjacentHTML('afterbegin', newHTML) - } + router.push(CONFIG_GITBOOK.INDEX_PAGE).then(() => { + // console.log('跳转到指定首页', CONFIG_GITBOOK.INDEX_PAGE) + setTimeout(() => { + if (isBrowser()) { + const article = document.getElementById('notion-article') + if (!article) { + console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG_GITBOOK.INDEX_PAGE) + const containerInner = document.getElementById('container-inner') + const newHTML = `

      配置有误

      请在您的notion中添加一个slug为${CONFIG_GITBOOK.INDEX_PAGE}的文章
      ` + containerInner?.insertAdjacentHTML('afterbegin', newHTML) } - }, 7 * 1000) - }) - }, []) + } + }, 7 * 1000) + }) + return } diff --git a/themes/hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js index 8d727ed8..82cc1ee2 100644 --- a/themes/hexo/components/HeaderArticle.js +++ b/themes/hexo/components/HeaderArticle.js @@ -21,18 +21,10 @@ export default function HeaderArticle({ post, siteInfo }) { return (