d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2700 from tangly1024/release/4.7.0

Browse Source 
Release/4.7.0
This commit is contained in:
tangly1024
2024-09-05 12:40:56 +08:00
committed by GitHub
parent d0a4acd5c3 1610ab659d
commit 1ea503e773
21 changed files with 1025 additions and 756 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@@ -1,5 +1,5 @@
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
NEXT_PUBLIC_VERSION=4.6.2
NEXT_PUBLIC_VERSION=4.7.0
# 可在此添加环境变量，去掉最左边的（# ）注释即可

2
.gitignore vendored
View File

@@ -45,7 +45,7 @@ yarn-error.log*
/public/robots.txt
/public/sitemap.xml
/public/rss/*
/sitemap.xml
# yarn
package-lock.json

61
components/OpenWrite.js Normal file
View File

@@ -0,0 +1,61 @@
import { siteConfig } from '@/lib/config'
import { isBrowser, loadExternalResource } from '@/lib/utils'
import { useEffect } from 'react'
/**
* OpenWrite公众号导流插件
* 使用介绍：https://openwrite.cn/guide/readmore/readmore.html#%E4%BA%8C%E3%80%81%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8
* 登录后台配置你的博客：https://readmore.openwrite.cn/
* @returns
*/
const OpenWrite = () => {
const qrcode = siteConfig('OPEN_WRITE_QRCODE', '请配置公众号二维码')
const blogId = siteConfig('OPEN_WRITE_BLOG_ID')
const name = siteConfig('OPEN_WRITE_NAME', '请配置公众号名')
const id = 'article-wrapper'
const keyword = siteConfig('OPEN_WRITE_KEYWORD', '请配置公众号关键词')
const btnText = siteConfig(
'OPEN_WRITE_BTN_TEXT',
'原创不易，完成人机检测，阅读全文'
)
const loadOpenWrite = async () => {
try {
await loadExternalResource(
'https://readmore.openwrite.cn/js/readmore-2.0.js',
'js'
)
const BTWPlugin = window?.BTWPlugin
if (BTWPlugin) {
const btw = new BTWPlugin()
window.btw = btw
btw.init({
qrcode,
id,
name,
btnText,
keyword,
blogId
})
}
} catch (error) {
console.error('OpenWrite 加载异常', error)
}
}
useEffect(() => {
if (isBrowser && blogId) {
// Check if the element with id 'read-more-wrap' already exists
const readMoreWrap = document.getElementById('read-more-wrap')
// Only load the script if the element doesn't exist
if (!readMoreWrap) {
loadOpenWrite()
}
}
})
return <></>
}
export default OpenWrite

2
lib/utils/index.js
View File

