mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
Merge branch 'main' of https://github.com/tangly1024/NotionNext
This commit is contained in:
@@ -1,2 +1,2 @@
|
||||
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
|
||||
NEXT_PUBLIC_VERSION=3.9.1
|
||||
NEXT_PUBLIC_VERSION=3.9.2
|
||||
|
||||
@@ -136,6 +136,7 @@ function createFlutteringRibbon() {
|
||||
(this._canvas.style.width = '100%'),
|
||||
(this._canvas.style.height = '100%'),
|
||||
(this._canvas.style['z-index'] = '0'),
|
||||
(this._canvas.style['pointer-events'] = 'none'),
|
||||
this._onResize(),
|
||||
(this._context = this._canvas.getContext('2d')),
|
||||
this._context.clearRect(0, 0, this._width, this._height),
|
||||
|
||||
@@ -27,11 +27,15 @@ export async function getGlobalNotionData({
|
||||
// 获取Notion数据
|
||||
const notionPageData = deepClone(await getNotionPageData({ pageId, from }))
|
||||
delete notionPageData.block
|
||||
delete notionPageData.collection
|
||||
delete notionPageData.collectionQuery
|
||||
delete notionPageData.schema
|
||||
delete notionPageData.rawMetadata
|
||||
delete notionPageData.pageIds
|
||||
delete notionPageData.viewIds
|
||||
delete notionPageData.collection
|
||||
delete notionPageData.collectionQuery
|
||||
delete notionPageData.collectionId
|
||||
delete notionPageData.collectionView
|
||||
console.log(notionPageData)
|
||||
return notionPageData
|
||||
}
|
||||
|
||||
@@ -192,12 +196,10 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
|
||||
const collectionQuery = pageRecordMap.collection_query
|
||||
const collectionView = pageRecordMap.collection_view
|
||||
const schema = collection?.schema
|
||||
const tagOptions = getTagOptions(schema)
|
||||
const categoryOptions = getCategoryOptions(schema)
|
||||
|
||||
const viewIds = rawMetadata?.view_ids
|
||||
const collectionData = []
|
||||
const pageIds = getAllPageIds(collectionQuery, collectionId, collectionView, viewIds)
|
||||
const siteInfo = getBlogInfo({ collection, block })
|
||||
if (pageIds?.length === 0) {
|
||||
console.error('获取到的文章列表为空,请检查notion模板', collectionQuery, collection, collectionView, viewIds, pageRecordMap)
|
||||
}
|
||||
@@ -207,15 +209,12 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
|
||||
if (!value) {
|
||||
continue
|
||||
}
|
||||
const properties = (await getPageProperties(id, block, schema, null, tagOptions, siteInfo)) || null
|
||||
const properties = (await getPageProperties(id, block, schema, null, getTagOptions(schema))) || null
|
||||
if (properties) {
|
||||
collectionData.push(properties)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取page作为自定义菜单
|
||||
const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') })
|
||||
|
||||
// 文章计数
|
||||
let postCount = 0
|
||||
const allPages = collectionData.filter(post => {
|
||||
@@ -238,8 +237,10 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
|
||||
})
|
||||
}
|
||||
|
||||
const categories = getAllCategories({ allPages, categoryOptions, sliceCount: BLOG.PREVIEW_CATEGORY_COUNT })
|
||||
const tags = getAllTags({ allPages, sliceCount: BLOG.PREVIEW_TAG_COUNT, tagOptions })
|
||||
const categoryOptions = getAllCategories({ allPages, categoryOptions: getCategoryOptions(schema), sliceCount: BLOG.PREVIEW_CATEGORY_COUNT })
|
||||
const tagOptions = getAllTags({ allPages, sliceCount: BLOG.PREVIEW_TAG_COUNT, tagOptions: getTagOptions(schema) })
|
||||
const siteInfo = getBlogInfo({ collection, block })
|
||||
const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') })
|
||||
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
|
||||
|
||||
return {
|
||||
@@ -258,8 +259,6 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
|
||||
customNav,
|
||||
postCount,
|
||||
pageIds,
|
||||
categories,
|
||||
tags,
|
||||
latestPosts
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import { defaultMapImageUrl } from 'react-notion-x'
|
||||
// import { createHash } from 'crypto'
|
||||
import md5 from 'js-md5'
|
||||
|
||||
export default async function getPageProperties(id, block, schema, authToken, tagOptions, siteInfo) {
|
||||
export default async function getPageProperties(id, block, schema, authToken, tagOptions) {
|
||||
const rawProperties = Object.entries(block?.[id]?.value?.properties || [])
|
||||
const excludeProperties = ['date', 'select', 'multi_select', 'person']
|
||||
const value = block[id]?.value
|
||||
@@ -89,7 +89,7 @@ export default async function getPageProperties(id, block, schema, authToken, ta
|
||||
properties.lastEditedTime = formatDate(new Date(value?.last_edited_time).toString(), BLOG.LANG)
|
||||
properties.fullWidth = value.format?.page_full_width ?? false
|
||||
properties.pageIcon = getImageUrl(block[id].value?.format?.page_icon, block[id].value) ?? ''
|
||||
properties.page_cover = getImageUrl(block[id].value?.format?.page_cover, block[id].value) ?? siteInfo?.pageCover
|
||||
properties.page_cover = getImageUrl(block[id].value?.format?.page_cover, block[id].value) ?? ''
|
||||
properties.content = value.content ?? []
|
||||
properties.password = properties.password
|
||||
? md5(properties.slug + properties.password)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "notion-next",
|
||||
"version": "3.9.1",
|
||||
"version": "3.9.2",
|
||||
"homepage": "https://github.com/tangly1024/NotionNext.git",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
|
||||
@@ -58,10 +58,10 @@ export async function getStaticProps({ params: { category } }) {
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const from = 'category-paths'
|
||||
const { categories } = await getGlobalNotionData({ from })
|
||||
const { categoryOptions } = await getGlobalNotionData({ from })
|
||||
return {
|
||||
paths: Object.keys(categories).map(category => ({
|
||||
params: { category: categories[category]?.name }
|
||||
paths: Object.keys(categoryOptions).map(category => ({
|
||||
params: { category: categoryOptions[category]?.name }
|
||||
})),
|
||||
fallback: true
|
||||
}
|
||||
|
||||
@@ -53,10 +53,10 @@ export async function getStaticProps({ params: { category, page } }) {
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const from = 'category-paths'
|
||||
const { categories, allPages } = await getGlobalNotionData({ from })
|
||||
const { categoryOptions, allPages } = await getGlobalNotionData({ from })
|
||||
const paths = []
|
||||
|
||||
categories?.forEach(category => {
|
||||
categoryOptions?.forEach(category => {
|
||||
// 过滤状态类型
|
||||
const categoryPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published').filter(post => post && post.category && post.category.includes(category.name))
|
||||
// 处理文章页数
|
||||
|
||||
@@ -2,7 +2,6 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
|
||||
import React from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import * as ThemeMap from '@/themes'
|
||||
import { getAllCategories } from '@/lib/notion/getAllCategories'
|
||||
import BLOG from '@/blog.config'
|
||||
|
||||
/**
|
||||
@@ -27,8 +26,6 @@ export default function Category(props) {
|
||||
|
||||
export async function getStaticProps() {
|
||||
const props = await getGlobalNotionData({ from: 'category-index-props' })
|
||||
props.categories = getAllCategories({ allPages: props.allPages, categoryOptions: props.categoryOptions, sliceCount: 0 })
|
||||
delete props.categoryOptions
|
||||
delete props.allPages
|
||||
return {
|
||||
props,
|
||||
|
||||
@@ -63,8 +63,8 @@ function getTagNames(tags) {
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const from = 'tag-static-path'
|
||||
const { tags } = await getGlobalNotionData({ from })
|
||||
const tagNames = getTagNames(tags)
|
||||
const { tagOptions } = await getGlobalNotionData({ from })
|
||||
const tagNames = getTagNames(tagOptions)
|
||||
|
||||
return {
|
||||
paths: Object.keys(tagNames).map(index => ({
|
||||
|
||||
@@ -44,9 +44,9 @@ export async function getStaticProps({ params: { tag, page } }) {
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const from = 'tag-page-static-path'
|
||||
const { tags, allPages } = await getGlobalNotionData({ from })
|
||||
const { tagOptions, allPages } = await getGlobalNotionData({ from })
|
||||
const paths = []
|
||||
tags?.forEach(tag => {
|
||||
tagOptions?.forEach(tag => {
|
||||
// 过滤状态类型
|
||||
const tagPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published').filter(post => post && post.tags && post.tags.includes(tag.name))
|
||||
// 处理文章页数
|
||||
|
||||
@@ -2,7 +2,6 @@ import { getGlobalNotionData } from '@/lib/notion/getNotionData'
|
||||
import React from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import * as ThemeMap from '@/themes'
|
||||
import { getAllTags } from '@/lib/notion'
|
||||
import BLOG from '@/blog.config'
|
||||
|
||||
/**
|
||||
@@ -28,8 +27,6 @@ const TagIndex = props => {
|
||||
export async function getStaticProps() {
|
||||
const from = 'tag-index-props'
|
||||
const props = await getGlobalNotionData({ from })
|
||||
props.tags = getAllTags({ allPages: props.allPages, sliceCount: 0, tagOptions: props.tagOptions })
|
||||
delete props.tagOptions
|
||||
delete props.allPages
|
||||
return {
|
||||
props,
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = (props) => {
|
||||
const { categories } = props
|
||||
|
||||
export const LayoutCategoryIndex = props => {
|
||||
const { categoryOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categories && categories.map(category => {
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
|
||||
@@ -2,12 +2,12 @@ import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = (props) => {
|
||||
const { tags } = props
|
||||
const { tagOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div>
|
||||
<div id='tags-list' className='duration-200 flex flex-wrap'>
|
||||
{tags.map(tag => {
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className='p-2'>
|
||||
<Link
|
||||
@@ -21,9 +21,9 @@ export const LayoutTagIndex = (props) => {
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div> </LayoutBase>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@ export const BlogListPage = props => {
|
||||
const showNext = page < totalPage
|
||||
const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
|
||||
|
||||
console.log('p', posts)
|
||||
return (
|
||||
<div className="w-full md:pr-12 mb-12">
|
||||
|
||||
@@ -32,7 +33,7 @@ export const BlogListPage = props => {
|
||||
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
|
||||
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
|
||||
<span className="font-bold mx-1"> | </span>
|
||||
<a href="#" className="text-gray-700 dark:text-gray-300">{p.category}</a>
|
||||
<a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
|
||||
{/* <span className="font-bold mx-1"> | </span> */}
|
||||
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
|
||||
</div>
|
||||
@@ -65,5 +66,5 @@ export const BlogListPage = props => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
|
||||
|
||||
export const SideBar = (props) => {
|
||||
const { locale } = useGlobal()
|
||||
const { latestPosts, categories } = props
|
||||
const { latestPosts, categoryOptions } = props
|
||||
return (
|
||||
<div className="w-full md:w-64 sticky top-8">
|
||||
|
||||
@@ -16,16 +16,16 @@ export const SideBar = (props) => {
|
||||
|
||||
<div className="p-4">
|
||||
<ul className="list-reset leading-normal">
|
||||
{categories?.map(category => {
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
legacyBehavior>
|
||||
<li> <a href="#" className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
|
||||
<li> <a href={`/category/${category.name}`} className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -40,9 +40,9 @@ export const SideBar = (props) => {
|
||||
{latestPosts?.map(p => {
|
||||
return (
|
||||
<Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
|
||||
<li> <a href="#" className="text-gray-darkest text-sm">{p.title}</a></li>
|
||||
<li> <a href={`/${p.slug}`} className="text-gray-darkest text-sm">{p.title}</a></li>
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -61,5 +61,5 @@ export const SideBar = (props) => {
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = (props) => {
|
||||
const { locale } = useGlobal()
|
||||
const { categories } = props
|
||||
const { categoryOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
|
||||
@@ -12,7 +12,7 @@ export const LayoutCategoryIndex = (props) => {
|
||||
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categories && categories.map(category => {
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
|
||||
@@ -4,12 +4,12 @@ import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = (props) => {
|
||||
const { locale } = useGlobal()
|
||||
const { tags } = props
|
||||
const { tagOptions } = props
|
||||
return <LayoutBase {...props} >
|
||||
<div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
|
||||
<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'>
|
||||
{ tags.map(tag => {
|
||||
{ tagOptions.map(tag => {
|
||||
return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
|
||||
}) }
|
||||
</div>
|
||||
|
||||
@@ -9,9 +9,9 @@ import { useRouter } from 'next/router'
|
||||
import DarkModeButton from '@/components/DarkModeButton'
|
||||
|
||||
function AsideLeft (props) {
|
||||
const { tags, currentTag, categories, currentCategory, post, slot, siteInfo } = props
|
||||
const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo } = props
|
||||
const router = useRouter()
|
||||
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block relative z-10'>
|
||||
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-10'>
|
||||
<Logo {...props}/>
|
||||
|
||||
<section className='flex flex-col text-gray-600'>
|
||||
@@ -31,12 +31,12 @@ function AsideLeft (props) {
|
||||
|
||||
{router.asPath !== '/tag' && <section className='flex flex-col'>
|
||||
<hr className='w-12 my-8 ' />
|
||||
<GroupTag tags={tags} currentTag={currentTag}/>
|
||||
<GroupTag tags={tagOptions} currentTag={currentTag}/>
|
||||
</section>}
|
||||
|
||||
{router.asPath !== '/category' && <section className='flex flex-col'>
|
||||
<hr className='w-12 my-8 ' />
|
||||
<GroupCategory categories={categories} currentCategory={currentCategory}/>
|
||||
<GroupCategory categories={categoryOptions} currentCategory={currentCategory}/>
|
||||
</section>}
|
||||
|
||||
<section className='flex flex-col'>
|
||||
|
||||
@@ -4,8 +4,14 @@ import React from 'react'
|
||||
import CONFIG_FUKA from '../config_fuka'
|
||||
import Card from './Card'
|
||||
|
||||
const BlogCard = ({ post, showSummary }) => {
|
||||
const BlogCard = ({ post, showSummary, siteInfo }) => {
|
||||
const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
|
||||
// matery 主题默认强制显示图片
|
||||
if (post && !post.page_cover) {
|
||||
post.page_cover = siteInfo?.pageCover
|
||||
}
|
||||
const showPageCover = CONFIG_FUKA.POST_LIST_COVER && post?.page_cover
|
||||
|
||||
return (
|
||||
<Card className="w-full lg:max-w-sm p-2 h-full overflow-auto">
|
||||
<div
|
||||
@@ -30,14 +36,14 @@ const BlogCard = ({ post, showSummary }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{CONFIG_FUKA.POST_LIST_COVER && post?.page_cover && (
|
||||
{showPageCover && (
|
||||
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
|
||||
<div className="h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={post?.page_cover}
|
||||
alt={post.title}
|
||||
className="hover:scale-125 transform duration-500"
|
||||
className="w-full hover:scale-125 transform duration-500"
|
||||
></img>
|
||||
{/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
|
||||
</div>
|
||||
@@ -45,7 +51,7 @@ const BlogCard = ({ post, showSummary }) => {
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogCard
|
||||
|
||||
@@ -12,7 +12,7 @@ import PaginationSimple from './PaginationSimple'
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const BlogListPage = ({ page = 1, posts = [], postCount }) => {
|
||||
const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
|
||||
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
|
||||
const showNext = page < totalPage
|
||||
const [colCount, changeCol] = useState(1)
|
||||
@@ -44,7 +44,7 @@ const BlogListPage = ({ page = 1, posts = [], postCount }) => {
|
||||
<div id="container" style={{ columnCount: colCount }}>
|
||||
{posts?.map(post => (
|
||||
<div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
|
||||
<BlogCard key={post.id} post={post} />
|
||||
<BlogCard key={post.id} post={post} siteInfo={siteInfo} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ import throttle from 'lodash.throttle'
|
||||
* @constructor
|
||||
*/
|
||||
const BlogListScroll = props => {
|
||||
const { posts = [] } = props
|
||||
const { posts = [], siteInfo } = props
|
||||
const [colCount, changeCol] = React.useState(1)
|
||||
const { locale } = useGlobal()
|
||||
|
||||
@@ -73,15 +73,13 @@ const BlogListScroll = props => {
|
||||
<div style={{ columnCount: colCount }}>
|
||||
{postsToShow?.map(post => (
|
||||
<div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
|
||||
<BlogCard key={post.id} post={post} />
|
||||
<BlogCard key={post.id} post={post} siteInfo={siteInfo} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
onClick={handleGetMore}
|
||||
className="w-full my-4 py-4 text-center cursor-pointer "
|
||||
>
|
||||
<div className="w-full my-4 py-4 text-center cursor-pointer "
|
||||
onClick={handleGetMore}>
|
||||
{' '}
|
||||
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import Card from './components/Card'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = props => {
|
||||
const { categories } = props
|
||||
const { categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
@@ -14,7 +14,7 @@ export const LayoutCategoryIndex = props => {
|
||||
{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id="category-list" className="duration-200 flex flex-wrap mx-8">
|
||||
{categories.map(category => {
|
||||
{categoryOptions.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
|
||||
@@ -6,7 +6,7 @@ import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const LayoutTag = (props) => {
|
||||
const tag = props.tags.find((t) => {
|
||||
const tag = props.tagOptions.find((t) => {
|
||||
return t.name === props.tag
|
||||
})
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import TagItemMini from './components/TagItemMini'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = props => {
|
||||
const { tags } = props
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
@@ -14,7 +14,7 @@ export const LayoutTagIndex = props => {
|
||||
{locale.COMMON.TAGS}:
|
||||
</div>
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap ml-8">
|
||||
{tags.map(tag => {
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
|
||||
@@ -7,7 +7,7 @@ import NotionPage from '@/components/NotionPage'
|
||||
|
||||
const BlogPostCard = ({ post, showSummary, index }) => {
|
||||
const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
|
||||
const showPageCover = CONFIG_HEXO.POST_LIST_COVER
|
||||
const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.page_cover
|
||||
return (
|
||||
<div
|
||||
key={post.id}
|
||||
|
||||
@@ -4,11 +4,11 @@ import { useGlobal } from '@/lib/global'
|
||||
import CONFIG_HEXO from '../config_hexo'
|
||||
|
||||
const MenuGroupCard = (props) => {
|
||||
const { postCount, categories, tags } = props
|
||||
const { postCount, categoryOptions, tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
const archiveSlot = <div className='text-center'>{postCount}</div>
|
||||
const categorySlot = <div className='text-center'>{categories?.length}</div>
|
||||
const tagSlot = <div className='text-center'>{tags?.length}</div>
|
||||
const categorySlot = <div className='text-center'>{categoryOptions?.length}</div>
|
||||
const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
|
||||
|
||||
const links = [
|
||||
{ name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
|
||||
@@ -34,12 +34,12 @@ const MenuGroupCard = (props) => {
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
)
|
||||
}
|
||||
export default MenuGroupCard
|
||||
|
||||
@@ -6,7 +6,7 @@ import Link from 'next/link'
|
||||
import HeaderArticle from './components/HeaderArticle'
|
||||
|
||||
export const LayoutCategory = props => {
|
||||
const { category, categories } = props
|
||||
const { category, categoryOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
|
||||
@@ -15,7 +15,7 @@ export const LayoutCategory = props => {
|
||||
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className='flex justify-center flex-wrap'>
|
||||
{categories.map(e => {
|
||||
{categoryOptions.map(e => {
|
||||
const selected = e.name === category
|
||||
return (
|
||||
<Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
|
||||
|
||||
@@ -3,7 +3,7 @@ import HeaderArticle from './components/HeaderArticle'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = props => {
|
||||
const { categories } = props
|
||||
const { categoryOptions } = props
|
||||
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
@@ -13,7 +13,7 @@ export const LayoutCategoryIndex = props => {
|
||||
<div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
|
||||
|
||||
<div className='flex justify-center flex-wrap'>
|
||||
{categories.map(e => {
|
||||
{categoryOptions.map(e => {
|
||||
return (
|
||||
<Link key={e.name} href={`/category/${e.name}`} passHref legacyBehavior>
|
||||
<div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
|
||||
|
||||
@@ -8,7 +8,7 @@ import { useGlobal } from '@/lib/global'
|
||||
import TagItemMiddle from './components/TagItemMiddle'
|
||||
|
||||
export const LayoutTag = (props) => {
|
||||
const { tags, tag } = props
|
||||
const { tagOptions, tag } = props
|
||||
|
||||
const { locale } = useGlobal()
|
||||
|
||||
@@ -23,7 +23,7 @@ export const LayoutTag = (props) => {
|
||||
</div>
|
||||
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
|
||||
{tags.map(e => {
|
||||
{tagOptions.map(e => {
|
||||
const selected = tag === e.name
|
||||
return (
|
||||
<div key={e.id} className="p-2">
|
||||
|
||||
@@ -4,7 +4,7 @@ import TagItemMiddle from './components/TagItemMiddle'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = props => {
|
||||
const { tags } = props
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
|
||||
@@ -17,7 +17,7 @@ export const LayoutTagIndex = props => {
|
||||
</div>
|
||||
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap justify-center pb-12">
|
||||
{tags.map(tag => {
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMiddle key={tag.name} tag={tag} />
|
||||
|
||||
@@ -4,8 +4,13 @@ import React from 'react'
|
||||
import TagItemMini from './TagItemMini'
|
||||
import CONFIG_MATERY from '../config_matery'
|
||||
|
||||
const BlogPostCard = ({ post, showSummary }) => {
|
||||
const BlogPostCard = ({ post, showSummary, siteInfo }) => {
|
||||
const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
|
||||
// matery 主题默认强制显示图片
|
||||
if (post && !post.page_cover) {
|
||||
post.page_cover = siteInfo.pageCover
|
||||
}
|
||||
const showPageCover = CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover
|
||||
return (
|
||||
<div
|
||||
data-aos="zoom-in"
|
||||
@@ -19,7 +24,7 @@ const BlogPostCard = ({ post, showSummary }) => {
|
||||
<div key={post.id} className="flex flex-col h-96 justify-between">
|
||||
|
||||
{/* 头部图片 填充卡片 */}
|
||||
{CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover && (
|
||||
{showPageCover && (
|
||||
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
|
||||
<div className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
|
||||
@@ -11,7 +11,7 @@ import PaginationSimple from './PaginationSimple'
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
|
||||
const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
|
||||
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
|
||||
const showPagination = postCount >= BLOG.POSTS_PER_PAGE
|
||||
if (!posts || posts.length === 0 || page > totalPage) {
|
||||
@@ -23,7 +23,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
|
||||
{/* 文章列表 */}
|
||||
<div className="px-4 pt-4 xl:columns-3 md:columns-2 pb-24" >
|
||||
{posts.map(post => (
|
||||
<BlogPostCard key={post.id} post={post} />
|
||||
<BlogPostCard key={post.id} post={post} siteInfo={siteInfo} />
|
||||
))}
|
||||
</div>
|
||||
{showPagination && <PaginationSimple page={page} totalPage={totalPage} />}
|
||||
|
||||
@@ -14,7 +14,7 @@ import { getListByPage } from '@/lib/utils'
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MATERY.POST_LIST_SUMMARY }) => {
|
||||
const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MATERY.POST_LIST_SUMMARY, siteInfo }) => {
|
||||
const postsPerPage = BLOG.POSTS_PER_PAGE
|
||||
const [page, updatePage] = React.useState(1)
|
||||
const postsToShow = getListByPage(posts, page, postsPerPage)
|
||||
@@ -58,7 +58,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MA
|
||||
{/* 文章列表 */}
|
||||
<div className='flex flex-wrap space-y-1 lg:space-y-4 px-2'>
|
||||
{postsToShow.map(post => (
|
||||
<BlogPostCard key={post.id} post={post} showSummary={showSummary}/>
|
||||
<BlogPostCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = (props) => {
|
||||
const { categories } = props
|
||||
const { categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
@@ -12,7 +12,7 @@ export const LayoutCategoryIndex = (props) => {
|
||||
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categories && categories.map(category => {
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
|
||||
@@ -3,7 +3,7 @@ import TagItemMini from './components/TagItemMini'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = props => {
|
||||
const { tags } = props
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
@@ -13,7 +13,7 @@ export const LayoutTagIndex = props => {
|
||||
{locale.COMMON.TAGS}:
|
||||
</div>
|
||||
<div id="tags-list" className="duration-200 flex flex-wrap">
|
||||
{tags.map(tag => {
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className="p-2">
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
|
||||
@@ -6,10 +6,10 @@ import BlogPostListPage from './components/BlogPostListPage'
|
||||
import BLOG from '@/blog.config'
|
||||
|
||||
export const LayoutCategory = (props) => {
|
||||
const { category, categories } = props
|
||||
const { category, categoryOptions } = props
|
||||
return <LayoutBase currentCategory={category} {...props}>
|
||||
<StickyBar>
|
||||
<CategoryList currentCategory={category} categories={categories} />
|
||||
<CategoryList currentCategory={category} categoryOptions={categoryOptions} />
|
||||
</StickyBar>
|
||||
<div className='md:mt-8'>
|
||||
{BLOG.POST_LIST_STYLE !== 'page'
|
||||
|
||||
@@ -3,7 +3,7 @@ import LayoutBase from './LayoutBase'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const LayoutCategoryIndex = (props) => {
|
||||
const { allPosts, categories } = props
|
||||
const { allPosts, categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<LayoutBase totalPosts={allPosts} {...props}>
|
||||
@@ -12,7 +12,7 @@ export const LayoutCategoryIndex = (props) => {
|
||||
<i className='mr-4 fas faTh' />{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categories.map(category => {
|
||||
{categoryOptions.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
@@ -24,10 +24,10 @@ export const LayoutCategoryIndex = (props) => {
|
||||
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -6,11 +6,11 @@ import BlogPostListPage from './components/BlogPostListPage'
|
||||
import BLOG from '@/blog.config'
|
||||
|
||||
export const LayoutTag = (props) => {
|
||||
const { tags, tag } = props
|
||||
const { tagOptions, tag } = props
|
||||
|
||||
return <LayoutBase currentTag={tag} {...props}>
|
||||
<StickyBar>
|
||||
<TagList tags={tags} currentTag={tag} />
|
||||
<TagList tagOptions={tagOptions} currentTag={tag} />
|
||||
</StickyBar>
|
||||
<div className='md:mt-8'>
|
||||
{BLOG.POST_LIST_STYLE !== 'page'
|
||||
|
||||
@@ -3,13 +3,13 @@ import LayoutBase from './LayoutBase'
|
||||
import TagItem from './components/TagItem'
|
||||
|
||||
export const LayoutTagIndex = (props) => {
|
||||
const { tags } = props
|
||||
const { tagOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
return <LayoutBase {...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='fas fa-tags mr-4'/>{locale.COMMON.TAGS}:</div>
|
||||
<div id='tags-list' className='duration-200 flex flex-wrap'>
|
||||
{ tags.map(tag => {
|
||||
{ tagOptions.map(tag => {
|
||||
return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
|
||||
}) }
|
||||
</div>
|
||||
|
||||
@@ -2,16 +2,16 @@ import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
|
||||
const CategoryList = ({ currentCategory, categories }) => {
|
||||
if (!categories) {
|
||||
const CategoryList = ({ currentCategory, categoryOptions }) => {
|
||||
const { locale } = useGlobal()
|
||||
if (!categoryOptions) {
|
||||
return <></>
|
||||
}
|
||||
const { locale } = useGlobal()
|
||||
|
||||
return (
|
||||
<ul className='flex py-1 space-x-3'>
|
||||
<li className='w-16 py-2 dark:text-gray-200 whitespace-nowrap'>{locale.COMMON.CATEGORY}</li>
|
||||
{categories.map(category => {
|
||||
{categoryOptions.map(category => {
|
||||
const selected = category.name === currentCategory
|
||||
return (
|
||||
<Link
|
||||
@@ -32,10 +32,10 @@ const CategoryList = ({ currentCategory, categories }) => {
|
||||
</a>
|
||||
</li>
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default CategoryList
|
||||
|
||||
@@ -7,13 +7,13 @@ import TagItem from './TagItem'
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const TagList = ({ tags, currentTag }) => {
|
||||
if (!tags) {
|
||||
const TagList = ({ tagOptions, currentTag }) => {
|
||||
if (!tagOptions) {
|
||||
return <></>
|
||||
}
|
||||
return <ul className='flex py-1 space-x-3'>
|
||||
<li className='w-20 py-2 dark:text-gray-200 whitespace-nowrap'>标签:</li>
|
||||
{tags.map(tag => {
|
||||
{tagOptions.map(tag => {
|
||||
const selected = tag.name === currentTag
|
||||
return <TagItem key={tag.name} tag={tag} selected={selected}/>
|
||||
})}
|
||||
|
||||
@@ -16,7 +16,7 @@ const LayoutBase = props => {
|
||||
const fullWidth = post?.fullWidth ?? false
|
||||
|
||||
return (
|
||||
<div className='nobelium dark:text-gray-300 w-full bg-white dark:bg-black min-h-screen'>
|
||||
<div className='nobelium relative dark:text-gray-300 w-full bg-white dark:bg-black min-h-screen'>
|
||||
<CommonHead meta={meta} />
|
||||
|
||||
{/* 顶部导航栏 */}
|
||||
|
||||
@@ -2,12 +2,12 @@ import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = (props) => {
|
||||
const { categories } = props
|
||||
const { categoryOptions } = props
|
||||
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categories && categories.map(category => {
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
@@ -19,9 +19,9 @@ export const LayoutCategoryIndex = (props) => {
|
||||
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,12 +2,12 @@ import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = (props) => {
|
||||
const { tags } = props
|
||||
const { tagOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div>
|
||||
<div id='tags-list' className='duration-200 flex flex-wrap'>
|
||||
{tags.map(tag => {
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className='p-2'>
|
||||
<Link
|
||||
@@ -21,9 +21,9 @@ export const LayoutTagIndex = (props) => {
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div> </LayoutBase>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user