+
+ )
}
/**
@@ -127,21 +148,23 @@ const PaginationNumber = ({ page, totalPage }) => {
*/
function getPageElement(page, currentPage, pagePrefix) {
const selected = page + '' === currentPage + ''
+ if (!page) {
+ return <>
+ }
return (
- (
+ {page}
+
)
}
@@ -171,7 +194,11 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
startPage = totalPage - dynamicGroupCount
}
if (startPage > 2) {
- pages.push(
...
+ )
}
for (let i = 0; i < dynamicGroupCount; i++) {
diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js
index a3a40b7d..0bbcd937 100644
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -1,9 +1,9 @@
-import Link from 'next/link'
-import CONFIG from '../config'
+import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
-import LazyImage from '@/components/LazyImage'
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+import CONFIG from '../config'
/**
* 关联推荐文章
@@ -13,50 +13,52 @@ import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
export default function ArticleRecommend({ recommendPosts, siteInfo }) {
const { locale } = useGlobal()
- if (
- !siteConfig('HEXO_ARTICLE_RECOMMEND', null, CONFIG) ||
- !recommendPosts ||
- recommendPosts.length === 0
- ) {
+ if (!siteConfig('HEXO_ARTICLE_RECOMMEND', null, CONFIG) || !recommendPosts || recommendPosts.length === 0) {
return <>
}
return (
-
-
-
-
- {locale.COMMON.RELATE_POSTS}
-
-
-
- {recommendPosts.map(post => {
- const headerImage = post?.pageCoverThumbnail
- ? post.pageCoverThumbnail
- : siteInfo?.pageCover
- const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
-
- return (
- (
-
-
-
- )
- )
- })}
-
+
+
+
+
+ {locale.COMMON.RELATE_POSTS}
+
+
+ {recommendPosts.map(post => {
+ const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+ const url = checkContainHttp(post.slug)
+ ? sliceUrlFromHttp(post.slug)
+ : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+ return (
+
+
+
+
+
+ {/* 卡片的阴影遮罩，为了凸显图片上的文字 */}
+
+
+
+ )
+ })}
+
+
)
}
diff --git a/themes/movie/components/Announcement.js b/themes/movie/components/Announcement.js
new file mode 100644
index 00000000..1f265417
--- /dev/null
+++ b/themes/movie/components/Announcement.js
@@ -0,0 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+ const { locale } = useGlobal()
+ if (!post || Object.keys(post).length === 0) {
+ return <>
+ }
+ return
+}
+export default Announcement
diff --git a/themes/movie/components/ArchiveDateList.js b/themes/movie/components/ArchiveDateList.js
new file mode 100644
index 00000000..cd389028
--- /dev/null
+++ b/themes/movie/components/ArchiveDateList.js
@@ -0,0 +1,38 @@
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+
+export default function ArchiveDateList(props) {
+ const postsSortByDate = Object.create(props.allNavPages)
+ const { locale } = useGlobal()
+
+ postsSortByDate.sort((a, b) => {
+ return b?.publishDate - a?.publishDate
+ })
+
+ let dates = []
+ postsSortByDate.forEach(post => {
+ const date = formatDateFmt(post.publishDate, 'yyyy-MM')
+ if (!dates[date]) {
+ dates.push(date)
+ }
+ })
+ dates = dates.slice(0, 5)
+ return (
+
+
{locale.NAV.ARCHIVE}
+ {dates?.map((date, index) => {
+ return (
+
+
+ {date}
+
+
+ )
+ })}
+
+ )
+}
diff --git a/themes/movie/components/ArticleInfo.js b/themes/movie/components/ArticleInfo.js
new file mode 100644
index 00000000..9997579a
--- /dev/null
+++ b/themes/movie/components/ArticleInfo.js
@@ -0,0 +1,46 @@
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+
+export const ArticleInfo = props => {
+ const { post } = props
+ const { locale } = useGlobal()
+
+ return (
+
+ {post?.title}
+
+
+
+ {post?.publishDay}
+
+
+ {post?.type !== 'Page' && (
+ <>
+
+ {post?.category}
+
+
+ )}
+
+
+ {post?.tags?.length > 0 && (
+ <>
+ {locale.COMMON.TAGS} :
+
+ )}
+ {post?.tags?.map(tag => {
+ return (
+
+ {tag}
+
+ )
+ })}
+
+
+ )
+}
diff --git a/themes/movie/components/ArticleLock.js b/themes/movie/components/ArticleLock.js
new file mode 100644
index 00000000..3744c183
--- /dev/null
+++ b/themes/movie/components/ArticleLock.js
@@ -0,0 +1,52 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+ const { validPassword } = props
+ const { locale } = useGlobal()
+
+ const submitPassword = () => {
+ const p = document.getElementById('password')
+ if (!validPassword(p?.value)) {
+ const tips = document.getElementById('tips')
+ if (tips) {
+ tips.innerHTML = ''
+ tips.innerHTML = `
${locale.COMMON.PASSWORD_ERROR}
`
+ }
+ }
+ }
+ const passwordInputRef = useRef(null)
+ useEffect(() => {
+ // 选中密码输入框并将其聚焦
+ passwordInputRef.current.focus()
+ }, [])
+
+ return
+
+
{locale.COMMON.ARTICLE_LOCK_TIPS}
+
+
{
+ if (e.key === 'Enter') {
+ submitPassword()
+ }
+ }}
+ ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+ className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'
+ >
+
+ {locale.COMMON.SUBMIT}
+
+
+
+
+
+
+}
diff --git a/themes/movie/components/BlogListGroupByDate.js b/themes/movie/components/BlogListGroupByDate.js
new file mode 100644
index 00000000..7a8fe083
--- /dev/null
+++ b/themes/movie/components/BlogListGroupByDate.js
@@ -0,0 +1,38 @@
+import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+
+/**
+ * 按照日期将文章分组
+ * 归档页面用到
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogListGroupByDate({ archiveTitle, archivePosts }) {
+ return
+
+ {archiveTitle}
+
+
+
+
+}
diff --git a/themes/movie/components/BlogListPage.js b/themes/movie/components/BlogListPage.js
new file mode 100644
index 00000000..648f2ee2
--- /dev/null
+++ b/themes/movie/components/BlogListPage.js
@@ -0,0 +1,25 @@
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
+import PaginationNumber from './PaginationNumber'
+
+export const BlogListPage = props => {
+ const { page = 1, posts, postCount } = props
+ const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
+
+ const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
+
+ return (
+
+
+ {posts?.map(post => (
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/themes/movie/components/BlogListScroll.js b/themes/movie/components/BlogListScroll.js
new file mode 100644
index 00000000..597ba7dc
--- /dev/null
+++ b/themes/movie/components/BlogListScroll.js
@@ -0,0 +1,60 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
+
+export const BlogListScroll = props => {
+ const { posts } = props
+ const { locale } = useGlobal()
+
+ const [page, updatePage] = useState(1)
+
+ let hasMore = false
+ const postsToShow = posts ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) : []
+
+ if (posts) {
+ const totalCount = posts.length
+ hasMore = page * parseInt(siteConfig('POSTS_PER_PAGE')) < totalCount
+ }
+ const handleGetMore = () => {
+ if (!hasMore) return
+ updatePage(page + 1)
+ }
+
+ const targetRef = useRef(null)
+
+ // 监听滚动自动分页加载
+ const scrollTrigger = useCallback(
+ throttle(() => {
+ const scrollS = window.scrollY + window.outerHeight
+ const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
+ if (scrollS > clientHeight + 100) {
+ handleGetMore()
+ }
+ }, 500)
+ )
+ const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
+
+ useEffect(() => {
+ window.addEventListener('scroll', scrollTrigger)
+
+ return () => {
+ window.removeEventListener('scroll', scrollTrigger)
+ }
+ })
+
+ return (
+
+ {postsToShow?.map(post => (
+
+ ))}
+
+
+ {' '}
+ {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+
+
+ )
+}
diff --git a/themes/movie/components/BlogPostCard.js b/themes/movie/components/BlogPostCard.js
new file mode 100644
index 00000000..61954610
--- /dev/null
+++ b/themes/movie/components/BlogPostCard.js
@@ -0,0 +1,60 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+import TagItemMini from './TagItemMini'
+
+const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
+ // 主题默认强制显示图片
+ if (post && !post.pageCoverThumbnail) {
+ post.pageCoverThumbnail = siteInfo?.pageCover || siteConfig('RANDOM_IMAGE_URL')
+ }
+
+ const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+ return (
+
+
+ {/* 固定高度 ，空白用图片拉升填充 */}
+
+ {/* 图片 填充卡片 */}
+
+
+
+
+
+ {post?.tagItems && post?.tagItems.length > 0 && (
+ <>
+
+ {post.tagItems.map(tag => (
+
+ ))}
+
+
+ )}
+
+ {/* 阴影遮罩 */}
+
+
+ {post.title}
+
+
+
+ {post?.summary}
+
+
+
+
+ )
+}
+
+export default BlogPostCard
diff --git a/themes/movie/components/BlogRecommend.js b/themes/movie/components/BlogRecommend.js
new file mode 100644
index 00000000..9e434558
--- /dev/null
+++ b/themes/movie/components/BlogRecommend.js
@@ -0,0 +1,62 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+import CONFIG from '../config'
+
+/**
+ * 关联推荐文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function BlogRecommend(props) {
+ const { recommendPosts, siteInfo } = props
+ const { locale } = useGlobal()
+ if (!siteConfig('MOVIE_ARTICLE_RECOMMEND', null, CONFIG) || !recommendPosts || recommendPosts.length === 0) {
+ return <>
+ }
+
+ return (
+
+
+
+
+ {locale.COMMON.RELATE_POSTS}
+
+
+
+ {recommendPosts.map(post => {
+ const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+ const url = checkContainHttp(post.slug)
+ ? sliceUrlFromHttp(post.slug)
+ : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+ return (
+
+
+
+ {/* 卡片的阴影遮罩，为了凸显图片上的文字 */}
+
+
+
+
+
+ )
+ })}
+
+
+ )
+}
diff --git a/themes/movie/components/CategoryGroup.js b/themes/movie/components/CategoryGroup.js
new file mode 100644
index 00000000..63c3917c
--- /dev/null
+++ b/themes/movie/components/CategoryGroup.js
@@ -0,0 +1,43 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+
+const CategoryGroup = props => {
+ const { currentCategory, categoryOptions } = props
+ const { locale } = useGlobal()
+ if (!categoryOptions || categoryOptions.length === 0) return <>
+ const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
+ const categories = categoryOptions.slice(0, categoryCount)
+ return (
+ <>
+
+
{locale.COMMON.CATEGORY}
+
+ {categories.map(category => {
+ const selected = currentCategory === category.name
+ return (
+
+
+ {category.name}({category.count})
+
+ )
+ })}
+
+
+
+ )
+}
+
+export default CategoryGroup
diff --git a/themes/movie/components/CategoryItem.js b/themes/movie/components/CategoryItem.js
new file mode 100644
index 00000000..1190965b
--- /dev/null
+++ b/themes/movie/components/CategoryItem.js
@@ -0,0 +1,20 @@
+import Link from 'next/link'
+
+/**
+ * 文章分类
+ * @param {*} param0
+ * @returns
+ */
+export default function CategoryItem({ category }) {
+ return (
+
+
+ {category.name}({category.count})
+
+
+ )
+}
diff --git a/themes/movie/components/ExampleRecentComments.js b/themes/movie/components/ExampleRecentComments.js
new file mode 100644
index 00000000..9dbdfa7f
--- /dev/null
+++ b/themes/movie/components/ExampleRecentComments.js
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import { RecentComments } from '@waline/client'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const ExampleRecentComments = (props) => {
+ const [comments, updateComments] = useState([])
+ const [onLoading, changeLoading] = useState(true)
+ useEffect(() => {
+ RecentComments({
+ serverURL: siteConfig('COMMENT_WALINE_SERVER_URL'),
+ count: 5
+ }).then(({ comments }) => {
+ changeLoading(false)
+ updateComments(comments)
+ })
+ }, [])
+
+ return <>
+ {onLoading &&
Loading...
}
+ {!onLoading && comments && comments.length === 0 &&
No Comments
}
+ {!onLoading && comments && comments.length > 0 && comments.map((comment) =>
)}
+
+
+}
+
+export default ExampleRecentComments
diff --git a/themes/movie/components/Footer.js b/themes/movie/components/Footer.js
new file mode 100644
index 00000000..77c8bad6
--- /dev/null
+++ b/themes/movie/components/Footer.js
@@ -0,0 +1,26 @@
+import DarkModeButton from '@/components/DarkModeButton'
+import { siteConfig } from '@/lib/config'
+
+export const Footer = (props) => {
+ const d = new Date()
+ const currentYear = d.getFullYear()
+ const since = siteConfig('SINCE')
+ const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+
+ return
+}
diff --git a/themes/movie/components/Header.js b/themes/movie/components/Header.js
new file mode 100644
index 00000000..a0f2d78c
--- /dev/null
+++ b/themes/movie/components/Header.js
@@ -0,0 +1,166 @@
+import Collapse from '@/components/Collapse'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { useMovieGlobal } from '..'
+import CONFIG from '../config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import { MenuItemDrop } from './MenuItemDrop'
+
+/**
+ * 网站顶部
+ * @returns
+ */
+export const Header = props => {
+ const { collapseRef, searchModal } = useMovieGlobal()
+ const router = useRouter()
+ const { customNav, customMenu } = props
+ const { locale } = useGlobal()
+ const [isOpen, setIsOpen] = useState(false)
+ const [showSearch, setShowSearch] = useState(false)
+ const toggleMenuOpen = () => {
+ setIsOpen(!isOpen)
+ }
+ let links = [
+ {
+ id: 1,
+ icon: 'fa-solid fa-house',
+ name: locale.NAV.INDEX,
+ to: '/',
+ show: siteConfig('MOVIE_MENU_INDEX', null, CONFIG)
+ },
+ {
+ id: 2,
+ icon: 'fas fa-search',
+ name: locale.NAV.SEARCH,
+ to: '/search',
+ show: siteConfig('MOVIE_MENU_SEARCH', null, CONFIG)
+ },
+ {
+ id: 3,
+ icon: 'fas fa-archive',
+ name: locale.NAV.ARCHIVE,
+ to: '/archive',
+ show: siteConfig('MOVIE_MENU_ARCHIVE', null, CONFIG)
+ }
+ // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
+ // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
+ ]
+
+ if (customNav) {
+ links = links.concat(customNav)
+ }
+
+ for (let i = 0; i < links.length; i++) {
+ if (links[i].id !== i) {
+ links[i].id = i
+ }
+ }
+
+ // 如果 开启自定义菜单，则覆盖Page生成的菜单
+ if (siteConfig('CUSTOM_MENU')) {
+ links = customMenu
+ }
+
+ // 展示搜索框
+ const toggleShowSearchInput = () => {
+ if (siteConfig('ALGOLIA_APP_ID')) {
+ searchModal.current.openSearch()
+ } else {
+ setShowSearch(!showSearch)
+ }
+ }
+
+ useEffect(() => {
+ if (showSearch) {
+ setTimeout(() => {
+ document.getElementById('search').focus()
+ }, 100)
+ }
+ }, [showSearch])
+
+ const onKeyUp = e => {
+ if (e.keyCode === 13) {
+ const search = document.getElementById('search').value
+ if (search) {
+ router.push({ pathname: '/search/' + search })
+ }
+ }
+ }
+
+ const handleSearch = () => {
+ const search = document.getElementById('search').value
+ if (search) {
+ router.push({ pathname: '/search/' + search })
+ }
+ }
+
+ return (
+ <>
+
+
+
+ {/* 移动端菜单 */}
+
+
+
+ )
+}
diff --git a/themes/movie/components/JumpToTopButton.js b/themes/movie/components/JumpToTopButton.js
new file mode 100644
index 00000000..f5e22b61
--- /dev/null
+++ b/themes/movie/components/JumpToTopButton.js
@@ -0,0 +1,18 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = () => {
+ const { locale } = useGlobal()
+ return
window.scrollTo({ top: 0, behavior: 'smooth' })}
+ >
+
+}
+
+export default JumpToTopButton
diff --git a/themes/movie/components/LatestPostsGroup.js b/themes/movie/components/LatestPostsGroup.js
new file mode 100644
index 00000000..b7ada599
--- /dev/null
+++ b/themes/movie/components/LatestPostsGroup.js
@@ -0,0 +1,62 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const LatestPostsGroup = ({ latestPosts }) => {
+ // 获取当前路径
+ const currentPath = useRouter().asPath
+ const { locale } = useGlobal()
+
+ if (!latestPosts) {
+ return <>
+ }
+
+ return (
+
+
+
+
+ {locale.COMMON.LATEST_POSTS}
+
+
+
+ {latestPosts.map(post => {
+ const selected =
+ currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
+ const url = checkContainHttp(post.slug)
+ ? sliceUrlFromHttp(post.slug)
+ : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+ return (
+
+
+
{post.title}
+
+
+ )
+ })}
+
+ )
+}
+export default LatestPostsGroup
diff --git a/themes/movie/components/LoadingCover.js b/themes/movie/components/LoadingCover.js
new file mode 100644
index 00000000..75976180
--- /dev/null
+++ b/themes/movie/components/LoadingCover.js
@@ -0,0 +1,8 @@
+
+export default function LoadingCover() {
+ return
+}
diff --git a/themes/movie/components/MenuItemCollapse.js b/themes/movie/components/MenuItemCollapse.js
new file mode 100644
index 00000000..0f91f1d4
--- /dev/null
+++ b/themes/movie/components/MenuItemCollapse.js
@@ -0,0 +1,77 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = props => {
+ const { link } = props
+ const [show, changeShow] = useState(false)
+ const hasSubMenu = link?.subMenus?.length > 0
+
+ const [isOpen, changeIsOpen] = useState(false)
+
+ const toggleShow = () => {
+ changeShow(!show)
+ }
+
+ const toggleOpenSubMenu = () => {
+ changeIsOpen(!isOpen)
+ }
+
+ if (!link || !link.show) {
+ return null
+ }
+
+ return (
+ <>
+
+ {!hasSubMenu && (
+
+
+ {link?.icon && }
+ {link?.name}
+
+
+ )}
+ {hasSubMenu && (
+
+
+ {link?.icon && }
+ {link?.name}
+
+
+
+ )}
+
+
+ {/* 折叠子菜单 */}
+ {hasSubMenu && (
+
+ {link.subMenus.map((sLink, index) => {
+ return (
+
+
+
+ {link?.icon && } {sLink.title}
+
+
+
+ )
+ })}
+
+ )}
+
+ )
+}
diff --git a/themes/movie/components/MenuItemDrop.js b/themes/movie/components/MenuItemDrop.js
new file mode 100644
index 00000000..93f27f44
--- /dev/null
+++ b/themes/movie/components/MenuItemDrop.js
@@ -0,0 +1,67 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+ const [show, changeShow] = useState(false)
+ const hasSubMenu = link?.subMenus?.length > 0
+
+ if (!link || !link.show) {
+ return null
+ }
+
+ return (
+
changeShow(true)}
+ onMouseOut={() => changeShow(false)}
+ >
+ {!hasSubMenu && (
+
+ {link?.icon &&
} {link?.name}
+ {hasSubMenu &&
}
+
+ )}
+
+ {hasSubMenu && (
+ <>
+
+ {link?.icon && } {link?.name}
+
+
+
+ )}
+
+ {/* 子菜单 */}
+ {hasSubMenu && (
+
+ {link.subMenus.map((sLink, index) => {
+ return (
+ -
+
+
+ {link?.icon && }
+ {sLink.title}
+
+
+
+ )
+ })}
+
+ )}
+
+ )
+}
diff --git a/themes/movie/components/NormalMenuItem.js b/themes/movie/components/NormalMenuItem.js
new file mode 100644
index 00000000..aec74837
--- /dev/null
+++ b/themes/movie/components/NormalMenuItem.js
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+/**
+ * 旧的普通菜单
+ * @param {*} props
+ * @returns
+ */
+export const NormalMenuItem = (props) => {
+ const { link } = props
+ return link?.show &&
+ {link.name}
+
+}
diff --git a/themes/movie/components/PaginationNumber.js b/themes/movie/components/PaginationNumber.js
new file mode 100644
index 00000000..effc1835
--- /dev/null
+++ b/themes/movie/components/PaginationNumber.js
@@ -0,0 +1,220 @@
+import { ChevronDoubleRight } from '@/components/HeroIcons'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 数字翻页插件
+ * @param page 当前页码
+ * @param showNext 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationNumber = ({ page, totalPage }) => {
+ const router = useRouter()
+ const [value, setValue] = useState('')
+ const { locale } = useGlobal()
+ const currentPage = +page
+ const showNext = page < totalPage
+ const showPrev = currentPage !== 1
+ const pagePrefix = router.asPath
+ .split('?')[0]
+ .replace(/\/page\/[1-9]\d*/, '')
+ .replace(/\/$/, '')
+ const pages = generatePages(pagePrefix, page, currentPage, totalPage)
+ if (pages?.length <= 1) {
+ return <>
+ }
+
+ const handleInputChange = event => {
+ const newValue = event.target.value.replace(/[^0-9]/g, '')
+ setValue(newValue)
+ }
+
+ /**
+ * 调到指定页
+ */
+ const jumpToPage = () => {
+ if (value) {
+ router.push(
+ value === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${value}`
+ )
+ }
+ }
+
+ return (
+ <>
+ {/* pc端分页按钮 */}
+
+ {/* 上一页 */}
+
+
+
+
+ {locale.PAGINATION.PREV}
+
+
+
+
+ {/* 分页 */}
+
+ {pages}
+
+ {/* 跳转页码 */}
+
+
+
+ {/* 下一页 */}
+
+
+
+
+ {locale.PAGINATION.NEXT}
+
+
+
+
+
+ {/* 移动端分页 */}
+
+
+ {/* 上一页 */}
+
+ {locale.PAGINATION.PREV}
+
+
+ {showPrev && showNext &&
}
+
+ {/* 下一页 */}
+
+ {locale.PAGINATION.NEXT}
+
+
+
+ )
+}
+
+/**
+ * 页码按钮
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} pagePrefix
+ * @returns
+ */
+function getPageElement(page, currentPage, pagePrefix) {
+ const selected = page + '' === currentPage + ''
+ if (!page) {
+ return <>
+ }
+ return (
+
+ {page}
+
+ )
+}
+
+/**
+ * 获取所有页码
+ * @param {*} pagePrefix
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} totalPage
+ * @returns
+ */
+function generatePages(pagePrefix, page, currentPage, totalPage) {
+ const pages = []
+ const groupCount = 7 // 最多显示页签数
+ if (totalPage <= groupCount) {
+ for (let i = 1; i <= totalPage; i++) {
+ pages.push(getPageElement(i, page, pagePrefix))
+ }
+ } else {
+ pages.push(getPageElement(1, page, pagePrefix))
+ const dynamicGroupCount = groupCount - 2
+ let startPage = currentPage - 2
+ if (startPage <= 1) {
+ startPage = 2
+ }
+ if (startPage + dynamicGroupCount > totalPage) {
+ startPage = totalPage - dynamicGroupCount
+ }
+ if (startPage > 2) {
+ pages.push(
+
+ ...{' '}
+
+ )
+ }
+
+ for (let i = 0; i < dynamicGroupCount; i++) {
+ if (startPage + i < totalPage) {
+ pages.push(getPageElement(startPage + i, page, pagePrefix))
+ }
+ }
+
+ if (startPage + dynamicGroupCount < totalPage) {
+ pages.push(
...
)
+ }
+
+ pages.push(getPageElement(totalPage, page, pagePrefix))
+ }
+ return pages
+}
+export default PaginationNumber
diff --git a/themes/movie/components/SearchInput.js b/themes/movie/components/SearchInput.js
new file mode 100644
index 00000000..4f375d4e
--- /dev/null
+++ b/themes/movie/components/SearchInput.js
@@ -0,0 +1,87 @@
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+import { useImperativeHandle, useRef, useState } from 'react'
+
+let lock = false
+
+const SearchInput = ({ currentTag, keyword, cRef }) => {
+ const { locale } = useGlobal()
+ const router = useRouter()
+ const searchInputRef = useRef(null)
+ useImperativeHandle(cRef, () => {
+ return {
+ focus: () => {
+ searchInputRef?.current?.focus()
+ }
+ }
+ })
+ const handleSearch = () => {
+ const key = searchInputRef.current.value
+ if (key && key !== '') {
+ router.push({ pathname: '/search/' + key }).then(r => {
+ console.log('搜索', key)
+ })
+ } else {
+ router.push({ pathname: '/' }).then(r => {
+ })
+ }
+ }
+ const handleKeyUp = (e) => {
+ if (e.keyCode === 13) { // 回车
+ handleSearch(searchInputRef.current.value)
+ } else if (e.keyCode === 27) { // ESC
+ cleanSearch()
+ }
+ }
+ const cleanSearch = () => {
+ searchInputRef.current.value = ''
+ setShowClean(false)
+ }
+ function lockSearchInput () {
+ lock = true
+ }
+
+ function unLockSearchInput () {
+ lock = false
+ }
+ const [showClean, setShowClean] = useState(false)
+ const updateSearchKey = (val) => {
+ if (lock) {
+ return
+ }
+ searchInputRef.current.value = val
+ if (val) {
+ setShowClean(true)
+ } else {
+ setShowClean(false)
+ }
+ }
+
+ return
+}
+
+export default SearchInput
diff --git a/themes/movie/components/SideBar.js b/themes/movie/components/SideBar.js
new file mode 100644
index 00000000..ea0531b7
--- /dev/null
+++ b/themes/movie/components/SideBar.js
@@ -0,0 +1,68 @@
+import { siteConfig } from '@/lib/config'
+import Live2D from '@/components/Live2D'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import Announcement from './Announcement'
+const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
+
+export const SideBar = (props) => {
+ const { locale } = useGlobal()
+ const { latestPosts, categoryOptions, notice } = props
+ return (
+
+
+
+
+
+
+
+
+ {siteConfig('COMMENT_WALINE_SERVER_URL') && siteConfig('COMMENT_WALINE_RECENT') && }
+
+
+
+
+ )
+}
diff --git a/themes/movie/components/SlotBar.js b/themes/movie/components/SlotBar.js
new file mode 100644
index 00000000..e3bed727
--- /dev/null
+++ b/themes/movie/components/SlotBar.js
@@ -0,0 +1,34 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 博客列表上方嵌入条
+ * @param {*} props
+ * @returns
+ */
+export default function SlotBar(props) {
+ const { tag, category } = props
+ const { locale } = useGlobal()
+
+ if (tag) {
+ return (
+
+
+
+ {locale.COMMON.TAGS} : {tag}{' '}
+
+
+
+
+ )
+ } else if (category) {
+ return (
+
+
+ {locale.COMMON.CATEGORY} : {category}
+
+
+
+ )
+ }
+ return <>
+}
diff --git a/themes/movie/components/TagGroups.js b/themes/movie/components/TagGroups.js
new file mode 100644
index 00000000..597cddc1
--- /dev/null
+++ b/themes/movie/components/TagGroups.js
@@ -0,0 +1,51 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tagOptions, className }) => {
+ const router = useRouter()
+ const { locale } = useGlobal()
+ const { tag: currentTag } = router.query
+ if (!tagOptions) return <>
+
+ return (
+
+
{locale.COMMON.TAGS}
+
+
+ )
+}
+
+export default TagGroups
diff --git a/themes/movie/components/TagItem.js b/themes/movie/components/TagItem.js
new file mode 100644
index 00000000..c608c8cb
--- /dev/null
+++ b/themes/movie/components/TagItem.js
@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+/**
+ * 标签
+ * @param {*} param0
+ * @returns
+ */
+export default function TagItem({ tag }) {
+ return (
+
+
+
+ {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+
+
+
+ )
+}
diff --git a/themes/movie/components/TagItemMini.js b/themes/movie/components/TagItemMini.js
new file mode 100644
index 00000000..a4b7da1c
--- /dev/null
+++ b/themes/movie/components/TagItemMini.js
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false }) => {
+ return (
+
+
+ {selected && }{' '}
+ {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+
+
+ )
+}
+
+export default TagItemMini
diff --git a/themes/movie/components/Title.js b/themes/movie/components/Title.js
new file mode 100644
index 00000000..73ca9d7f
--- /dev/null
+++ b/themes/movie/components/Title.js
@@ -0,0 +1,20 @@
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 标题栏
+ * @param {*} props
+ * @returns
+ */
+export const Title = (props) => {
+ const { post } = props
+ const title = post?.title || siteConfig('TITLE')
+ const description = post?.description || siteConfig('AUTHOR')
+
+ return
+
{title}
+
+ {description}
+
+
+}
diff --git a/themes/movie/config.js b/themes/movie/config.js
new file mode 100644
index 00000000..a2c5fd4d
--- /dev/null
+++ b/themes/movie/config.js
@@ -0,0 +1,16 @@
+/**
+ * 主题配置文件
+ */
+const CONFIG = {
+ // 菜单配置
+ MOVIE_MENU_CATEGORY: true, // 显示分类
+ MOVIE_MENU_TAG: true, // 显示标签
+ MOVIE_MENU_ARCHIVE: true, // 显示归档
+ MOVIE_MENU_SEARCH: true, // 显示搜索
+
+ MOVIE_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
+ MOVIE_VIDEO_COMBINE: true, // 聚合视频，开启后一篇文章内的多个含caption的视频会被合并到文章开头，并展示分集按钮
+
+ MOVIE_POST_LIST_COVER: true // 列表显示文章封面
+}
+export default CONFIG
diff --git a/themes/movie/index.js b/themes/movie/index.js
new file mode 100644
index 00000000..af940150
--- /dev/null
+++ b/themes/movie/index.js
@@ -0,0 +1,438 @@
+'use client'
+
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import Comment from '@/components/Comment'
+import replaceSearchResult from '@/components/Mark'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { loadWowJS } from '@/lib/plugins/wow'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import ArchiveDateList from './components/ArchiveDateList'
+import { ArticleInfo } from './components/ArticleInfo'
+import { ArticleLock } from './components/ArticleLock'
+import BlogListGroupByDate from './components/BlogListGroupByDate'
+import { BlogListPage } from './components/BlogListPage'
+import { BlogListScroll } from './components/BlogListScroll'
+import BlogRecommend from './components/BlogRecommend'
+import CategoryGroup from './components/CategoryGroup'
+import CategoryItem from './components/CategoryItem'
+import { Footer } from './components/Footer'
+import { Header } from './components/Header'
+import JumpToTopButton from './components/JumpToTopButton'
+import LatestPostsGroup from './components/LatestPostsGroup'
+import SlotBar from './components/SlotBar'
+import TagGroups from './components/TagGroups'
+import TagItem from './components/TagItem'
+import CONFIG from './config'
+import { Style } from './style'
+
+// 主题全局状态
+const ThemeGlobalMovie = createContext()
+export const useMovieGlobal = () => useContext(ThemeGlobalMovie)
+
+/**
+ * 基础布局框架
+ * 1.其它页面都嵌入在LayoutBase中
+ * 2.采用左右两侧布局，移动端使用顶部导航栏
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+ const { children, slotTop } = props
+ const { onLoading, fullWidth } = useGlobal()
+ const collapseRef = useRef(null)
+
+ const searchModal = useRef(null)
+ const [expandMenu, updateExpandMenu] = useState(false)
+ useEffect(() => {
+ loadWowJS()
+ }, [])
+
+ return (
+
+
+
+
+ {/* 页头 */}
+
+
+ {/* 主体 */}
+
+ {/* 标题栏 */}
+ {/* {fullWidth ? null :
} */}
+
+
+ {/* 内容 */}
+
+
+ {/* 嵌入模块 */}
+ {slotTop}
+ {children}
+
+
+
+
+
+ {/* 页脚 */}
+
+
+ {/* 搜索框 */}
+
+
+ {/* 回顶按钮 */}
+
+
+
+
+ )
+}
+
+/**
+ * 首页
+ * @param {*} props
+ * @returns 此主题首页就是列表
+ */
+const LayoutIndex = props => {
+ return
+}
+
+/**
+ * 文章列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = props => {
+ return (
+ <>
+
+ {siteConfig('POST_LIST_STYLE') === 'page' ?
:
}
+
+ )
+}
+
+/**
+ * 文章详情页
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+ const { post, lock, validPassword } = props
+ const router = useRouter()
+ useEffect(() => {
+ // 用js 实现将页面中的多个视频聚合为一个分集的视频
+ function combineVideo() {
+ // 找到 id 为 notion-article 的元素
+ const notionArticle = document.getElementById('notion-article')
+ if (!notionArticle) return // 如果找不到对应的元素，则退出函数
+
+ // 找到所有的 .notion-asset-wrapper 元素
+ const assetWrappers = document.querySelectorAll('.notion-asset-wrapper')
+ if (!assetWrappers || assetWrappers.length === 0) return // 如果找不到对应的元素，则退出函数
+
+ // 不要重复创建
+ const exists = document.querySelectorAll('.video-wrapper')
+ if (exists && exists.length > 0) return
+
+ // 创建一个新的容器元素
+ const videoWrapper = document.createElement('div')
+ videoWrapper.className = 'video-wrapper p-2 bg-gray-100 dark:bg-hexo-black-gray max-w-4xl mx-auto'
+
+ // 创建一个新的容器元素
+ const carouselWrapper = document.createElement('div')
+ carouselWrapper.classList.add('notion-carousel-wrapper')
+
+ // 创建一个用于保存 figcaption 文本内容的数组
+ const figCaptionValues = []
+
+ // 遍历所有 .notion-asset-wrapper 元素
+ assetWrappers.forEach((wrapper, index) => {
+ // 检查 .notion-asset-wrapper 元素是否有子元素 figcaption
+ const figCaption = wrapper.querySelector('figcaption')
+ if (!figCaption) return // 如果没有子元素 figcaption，则不处理该元素
+
+ // 检查 .notion-asset-wrapper 元素是否有 notion-asset-wrapper-video 或 notion-asset-wrapper-embed 类
+ if (
+ !wrapper.classList.contains('notion-asset-wrapper-video') &&
+ !wrapper.classList.contains('notion-asset-wrapper-embed')
+ )
+ return
+
+ // 获取 figcaption 的文本内容并添加到数组中
+ const figCaptionValue = figCaption.textContent.trim()
+ figCaptionValues.push(figCaptionValue)
+
+ // 创建一个新的 div 元素用于包裹当前的 .notion-asset-wrapper 元素
+ const carouselItem = document.createElement('div')
+ carouselItem.classList.add('notion-carousel')
+ carouselItem.appendChild(wrapper)
+ // 如果是第一个元素，设置为 active
+ if (index === 0) {
+ carouselItem.classList.add('active')
+ }
+ // 将元素添加到容器中
+ carouselWrapper.appendChild(carouselItem)
+ // 从 DOM 中移除原始的 .notion-asset-wrapper 元素
+ // wrapper.parentNode.removeChild(wrapper)
+ })
+
+ // 创建一个用于保存 figcaption 值的容器元素
+ const figCaptionWrapper = document.createElement('div')
+ figCaptionWrapper.className = 'notion-carousel-route py-2 max-h-36 overflow-y-auto'
+
+ // 遍历 figCaptionValues 数组，并将每个值添加到容器元素中
+ figCaptionValues.forEach(value => {
+ const div = document.createElement('div')
+ div.textContent = value
+ div.addEventListener('click', function () {
+ // 遍历所有的 carouselItem 元素
+ document.querySelectorAll('.notion-carousel').forEach(item => {
+ // 判断当前元素是否包含该 figCaption 的文本内容，如果是则设置为 active，否则取消 active
+ if (item.querySelector('figcaption').textContent.trim() === value) {
+ item.classList.add('active')
+ } else {
+ item.classList.remove('active')
+ // 不活跃窗口暂停播放，仅支持notion上传视频、不支持外链
+ item.querySelectorAll('video')?.forEach(video => {
+ video.pause()
+ })
+ }
+ })
+ })
+ figCaptionWrapper.appendChild(div)
+ })
+
+ // 条件是带有caption的视频数量大于1个，否则不处理
+ if (figCaptionValues.length > 1) {
+ // 将包含 figcaption 值的容器元素添加到 notion-article 的第一个子元素插入
+ videoWrapper.appendChild(carouselWrapper)
+ videoWrapper.appendChild(figCaptionWrapper)
+ notionArticle.insertBefore(videoWrapper, notionArticle.firstChild)
+ }
+ }
+
+ setTimeout(() => {
+ combineVideo()
+ }, 100)
+
+ // 404
+ if (!post) {
+ setTimeout(
+ () => {
+ if (isBrowser) {
+ const article = document.getElementById('notion-article')
+ if (!article) {
+ router.push('/404').then(() => {
+ console.warn('找不到页面', router.asPath)
+ })
+ }
+ }
+ },
+ siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+ )
+ }
+ return () => {
+ // 获取所有 class="video-wrapper" 的元素
+ const videoWrappers = document.querySelectorAll('.video-wrapper')
+
+ // 遍历所有匹配的元素并移除它们
+ videoWrappers.forEach(wrapper => {
+ wrapper.parentNode.removeChild(wrapper) // 从 DOM 中移除元素
+ })
+ }
+ }, [post])
+
+ return (
+ <>
+ {!lock ? (
+
+ {/* 标题 */}
+
+ {/* 页面元素 */}
+
+ {/* 推荐 */}
+
+ {/* 分享栏目 */}
+
+ {/* 评论区 */}
+
+
+ ) : (
+
+ )}
+
+ )
+}
+
+/**
+ * 404页
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+ const { locale } = useGlobal()
+ const { searchModal } = useMovieGlobal()
+ const router = useRouter()
+ // 展示搜索框
+ const toggleShowSearchInput = () => {
+ if (siteConfig('ALGOLIA_APP_ID')) {
+ searchModal.current.openSearch()
+ }
+ }
+
+ const onKeyUp = e => {
+ if (e.keyCode === 13) {
+ const search = document.getElementById('search').value
+ if (search) {
+ router.push({ pathname: '/search/' + search })
+ }
+ }
+ }
+
+ return (
+ <>
+
+
{locale.COMMON.NO_RESULTS_FOUND}
+
+
+
+
+
+
+ {/* 底部导航 */}
+
+
+ )
+}
+
+/**
+ * 搜索页
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+ const { keyword } = props
+ const router = useRouter()
+ useEffect(() => {
+ if (isBrowser) {
+ // 高亮搜索到的结果
+ const container = document.getElementById('posts-wrapper')
+ if (keyword && container) {
+ replaceSearchResult({
+ doms: container,
+ search: keyword,
+ target: {
+ element: 'span',
+ className: 'text-red-500 border-b border-dashed'
+ }
+ })
+ }
+ }
+ }, [router])
+
+ return
+}
+
+/**
+ * 归档列表
+ * @param {*} props
+ * @returns 按照日期将文章分组排序
+ */
+const LayoutArchive = props => {
+ const { archivePosts } = props
+ return (
+ <>
+
+ {Object.keys(archivePosts).map(archiveTitle => (
+
+ ))}
+
+
+ )
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+ const { categoryOptions } = props
+ return (
+ <>
+
+ {categoryOptions?.map(category => (
+
+ ))}
+
+
+ )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+ const { tagOptions } = props
+ return (
+ <>
+
+ {tagOptions.map(tag => (
+
+ ))}
+
+
+ )
+}
+
+export {
+ Layout404,
+ LayoutArchive,
+ LayoutBase,
+ LayoutCategoryIndex,
+ LayoutIndex,
+ LayoutPostList,
+ LayoutSearch,
+ LayoutSlug,
+ LayoutTagIndex,
+ CONFIG as THEME_CONFIG
+}
diff --git a/themes/movie/style.js b/themes/movie/style.js
new file mode 100644
index 00000000..c619b509
--- /dev/null
+++ b/themes/movie/style.js
@@ -0,0 +1,47 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+ return (
+
+ )
+}
+
+export { Style }
diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js
index 17ae4da6..71dba58c 100644
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -6,17 +6,28 @@ import Link from 'next/link'
import { siteConfig } from '@/lib/config'
import LazyImage from '@/components/LazyImage'
import { compressImage } from '@/lib/notion/mapImage'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
/**
* 弹出框
*/
export default function Modal(props) {
- const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal()
+ const { showModal, setShowModal, modalContent, setModalContent } =
+ usePlogGlobal()
const { siteInfo, posts } = props
const cancelButtonRef = useRef(null)
- const img = compressImage(modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, 'webp')
+ const img = compressImage(
+ modalContent?.pageCover || siteInfo?.pageCover,
+ 1200,
+ 85,
+ 'webp'
+ )
const imgRef = useRef(null)
+ const url = checkContainHttp(modalContent?.slug)
+ ? sliceUrlFromHttp(modalContent?.slug)
+ : `${siteConfig('SUB_PATH', '')}/${modalContent?.slug}`
+
// 添加loading状态
const [loading, setLoading] = useState(true)
@@ -53,73 +64,111 @@ export default function Modal(props) {
}
return (
-
-