+
+
+ + {post.summary} +
} + {showPreview && post?.blockMap && ( +
+
+
+ )}
+ +
+
+ )
+}
+
+/**
+ * 一个广告游戏大卡
+ * @returns
+ */
+const GameAd = () => {
+ return (
+
+ {components?.map((ItemComponent, index) => {
+ return ItemComponent
+ })}
+
+
+
+ )
+}
+
+/**
+ * 4卡组成一个大卡
+ * @param {*} param0
+ * @returns
+ */
+const GameItemGroup = ({ items }) => {
+ return (
+
+ {items.map((item, index) => (
+
+ )
+}
+
+/**
+ * 游戏=单卡
+ * @param {*} param0
+ * @returns
+ */
+const GameItem = ({ item, isLargeCard }) => {
+ const { title } = item
+ const img = item.pageCoverThumbnail
+ const [showType, setShowType] = useState('img') // img or video
+ const url = checkContainHttp(item.slug) ? sliceUrlFromHttp(item.slug) : `${siteConfig('SUB_PATH', '')}/${item.slug}`
+ const video = item?.ext?.video
+ return (
+ {
+ setShowType('video')
+ }}
+ onMouseOut={() => {
+ setShowType('img')
+ }}
+ title={title}
+ className={`card-single ${
+ isLargeCard ? 'h-[20rem]' : 'h-full'
+ } w-full relative shadow rounded-md overflow-hidden flex justify-center items-center
+ group hover:border-purple-400`}>
+
+ {title}
+
+
+
+
+
+ {showType === 'video' && (
+
+ )}
+
+
+ )
+}
+
+/**
+ * 游戏=单卡
+ * @param {*} param0
+ * @returns
+ */
+const GameItem = ({ item }) => {
+ const { title } = item
+ const img = item.pageCoverThumbnail
+ const [showType, setShowType] = useState('img') // img or video
+ const url = checkContainHttp(item.slug) ? sliceUrlFromHttp(item.slug) : `${siteConfig('SUB_PATH', '')}/${item.slug}`
+ const video = item?.ext?.video
+
+ return (
+ {
+ setShowType('video')
+ }}
+ onMouseOut={() => {
+ setShowType('img')
+ }}
+ title={title}
+ className={`card-single h-28 w-28 relative shadow rounded-md overflow-hidden flex justify-center items-center
+ group hover:border-purple-400`}>
+
+ {components?.map((ItemComponent, index) => {
+ return ItemComponent
+ })}
+
+ {title}
+
+
+
+
+ {showType === 'video' && (
+
+ )}
+
+
+ )
+}
+
+/**
+ * 游戏=单卡
+ * @param {*} param0
+ * @returns
+ */
+const GameItem = ({ item }) => {
+ const { title } = item
+ const [showType, setShowType] = useState('img') // img or video
+ const url = checkContainHttp(item.slug) ? sliceUrlFromHttp(item.slug) : `${siteConfig('SUB_PATH', '')}/${item.slug}`
+
+ const img = item?.pageCoverThumbnail
+ const video = item?.ext?.video
+
+ return (
+ {
+ setShowType('video')
+ }}
+ onMouseOut={() => {
+ setShowType('img')
+ }}
+ title={title}
+ className={`card-single w-24 h-24 relative shadow rounded-md overflow-hidden flex justify-center items-center
+ group hover:border-purple-400`}>
+
+ {components?.map((ItemComponent, index) => {
+ return ItemComponent
+ })}
+
+
+ {title}
+
+
+
+
+
+ {showType === 'video' && (
+
+ )}
+
+
+
+ )
+}
+
+/**
+ * 游戏=单卡
+ * @param {*} param0
+ * @returns
+ */
+const GameItem = ({ item }) => {
+ const { title } = item || {}
+ const [showType, setShowType] = useState('img') // img or video
+ const url = checkContainHttp(item.slug) ? sliceUrlFromHttp(item.slug) : `${siteConfig('SUB_PATH', '')}/${item.slug}`
+
+ const img = item?.pageCoverThumbnail
+ const video = item?.ext?.video
+ return (
+ {
+ setShowType('video')
+ }}
+ onMouseOut={() => {
+ setShowType('img')
+ }}
+ title={title}
+ className={`card-single h-28 w-28 relative shadow rounded-md overflow-hidden flex justify-center items-center
+ group hover:border-purple-400`}>
+
+ {components?.map((ItemComponent, index) => {
+ return ItemComponent
+ })}
+
+
+
+
+ {title}
+
+
+
+
+ {showType === 'video' && (
+
+ )}
+
+ {categoryOptions.map(category => {
+ const selected = currentCategory === category.name
+ return (
+
+ {/* */}
+ {category.name}
+ {/*
+ {category.count}
+ */}
+
+ )
+ })}
+
+
+ )
+}
+
+export default GroupCategory
diff --git a/themes/game/components/GroupTag.js b/themes/game/components/GroupTag.js
new file mode 100644
index 00000000..383705b2
--- /dev/null
+++ b/themes/game/components/GroupTag.js
@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+function GroupTag({ tagOptions, currentTag }) {
+ if (!tagOptions) return <>
+ return (
+ <>
+
+
+
+
+
+ )
+}
+
+export default GroupTag
diff --git a/themes/game/components/Header.js b/themes/game/components/Header.js
new file mode 100644
index 00000000..02873cb0
--- /dev/null
+++ b/themes/game/components/Header.js
@@ -0,0 +1,25 @@
+import { useGameGlobal } from '..'
+import Logo from './Logo'
+
+/**
+ * 顶栏
+ * @returns
+ */
+export default function Header() {
+ const { setSideBarVisible } = useGameGlobal()
+ return (
+
+
+ window.scrollTo({ top: 0, behavior: 'smooth' })}
+ >
+
+}
+
+export default JumpToTopButton
diff --git a/themes/game/components/Logo.js b/themes/game/components/Logo.js
new file mode 100644
index 00000000..251a833f
--- /dev/null
+++ b/themes/game/components/Logo.js
@@ -0,0 +1,14 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/* eslint-disable @next/next/no-html-link-for-pages */
+export default function Logo() {
+ return (
+
+
+
+
+ )
+}
diff --git a/themes/game/components/LogoMini.js b/themes/game/components/LogoMini.js
new file mode 100644
index 00000000..b540e6e6
--- /dev/null
+++ b/themes/game/components/LogoMini.js
@@ -0,0 +1,11 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/* eslint-disable @next/next/no-html-link-for-pages */
+export default function LogoMini() {
+ return (
+
+ {siteConfig('TITLE')?.charAt(0)}
+
+ )
+}
diff --git a/themes/game/components/MenuItemCollapse.js b/themes/game/components/MenuItemCollapse.js
new file mode 100644
index 00000000..8f53f622
--- /dev/null
+++ b/themes/game/components/MenuItemCollapse.js
@@ -0,0 +1,55 @@
+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 <>
+ {siteConfig('TITLE')}
+{siteConfig('BIO')}
+
+ {!hasSubMenu &&
+ {link?.icon && }{link?.name}
+ }
+ {hasSubMenu &&
+
+ {/* 折叠子菜单 */}
+ {hasSubMenu &&
+ {link?.icon && }{link?.name}
+
+
}
+
+
+ {sLink.title}
+
+
+ })}
+ changeShow(true)}
+ onMouseOut={() => changeShow(false)}>
+ {!hasSubMenu && (
+
+
+
+
+ )}
+
+ {hasSubMenu && (
+
+ {link?.icon && }
+
+ {link?.name}
+
+
+ {link?.icon && }{' '}
+ {link?.name}
+
+
+ )}
+
+ {/* 子菜单 */}
+ {hasSubMenu && (
+ -
+ {link.subMenus.map((sLink, index) => {
+ return (
+
+
+
+ {link?.icon && }
+ {sLink.title}
+
+
+
+ )
+ })}
+ -
+
- + + +
- + + + {links?.length > 0 &&
} + + {links?.map( + (link, index) => + link && link.show &&
+
+ ←{locale.PAGINATION.PREV}
+
+
+ {locale.PAGINATION.NEXT}→
+
+
+ )
+}
+
+export default PaginationSimple
diff --git a/themes/game/components/PostInfo.js b/themes/game/components/PostInfo.js
new file mode 100644
index 00000000..8471d9db
--- /dev/null
+++ b/themes/game/components/PostInfo.js
@@ -0,0 +1,53 @@
+import NotionIcon from '@/components/NotionIcon'
+import Link from 'next/link'
+import TagItem from './TagItem'
+
+/**
+ * 文章详情页说明信息
+ */
+export default function PostInfo(props) {
+ const { post } = props
+
+ return (
+
+
+
+
+ {post?.type !== 'Page' && (
+ <>
+
+
+ )}
+
+
+ {post?.type !== 'Page' && (
+ <>
+
+ {post?.category}
+
+
+ )}
+
+
+
+
+
+ {post?.type !== 'Page' && (
+ <>
+
+
+ )}
+
+
+
+ )
+}
diff --git a/themes/game/components/SearchButton.js b/themes/game/components/SearchButton.js
new file mode 100644
index 00000000..ea8fa508
--- /dev/null
+++ b/themes/game/components/SearchButton.js
@@ -0,0 +1,34 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useGameGlobal } from '..'
+
+/**
+ * 搜索按钮
+ * @returns
+ */
+export default function SearchButton(props) {
+ const { locale } = useGlobal()
+ const { searchModal } = useGameGlobal()
+ const router = useRouter()
+
+ function handleSearch() {
+ if (siteConfig('ALGOLIA_APP_ID')) {
+ searchModal.current.openSearch()
+ } else {
+ router.push('/search')
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+ )
+}
diff --git a/themes/game/components/SearchInput.js b/themes/game/components/SearchInput.js
new file mode 100644
index 00000000..9f1ffdbe
--- /dev/null
+++ b/themes/game/components/SearchInput.js
@@ -0,0 +1,88 @@
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+import { useImperativeHandle, useRef, useState } from 'react'
+
+let lock = false
+
+const SearchInput = props => {
+ const { tag, keyword, cRef } = props
+ 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
+
+
+
+ {(showClean &&
+
+
+
+ )}
+
+
+
+
+
+
+ {siteConfig('COMMENT_WALINE_SERVER_URL') && JSON.parse(siteConfig('COMMENT_WALINE_RECENT')) && }
+
+
+
+
+ );
+}
diff --git a/themes/game/components/SideBarContent.js b/themes/game/components/SideBarContent.js
new file mode 100644
index 00000000..e2efbeb3
--- /dev/null
+++ b/themes/game/components/SideBarContent.js
@@ -0,0 +1,65 @@
+import { siteConfig } from '@/lib/config'
+import { deepClone } from '@/lib/utils'
+import { useEffect, useRef } from 'react'
+import { useGameGlobal } from '..'
+import CONFIG from '../config'
+import { GameListNormal } from './GameListNormal'
+import Logo from './Logo'
+
+/**
+ * 侧拉抽屉的内容
+ */
+export default function SideBarContent() {
+ const { allNavPages, sideBarVisible, setSideBarVisible, filterGames, setFilterGames } = useGameGlobal()
+ const inputRef = useRef(null) // 创建对输入框的引用
+ const allGames = deepClone(allNavPages)
+ useEffect(() => {
+ if (sideBarVisible) {
+ setTimeout(() => {
+ inputRef.current.focus() // 在组件渲染后聚焦输入框
+ }, 100)
+ }
+ }, [sideBarVisible, inputRef])
+
+ const handleSearch = e => {
+ const search = e.target.value
+ if (!search || search === '') {
+ setFilterGames(
+ allGames?.filter(item => item.tags?.some(t => t === siteConfig('GAME_RECOMMEND_TAG', 'Recommend', CONFIG)))
+ )
+ return
+ }
+ setFilterGames(
+ allGames?.filter(item => {
+ return (
+ item.title.toLowerCase().includes(search.toLowerCase()) ||
+ item.id.toLowerCase().includes(search.toLowerCase()) ||
+ item.id.toLowerCase().replace('-', '').includes(search.toLowerCase().replace('-', ''))
+ )
+ })
+ )
+ }
+ return (
+
+
+ )
+}
diff --git a/themes/game/components/SideBarDrawer.js b/themes/game/components/SideBarDrawer.js
new file mode 100644
index 00000000..1766744b
--- /dev/null
+++ b/themes/game/components/SideBarDrawer.js
@@ -0,0 +1,61 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+ const router = useRouter()
+ useEffect(() => {
+ const sideBarDrawerRouteListener = () => {
+ switchSideDrawerVisible(false)
+ }
+ router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+ return () => {
+ router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+ }
+ }, [router.events])
+
+ // 点击按钮更改侧边抽屉状态
+ const switchSideDrawerVisible = showStatus => {
+ if (showStatus) {
+ onOpen && onOpen()
+ } else {
+ onClose && onClose()
+ }
+ const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+ const sideBarDrawerBackground = window.document.getElementById(
+ 'sidebar-drawer-background'
+ )
+
+ if (showStatus) {
+ sideBarDrawer?.classList.replace('-ml-96', 'ml-0')
+ sideBarDrawerBackground?.classList.replace('hidden', 'block')
+ } else {
+ sideBarDrawer?.classList.replace('ml-0', '-ml-96')
+ sideBarDrawerBackground?.classList.replace('block', 'hidden')
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {/* 背景蒙版 */}
+
+ )
+}
+export default SideBarDrawer
diff --git a/themes/game/components/SvgIcon.js b/themes/game/components/SvgIcon.js
new file mode 100644
index 00000000..1ae326ca
--- /dev/null
+++ b/themes/game/components/SvgIcon.js
@@ -0,0 +1,29 @@
+export const SvgIcon = () => {
+ return
+}
diff --git a/themes/game/components/TagItem.js b/themes/game/components/TagItem.js
new file mode 100644
index 00000000..4f01fb72
--- /dev/null
+++ b/themes/game/components/TagItem.js
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+const TagItem = ({ tag }) => (
+
+
+
+ )
+}
+
+/**
+ * 首页
+ * 首页是个博客列表，加上顶部嵌入一个公告
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = props => {
+ const { tagOptions, currentTag, categoryOptions, currentCategory } = props
+ return (
+ <>
+ {/* 首页移动端顶部导航 */}
+
-
+ {tag} +
+ +) + +export default TagItem diff --git a/themes/game/components/TagItemMini.js b/themes/game/components/TagItemMini.js new file mode 100644 index 00000000..3fe0c7bf --- /dev/null +++ b/themes/game/components/TagItemMini.js @@ -0,0 +1,21 @@ +import Link from 'next/link' + +const TagItemMini = ({ tag, selected = false }) => { + return ( + + {/* # {tag.name} */} + + # {tag.name}{' '} + + {tag.count ? `${tag.count}` : ''} + + + + ) +} + +export default TagItemMini diff --git a/themes/game/components/Tags.js b/themes/game/components/Tags.js new file mode 100644 index 00000000..bdab3ee5 --- /dev/null +++ b/themes/game/components/Tags.js @@ -0,0 +1,38 @@ +import Link from 'next/link' + +const Tags = props => { + const { tagOptions, tag } = props + const currentTag = tag + if (!tagOptions) return null + return ( +
+
+ )
+}
+
+export default Tags
diff --git a/themes/game/components/Title.js b/themes/game/components/Title.js
new file mode 100644
index 00000000..151d736e
--- /dev/null
+++ b/themes/game/components/Title.js
@@ -0,0 +1,19 @@
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 标题栏
+ * @param {*} props
+ * @returns
+ */
+export const Title = (props) => {
+ const { post } = props
+ const title = post?.title || siteConfig('DESCRIPTION')
+ const description = post?.description || siteConfig('AUTHOR')
+
+ return -
+ {Object.keys(tagOptions).map(key => {
+ const tag = tagOptions[key]
+ const selected = tag.name === currentTag
+ return (
+
- + + + {`${tag.name} (${tag.count})`} + + + + ) + })} +
+
+}
diff --git a/themes/game/config.js b/themes/game/config.js
new file mode 100644
index 00000000..e4ae38ef
--- /dev/null
+++ b/themes/game/config.js
@@ -0,0 +1,18 @@
+const CONFIG = {
+ GAME_NAV_NOTION_ICON: true, // 是否读取Notion图标作为站点头像 ; 否则默认显示黑色SVG方块
+
+ GAME_RECOMMEND_TAG: 'Recommend', // 打了此Tag，被视为推荐
+ GAME_INDEX_EXPAND_RECOMMEND: true, // 首页列表是否将推荐游戏放大，否则随机放大。
+
+ // 特殊菜单
+ GAME_MENU_RANDOM_POST: true, // 是否显示随机跳转文章按钮
+ GAME_MENU_SEARCH_BUTTON: true, // 是否显示搜索按钮，该按钮支持Algolia搜索
+
+ // 默认菜单配置 （开启自定义菜单后，以下配置则失效，请在Notion中自行配置菜单）
+ GAME_MENU_CATEGORY: false, // 显示分类
+ GAME_MENU_TAG: true, // 显示标签
+ GAME_MENU_ARCHIVE: false, // 显示归档
+ GAME_MENU_SEARCH: true, // 显示搜索
+ GAME_MENU_RSS: false // 显示订阅
+}
+export default CONFIG
diff --git a/themes/game/index.js b/themes/game/index.js
new file mode 100644
index 00000000..07bddee5
--- /dev/null
+++ b/themes/game/index.js
@@ -0,0 +1,523 @@
+import Comment from '@/components/Comment'
+import { Draggable } from '@/components/Draggable'
+import { AdSlot } from '@/components/GoogleAdsense'
+import replaceSearchResult from '@/components/Mark'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import { siteConfig } from '@/lib/config'
+import { deepClone, isBrowser, shuffleArray } from '@/lib/utils'
+import Link from 'next/link'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import Announcement from './components/Announcement'
+import { ArticleLock } from './components/ArticleLock'
+import BlogArchiveItem from './components/BlogArchiveItem'
+import { BlogListPage } from './components/BlogListPage'
+import { BlogListScroll } from './components/BlogListScroll'
+import BlogPostBar from './components/BlogPostBar'
+import { Footer } from './components/Footer'
+import FullScreen from './components/FullScreen'
+import { GameListIndexCombine } from './components/GameListIndexCombine'
+import { GameListRelate } from './components/GameListRealate'
+import { GameListRecent } from './components/GameListRecent'
+import GroupCategory from './components/GroupCategory'
+import GroupTag from './components/GroupTag'
+import Header from './components/Header'
+import { MenuList } from './components/MenuList'
+import PostInfo from './components/PostInfo'
+import SideBarContent from './components/SideBarContent'
+import SideBarDrawer from './components/SideBarDrawer'
+import CONFIG from './config'
+import { Style } from './style'
+
+// const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false })
+
+// 主题全局状态
+const ThemeGlobalGame = createContext()
+export const useGameGlobal = () => useContext(ThemeGlobalGame)
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+ const { allNavPages, children } = props
+
+ // const fullWidth = post?.fullWidth ?? false
+ // const { onLoading } = useGlobal()
+ const searchModal = useRef(null)
+ // 在列表中进行实时过滤
+ const [filterKey, setFilterKey] = useState('')
+
+ const [filterGames, setFilterGames] = useState(
+ deepClone(
+ allNavPages?.filter(item =>
+ item.tags?.some(
+ t => t === siteConfig('GAME_RECOMMEND_TAG', 'Recommend', CONFIG)
+ )
+ )
+ )
+ )
+ const [recentGames, setRecentGames] = useState([])
+ const [sideBarVisible, setSideBarVisible] = useState(false)
+
+ useEffect(() => {
+ setRecentGames(
+ localStorage.getItem('recent_games')
+ ? JSON.parse(localStorage.getItem('recent_games'))
+ : []
+ )
+ }, [])
+
+ return (
+ {title}
++ {description} +
+
+
+
+ {/* 左右布局 */}
+ {
+ setSideBarVisible(false)
+ }}>
+
+
+
+ {/* PC端左侧 */}
+
+
+
+
+
+
+
+ {/* 右侧 */}
+
+
+
+ {/* 抬头logo等 */}
+
+
+ {/* 左侧广告栏目 */}
+
+
+ {children}
+
+
+
+
+ {/* 最近游戏 */}
+
+ {/* 标签汇总 */}
+
+
+
+ {/* 广告 */}
+ +
+
+
+ {/* 站点公告信息 */}
+
+
+
+ )
+}
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = props => {
+ const { posts } = props
+ const { filterKey } = useGameGlobal()
+ let filteredBlogPosts = []
+ if (filterKey && posts) {
+ filteredBlogPosts = posts.filter(post => {
+ const tagContent = post?.tags ? post?.tags.join(' ') : ''
+ const searchContent = post.title + post.summary + tagContent
+ return searchContent.toLowerCase().includes(filterKey.toLowerCase())
+ })
+ } else {
+ filteredBlogPosts = deepClone(posts)
+ }
+
+ return (
+ <>
+
+ {Object.keys(archivePosts).map(archiveTitle => (
+
+
+ )
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+ const { post, allNavPages, recommendPosts, lock, validPassword } = props
+ const game = deepClone(post)
+ const [loading, setLoading] = useState(false)
+ // const [url, setUrl] = useState(game?.ext?.href)
+ const relateGames = recommendPosts
+ const randomGames = shuffleArray(deepClone(allNavPages))
+
+ // 将当前游戏加入到最近游玩
+ useEffect(() => {
+ // 更新最新游戏
+ const recentGames = localStorage.getItem('recent_games')
+ ? JSON.parse(localStorage.getItem('recent_games'))
+ : []
+
+ const existedIndex = recentGames.findIndex(item => item?.id === game?.id)
+ if (existedIndex === -1) {
+ recentGames.unshift(game) // 将游戏插入到数组头部
+ } else {
+ // 如果游戏已存在于数组中，将其移至数组头部
+ const existingGame = recentGames.splice(existedIndex, 1)[0]
+ recentGames.unshift(existingGame)
+ }
+ localStorage.setItem('recent_games', JSON.stringify(recentGames))
+
+ const iframe = document.getElementById('game-wrapper')
+
+ // 定义一个函数来处理iframe加载成功事件
+ function iframeLoaded() {
+ if (game) {
+ setLoading(false)
+ }
+ }
+
+ // 绑定加载事件
+ if (iframe?.attachEvent) {
+ iframe?.attachEvent('onload', iframeLoaded)
+ } else {
+ if (iframe) iframe.onload = iframeLoaded
+ }
+
+ // 更改iFrame的title
+ if (
+ document
+ ?.getElementById('game-wrapper')
+ ?.contentDocument.querySelector('title')?.textContent
+ ) {
+ document
+ .getElementById('game-wrapper')
+ .contentDocument.querySelector('title').textContent = `${
+ game?.title || ''
+ } - Play ${game?.title || ''} on ${siteConfig('TITLE')}`
+ }
+ }, [game])
+
+ return (
+ <>
+ {lock &&
+ {/* 游戏区域 */}
+
+ )}
+
+ )
+}
+
+/**
+ * 404 页面
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+ return <>404 Not found.
+}
+
+/**
+ * 文章分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+ const { categoryOptions } = props
+
+ return (
+ <>
+
+ {/* 移动端返回主页按钮 */}
+
+
+
+
+
+ {/* 其它游戏列表 */}
+
+
+
+ {' '}
+ {
+ document.querySelector('.game-info').scrollIntoView({
+ behavior: 'smooth',
+ block: 'end',
+ inline: 'nearest'
+ })
+ }}>
+ G
+
+
+
+ {/* 游戏区 */}
+
+
+ {/* Loading遮罩 */}
+ {loading && (
+
+
+ {/* 游戏资讯 */}
+
+ 
+ )}
+
+ )}
+
+
+
+ {/* 游戏窗口装饰器 */}
+ {game && !loading && (
+
+
+
+ {/* 游戏封面图 */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ {game?.img && (
+ + + {siteConfig('TITLE')} +
++ {siteConfig('DESCRIPTION')} +
+
+ {/* 加入全屏按钮 */}
+
+ )}
+
+ {/* 关联游戏 */}
+
+
+
+
+ {game && (
+
+
+ )}
+
+ {categoryOptions?.map(category => {
+ return (
+
+
+
+ )
+}
+
+/**
+ * 文章标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+ const { tagOptions } = props
+ return (
+ <>
+
+ {/* */}
+ {category.name}({category.count})
+
+
+ )
+ })}
+
+
+
+
+ )
+}
+
+export {
+ Layout404,
+ LayoutArchive,
+ LayoutBase,
+ LayoutCategoryIndex,
+ LayoutIndex,
+ LayoutPostList,
+ LayoutSearch,
+ LayoutSlug,
+ LayoutTagIndex,
+ CONFIG as THEME_CONFIG
+}
diff --git a/themes/game/style.js b/themes/game/style.js
new file mode 100644
index 00000000..5e8eaa5a
--- /dev/null
+++ b/themes/game/style.js
@@ -0,0 +1,18 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+ return
+}
+
+export { Style }
diff --git a/themes/medium/components/BlogPostBar.js b/themes/medium/components/BlogPostBar.js
index 7cada8fa..9f34aca5 100644
--- a/themes/medium/components/BlogPostBar.js
+++ b/themes/medium/components/BlogPostBar.js
@@ -10,9 +10,19 @@ export default function BlogPostBar(props) {
const { locale } = useGlobal()
if (tag) {
- return {locale.COMMON.TAGS}:
{tag}
+
+ {locale.COMMON.TAGS}:{tag}
+
+ )
} else if (category) {
- {locale.COMMON.CATEGORY}:
{category}
+
+ {locale.COMMON.CATEGORY}:{category}
+
+ )
} else {
return <>
}
diff --git a/themes/simple/components/BlogPostBar.js b/themes/simple/components/BlogPostBar.js
new file mode 100644
index 00000000..9efac113
--- /dev/null
+++ b/themes/simple/components/BlogPostBar.js
@@ -0,0 +1,29 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 文章列表上方嵌入
+ * @param {*} props
+ * @returns
+ */
+export default function BlogPostBar(props) {
+ const { tag, category } = props
+ const { locale } = useGlobal()
+
+ if (tag) {
+ return (
+
+
+ {locale.COMMON.TAGS}: {tag}
+
+ )
+ } else if (category) {
+ return (
+
+
+ {locale.COMMON.CATEGORY}: {category}
+
+ )
+ } else {
+ return <>
+ }
+}
diff --git a/themes/simple/index.js b/themes/simple/index.js
index 60867451..9bef23f0 100644
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -1,37 +1,59 @@
-import CONFIG from './config'
-import { createContext, useContext, useEffect, useRef } from 'react'
-import { isBrowser } from '@/lib/utils'
-import { useGlobal } from '@/lib/global'
import { AdSlot } from '@/components/GoogleAdsense'
-import { siteConfig } from '@/lib/config'
-import { Transition } from '@headlessui/react'
-import Link from 'next/link'
-import { Style } from './style'
import replaceSearchResult from '@/components/Mark'
-import dynamic from 'next/dynamic'
import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import BlogPostBar from './components/BlogPostBar'
+import CONFIG from './config'
+import { Style } from './style'
-const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false })
+const AlgoliaSearchModal = dynamic(
+ () => import('@/components/AlgoliaSearchModal'),
+ { ssr: false }
+)
// 主题组件
-const BlogListScroll = dynamic(() => import('./components/BlogListScroll'), { ssr: false });
-const BlogArchiveItem = dynamic(() => import('./components/BlogArchiveItem'), { ssr: false });
-const ArticleLock = dynamic(() => import('./components/ArticleLock'), { ssr: false });
-const ArticleInfo = dynamic(() => import('./components/ArticleInfo'), { ssr: false });
-const Comment = dynamic(() => import('@/components/Comment'), { ssr: false });
-const ArticleAround = dynamic(() => import('./components/ArticleAround'), { ssr: false });
-const ShareBar = dynamic(() => import('@/components/ShareBar'), { ssr: false });
-const TopBar = dynamic(() => import('./components/TopBar'), { ssr: false });
-const Header = dynamic(() => import('./components/Header'), { ssr: false });
-const NavBar = dynamic(() => import('./components/NavBar'), { ssr: false });
-const SideBar = dynamic(() => import('./components/SideBar'), { ssr: false });
-const JumpToTopButton = dynamic(() => import('./components/JumpToTopButton'), { ssr: false });
-const Footer = dynamic(() => import('./components/Footer'), { ssr: false });
-const SearchInput = dynamic(() => import('./components/SearchInput'), { ssr: false });
-const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false });
-const BlogListPage = dynamic(() => import('./components/BlogListPage'), { ssr: false })
-const RecommendPosts = dynamic(() => import('./components/RecommendPosts'), { ssr: false })
+const BlogListScroll = dynamic(() => import('./components/BlogListScroll'), {
+ ssr: false
+})
+const BlogArchiveItem = dynamic(() => import('./components/BlogArchiveItem'), {
+ ssr: false
+})
+const ArticleLock = dynamic(() => import('./components/ArticleLock'), {
+ ssr: false
+})
+const ArticleInfo = dynamic(() => import('./components/ArticleInfo'), {
+ ssr: false
+})
+const Comment = dynamic(() => import('@/components/Comment'), { ssr: false })
+const ArticleAround = dynamic(() => import('./components/ArticleAround'), {
+ ssr: false
+})
+const ShareBar = dynamic(() => import('@/components/ShareBar'), { ssr: false })
+const TopBar = dynamic(() => import('./components/TopBar'), { ssr: false })
+const Header = dynamic(() => import('./components/Header'), { ssr: false })
+const NavBar = dynamic(() => import('./components/NavBar'), { ssr: false })
+const SideBar = dynamic(() => import('./components/SideBar'), { ssr: false })
+const JumpToTopButton = dynamic(() => import('./components/JumpToTopButton'), {
+ ssr: false
+})
+const Footer = dynamic(() => import('./components/Footer'), { ssr: false })
+const SearchInput = dynamic(() => import('./components/SearchInput'), {
+ ssr: false
+})
+const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
+const BlogListPage = dynamic(() => import('./components/BlogListPage'), {
+ ssr: false
+})
+const RecommendPosts = dynamic(() => import('./components/RecommendPosts'), {
+ ssr: false
+})
// 主题全局状态
const ThemeGlobalSimple = createContext()
@@ -50,57 +72,63 @@ const LayoutBase = props => {
return (
+
+
-
+ {siteConfig('SIMPLE_TOP_BAR', null, CONFIG) &&
+
)
}
@@ -121,9 +149,14 @@ const LayoutIndex = props => {
*/
const LayoutPostList = props => {
return (
- <>
- {siteConfig('POST_LIST_STYLE') === 'page' ?
+
+ {slotTop}
- {/* 主体 */}
-
+
+
-
-
- {fullWidth
- ? null
- :
-
-
-
- {slotTop}
+ {children}
+
+
- {children}
-
-
-
-
- {/* 搜索框 */}
-
+
+
+ {/* 搜索框 */}
+
- {Object.keys(archivePosts).map(archiveTitle =>
-
+ <>
+
+ {Object.keys(archivePosts).map(archiveTitle => (
+
+
)
}
@@ -180,39 +221,39 @@ const LayoutSlug = props => {
const { fullWidth } = useGlobal()
return (
- <>
+ <>
+ {lock &&
+ {/* 文章信息 */}
+
+
)
}
@@ -221,27 +262,28 @@ const LayoutSlug = props => {
* @param {*} props
* @returns
*/
-const Layout404 = (props) => {
+const Layout404 = props => {
const { post } = props
const router = useRouter()
useEffect(() => {
// 404
if (!post) {
- setTimeout(() => {
- if (isBrowser) {
- const article = document.getElementById('notion-article')
- if (!article) {
- router.push('/404').then(() => {
- console.warn('找不到页面', router.asPath)
- })
+ 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)
+ },
+ siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+ )
}
}, [post])
- return <>
- 404 Not found.
-
+ return <>404 Not found.
}
/**
@@ -252,24 +294,27 @@ const Layout404 = (props) => {
const LayoutCategoryIndex = props => {
const { categoryOptions } = props
return (
- <>
-
+ {/* 广告嵌入 */}
+ {/*
- }
-
- {/* 评论区 */}
-
-
-
+ {/* 评论区 */}
+
- {categoryOptions?.map(category => {
- return (
-
-
-
+ <>
+
- {category.name}({category.count})
-
-
- )
- })}
-
+ {categoryOptions?.map(category => {
+ return (
+
+
+
)
}
@@ -278,38 +323,41 @@ const LayoutCategoryIndex = props => {
* @param {*} props
* @returns
*/
-const LayoutTagIndex = (props) => {
+const LayoutTagIndex = props => {
const { tagOptions } = props
return (
- <>
-
+
+ {category.name}({category.count})
+
+
+ )
+ })}
+