mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-23 07:26:47 +00:00
配置文件整体重构
This commit is contained in:
@@ -6,13 +6,13 @@ const CategoryGroup = props => {
|
||||
const { currentCategory, categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
if (!categoryOptions || categoryOptions.length === 0) return <></>
|
||||
const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
|
||||
const categoryCount = siteConfig('MOVIE_PREVIEW_CATEGORY_COUNT')
|
||||
const categories = categoryOptions.slice(0, categoryCount)
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h2 className="text-2xl dark:text-white">{locale.COMMON.CATEGORY}</h2>
|
||||
<div id="category-list" className="dark:border-gray-600 flex flex-col">
|
||||
<h2 className='text-2xl dark:text-white'>{locale.COMMON.CATEGORY}</h2>
|
||||
<div id='category-list' className='dark:border-gray-600 flex flex-col'>
|
||||
{categories.map(category => {
|
||||
const selected = currentCategory === category.name
|
||||
return (
|
||||
@@ -25,8 +25,7 @@ const CategoryGroup = props => {
|
||||
? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
|
||||
: 'dark:text-green-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
|
||||
' w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'
|
||||
}
|
||||
>
|
||||
}>
|
||||
<i
|
||||
className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`}
|
||||
/>
|
||||
|
||||
@@ -9,6 +9,7 @@ const CONFIG = {
|
||||
MOVIE_MENU_SEARCH: true, // 显示搜索
|
||||
MOVIE_HOME_BACKGROUND: false, // 首页是否显示背景图, 默认关闭
|
||||
|
||||
MOVIE_PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量,0为不限制
|
||||
MOVIE_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
|
||||
MOVIE_VIDEO_COMBINE: true, // 聚合视频,开启后一篇文章内的多个含caption的视频会被合并到文章开头,并展示分集按钮
|
||||
MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE: false, // 即使只有一集也显示集数切换按钮
|
||||
|
||||
@@ -3,28 +3,34 @@ import Link from 'next/link'
|
||||
|
||||
const CategoryGroup = ({ currentCategory, categories }) => {
|
||||
if (!categories || categories.length === 0) return <></>
|
||||
const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
|
||||
const categoryCount = siteConfig('NEXT_PREVIEW_CATEGORY_COUNT')
|
||||
const categoryOptions = categories.slice(0, categoryCount)
|
||||
return <>
|
||||
<div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
|
||||
{categoryOptions.map(category => {
|
||||
const selected = currentCategory === category.name
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
className={(selected
|
||||
? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
|
||||
: 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
|
||||
' text-sm w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'}>
|
||||
|
||||
<i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`} />{category.name}({category.count})
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>;
|
||||
return (
|
||||
<>
|
||||
<div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
|
||||
{categoryOptions.map(category => {
|
||||
const selected = currentCategory === category.name
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
className={
|
||||
(selected
|
||||
? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
|
||||
: 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
|
||||
' text-sm w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'
|
||||
}>
|
||||
<i
|
||||
className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`}
|
||||
/>
|
||||
{category.name}({category.count})
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CategoryGroup
|
||||
|
||||
@@ -11,16 +11,14 @@ import TagItemMini from './TagItemMini'
|
||||
const TagGroups = ({ tags, currentTag }) => {
|
||||
if (!tags || tags.length === 0) return <></>
|
||||
|
||||
const tagsCount = siteConfig('PREVIEW_TAG_COUNT')
|
||||
const tagsCount = siteConfig('NEXT_PREVIEW_TAG_COUNT')
|
||||
const tagOptions = tags.slice(0, tagsCount)
|
||||
return (
|
||||
<div id='tags-group' className='dark:border-gray-600 w-66 space-y-2'>
|
||||
{
|
||||
tagOptions.map(tag => {
|
||||
const selected = tag.name === currentTag
|
||||
return <TagItemMini key={tag.name} tag={tag} selected={selected} />
|
||||
})
|
||||
}
|
||||
{tagOptions.map(tag => {
|
||||
const selected = tag.name === currentTag
|
||||
return <TagItemMini key={tag.name} tag={tag} selected={selected} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
const CONFIG = {
|
||||
|
||||
NEXT_HOME_BANNER: true, // 首页是否显示大图及标语 [true,false]
|
||||
NEXT_HOME_BANNER_STRINGS: ['Hi,我是一个程序员', 'Hi,我是一个打工人', 'Hi,我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
|
||||
NEXT_HOME_BANNER_STRINGS: [
|
||||
'Hi,我是一个程序员',
|
||||
'Hi,我是一个打工人',
|
||||
'Hi,我是一个干饭人',
|
||||
'欢迎来到我的博客🎉'
|
||||
], // 首页大图标语文字
|
||||
|
||||
NEXT_NAV_TYPE: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部并始终显示、固定屏幕顶部且滚动时隐藏,不固定屏幕顶部
|
||||
|
||||
@@ -9,6 +13,8 @@ const CONFIG = {
|
||||
NEXT_POST_LIST_PREVIEW: true, // 显示文章预览
|
||||
NEXT_POST_LIST_SUMMARY: false, // 显示用户自定义摘要,有预览时优先只展示预览
|
||||
|
||||
NEXT_PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量,0为不限制
|
||||
NEXT_PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量,0为不限制
|
||||
NEXT_POST_HEADER_IMAGE_VISIBLE: false, // 文章详情页是否显示封面图
|
||||
|
||||
// 右侧组件
|
||||
@@ -33,7 +39,6 @@ const CONFIG = {
|
||||
NEXT_ARTICLE_RELATE_POSTS: true, // 相关文章推荐
|
||||
NEXT_ARTICLE_COPYRIGHT: true, // 文章版权声明
|
||||
NEXT_ARTICLE_INFO: true // 显示文章信息
|
||||
|
||||
}
|
||||
|
||||
export default CONFIG
|
||||
|
||||
@@ -10,7 +10,7 @@ export const BlogListPage = props => {
|
||||
const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
|
||||
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
|
||||
|
||||
const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
|
||||
const showPageCover = siteConfig('PHOTO_POST_LIST_COVER', null, CONFIG)
|
||||
if (!posts || posts.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@ export const BlogListScroll = props => {
|
||||
}
|
||||
}, 500)
|
||||
)
|
||||
const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
|
||||
const showPageCover = siteConfig('PHOTO_POST_LIST_COVER', null, CONFIG)
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', scrollTrigger)
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function BlogRecommend(props) {
|
||||
const { recommendPosts, siteInfo } = props
|
||||
const { locale } = useGlobal()
|
||||
if (
|
||||
!siteConfig('MOVIE_ARTICLE_RECOMMEND', null, CONFIG) ||
|
||||
!siteConfig('PHOTO_ARTICLE_RECOMMEND', null, CONFIG) ||
|
||||
!recommendPosts ||
|
||||
recommendPosts.length === 0
|
||||
) {
|
||||
|
||||
@@ -6,13 +6,13 @@ const CategoryGroup = props => {
|
||||
const { currentCategory, categoryOptions } = props
|
||||
const { locale } = useGlobal()
|
||||
if (!categoryOptions || categoryOptions.length === 0) return <></>
|
||||
const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
|
||||
const categoryCount = siteConfig('PHOTO_PREVIEW_CATEGORY_COUNT')
|
||||
const categories = categoryOptions.slice(0, categoryCount)
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h2 className="text-2xl dark:text-white">{locale.COMMON.CATEGORY}</h2>
|
||||
<div id="category-list" className="dark:border-gray-600 flex flex-col">
|
||||
<h2 className='text-2xl dark:text-white'>{locale.COMMON.CATEGORY}</h2>
|
||||
<div id='category-list' className='dark:border-gray-600 flex flex-col'>
|
||||
{categories.map(category => {
|
||||
const selected = currentCategory === category.name
|
||||
return (
|
||||
@@ -25,8 +25,7 @@ const CategoryGroup = props => {
|
||||
? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
|
||||
: 'dark:text-green-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
|
||||
' w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'
|
||||
}
|
||||
>
|
||||
}>
|
||||
<i
|
||||
className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`}
|
||||
/>
|
||||
|
||||
@@ -8,7 +8,7 @@ import { useGlobal } from '@/lib/global'
|
||||
*/
|
||||
export const HomeBackgroundImage = props => {
|
||||
const { siteInfo } = useGlobal()
|
||||
const background = siteConfig('MOVIE_HOME_BACKGROUND')
|
||||
const background = siteConfig('PHOTO_HOME_BACKGROUND')
|
||||
if (!background) {
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -29,21 +29,21 @@ export default function MenuHierarchical(props) {
|
||||
icon: 'fa-solid fa-house',
|
||||
name: locale.NAV.INDEX,
|
||||
href: '/',
|
||||
show: siteConfig('MOVIE_MENU_INDEX', null, CONFIG)
|
||||
show: siteConfig('PHOTO_MENU_INDEX', null, CONFIG)
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: 'fas fa-search',
|
||||
name: locale.NAV.SEARCH,
|
||||
href: '/search',
|
||||
show: siteConfig('MOVIE_MENU_SEARCH', null, CONFIG)
|
||||
show: siteConfig('PHOTO_MENU_SEARCH', null, CONFIG)
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: 'fas fa-archive',
|
||||
name: locale.NAV.ARCHIVE,
|
||||
href: '/archive',
|
||||
show: siteConfig('MOVIE_MENU_ARCHIVE', null, CONFIG)
|
||||
show: siteConfig('PHOTO_MENU_ARCHIVE', null, CONFIG)
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -3,16 +3,17 @@
|
||||
*/
|
||||
const CONFIG = {
|
||||
// 菜单配置
|
||||
MOVIE_MENU_CATEGORY: true, // 显示分类
|
||||
MOVIE_MENU_TAG: true, // 显示标签
|
||||
MOVIE_MENU_ARCHIVE: true, // 显示归档
|
||||
MOVIE_MENU_SEARCH: true, // 显示搜索
|
||||
MOVIE_HOME_BACKGROUND: false, // 首页是否显示背景图, 默认关闭
|
||||
PHOTO_MENU_CATEGORY: true, // 显示分类
|
||||
PHOTO_MENU_TAG: true, // 显示标签
|
||||
PHOTO_MENU_ARCHIVE: true, // 显示归档
|
||||
PHOTO_MENU_SEARCH: true, // 显示搜索
|
||||
PHOTO_HOME_BACKGROUND: false, // 首页是否显示背景图, 默认关闭
|
||||
|
||||
MOVIE_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
|
||||
MOVIE_VIDEO_COMBINE: true, // 聚合视频,开启后一篇文章内的多个含caption的视频会被合并到文章开头,并展示分集按钮
|
||||
MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE: false, // 即使只有一集也显示集数切换按钮
|
||||
PHOTO_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
|
||||
PHOTO_VIDEO_COMBINE: true, // 聚合视频,开启后一篇文章内的多个含caption的视频会被合并到文章开头,并展示分集按钮
|
||||
PHOTO_VIDEO_COMBINE_SHOW_PAGE_FORCE: false, // 即使只有一集也显示集数切换按钮
|
||||
PHOTO_PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量,0为不限制
|
||||
|
||||
MOVIE_POST_LIST_COVER: true // 列表显示文章封面
|
||||
PHOTO_POST_LIST_COVER: true // 列表显示文章封面
|
||||
}
|
||||
export default CONFIG
|
||||
|
||||
@@ -58,7 +58,7 @@ const LayoutBase = props => {
|
||||
// 首页背景图
|
||||
const headerSlot =
|
||||
router.route === '/' &&
|
||||
siteConfig('MOVIE_HOME_BACKGROUND', null, CONFIG) ? (
|
||||
siteConfig('PHOTO_HOME_BACKGROUND', null, CONFIG) ? (
|
||||
<HomeBackgroundImage />
|
||||
) : null
|
||||
|
||||
@@ -157,7 +157,9 @@ const LayoutSlug = props => {
|
||||
// 用js 实现将页面中的多个视频聚合为一个分集的视频
|
||||
function combineVideo() {
|
||||
// 找到 id 为 notion-article 的元素
|
||||
const notionArticle = document.querySelector('#article-wrapper #notion-article')
|
||||
const notionArticle = document.querySelector(
|
||||
'#article-wrapper #notion-article'
|
||||
)
|
||||
if (!notionArticle) return // 如果找不到对应的元素,则退出函数
|
||||
|
||||
// 找到所有的 .notion-asset-wrapper 元素
|
||||
@@ -267,7 +269,7 @@ const LayoutSlug = props => {
|
||||
// 显示分集按钮 大于1集才显示 ;或者用户 要求强制显示
|
||||
if (
|
||||
figCaptionWrapper.children.length > 1 ||
|
||||
siteConfig('MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE', false, CONFIG)
|
||||
siteConfig('PHOTO_VIDEO_COMBINE_SHOW_PAGE_FORCE', false, CONFIG)
|
||||
) {
|
||||
videoWrapper.appendChild(figCaptionWrapper)
|
||||
}
|
||||
@@ -289,19 +291,18 @@ const LayoutSlug = props => {
|
||||
|
||||
// 404
|
||||
if (!post) {
|
||||
setTimeout(
|
||||
() => {
|
||||
if (isBrowser) {
|
||||
const article = document.querySelector('#article-wrapper #notion-article')
|
||||
if (!article) {
|
||||
router.push('/404').then(() => {
|
||||
console.warn('找不到页面', router.asPath)
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (isBrowser) {
|
||||
const article = document.querySelector(
|
||||
'#article-wrapper #notion-article'
|
||||
)
|
||||
if (!article) {
|
||||
router.push('/404').then(() => {
|
||||
console.warn('找不到页面', router.asPath)
|
||||
})
|
||||
}
|
||||
},
|
||||
waiting404
|
||||
)
|
||||
}
|
||||
}, waiting404)
|
||||
}
|
||||
return () => {
|
||||
// 获取所有 class="video-wrapper" 的元素
|
||||
@@ -316,23 +317,25 @@ const LayoutSlug = props => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{!lock ? post && (
|
||||
<div
|
||||
id='article-wrapper'
|
||||
className='px-2 max-w-5xl 2xl:max-w-[70%] mx-auto'>
|
||||
{/* 标题 */}
|
||||
<ArticleHeader post={post} />
|
||||
{/* 页面元素 */}
|
||||
<NotionPage post={post} />
|
||||
{/* 文章页脚 */}
|
||||
<ArticleFooter post={post} />
|
||||
{/* 推荐 */}
|
||||
<BlogRecommend {...props} />
|
||||
{/* 分享栏目 */}
|
||||
<ShareBar post={post} />
|
||||
{/* 评论区 */}
|
||||
<Comment frontMatter={post} />
|
||||
</div>
|
||||
{!lock ? (
|
||||
post && (
|
||||
<div
|
||||
id='article-wrapper'
|
||||
className='px-2 max-w-5xl 2xl:max-w-[70%] mx-auto'>
|
||||
{/* 标题 */}
|
||||
<ArticleHeader post={post} />
|
||||
{/* 页面元素 */}
|
||||
<NotionPage post={post} />
|
||||
{/* 文章页脚 */}
|
||||
<ArticleFooter post={post} />
|
||||
{/* 推荐 */}
|
||||
<BlogRecommend {...props} />
|
||||
{/* 分享栏目 */}
|
||||
<ShareBar post={post} />
|
||||
{/* 评论区 */}
|
||||
<Comment frontMatter={post} />
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<ArticleLock validPassword={validPassword} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user