@@ -146,7 +146,7 @@ export function getLastPartOfUrl(url) {
* @param type js 或 css
* @returns {Promise<unknown>}
*/
export function loadExternalResource(url, type) {
export function loadExternalResource(url, type = 'js') {
// 检查是否已存在
const elements =
type === 'js'

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "notion-next",
"version": "4.6.2",
"version": "4.7.0",
"homepage": "https://github.com/tangly1024/NotionNext.git",
"license": "MIT",
"repository": {

7
pages/[prefix]/index.js
View File

@@ -1,5 +1,6 @@
import BLOG from '@/blog.config'
import useNotification from '@/components/Notification'
import OpenWrite from '@/components/OpenWrite'
import { siteConfig } from '@/lib/config'
import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
import { useGlobal } from '@/lib/global'
@@ -95,8 +96,12 @@ const Slug = props => {
})
return (
<>
{/* 文章布局 */}
<Layout {...props} />
{/* 解锁密码提示框 */}
{post?.password && post?.password !== '' && !lock && <Notification />}
{/* 导流工具 */}
<OpenWrite />
</>
)
}
@@ -129,7 +134,7 @@ export async function getStaticProps({ params: { prefix }, locale }) {
fullSlug += '.html'
}
}
// 在列表内查找文章
props.post = props?.allPages?.find(p => {
return (

4
styles/globals.css
View File

@@ -272,3 +272,7 @@ a.avatar-wrapper {
margin-right: 20px;
}
}
img {
display: unset;
}

8
themes/example/index.js
View File

@@ -179,10 +179,12 @@ const LayoutSlug = props => {
{lock ? (
<PostLock validPassword={validPassword} />
) : (
<div id='article-wrapper'>
<div>
<PostMeta post={post} />
<NotionPage post={post} />
<ShareBar post={post} />
<div id='article-wrapper'>
<NotionPage post={post} />
<ShareBar post={post} />
</div>
<Comment frontMatter={post} />
</div>
)}

6
themes/gitbook/index.js
View File

@@ -341,8 +341,10 @@ const LayoutSlug = props => {
{/* Notion文章主体 */}
{post && (
<section id='article-wrapper' className='px-1'>
<NotionPage post={post} />
<section className='px-1'>
<div id='article-wrapper'>
<NotionPage post={post} />
</div>
{/* 分享 */}
<ShareBar post={post} />

9
themes/heo/index.js
View File

@@ -288,14 +288,17 @@ const LayoutSlug = props => {
return (
<>
<div
className={`article h-full w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600`}>
className={`article h-full w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''} bg-white dark:bg-[#18171d] dark:border-gray-600 lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 `}>
{/* 文章锁 */}
{lock && <PostLock validPassword={validPassword} />}
{!lock && (
<div id='article-wrapper' className='mx-auto md:w-full md:px-5'>
<div className='mx-auto md:w-full md:px-5'>
{/* 文章主体 */}
<article itemScope itemType='https://schema.org/Movie'>
<article
id='article-wrapper'
itemScope
itemType='https://schema.org/Movie'>
{/* Notion文章主体 */}
<section
className='wow fadeInUp p-5 justify-center mx-auto'

5
themes/hexo/index.js
View File

@@ -287,10 +287,9 @@ const LayoutSlug = props => {
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && (
<div
id='article-wrapper'
className='overflow-x-auto flex-grow mx-auto md:w-full md:px-5 '>
<div className='overflow-x-auto flex-grow mx-auto md:w-full md:px-5 '>
<article
id='article-wrapper'
itemScope
itemType='https://schema.org/Movie'
className='subpixel-antialiased overflow-y-hidden'>

163
themes/landing/index.js
View File

@@ -1,4 +1,3 @@
'use client'
/**
@@ -7,21 +6,21 @@
* 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来
* 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
*/
import Loading from '@/components/Loading'
import NotionPage from '@/components/NotionPage'
import Header from './components/Header'
import Footer from './components/Footer'
import Hero from './components/Hero'
import { siteConfig } from '@/lib/config'
import { isBrowser } from '@/lib/utils'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import Features from './components/Features'
import FeaturesBlocks from './components/FeaturesBlocks'
import Testimonials from './components/Testimonials'
import Footer from './components/Footer'
import Header from './components/Header'
import Hero from './components/Hero'
import Newsletter from './components/Newsletter'
import { useRouter } from 'next/router'
import CONFIG from './config'
import Loading from '@/components/Loading'
import { isBrowser } from '@/lib/utils'
import { siteConfig } from '@/lib/config'
import { Pricing } from './components/Pricing'
import { useEffect } from 'react'
import Testimonials from './components/Testimonials'
import CONFIG from './config'
/**
* 布局框架
@@ -30,22 +29,23 @@ import { useEffect } from 'react'
* @param {*} props
* @returns
*/
const LayoutBase = (props) => {
const LayoutBase = props => {
const { children } = props
return <div id='theme-landing' className={`${siteConfig('FONT_STYLE')} scroll-smooth overflow-hidden flex flex-col justify-between bg-white dark:bg-black`}>
return (
<div
id='theme-landing'
className={`${siteConfig('FONT_STYLE')} scroll-smooth overflow-hidden flex flex-col justify-between bg-white dark:bg-black`}>
{/* 顶部导航栏 */}
<Header />
{/* 顶部导航栏 */}
<Header />
{/* 内容 */}
<div id='content-wrapper'>{children}</div>
{/* 内容 */}
<div id='content-wrapper'>
{children}
</div>
{/* 底部页脚 */}
<Footer />
{/* 底部页脚 */}
<Footer />
</div>
)
}
/**
@@ -53,16 +53,16 @@ const LayoutBase = (props) => {
* @param {*} props
* @returns
*/
const LayoutIndex = (props) => {
const LayoutIndex = props => {
return (
<>
<Hero />
<Features />
<FeaturesBlocks />
<Testimonials />
<Pricing/>
<Newsletter />
</>
<>
<Hero />
<Features />
<FeaturesBlocks />
<Testimonials />
<Pricing />
<Newsletter />
</>
)
}
@@ -71,7 +71,7 @@ const LayoutIndex = (props) => {
* @param {*} props
* @returns
*/
const LayoutSlug = (props) => {
const LayoutSlug = props => {
const { post } = props
// 如果 是 /article/[slug] 的文章路径则进行重定向到另一个域名
@@ -79,49 +79,90 @@ const LayoutSlug = (props) => {
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])
if (JSON.parse(siteConfig('LANDING_POST_REDIRECT_ENABLE', null, CONFIG)) && isBrowser && router.route === '/[prefix]/[slug]') {
const redirectUrl = siteConfig('LANDING_POST_REDIRECT_URL', null, CONFIG) + router.asPath.replace('?theme=landing', '')
if (
JSON.parse(siteConfig('LANDING_POST_REDIRECT_ENABLE', null, CONFIG)) &&
isBrowser &&
router.route === '/[prefix]/[slug]'
) {
const redirectUrl =
siteConfig('LANDING_POST_REDIRECT_URL', null, CONFIG) +
router.asPath.replace('?theme=landing', '')
router.push(redirectUrl)
return <div id='theme-landing'><Loading /></div>
return (
<div id='theme-landing'>
<Loading />
</div>
)
}
return <>
<div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
<NotionPage {...props} />
return (
<>
<div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
<div id='article-wrapper'>
<NotionPage {...props} />
</div>
</div>
</>
)
}
// 其他布局暂时留空
const LayoutSearch = (props) => <><Hero /></>
const LayoutArchive = (props) => <><Hero /></>
const Layout404 = (props) => <><Hero /></>
const LayoutCategoryIndex = (props) => <><Hero /></>
const LayoutPostList = (props) => <><Hero /></>
const LayoutTagIndex = (props) => <><Hero /></>
const LayoutSearch = props => (
<>
<Hero />
</>
)
const LayoutArchive = props => (
<>
<Hero />
</>
)
const Layout404 = props => (
<>
<Hero />
</>
)
const LayoutCategoryIndex = props => (
<>
<Hero />
</>
)
const LayoutPostList = props => (
<>
<Hero />
</>
)
const LayoutTagIndex = props => (
<>
<Hero />
</>
)
export {
CONFIG as THEME_CONFIG,
LayoutBase,
LayoutIndex,
LayoutSearch,
LayoutArchive,
LayoutSlug,
Layout404,
LayoutPostList,
LayoutArchive,
LayoutBase,
LayoutCategoryIndex,
LayoutTagIndex
LayoutIndex,
LayoutPostList,
LayoutSearch,
LayoutSlug,
LayoutTagIndex,
CONFIG as THEME_CONFIG
}

6
themes/matery/index.js
View File

@@ -254,9 +254,7 @@ const LayoutSlug = props => {
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && (
<div
id='article-wrapper'
className='overflow-x-auto md:w-full px-3 '>
<div className='overflow-x-auto md:w-full px-3 '>
{/* 文章信息 */}
{post?.type && post?.type === 'Post' && (
<>
@@ -268,7 +266,7 @@ const LayoutSlug = props => {
)}
<div className='lg:px-10 subpixel-antialiased'>
<article itemScope>
<article id='article-wrapper' itemScope>
{/* Notion文章主体 */}
<section
data-wow-delay='.1s'

458
themes/medium/index.js
View File

@@ -1,39 +1,39 @@
import CONFIG from './config'
import { useState, createContext, useContext, useEffect } from 'react'
import Footer from './components/Footer'
import InfoCard from './components/InfoCard'
import RevolverMaps from './components/RevolverMaps'
import Tabs from '@/components/Tabs'
import TopNavBar from './components/TopNavBar'
import SearchInput from './components/SearchInput'
import BottomMenuBar from './components/BottomMenuBar'
import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import Comment from '@/components/Comment'
import Live2D from '@/components/Live2D'
import Announcement from './components/Announcement'
import JumpToTopButton from './components/JumpToTopButton'
import BlogPostListPage from './components/BlogPostListPage'
import BlogPostListScroll from './components/BlogPostListScroll'
import Catalog from './components/Catalog'
import { ArticleLock } from './components/ArticleLock'
import TagGroups from './components/TagGroups'
import CategoryGroup from './components/CategoryGroup'
import replaceSearchResult from '@/components/Mark'
import NotionPage from '@/components/NotionPage'
import ShareBar from '@/components/ShareBar'
import Tabs from '@/components/Tabs'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { isBrowser } from '@/lib/utils'
import { Transition } from '@headlessui/react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { createContext, useContext, useEffect, useState } from 'react'
import Announcement from './components/Announcement'
import ArticleAround from './components/ArticleAround'
import ArticleInfo from './components/ArticleInfo'
import { ArticleLock } from './components/ArticleLock'
import BlogArchiveItem from './components/BlogArchiveItem'
import BlogPostBar from './components/BlogPostBar'
import NotionPage from '@/components/NotionPage'
import Comment from '@/components/Comment'
import ArticleAround from './components/ArticleAround'
import TocDrawer from './components/TocDrawer'
import BlogPostListPage from './components/BlogPostListPage'
import BlogPostListScroll from './components/BlogPostListScroll'
import BottomMenuBar from './components/BottomMenuBar'
import Catalog from './components/Catalog'
import CategoryGroup from './components/CategoryGroup'
import CategoryItem from './components/CategoryItem'
import Footer from './components/Footer'
import InfoCard from './components/InfoCard'
import JumpToTopButton from './components/JumpToTopButton'
import RevolverMaps from './components/RevolverMaps'
import SearchInput from './components/SearchInput'
import TagGroups from './components/TagGroups'
import TagItemMini from './components/TagItemMini'
import ShareBar from '@/components/ShareBar'
import Link from 'next/link'
import { Transition } from '@headlessui/react'
import TocDrawer from './components/TocDrawer'
import TopNavBar from './components/TopNavBar'
import CONFIG from './config'
import { Style } from './style'
import replaceSearchResult from '@/components/Mark'
import ArticleInfo from './components/ArticleInfo'
import { siteConfig } from '@/lib/config'
// 主题全局状态
const ThemeGlobalMedium = createContext()
@@ -51,86 +51,96 @@ const LayoutBase = props => {
const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false)
const { onLoading, fullWidth } = useGlobal()
const [slotRight, setSlotRight] = useState(null);
const [slotRight, setSlotRight] = useState(null)
useEffect(()=> {
useEffect(() => {
if (post?.toc?.length > 0) {
setSlotRight(
<div key={locale.COMMON.TABLE_OF_CONTENTS}>
<Catalog toc={post?.toc} />
</div>
);
)
} else {
setSlotRight(null);
setSlotRight(null)
}
},[post])
}, [post])
const slotTop = <BlogPostBar {...props} />
return (
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
{/* CSS样式 */}
<Style />
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
{/* CSS样式 */}
<Style />
<div id='theme-medium' className={`${siteConfig('FONT_STYLE')} bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
<div
id='theme-medium'
className={`${siteConfig('FONT_STYLE')} bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
<main
id='wrapper'
className={
(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
? 'flex-row-reverse'
: '') + 'relative flex justify-between w-full h-full mx-auto'
}>
{/* 桌面端左侧菜单 */}
{/* <LeftMenuBar/> */}
<main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
{/* 桌面端左侧菜单 */}
{/* <LeftMenuBar/> */}
{/* 主区 */}
<div id='container-wrapper' className='w-full relative z-10'>
{/* 顶部导航栏 */}
<TopNavBar {...props} />
{/* 主区 */}
<div id='container-wrapper' className='w-full relative z-10'>
<div
id='container-inner'
className={`px-7 ${fullWidth ? '' : 'max-w-5xl'} justify-center mx-auto min-h-screen`}>
<Transition
show={!onLoading}
appear={true}
enter='transition ease-in-out duration-700 transform order-first'
enterFrom='opacity-0 translate-y-16'
enterTo='opacity-100'
leave='transition ease-in-out duration-300 transform'
leaveFrom='opacity-100'
leaveTo='opacity-0 -translate-y-16'
unmount={false}>
{slotTop}
{children}
</Transition>
{/* 顶部导航栏 */}
<TopNavBar {...props} />
<div id='container-inner' className={`px-7 ${fullWidth ? '' : 'max-w-5xl'} justify-center mx-auto min-h-screen`}>
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{slotTop}
{children}
</Transition>
<JumpToTopButton />
</div>
{/* 底部 */}
<Footer title={siteConfig('TITLE')} />
</div>
{/* 桌面端右侧 */}
{fullWidth
? null
: <div className={`hidden xl:block border-l dark:border-transparent w-80 flex-shrink-0 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}>
<div className='py-14 px-6 sticky top-0'>
<Tabs>
{slotRight}
<div key={locale.NAV.ABOUT}>
{router.pathname !== '/search' && <SearchInput className='mt-6 mb-12' />}
{showInfoCard && <InfoCard {...props} />}
{siteConfig('MEDIUM_WIDGET_REVOLVER_MAPS', null, CONFIG) === 'true' && <RevolverMaps />}
</div>
</Tabs>
<Announcement post={notice} />
<Live2D />
</div>
</div>}
</main>
{/* 移动端底部导航栏 */}
<BottomMenuBar {...props} className='block md:hidden' />
<JumpToTopButton />
</div>
</ThemeGlobalMedium.Provider>
{/* 底部 */}
<Footer title={siteConfig('TITLE')} />
</div>
{/* 桌面端右侧 */}
{fullWidth ? null : (
<div
className={`hidden xl:block border-l dark:border-transparent w-80 flex-shrink-0 relative z-10 ${siteConfig('MEDIUM_RIGHT_PANEL_DARK', null, CONFIG) ? 'bg-hexo-black-gray dark' : ''}`}>
<div className='py-14 px-6 sticky top-0'>
<Tabs>
{slotRight}
<div key={locale.NAV.ABOUT}>
{router.pathname !== '/search' && (
<SearchInput className='mt-6 mb-12' />
)}
{showInfoCard && <InfoCard {...props} />}
{siteConfig('MEDIUM_WIDGET_REVOLVER_MAPS', null, CONFIG) ===
'true' && <RevolverMaps />}
</div>
</Tabs>
<Announcement post={notice} />
<Live2D />
</div>
</div>
)}
</main>
{/* 移动端底部导航栏 */}
<BottomMenuBar {...props} className='block md:hidden' />
</div>
</ThemeGlobalMedium.Provider>
)
}
@@ -140,7 +150,7 @@ const LayoutBase = props => {
* @param {*} props
* @returns
*/
const LayoutIndex = (props) => {
const LayoutIndex = props => {
return <LayoutPostList {...props} />
}
@@ -148,10 +158,16 @@ const LayoutIndex = (props) => {
* 博客列表
* @returns
*/
const LayoutPostList = (props) => {
return <>
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
const LayoutPostList = props => {
return (
<>
{siteConfig('POST_LIST_STYLE') === 'page' ? (
<BlogPostListPage {...props} />
) : (
<BlogPostListScroll {...props} />
)}
</>
)
}
/**
@@ -163,64 +179,72 @@ const LayoutSlug = props => {
const { post, prev, next, lock, validPassword } = props
const { locale } = useGlobal()
const slotRight = post?.toc && post?.toc?.length >= 3 && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
<Catalog toc={post?.toc} />
</div>
<div key={locale.COMMON.TABLE_OF_CONTENTS}>
<Catalog toc={post?.toc} />
</div>
)
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 (
<div {...props} >
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
<div {...props}>
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id='article-wrapper'>
{!lock && (
<div>
{/* 文章信息 */}
<ArticleInfo {...props} />
{/* 文章信息 */}
<ArticleInfo {...props} />
{/* Notion文章主体 */}
<article id='article-wrapper' className='px-1 max-w-4xl'>
{post && <NotionPage post={post} />}
</article>
{/* Notion文章主体 */}
<section className="px-1 max-w-4xl">
{post && (<NotionPage post={post} />)}
</section>
{/* 文章底部区域 */}
<section>
{/* 分享 */}
<ShareBar post={post} />
{/* 文章分类和标签信息 */}
<div className='flex justify-between'>
{siteConfig('MEDIUM_POST_DETAIL_CATEGORY', null, CONFIG) &&
post?.category && <CategoryItem category={post?.category} />}
<div>
{siteConfig('MEDIUM_POST_DETAIL_TAG', null, CONFIG) &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
</div>
{/* 上一篇下一篇文章 */}
{post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
{/* 评论区 */}
<Comment frontMatter={post} />
</section>
{/* 文章底部区域 */}
<section>
{/* 分享 */}
<ShareBar post={post} />
{/* 文章分类和标签信息 */}
<div className='flex justify-between'>
{siteConfig('MEDIUM_POST_DETAIL_CATEGORY', null, CONFIG) && post?.category && <CategoryItem category={post?.category} />}
<div>
{siteConfig('MEDIUM_POST_DETAIL_TAG', null, CONFIG) && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
</div>
</div>
{/* 上一篇下一篇文章 */}
{post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
{/* 评论区 */}
<Comment frontMatter={post} />
</section>
{/* 移动端目录 */}
<TocDrawer {...props} />
</div>}
{/* 移动端目录 */}
<TocDrawer {...props} />
</div>
)}
</div>
)
}
@@ -229,7 +253,7 @@ const LayoutSlug = props => {
* @param {*} props
* @returns
*/
const LayoutSearch = (props) => {
const LayoutSearch = props => {
const { locale } = useGlobal()
const { keyword } = props
const router = useRouter()
@@ -248,23 +272,32 @@ const LayoutSearch = (props) => {
}
}, [])
return <>
return (
<>
{/* 搜索导航栏 */}
<div className='py-12'>
<div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
<SearchInput currentSearch={currentSearch} {...props} />
{!currentSearch && (
<>
<TagGroups {...props} />
<CategoryGroup {...props} />
</>
)}
</div>
{/* 搜索导航栏 */}
<div className='py-12'>
<div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
<SearchInput currentSearch={currentSearch} {...props} />
{!currentSearch && <>
<TagGroups {...props} />
<CategoryGroup {...props} />
</>}
{/* 文章列表 */}
{currentSearch && (
<div>
{siteConfig('POST_LIST_STYLE') === 'page' ? (
<BlogPostListPage {...props} />
) : (
<BlogPostListScroll {...props} />
)}
</div>
{/* 文章列表 */}
{currentSearch && <div>
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>}
)}
</>
)
}
/**
@@ -275,12 +308,17 @@ const LayoutSearch = (props) => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<>
<div className="mb-10 pb-20 md:py-12 py-3 min-h-full">
{Object.keys(archivePosts)?.map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
)}
</div>
</>
<>
<div className='mb-10 pb-20 md:py-12 py-3 min-h-full'>
{Object.keys(archivePosts)?.map(archiveTitle => (
<BlogArchiveItem
key={archiveTitle}
archiveTitle={archiveTitle}
archivePosts={archivePosts}
/>
))}
</div>
</>
)
}
@@ -290,9 +328,13 @@ const LayoutArchive = props => {
* @returns
*/
const Layout404 = props => {
return <>
<div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
return (
<>
<div className='w-full h-96 py-80 flex justify-center items-center'>
404 Not found.
</div>
</>
)
}
/**
@@ -300,33 +342,37 @@ const Layout404 = props => {
* @param {*} props
* @returns
*/
const LayoutCategoryIndex = (props) => {
const LayoutCategoryIndex = props => {
const { categoryOptions } = props
const { locale } = useGlobal()
return (
<>
<div className='bg-white dark:bg-gray-700 py-10'>
<div className='dark:text-gray-200 mb-5'>
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
<>
<div className='bg-white dark:bg-gray-700 py-10'>
<div className='dark:text-gray-200 mb-5'>
<i className='mr-4 fas fa-th' />
{locale.COMMON.CATEGORY}:
</div>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={
'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
}>
<i className='mr-4 fas fa-folder' />
{category.name}({category.count})
</div>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</div>
</>
</Link>
)
})}
</div>
</div>
</>
)
}
@@ -339,35 +385,35 @@ const LayoutTagIndex = props => {
const { tagOptions } = props
const { locale } = useGlobal()
return (
<>
<div className="bg-white dark:bg-gray-700 py-10">
<div className="dark:text-gray-200 mb-5">
<i className="mr-4 fas fa-tag" />
{locale.COMMON.TAGS}:
</div>
<div id="tags-list" className="duration-200 flex flex-wrap">
{tagOptions?.map(tag => {
return (
<div key={tag.name} className="p-2">
<TagItemMini key={tag.name} tag={tag} />
</div>
)
})}
</div>
</div>
</>
<>
<div className='bg-white dark:bg-gray-700 py-10'>
<div className='dark:text-gray-200 mb-5'>
<i className='mr-4 fas fa-tag' />
{locale.COMMON.TAGS}:
</div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions?.map(tag => {
return (
<div key={tag.name} className='p-2'>
<TagItemMini key={tag.name} tag={tag} />
</div>
)
})}
</div>
</div>
</>
)
}
export {
CONFIG as THEME_CONFIG,
Layout404,
LayoutArchive,
LayoutBase,
LayoutCategoryIndex,
LayoutIndex,
LayoutPostList,
LayoutSearch,
LayoutArchive,
LayoutSlug,
Layout404,
LayoutCategoryIndex,
LayoutTagIndex
LayoutTagIndex,
CONFIG as THEME_CONFIG
}

6
themes/nav/index.js
View File

@@ -290,8 +290,10 @@ const LayoutSlug = props => {
{/* Notion文章主体 */}
{post && (
<section id='article-wrapper' className='px-1'>
<NotionPage post={post} />
<section className='px-1'>
<div id='article-wrapper'>
<NotionPage post={post} />
</div>
{/* 分享 */}
{/* <ShareBar post={post} /> */}

6
themes/next/components/ArticleDetail.js
View File

@@ -35,9 +35,7 @@ export default function ArticleDetail(props) {
}
return (
<div
id='article-wrapper'
className='shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full '>
<div className='shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full '>
<div
itemScope
itemType='https://schema.org/Movie'
@@ -100,7 +98,7 @@ export default function ArticleDetail(props) {
)}
{/* Notion内容主体 */}
<article className='mx-auto'>
<article id='article-wrapper' className='mx-auto'>
<WWAds className='w-full' orientation='horizontal' />
{post && <NotionPage post={post} />}
<WWAds className='w-full' orientation='horizontal' />

404
themes/next/index.js
View File

@@ -1,34 +1,37 @@
import CONFIG from './config'
import replaceSearchResult from '@/components/Mark'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { isBrowser } from '@/lib/utils'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { createContext, useContext, useEffect, useRef, useState } from 'react'
import Announcement from './components/Announcement'
import ArticleDetail from './components/ArticleDetail'
import { ArticleLock } from './components/ArticleLock'
import BlogListBar from './components/BlogListBar'
import BlogPostArchive from './components/BlogPostArchive'
import BlogPostListPage from './components/BlogPostListPage'
import BlogPostListScroll from './components/BlogPostListScroll'
import Card from './components/Card'
import FloatDarkModeButton from './components/FloatDarkModeButton'
import Footer from './components/Footer'
import JumpToBottomButton from './components/JumpToBottomButton'
import JumpToTopButton from './components/JumpToTopButton'
import SideAreaLeft from './components/SideAreaLeft'
import SideAreaRight from './components/SideAreaRight'
import TopNav from './components/TopNav'
import { useGlobal } from '@/lib/global'
import { createContext, useContext, useEffect, useRef, useState } from 'react'
import BlogPostListScroll from './components/BlogPostListScroll'
import BlogPostListPage from './components/BlogPostListPage'
import StickyBar from './components/StickyBar'
import { isBrowser } from '@/lib/utils'
import TocDrawerButton from './components/TocDrawerButton'
import TocDrawer from './components/TocDrawer'
import { ArticleLock } from './components/ArticleLock'
import BlogPostArchive from './components/BlogPostArchive'
import TagItem from './components/TagItem'
import { useRouter } from 'next/router'
import ArticleDetail from './components/ArticleDetail'
import Link from 'next/link'
import BlogListBar from './components/BlogListBar'
import TocDrawer from './components/TocDrawer'
import TocDrawerButton from './components/TocDrawerButton'
import TopNav from './components/TopNav'
import CONFIG from './config'
import { Style } from './style'
import replaceSearchResult from '@/components/Mark'
import { siteConfig } from '@/lib/config'
import Announcement from './components/Announcement'
import Card from './components/Card'
import dynamic from 'next/dynamic'
const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false })
const AlgoliaSearchModal = dynamic(
() => import('@/components/AlgoliaSearchModal'),
{ ssr: false }
)
// 主题全局状态
const ThemeGlobalNext = createContext()
@@ -39,7 +42,7 @@ export const useNextGlobal = () => useContext(ThemeGlobalNext)
* @returns {JSX.Element}
* @constructor
*/
const LayoutBase = (props) => {
const LayoutBase = props => {
const { children, headerSlot, rightAreaSlot, post } = props
const targetRef = useRef(null)
const floatButtonGroup = useRef(null)
@@ -50,7 +53,7 @@ const LayoutBase = (props) => {
const clientHeight = targetRef?.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0
@@ -75,11 +78,15 @@ const LayoutBase = (props) => {
// 悬浮抽屉
const drawerRight = useRef(null)
const floatSlot = <div className='block lg:hidden'>
<TocDrawerButton onClick={() => {
drawerRight?.current?.handleSwitchVisible()
}} />
</div>
const floatSlot = (
<div className='block lg:hidden'>
<TocDrawerButton
onClick={() => {
drawerRight?.current?.handleSwitchVisible()
}}
/>
</div>
)
const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
@@ -87,53 +94,77 @@ const LayoutBase = (props) => {
return (
<ThemeGlobalNext.Provider value={{ searchModal }}>
<div id='theme-next' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
<Style/>
<div
id='theme-next'
className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
<Style />
{/* 移动端顶部导航栏 */}
<TopNav {...props} />
{/* 移动端顶部导航栏 */}
<TopNav {...props} />
<AlgoliaSearchModal cRef={searchModal} {...props}/>
<AlgoliaSearchModal cRef={searchModal} {...props} />
<>{headerSlot}</>
<>{headerSlot}</>
{/* 顶部黑线装饰 */}
<div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block' />
{/* 顶部黑线装饰 */}
<div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block' />
{/* 主区 */}
<main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' next relative flex justify-center flex-1 pb-12'}>
{/* 左侧栏样式 */}
<SideAreaLeft targetRef={targetRef} {...props} />
{/* 主区 */}
<main
id='wrapper'
className={
(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
? 'flex-row-reverse'
: '') + ' next relative flex justify-center flex-1 pb-12'
}>
{/* 左侧栏样式 */}
<SideAreaLeft targetRef={targetRef} {...props} />
{/* 中央内容 */}
<section id='container-inner' className={`${siteConfig('NEXT_NAV_TYPE', null, CONFIG) !== 'normal' ? 'mt-24' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`} ref={targetRef}>
{children}
</section>
{/* 中央内容 */}
<section
id='container-inner'
className={`${siteConfig('NEXT_NAV_TYPE', null, CONFIG) !== 'normal' ? 'mt-24' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`}
ref={targetRef}>
{children}
</section>
{/* 右侧栏样式 */}
{siteConfig('NEXT_RIGHT_BAR', null, CONFIG) && <SideAreaRight targetRef={targetRef} slot={rightAreaSlot} {...props} />}
{/* 右侧栏样式 */}
{siteConfig('NEXT_RIGHT_BAR', null, CONFIG) && (
<SideAreaRight
targetRef={targetRef}
slot={rightAreaSlot}
{...props}
/>
)}
</main>
</main>
{/* 悬浮目录按钮 */}
{post && (
<div className='block lg:hidden'>
<TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
</div>
)}
{/* 悬浮目录按钮 */}
{post && <div className='block lg:hidden'>
<TocDrawer post={post} cRef={drawerRight} targetRef={tocRef} />
</div>}
{/* 右下角悬浮 */}
<div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 '>
<div className={(showRightFloat ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '}>
<JumpToTopButton percent={percent} />
<JumpToBottomButton />
<FloatDarkModeButton />
{floatSlot}
</div>
</div>
{/* 页脚 */}
<Footer title={siteConfig('TITLE')} />
{/* 右下角悬浮 */}
<div
ref={floatButtonGroup}
className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 '>
<div
className={
(showRightFloat ? 'animate__animated ' : 'hidden') +
' animate__fadeInUp rounded-md glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '
}>
<JumpToTopButton percent={percent} />
<JumpToBottomButton />
<FloatDarkModeButton />
{floatSlot}
</div>
</div>
</ThemeGlobalNext.Provider>
{/* 页脚 */}
<Footer title={siteConfig('TITLE')} />
</div>
</ThemeGlobalNext.Provider>
)
}
@@ -143,21 +174,24 @@ const LayoutBase = (props) => {
* @param {*} props
* @returns
*/
const LayoutIndex = (props) => {
const LayoutIndex = props => {
const { notice } = props
return <>
{/* 首页移动端顶部显示公告 */}
<Card className='my-2 lg:hidden'>
<Announcement post={notice} />
</Card>
return (
<>
{/* 首页移动端顶部显示公告 */}
<Card className='my-2 lg:hidden'>
<Announcement post={notice} />
</Card>
<BlogListBar {...props} />
<BlogListBar {...props} />
{siteConfig('POST_LIST_STYLE') !== 'page'
? <BlogPostListScroll {...props} showSummary={true} />
: <BlogPostListPage {...props} />
}
{siteConfig('POST_LIST_STYLE') !== 'page' ? (
<BlogPostListScroll {...props} showSummary={true} />
) : (
<BlogPostListPage {...props} />
)}
</>
)
}
/**
@@ -165,16 +199,18 @@ const LayoutIndex = (props) => {
* @param {*} props
* @returns
*/
const LayoutPostList = (props) => {
return <>
const LayoutPostList = props => {
return (
<>
<BlogListBar {...props} />
<BlogListBar {...props} />
{siteConfig('POST_LIST_STYLE') !== 'page'
? <BlogPostListScroll {...props} showSummary={true} />
: <BlogPostListPage {...props} />
}
{siteConfig('POST_LIST_STYLE') !== 'page' ? (
<BlogPostListScroll {...props} showSummary={true} />
) : (
<BlogPostListPage {...props} />
)}
</>
)
}
/**
@@ -182,7 +218,7 @@ const LayoutPostList = (props) => {
* @param {*} props
* @returns
*/
const LayoutSearch = (props) => {
const LayoutSearch = props => {
const { locale } = useGlobal()
const { posts, keyword } = props
@@ -200,20 +236,21 @@ const LayoutSearch = (props) => {
}, [])
return (
<>
<StickyBar>
<div className="p-4 dark:text-gray-200">
<i className="mr-1 fas fa-search" />{' '}
{posts?.length} {locale.COMMON.RESULT_OF_SEARCH}
</div>
</StickyBar>
<div className="md:mt-5">
{siteConfig('POST_LIST_STYLE') !== 'page'
? <BlogPostListScroll {...props} showSummary={true} />
: <BlogPostListPage {...props} />
}
</div>
</>
<>
<StickyBar>
<div className='p-4 dark:text-gray-200'>
<i className='mr-1 fas fa-search' /> {posts?.length}{' '}
{locale.COMMON.RESULT_OF_SEARCH}
</div>
</StickyBar>
<div className='md:mt-5'>
{siteConfig('POST_LIST_STYLE') !== 'page' ? (
<BlogPostListScroll {...props} showSummary={true} />
) : (
<BlogPostListPage {...props} />
)}
</div>
</>
)
}
@@ -236,16 +273,21 @@ const Layout404 = props => {
}, 3000)
}, [])
return <>
<div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
<div className='dark:text-gray-200'>
<h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='mr-2 fas fa-spinner animate-spin' />404</h2>
<div className='inline-block text-left h-32 leading-10 items-center'>
<h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
</div>
</div>
return (
<>
<div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
<div className='dark:text-gray-200'>
<h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'>
<i className='mr-2 fas fa-spinner animate-spin' />
404
</h2>
<div className='inline-block text-left h-32 leading-10 items-center'>
<h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
</div>
</div>
</div>
</>
)
}
/**
@@ -253,21 +295,21 @@ const Layout404 = props => {
* @param {*} props
* @returns
*/
const LayoutArchive = (props) => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<>
<div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-hexo-black-gray shadow-md min-h-full">
{Object.keys(archivePosts).map(archiveTitle => (
<BlogPostArchive
key={archiveTitle}
posts={archivePosts[archiveTitle]}
archiveTitle={archiveTitle}
/>
))}
</div>
</>
<>
<div className='mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-hexo-black-gray shadow-md min-h-full'>
{Object.keys(archivePosts).map(archiveTitle => (
<BlogPostArchive
key={archiveTitle}
posts={archivePosts[archiveTitle]}
archiveTitle={archiveTitle}
/>
))}
</div>
</>
)
}
@@ -276,33 +318,34 @@ const LayoutArchive = (props) => {
* @param {*} props
* @returns
*/
const LayoutSlug = (props) => {
const LayoutSlug = props => {
const { post, lock, validPassword } = 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 (
<>
<>
{post && !lock && <ArticleDetail {...props} />}
{post && !lock && <ArticleDetail {...props} />}
{post && lock && <ArticleLock validPassword={validPassword} />}
</>
{post && lock && <ArticleLock validPassword={validPassword} />}
</>
)
}
@@ -311,33 +354,37 @@ const LayoutSlug = (props) => {
* @param {*} props
* @returns
*/
const LayoutCategoryIndex = (props) => {
const LayoutCategoryIndex = props => {
const { allPosts, categoryOptions } = props
const { locale } = useGlobal()
return (
<div totalPosts={allPosts} {...props}>
<div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
<div className='dark:text-gray-200 mb-5'>
<i className='mr-4 fas faTh' />{locale.COMMON.CATEGORY}:
</div>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</div>
<div totalPosts={allPosts} {...props}>
<div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
<div className='dark:text-gray-200 mb-5'>
<i className='mr-4 fas faTh' />
{locale.COMMON.CATEGORY}:
</div>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={
'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
}>
<i className='mr-4 fas fa-folder' />
{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</div>
</div>
)
}
@@ -346,30 +393,39 @@ const LayoutCategoryIndex = (props) => {
* @param {*} props
* @returns
*/
const LayoutTagIndex = (props) => {
const LayoutTagIndex = props => {
const { tagOptions } = props
const { locale } = useGlobal()
return <>
<div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
<div className='dark:text-gray-200 mb-5'><i className='fas fa-tags mr-4' />{locale.COMMON.TAGS}:</div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
})}
</div>
return (
<>
<div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
<div className='dark:text-gray-200 mb-5'>
<i className='fas fa-tags mr-4' />
{locale.COMMON.TAGS}:
</div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return (
<div key={tag.name} className='p-2'>
<TagItem key={tag.name} tag={tag} />
</div>
)
})}
</div>
</div>
</>
)
}
export {
CONFIG as THEME_CONFIG,
LayoutBase,
LayoutIndex,
LayoutSearch,
LayoutArchive,
LayoutSlug,
Layout404,
LayoutArchive,
LayoutBase,
LayoutCategoryIndex,
LayoutIndex,
LayoutPostList,
LayoutTagIndex
LayoutSearch,
LayoutSlug,
LayoutTagIndex,
CONFIG as THEME_CONFIG
}

331
themes/nobelium/index.js
View File

@@ -1,32 +1,35 @@
import CONFIG from './config'
import { createContext, useEffect, useState, useContext, useRef } from 'react'
import Nav from './components/Nav'
import { Footer } from './components/Footer'
import JumpToTopButton from './components/JumpToTopButton'
import Comment from '@/components/Comment'
import Live2D from '@/components/Live2D'
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 { deepClone, 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, useState } from 'react'
import Announcement from './components/Announcement'
import { ArticleFooter } from './components/ArticleFooter'
import { ArticleInfo } from './components/ArticleInfo'
import { ArticleLock } from './components/ArticleLock'
import BlogArchiveItem from './components/BlogArchiveItem'
import BlogListBar from './components/BlogListBar'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import { deepClone, isBrowser } from '@/lib/utils'
import { Footer } from './components/Footer'
import JumpToTopButton from './components/JumpToTopButton'
import Nav from './components/Nav'
import SearchNavBar from './components/SearchNavBar'
import BlogArchiveItem from './components/BlogArchiveItem'
import { ArticleLock } from './components/ArticleLock'
import NotionPage from '@/components/NotionPage'
import { ArticleInfo } from './components/ArticleInfo'
import Comment from '@/components/Comment'
import { ArticleFooter } from './components/ArticleFooter'
import ShareBar from '@/components/ShareBar'
import Link from 'next/link'
import BlogListBar from './components/BlogListBar'
import { Transition } from '@headlessui/react'
import CONFIG from './config'
import { Style } from './style'
import replaceSearchResult from '@/components/Mark'
import { siteConfig } from '@/lib/config'
import { useRouter } from 'next/router'
import dynamic from 'next/dynamic'
const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false })
const AlgoliaSearchModal = dynamic(
() => import('@/components/AlgoliaSearchModal'),
{ ssr: false }
)
// 主题全局状态
const ThemeGlobalNobelium = createContext()
@@ -45,56 +48,56 @@ const LayoutBase = props => {
const searchModal = useRef(null)
// 在列表中进行实时过滤
const [filterKey, setFilterKey] = useState('')
const topSlot = <BlogListBar {...props}/>
const topSlot = <BlogListBar {...props} />
return (
<ThemeGlobalNobelium.Provider value={{ searchModal, filterKey, setFilterKey }}>
<div id='theme-nobelium' className={`${siteConfig('FONT_STYLE')} nobelium relative dark:text-gray-300 w-full bg-white dark:bg-black min-h-screen flex flex-col scroll-smooth`}>
<ThemeGlobalNobelium.Provider
value={{ searchModal, filterKey, setFilterKey }}>
<div
id='theme-nobelium'
className={`${siteConfig('FONT_STYLE')} nobelium relative dark:text-gray-300 w-full bg-white dark:bg-black min-h-screen flex flex-col scroll-smooth`}>
<Style />
<Style />
{/* 顶部导航栏 */}
<Nav {...props} />
{/* 顶部导航栏 */}
<Nav {...props} />
{/* 主区 */}
<main
id='out-wrapper'
className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
<Transition
show={!onLoading}
appear={true}
enter='transition ease-in-out duration-700 transform order-first'
enterFrom='opacity-0 translate-y-16'
enterTo='opacity-100'
leave='transition ease-in-out duration-300 transform'
leaveFrom='opacity-100 translate-y-0'
leaveTo='opacity-0 -translate-y-16'
unmount={false}>
{/* 顶部插槽 */}
{topSlot}
{children}
</Transition>
</main>
{/* 主区 */}
<main id='out-wrapper' className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
{/* 页脚 */}
<Footer {...props} />
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{/* 顶部插槽 */}
{topSlot}
{children}
</Transition>
{/* 右下悬浮 */}
<div className='fixed right-4 bottom-4'>
<JumpToTopButton />
</div>
</main>
{/* 左下悬浮 */}
<div className='bottom-4 -left-14 fixed justify-end z-40'>
<Live2D />
</div>
{/* 页脚 */}
<Footer {...props} />
{/* 右下悬浮 */}
<div className='fixed right-4 bottom-4'>
<JumpToTopButton />
</div>
{/* 左下悬浮 */}
<div className="bottom-4 -left-14 fixed justify-end z-40">
<Live2D />
</div>
{/* 搜索框 */}
<AlgoliaSearchModal cRef={searchModal} {...props}/>
</div>
</ThemeGlobalNobelium.Provider>
{/* 搜索框 */}
<AlgoliaSearchModal cRef={searchModal} {...props} />
</div>
</ThemeGlobalNobelium.Provider>
)
}
@@ -105,9 +108,7 @@ const LayoutBase = props => {
* @returns
*/
const LayoutIndex = props => {
return (
<LayoutPostList {...props} topSlot={<Announcement {...props} />} />
)
return <LayoutPostList {...props} topSlot={<Announcement {...props} />} />
}
/**
@@ -130,11 +131,15 @@ const LayoutPostList = props => {
}
return (
<>
{topSlot}
{tag && <SearchNavBar {...props} />}
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
</>
<>
{topSlot}
{tag && <SearchNavBar {...props} />}
{siteConfig('POST_LIST_STYLE') === 'page' ? (
<BlogListPage {...props} posts={filteredBlogPosts} />
) : (
<BlogListScroll {...props} posts={filteredBlogPosts} />
)}
</>
)
}
@@ -172,10 +177,16 @@ const LayoutSearch = props => {
filteredBlogPosts = deepClone(posts)
}
return <>
<SearchNavBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
</>
return (
<>
<SearchNavBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? (
<BlogListPage {...props} posts={filteredBlogPosts} />
) : (
<BlogListScroll {...props} posts={filteredBlogPosts} />
)}
</>
)
}
/**
@@ -186,11 +197,17 @@ const LayoutSearch = props => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<>
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
{Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
</div>
</>
<>
<div className='mb-10 pb-20 md:py-12 p-3 min-h-screen w-full'>
{Object.keys(archivePosts).map(archiveTitle => (
<BlogArchiveItem
key={archiveTitle}
archiveTitle={archiveTitle}
archivePosts={archivePosts}
/>
))}
</div>
</>
)
}
@@ -205,34 +222,39 @@ const LayoutSlug = props => {
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 (
<>
<>
{lock && <ArticleLock validPassword={validPassword} />}
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="article-wrapper" className="px-2">
<>
<ArticleInfo post={post} />
<NotionPage post={post} />
<ShareBar post={post} />
<Comment frontMatter={post} />
<ArticleFooter />
</>
</div>}
</>
{!lock && (
<div className='px-2'>
<>
<ArticleInfo post={post} />
<div id='article-wrapper'>
<NotionPage post={post} />
</div>
<ShareBar post={post} />
<Comment frontMatter={post} />
<ArticleFooter />
</>
</div>
)}
</>
)
}
@@ -241,10 +263,8 @@ const LayoutSlug = props => {
* @param {*} props
* @returns
*/
const Layout404 = (props) => {
return <>
404 Not found.
</>
const Layout404 = props => {
return <>404 Not found.</>
}
/**
@@ -252,28 +272,31 @@ const Layout404 = (props) => {
* @param {*} props
* @returns
*/
const LayoutCategoryIndex = (props) => {
const LayoutCategoryIndex = props => {
const { categoryOptions } = props
return (
<>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</>
<>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={
'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
}>
<i className='mr-4 fas fa-folder' />
{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</>
)
}
@@ -282,37 +305,43 @@ const LayoutCategoryIndex = (props) => {
* @param {*} props
* @returns
*/
const LayoutTagIndex = (props) => {
const LayoutTagIndex = props => {
const { tagOptions } = props
return (
<>
<div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return (
<div key={tag.name} className='p-2'>
<Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
<div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</Link>
</div>
)
})}
</div>
</div>
</>
<>
<div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return (
<div key={tag.name} className='p-2'>
<Link
key={tag}
href={`/tag/${encodeURIComponent(tag.name)}`}
passHref
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
<div className='font-light dark:text-gray-400'>
<i className='mr-1 fas fa-tag' />{' '}
{tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
</div>
</Link>
</div>
)
})}
</div>
</div>
</>
)
}
export {
CONFIG as THEME_CONFIG,
LayoutBase,
LayoutIndex,
LayoutSearch,
LayoutArchive,
LayoutSlug,
Layout404,
LayoutPostList,
LayoutArchive,
LayoutBase,
LayoutCategoryIndex,
LayoutTagIndex
LayoutIndex,
LayoutPostList,
LayoutSearch,
LayoutSlug,
LayoutTagIndex,
CONFIG as THEME_CONFIG
}

285
themes/plog/index.js
View File

@@ -1,26 +1,26 @@
import CONFIG from './config'
import { createContext, useContext, useEffect, useState } from 'react'
import Header from './components/Nav'
import { useGlobal } from '@/lib/global'
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 { isBrowser } from '@/lib/utils'
import { Transition } from '@headlessui/react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { createContext, useContext, useEffect, useState } from 'react'
import { ArticleFooter } from './components/ArticleFooter'
import { ArticleInfo } from './components/ArticleInfo'
import { ArticleLock } from './components/ArticleLock'
import BlogArchiveItem from './components/BlogArchiveItem'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import { isBrowser } from '@/lib/utils'
import SearchNavBar from './components/SearchNavBar'
import BlogArchiveItem from './components/BlogArchiveItem'
import { ArticleLock } from './components/ArticleLock'
import NotionPage from '@/components/NotionPage'
import { ArticleInfo } from './components/ArticleInfo'
import Comment from '@/components/Comment'
import { ArticleFooter } from './components/ArticleFooter'
import ShareBar from '@/components/ShareBar'
import Link from 'next/link'
import { Transition } from '@headlessui/react'
import BottomNav from './components/BottomNav'
import Modal from './components/Modal'
import Header from './components/Nav'
import SearchNavBar from './components/SearchNavBar'
import CONFIG from './config'
import { Style } from './style'
import replaceSearchResult from '@/components/Mark'
import { useRouter } from 'next/router'
// 主题全局状态
const ThemeGlobalPlog = createContext()
@@ -52,42 +52,45 @@ const LayoutBase = props => {
}, [router.events])
return (
<ThemeGlobalPlog.Provider value={{ showModal, setShowModal, modalContent, setModalContent }}>
<div id='theme-plog' className={`${siteConfig('FONT_STYLE')} plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen scroll-smooth`} >
<ThemeGlobalPlog.Provider
value={{ showModal, setShowModal, modalContent, setModalContent }}>
<div
id='theme-plog'
className={`${siteConfig('FONT_STYLE')} plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen scroll-smooth`}>
<Style />
<Style/>
{/* 移动端顶部导航栏 */}
<Header {...props} />
{/* 移动端顶部导航栏 */}
<Header {...props} />
{/* 主区 */}
<main
id='out-wrapper'
className={
'relative m-auto flex-grow w-full transition-all pb-16 pt-16 md:pt-0'
}>
<Transition
show={!onLoading}
appear={true}
enter='transition ease-in-out duration-700 transform order-first'
enterFrom='opacity-0 translate-y-16'
enterTo='opacity-100'
leave='transition ease-in-out duration-300 transform'
leaveFrom='opacity-100 translate-y-0'
leaveTo='opacity-0 -translate-y-16'
unmount={false}>
{/* 顶部插槽 */}
{topSlot}
{children}
</Transition>
</main>
{/* 主区 */}
<main id='out-wrapper' className={'relative m-auto flex-grow w-full transition-all pb-16 pt-16 md:pt-0'}>
{/* 弹出框 - 用于放大显示首页图片等作用 */}
<Modal {...props} />
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{/* 顶部插槽 */}
{topSlot}
{children}
</Transition>
</main>
{/* 弹出框 - 用于放大显示首页图片等作用 */}
<Modal {...props}/>
{/* 桌面端底部导航栏 */}
<BottomNav {...props} />
</div>
</ThemeGlobalPlog.Provider >
{/* 桌面端底部导航栏 */}
<BottomNav {...props} />
</div>
</ThemeGlobalPlog.Provider>
)
}
@@ -98,9 +101,7 @@ const LayoutBase = props => {
* @returns
*/
const LayoutIndex = props => {
return (
<LayoutPostList {...props} />
)
return <LayoutPostList {...props} />
}
/**
@@ -110,9 +111,13 @@ const LayoutIndex = props => {
*/
const LayoutPostList = props => {
return (
<>
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</>
<>
{siteConfig('POST_LIST_STYLE') === 'page' ? (
<BlogListPage {...props} />
) : (
<BlogListScroll {...props} />
)}
</>
)
}
@@ -149,11 +154,17 @@ const LayoutSearch = props => {
const LayoutArchive = props => {
const { archivePosts } = props
return (
<>
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
{Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
</div>
</>
<>
<div className='mb-10 pb-20 md:py-12 p-3 min-h-screen w-full'>
{Object.keys(archivePosts).map(archiveTitle => (
<BlogArchiveItem
key={archiveTitle}
archiveTitle={archiveTitle}
archivePosts={archivePosts}
/>
))}
</div>
</>
)
}
@@ -168,34 +179,39 @@ const LayoutSlug = props => {
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 (
<>
<>
{lock && <ArticleLock validPassword={validPassword} />}
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="article-wrapper" className="px-2 my-16 max-w-6xl mx-auto">
<>
<ArticleInfo post={post} />
<NotionPage post={post} />
<ShareBar post={post} />
<Comment frontMatter={post} />
<ArticleFooter />
</>
</div>}
</>
{!lock && (
<div className='px-2 my-16 max-w-6xl mx-auto'>
<>
<ArticleInfo post={post} />
<div id='article-wrapper'>
<NotionPage post={post} />
</div>
<ShareBar post={post} />
<Comment frontMatter={post} />
<ArticleFooter />
</>
</div>
)}
</>
)
}
@@ -204,10 +220,8 @@ const LayoutSlug = props => {
* @param {*} props
* @returns
*/
const Layout404 = (props) => {
return <>
404 Not found.
</>
const Layout404 = props => {
return <>404 Not found.</>
}
/**
@@ -215,28 +229,31 @@ const Layout404 = (props) => {
* @param {*} props
* @returns
*/
const LayoutCategoryIndex = (props) => {
const LayoutCategoryIndex = props => {
const { categoryOptions } = props
return (
<>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</>
<>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={
'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
}>
<i className='mr-4 fas fa-folder' />
{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</>
)
}
@@ -245,37 +262,43 @@ const LayoutCategoryIndex = (props) => {
* @param {*} props
* @returns
*/
const LayoutTagIndex = (props) => {
const LayoutTagIndex = props => {
const { tagOptions } = props
return (
<>
<div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return (
<div key={tag.name} className='p-2'>
<Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
<div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</Link>
</div>
)
})}
</div>
</div>
</>
<>
<div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return (
<div key={tag.name} className='p-2'>
<Link
key={tag}
href={`/tag/${encodeURIComponent(tag.name)}`}
passHref
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
<div className='font-light dark:text-gray-400'>
<i className='mr-1 fas fa-tag' />{' '}
{tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
</div>
</Link>
</div>
)
})}
</div>
</div>
</>
)
}
export {
CONFIG as THEME_CONFIG,
LayoutBase,
LayoutIndex,
LayoutSearch,
LayoutArchive,
LayoutSlug,
Layout404,
LayoutPostList,
LayoutArchive,
LayoutBase,
LayoutCategoryIndex,
LayoutTagIndex
LayoutIndex,
LayoutPostList,
LayoutSearch,
LayoutSlug,
LayoutTagIndex,
CONFIG as THEME_CONFIG
}

10
themes/simple/index.js
View File

@@ -224,9 +224,7 @@ const LayoutSlug = props => {
<>
{lock && <ArticleLock validPassword={validPassword} />}
<div
id='article-wrapper'
className={`px-2 ${fullWidth ? '' : 'xl:max-w-4xl 2xl:max-w-6xl'}`}>
<div className={`px-2 ${fullWidth ? '' : 'xl:max-w-4xl 2xl:max-w-6xl'}`}>
{/* 文章信息 */}
<ArticleInfo post={post} />
@@ -234,8 +232,10 @@ const LayoutSlug = props => {
{/* <AdSlot type={'in-article'} /> */}
<WWAds orientation='horizontal' className='w-full' />
{/* Notion文章主体 */}
{!lock && <NotionPage post={post} />}
<div id='article-wrapper'>
{/* Notion文章主体 */}
{!lock && <NotionPage post={post} />}
</div>
{/* 分享 */}
<ShareBar post={post} />

4
themes/starter/index.js
View File

@@ -143,8 +143,8 @@ const LayoutSlug = props => {
<Banner title={post?.title} description={post?.summary} />
<div className='container grow'>
<div className='flex flex-wrap justify-center -mx-4'>
<div className='w-full p-4'>
<div id='container-inner' className='mx-auto'>
<div id='container-inner' className='w-full p-4'>
<div id='article-wrapper' className='mx-auto'>
<NotionPage {...props} />
</div>
</div>