From de0908ea9464df6e1d07cb3b52606b63e93cf8a5 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 8 May 2024 15:13:12 +0800 Subject: [PATCH 01/12] =?UTF-8?q?slug=20=E5=85=BC=E5=AE=B9=E6=80=A7?= =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=8C=E6=94=AF=E6=8C=81=E7=94=A8=E4=BB=BB?= =?UTF-8?q?=E6=84=8F=E5=89=8D=E7=BC=80=E8=AE=BF=E9=97=AE=E6=96=87=E7=AB=A0?= =?UTF-8?q?=E4=B8=8D=E9=99=90=E4=BA=8Earticle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 94 +++++++++++++++++++--------- lib/db/getSiteData.js | 21 +------ lib/notion/getPageProperties.js | 32 +++++++--- lib/utils/post.js | 90 ++++++++++++++++++++++++++ pages/[prefix]/[slug]/[...suffix].js | 27 ++------ pages/[prefix]/[slug]/index.js | 45 ++++++------- pages/[prefix]/index.js | 51 +-------------- 7 files changed, 209 insertions(+), 151 deletions(-) create mode 100644 lib/utils/post.js diff --git a/components/NotionPage.js b/components/NotionPage.js index 9e0e9c24..9e57e9a1 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -26,9 +26,12 @@ const Equation = dynamic( { ssr: false } ) -const Pdf = dynamic(() => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf), { - ssr: false -}) +const Pdf = dynamic( + () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf), + { + ssr: false + } +) // https://github.com/txs // import PrismMac from '@/components/PrismMac' @@ -46,13 +49,25 @@ const TweetEmbed = dynamic(() => import('react-tweet-embed'), { /** * 文内google广告 */ -const AdEmbed = dynamic(() => import('@/components/GoogleAdsense').then(m => m.AdEmbed), { ssr: true }) +const AdEmbed = dynamic( + () => import('@/components/GoogleAdsense').then(m => m.AdEmbed), + { ssr: true } +) -const Collection = dynamic(() => import('react-notion-x/build/third-party/collection').then(m => m.Collection), { - ssr: true -}) +const Collection = dynamic( + () => + import('react-notion-x/build/third-party/collection').then( + m => m.Collection + ), + { + ssr: true + } +) -const Modal = dynamic(() => import('react-notion-x/build/third-party/modal').then(m => m.Modal), { ssr: false }) +const Modal = dynamic( + () => import('react-notion-x/build/third-party/modal').then(m => m.Modal), + { ssr: false } +) const Tweet = ({ id }) => { return @@ -83,19 +98,22 @@ const NotionPage = ({ post, className }) => { // 将相册gallery下的图片加入放大功能 if (siteConfig('POST_DISABLE_GALLERY_CLICK')) { setTimeout(() => { - if (isBrowser) { - const imgList = document?.querySelectorAll('.notion-collection-card-cover img') - if (imgList && zoomRef.current) { - for (let i = 0; i < imgList.length; i++) { - zoomRef.current.attach(imgList[i]) - } - } + const imgList = document?.querySelectorAll( + '.notion-asset-wrapper-image img' + ) - const cards = document.getElementsByClassName('notion-collection-card') - for (const e of cards) { - e.removeAttribute('href') + console.log('放大', imgList) + + if (imgList && zoomRef.current) { + for (let i = 0; i < imgList.length; i++) { + zoomRef.current.attach(imgList[i]) } } + + const cards = document.getElementsByClassName('notion-collection-card') + for (const e of cards) { + e.removeAttribute('href') + } }, 800) } @@ -108,10 +126,16 @@ const NotionPage = ({ post, className }) => { const allAnchorTags = document.getElementsByTagName('a') // 或者使用 document.querySelectorAll('a') 获取 NodeList for (const anchorTag of allAnchorTags) { if (anchorTag?.target === '_blank') { - const hrefWithoutQueryHash = anchorTag.href.split('?')[0].split('#')[0] - const hrefWithRelativeHash = currentURL.split('#')[0] + anchorTag.href.split('#')[1] + const hrefWithoutQueryHash = anchorTag.href + .split('?')[0] + .split('#')[0] + const hrefWithRelativeHash = + currentURL.split('#')[0] + anchorTag.href.split('#')[1] - if (currentURL === hrefWithoutQueryHash || currentURL === hrefWithRelativeHash) { + if ( + currentURL === hrefWithoutQueryHash || + currentURL === hrefWithRelativeHash + ) { anchorTag.target = '_self' } } @@ -121,14 +145,20 @@ const NotionPage = ({ post, className }) => { // 放大图片：调整图片质量 const observer = new MutationObserver((mutationsList, observer) => { mutationsList.forEach(mutation => { - if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + if ( + mutation.type === 'attributes' && + mutation.attributeName === 'class' + ) { if (mutation.target.classList.contains('medium-zoom-image--opened')) { // 等待动画完成后替换为更高清的图像 setTimeout(() => { // 获取该元素的 src 属性 const src = mutation?.target?.getAttribute('src') // 替换为更高清的图像 - mutation?.target?.setAttribute('src', compressImage(src, siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200))) + mutation?.target?.setAttribute( + 'src', + compressImage(src, siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200)) + ) }, 800) } } @@ -136,21 +166,23 @@ const NotionPage = ({ post, className }) => { }) // 监视整个文档中的元素和属性的变化 - observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['class'] }) + observer.observe(document.body, { + attributes: true, + subtree: true, + attributeFilter: ['class'] + }) return () => { observer.disconnect() } - }, []) - - if (!post || !post.blockMap) { - return <>{post?.summary || ''} - } + }, [post]) return ( -
+
0) { allPages.forEach(p => { p.to = p.slug - if (p?.slug?.indexOf('http') === 0) { - p.target = '_blank' - } else { - p.target = '_self' - if (p?.slug?.indexOf('/') !== 0) { - p.to = '/' + p.slug - } - } customNav.push({ icon: p.icon || null, name: p.title, - to: p.slug, - target: '_blank', + href: p.href, + target: p.target, show: true }) }) @@ -192,15 +184,6 @@ function getCustomMenu({ collectionData, NOTION_CONFIG }) { if (menuPages && menuPages.length > 0) { menuPages.forEach(e => { e.show = true - if (e?.slug?.indexOf('http') === 0) { - e.target = '_blank' - e.to = e.slug - } else { - e.target = '_self' - if (e?.slug?.indexOf('http') !== 0 && e?.slug?.indexOf('/') !== 0) { - e.to = '/' + e.slug - } - } if (e.type === BLOG.NOTION_PROPERTY_NAME.type_menu) { menus.push(e) } else if (e.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) { diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index fefdad4d..64257eb6 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -4,6 +4,7 @@ import { getDateValue, getTextContent } from 'notion-utils' import formatDate from '../utils/formatDate' // import { createHash } from 'crypto' import md5 from 'js-md5' +import { checkContainHttp, sliceUrlFromHttp } from '../utils' import { mapImgUrl } from './mapImage' /** @@ -106,7 +107,7 @@ export default async function getPageProperties( properties.pageCover = mapImgUrl(value?.format?.page_cover, value) ?? '' properties.pageCoverThumbnail = mapImgUrl(value?.format?.page_cover, value, 'block') ?? '' - properties.ext = converToJSON(properties?.ext) + properties.ext = convertToJSON(properties?.ext) properties.content = value.content ?? [] properties.tagItems = properties?.tags?.map(tag => { @@ -117,28 +118,41 @@ export default async function getPageProperties( }) || [] delete properties.content - // 处理URL + // 处理URL ，为文章添加一个href字段，专门用来跳转访问 if (properties.type === 'Post') { - properties.slug = BLOG.POST_URL_PREFIX + properties.href = BLOG.POST_URL_PREFIX ? generateCustomizeUrl(properties) : properties.slug ?? properties.id } else if (properties.type === 'Page') { - properties.slug = properties.slug ?? properties.id + properties.href = properties.slug ?? properties.id } else if (properties.type === 'Menu' || properties.type === 'SubMenu') { // 菜单路径为空、作为可展开菜单使用 - properties.to = properties.slug ?? '#' + properties.href = properties.slug ?? '#' properties.name = properties.title ?? '' } // 开启伪静态路径 if (JSON.parse(BLOG.PSEUDO_STATIC)) { if ( - !properties?.slug?.endsWith('.html') && - !properties?.slug?.startsWith('http') + !properties?.href?.endsWith('.html') && + !properties?.href?.startsWith('http') ) { - properties.slug += '.html' + properties.href += '.html' } } + + // 最终检查超链接 + properties.href = checkContainHttp(properties?.href) + ? sliceUrlFromHttp(properties?.href) + : `/${properties.href}` + + // 设置链接在页内或新页面打开 + if (properties.href?.indexOf('http') === 0) { + properties.target = '_blank' + } else { + properties.target = '_self' + } + // 密码字段md5 properties.password = properties.password ? md5(properties.slug + properties.password) @@ -151,7 +165,7 @@ export default async function getPageProperties( * @param {*} str * @returns */ -function converToJSON(str) { +function convertToJSON(str) { if (!str) { return {} } diff --git a/lib/utils/post.js b/lib/utils/post.js new file mode 100644 index 00000000..87852eda --- /dev/null +++ b/lib/utils/post.js @@ -0,0 +1,90 @@ +/** + * 文章相关工具 + */ +import { checkContainHttp } from '.' + +/** + * 获取文章的关联推荐文章列表，目前根据标签关联性筛选 + * @param post + * @param {*} allPosts + * @param {*} count + * @returns + */ +export function getRecommendPost(post, allPosts, count = 6) { + let recommendPosts = [] + const postIds = [] + const currentTags = post?.tags || [] + for (let i = 0; i < allPosts.length; i++) { + const p = allPosts[i] + if (p.id === post.id || p.type.indexOf('Post') < 0) { + continue + } + + for (let j = 0; j < currentTags.length; j++) { + const t = currentTags[j] + if (postIds.indexOf(p.id) > -1) { + continue + } + if (p.tags && p.tags.indexOf(t) > -1) { + recommendPosts.push(p) + postIds.push(p.id) + } + } + } + + if (recommendPosts.length > count) { + recommendPosts = recommendPosts.slice(0, count) + } + return recommendPosts +} + +/** + * 确认slug中不包含 / 符号 + * @param {*} row + * @returns + */ +export function checkSlugHasNoSlash(row) { + let slug = row.slug + if (slug.startsWith('/')) { + slug = slug.substring(1) + } + return ( + (slug.match(/\//g) || []).length === 0 && + !checkContainHttp(slug) && + row.type.indexOf('Menu') < 0 + ) +} + +/** + * 检查url中包含一个 / + * @param {*} row + * @returns + */ +export function checkSlugHasOneSlash(row) { + let slug = row.slug + if (slug.startsWith('/')) { + slug = slug.substring(1) + } + return ( + (slug.match(/\//g) || []).length === 1 && + !checkContainHttp(slug) && + row.type.indexOf('Menu') < 0 + ) +} + +/** + * 检查url中包含两个及以上的 / + * @param {*} row + * @returns + */ +export function checkSlugHasMorThanTwoSlash(row) { + let slug = row.slug + if (slug.startsWith('/')) { + slug = slug.substring(1) + } + return ( + (slug.match(/\//g) || []).length >= 2 && + row.type.indexOf('Menu') < 0 && + !checkContainHttp(slug) + ) +} diff --git a/pages/[prefix]/[slug]/[...suffix].js b/pages/[prefix]/[slug]/[...suffix].js index 763584e8..5b2ceced 100644 --- a/pages/[prefix]/[slug]/[...suffix].js +++ b/pages/[prefix]/[slug]/[...suffix].js @@ -2,9 +2,9 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData' import { uploadDataToAlgolia } from '@/lib/plugins/algolia' -import { checkContainHttp } from '@/lib/utils' +import { checkSlugHasMorThanTwoSlash, getRecommendPost } from '@/lib/utils/post' import { idToUuid } from 'notion-utils' -import Slug, { getRecommendPost } from '..' +import Slug from '..' /** * 根据notion的slug访问页面 @@ -33,7 +33,7 @@ export async function getStaticPaths() { return { paths: allPages - ?.filter(row => checkSlug(row)) + ?.filter(row => checkSlugHasMorThanTwoSlash(row)) .map(row => ({ params: { prefix: row.slug.split('/')[0], @@ -54,20 +54,15 @@ export async function getStaticProps({ params: { prefix, slug, suffix }, locale }) { - let fullSlug = prefix + '/' + slug + '/' + suffix.join('/') + const fullSlug = prefix + '/' + slug + '/' + suffix.join('/') const from = `slug-props-${fullSlug}` const props = await getGlobalData({ from, locale }) - if (siteConfig('PSEUDO_STATIC', BLOG.PSEUDO_STATIC, props.NOTION_CONFIG)) { - if (!fullSlug.endsWith('.html')) { - fullSlug += '.html' - } - } // 在列表内查找文章 props.post = props?.allPages?.find(p => { return ( p.type.indexOf('Menu') < 0 && - (p.slug === fullSlug || p.id === idToUuid(fullSlug)) + (p.slug === slug || p.slug === fullSlug || p.id === idToUuid(fullSlug)) ) }) @@ -132,16 +127,4 @@ export async function getStaticProps({ } } -function checkSlug(row) { - let slug = row.slug - if (slug.startsWith('/')) { - slug = slug.substring(1) - } - return ( - (slug.match(/\//g) || []).length >= 2 && - row.type.indexOf('Menu') < 0 && - !checkContainHttp(slug) - ) -} - export default PrefixSlug diff --git a/pages/[prefix]/[slug]/index.js b/pages/[prefix]/[slug]/index.js index 072a932c..1d27113d 100644 --- a/pages/[prefix]/[slug]/index.js +++ b/pages/[prefix]/[slug]/index.js @@ -2,9 +2,13 @@ import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData' import { uploadDataToAlgolia } from '@/lib/plugins/algolia' -import { checkContainHttp } from '@/lib/utils' +import { + checkSlugHasNoSlash, + checkSlugHasOneSlash, + getRecommendPost +} from '@/lib/utils/post' import { idToUuid } from 'notion-utils' -import Slug, { getRecommendPost } from '..' +import Slug from '..' /** * 根据notion的slug访问页面 @@ -26,12 +30,26 @@ export async function getStaticPaths() { const from = 'slug-paths' const { allPages } = await getGlobalData({ from }) + // 根据slug中的 / 分割成prefix和slug两个字段 ; 例如 article/test + // 最终用户可以通过 [domain]/[prefix]/[slug] 路径访问，即这里的 [domain]/article/test const paths = allPages - ?.filter(row => checkSlug(row)) + ?.filter(row => checkSlugHasOneSlash(row)) .map(row => ({ params: { prefix: row.slug.split('/')[0], slug: row.slug.split('/')[1] } })) + + // 增加一种访问路径 允许通过 [category]/[slug] 访问文章 + // 例如文章slug 是 test ，然后文章的分类category是 production + // 则除了 [domain]/[slug] 以外，还支持分类名访问: [domain]/[category]/[slug] + console.log( + allPages + ?.filter(row => checkSlugHasNoSlash(row) && row.category) + .map(row => ({ + params: { prefix: row.category, slug: row.slug } + })) + ) + return { paths: paths, fallback: true @@ -39,20 +57,15 @@ export async function getStaticPaths() { } export async function getStaticProps({ params: { prefix, slug }, locale }) { - let fullSlug = prefix + '/' + slug + const fullSlug = prefix + '/' + slug const from = `slug-props-${fullSlug}` const props = await getGlobalData({ from, locale }) - if (siteConfig('PSEUDO_STATIC', BLOG.PSEUDO_STATIC, props.NOTION_CONFIG)) { - if (!fullSlug.endsWith('.html')) { - fullSlug += '.html' - } - } // 在列表内查找文章 props.post = props?.allPages?.find(p => { return ( p.type.indexOf('Menu') < 0 && - (p.slug === fullSlug || p.id === idToUuid(fullSlug)) + (p.slug === slug || p.slug === fullSlug || p.id === idToUuid(fullSlug)) ) }) @@ -116,15 +129,5 @@ export async function getStaticProps({ params: { prefix, slug }, locale }) { ) } } -function checkSlug(row) { - let slug = row.slug - if (slug.startsWith('/')) { - slug = slug.substring(1) - } - return ( - (slug.match(/\//g) || []).length === 1 && - !checkContainHttp(slug) && - row.type.indexOf('Menu') < 0 - ) -} + export default PrefixSlug diff --git a/pages/[prefix]/index.js b/pages/[prefix]/index.js index 7327e668..0f038881 100644 --- a/pages/[prefix]/index.js +++ b/pages/[prefix]/index.js @@ -3,7 +3,7 @@ import { siteConfig } from '@/lib/config' import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData' import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents' import { uploadDataToAlgolia } from '@/lib/plugins/algolia' -import { checkContainHttp } from '@/lib/utils' +import { checkSlugHasNoSlash, getRecommendPost } from '@/lib/utils/post' import { getLayoutByTheme } from '@/themes/theme' import md5 from 'js-md5' import { useRouter } from 'next/router' @@ -71,7 +71,7 @@ export async function getStaticPaths() { const from = 'slug-paths' const { allPages } = await getGlobalData({ from }) const paths = allPages - ?.filter(row => checkSlug(row)) + ?.filter(row => checkSlugHasNoSlash(row)) .map(row => ({ params: { prefix: row.slug } })) return { paths: paths, @@ -158,51 +158,4 @@ export async function getStaticProps({ params: { prefix }, locale }) { } } -/** - * 获取文章的关联推荐文章列表，目前根据标签关联性筛选 - * @param post - * @param {*} allPosts - * @param {*} count - * @returns - */ -export function getRecommendPost(post, allPosts, count = 6) { - let recommendPosts = [] - const postIds = [] - const currentTags = post?.tags || [] - for (let i = 0; i < allPosts.length; i++) { - const p = allPosts[i] - if (p.id === post.id || p.type.indexOf('Post') < 0) { - continue - } - - for (let j = 0; j < currentTags.length; j++) { - const t = currentTags[j] - if (postIds.indexOf(p.id) > -1) { - continue - } - if (p.tags && p.tags.indexOf(t) > -1) { - recommendPosts.push(p) - postIds.push(p.id) - } - } - } - - if (recommendPosts.length > count) { - recommendPosts = recommendPosts.slice(0, count) - } - return recommendPosts -} - -function checkSlug(row) { - let slug = row.slug - if (slug.startsWith('/')) { - slug = slug.substring(1) - } - return ( - (slug.match(/\//g) || []).length === 0 && - !checkContainHttp(slug) && - row.type.indexOf('Menu') < 0 - ) -} - export default Slug From b1b38bcde80dacaa9f5b9e4637293f745046e4b7 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 8 May 2024 15:14:54 +0800 Subject: [PATCH 02/12] =?UTF-8?q?slug=E6=94=B9=E9=80=A0-=E5=85=BC=E5=AE=B9?= =?UTF-8?q?simple=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/simple/components/BlogItem.js | 172 ++++++++++++------- themes/simple/components/MenuItemCollapse.js | 4 +- themes/simple/components/MenuItemDrop.js | 4 +- themes/simple/components/MenuList.js | 85 ++++++--- 4 files changed, 173 insertions(+), 92 deletions(-) diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js index 65f5b3e5..fe24c21a 100644 --- a/themes/simple/components/BlogItem.js +++ b/themes/simple/components/BlogItem.js @@ -1,82 +1,122 @@ -import Link from 'next/link' -import CONFIG from '../config' -import TwikooCommentCount from '@/components/TwikooCommentCount' -import { formatDateFmt } from '@/lib/utils/formatDate' -import { siteConfig } from '@/lib/config' import LazyImage from '@/components/LazyImage' -import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' import NotionIcon from '@/components/NotionIcon' import NotionPage from '@/components/NotionPage' +import TwikooCommentCount from '@/components/TwikooCommentCount' +import { siteConfig } from '@/lib/config' +import { formatDateFmt } from '@/lib/utils/formatDate' +import Link from 'next/link' +import CONFIG from '../config' export const BlogItem = props => { const { post } = props const showPageCover = siteConfig('SIMPLE_POST_COVER_ENABLE', false, CONFIG) - const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` const showPreview = siteConfig('POST_LIST_PREVIEW') && post.blockMap - return
- {/* 文章标题 */} + return ( +
+ {/* 文章标题 */} -
-
- {/* 图片封面 */} - {showPageCover && ( -
- - - -
- )} +
+
+ {/* 图片封面 */} + {showPageCover && ( +
+ + + +
+ )} +
+ +
+

+ + {siteConfig('POST_TITLE_ICON') && ( + + )} + {post.title} + +

+ + {/* 文章信息 */} +
+
+ + {' '} + + {siteConfig('AUTHOR')} + + + + + {' '} + {post.date?.start_date || post.createdTime} + + + + +
-
+
+ {post.category && ( + + {' '} + + + {post.category} + + + )} + {post?.tags && + post?.tags?.length > 0 && + post?.tags.map(t => ( + + /{t} + + ))} +
+
-

- - {siteConfig('POST_TITLE_ICON') && }{post.title} - -

+
+ {!showPreview && ( + <> + {post.summary} + {post.summary && ...} + + )} + {showPreview && post?.blockMap && ( +
+ +
+
+ )} +
+
+
- {/* 文章信息 */} -
-
- {siteConfig('AUTHOR')} - - - {post.date?.start_date || post.createdTime} - - - -
- -
- {post.category && {post.category}} - {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => /{t})} -
-
- -
- {!showPreview && <> - {post.summary} - {post.summary && ...} - } - {showPreview && post?.blockMap && ( -
- -
-
- )} -
- - -
- -
- - Continue Reading - -
+
+ + Continue Reading{' '} + + +
+ ) } diff --git a/themes/simple/components/MenuItemCollapse.js b/themes/simple/components/MenuItemCollapse.js index 7bd2cc13..50174dc3 100644 --- a/themes/simple/components/MenuItemCollapse.js +++ b/themes/simple/components/MenuItemCollapse.js @@ -33,7 +33,7 @@ export const MenuItemCollapse = props => { onClick={toggleShow}> {!hasSubMenu && ( @@ -72,7 +72,7 @@ export const MenuItemCollapse = props => {
- + {sLink?.icon && ( diff --git a/themes/simple/components/MenuItemDrop.js b/themes/simple/components/MenuItemDrop.js index 316dc0da..7a5bbff8 100644 --- a/themes/simple/components/MenuItemDrop.js +++ b/themes/simple/components/MenuItemDrop.js @@ -15,7 +15,7 @@ export const MenuItemDrop = ({ link }) => { onMouseOut={() => changeShow(false)}> {!hasSubMenu && ( {link?.icon && ( @@ -52,7 +52,7 @@ export const MenuItemDrop = ({ link }) => {
  • - + {sLink?.icon &&   } {sLink.title} diff --git a/themes/simple/components/MenuList.js b/themes/simple/components/MenuList.js index ec9700bf..be13b7b6 100644 --- a/themes/simple/components/MenuList.js +++ b/themes/simple/components/MenuList.js @@ -18,7 +18,7 @@ export const MenuList = ({ customNav, customMenu }) => { const toggleIsOpen = () => { changeIsOpen(!isOpen) } - const closeMenu = (e) => { + const closeMenu = e => { changeIsOpen(false) } const router = useRouter() @@ -29,10 +29,30 @@ export const MenuList = ({ customNav, customMenu }) => { }) let links = [ - { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('SIMPLE_MENU_SEARCH', null, CONFIG) }, - { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('SIMPLE_MENU_ARCHIVE', null, CONFIG) }, - { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('SIMPLE_MENU_CATEGORY', null, CONFIG) }, - { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('SIMPLE_MENU_TAG', null, CONFIG) } + { + icon: 'fas fa-search', + name: locale.NAV.SEARCH, + href: '/search', + show: siteConfig('SIMPLE_MENU_SEARCH', null, CONFIG) + }, + { + icon: 'fas fa-archive', + name: locale.NAV.ARCHIVE, + href: '/archive', + show: siteConfig('SIMPLE_MENU_ARCHIVE', null, CONFIG) + }, + { + icon: 'fas fa-folder', + name: locale.COMMON.CATEGORY, + href: '/category', + show: siteConfig('SIMPLE_MENU_CATEGORY', null, CONFIG) + }, + { + icon: 'fas fa-tag', + name: locale.COMMON.TAGS, + href: '/tag', + show: siteConfig('SIMPLE_MENU_TAG', null, CONFIG) + } ] if (customNav) { @@ -48,25 +68,46 @@ export const MenuList = ({ customNav, customMenu }) => { return null } - return (<> - {/* 大屏模式菜单 */} -
  • - + {link?.icon &&   } {sLink.title} diff --git a/themes/commerce/components/MenuListSide.js b/themes/commerce/components/MenuListSide.js index 89133256..0cd2c4a9 100644 --- a/themes/commerce/components/MenuListSide.js +++ b/themes/commerce/components/MenuListSide.js @@ -1,17 +1,37 @@ -import { useGlobal } from '@/lib/global' import { siteConfig } from '@/lib/config' -import { MenuItemCollapse } from './MenuItemCollapse' +import { useGlobal } from '@/lib/global' import CONFIG from '../config' +import { MenuItemCollapse } from './MenuItemCollapse' -export const MenuListSide = (props) => { +export const MenuListSide = props => { const { customNav, customMenu } = props const { locale } = useGlobal() let links = [ - { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }, - { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }, - { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY }, - { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG } + { + icon: 'fas fa-archive', + name: locale.NAV.ARCHIVE, + href: '/archive', + show: CONFIG.MENU_ARCHIVE + }, + { + icon: 'fas fa-search', + name: locale.NAV.SEARCH, + href: '/search', + show: CONFIG.MENU_SEARCH + }, + { + icon: 'fas fa-folder', + name: locale.COMMON.CATEGORY, + href: '/category', + show: CONFIG.MENU_CATEGORY + }, + { + icon: 'fas fa-tag', + name: locale.COMMON.TAGS, + href: '/tag', + show: CONFIG.MENU_TAG + } ] if (customNav) { @@ -34,9 +54,11 @@ export const MenuListSide = (props) => { } return ( - + ) } diff --git a/themes/commerce/components/MenuListTop.js b/themes/commerce/components/MenuListTop.js index c4a10085..054ef5bf 100644 --- a/themes/commerce/components/MenuListTop.js +++ b/themes/commerce/components/MenuListTop.js @@ -1,18 +1,36 @@ +import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' import CONFIG from '../config' import { MenuItemDrop } from './MenuItemDrop' -import { siteConfig } from '@/lib/config' -export const MenuListTop = (props) => { +export const MenuListTop = props => { const { customNav, customMenu } = props const { locale } = useGlobal() let links = [ - { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX }, - { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }, - { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE } - // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY }, - // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG } + { + id: 1, + icon: 'fa-solid fa-house', + name: locale.NAV.INDEX, + href: '/', + show: CONFIG.MENU_INDEX + }, + { + id: 2, + icon: 'fas fa-search', + name: locale.NAV.SEARCH, + href: '/search', + show: CONFIG.MENU_SEARCH + }, + { + id: 3, + icon: 'fas fa-archive', + name: locale.NAV.ARCHIVE, + href: '/archive', + show: CONFIG.MENU_ARCHIVE + } + // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, href: '/category', show: CONFIG.MENU_CATEGORY }, + // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, href: '/tag', show: CONFIG.MENU_TAG } ] if (customNav) { @@ -34,9 +52,16 @@ export const MenuListTop = (props) => { return null } - return (<> - - ) + return ( + <> + + + ) } From a75a5acd7f3da57ea667a1e105d19d39fe268339 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 8 May 2024 15:26:09 +0800 Subject: [PATCH 04/12] =?UTF-8?q?slug=E8=B0=83=E6=95=B4=20=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=20example=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/example/components/Header.js | 2 +- themes/example/components/MenuItemDrop.js | 4 ++-- themes/example/components/MenuList.js | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/themes/example/components/Header.js b/themes/example/components/Header.js index fdb049e3..5331eed2 100644 --- a/themes/example/components/Header.js +++ b/themes/example/components/Header.js @@ -8,7 +8,7 @@ import { MenuList } from './MenuList' */ export const Header = props => { return ( -
    +
    { onMouseOut={() => changeShow(false)}> {!hasSubMenu && (
    - + {link?.icon && } {link?.name} {hasSubMenu && } @@ -41,7 +41,7 @@ export const MenuItemDrop = ({ link }) => {
  • - + {link?.icon &&   } {sLink.title} diff --git a/themes/example/components/MenuList.js b/themes/example/components/MenuList.js index 09613b1a..90b00c7e 100644 --- a/themes/example/components/MenuList.js +++ b/themes/example/components/MenuList.js @@ -17,28 +17,28 @@ export const MenuList = props => { id: 1, icon: 'fas fa-search', name: locale.NAV.SEARCH, - to: '/search', + href: '/search', show: siteConfig('EXAMPLE_MENU_SEARCH', null, CONFIG) }, { id: 2, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, - to: '/archive', + href: '/archive', show: siteConfig('EXAMPLE_MENU_ARCHIVE', null, CONFIG) }, { id: 3, icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, - to: '/category', + href: '/category', show: siteConfig('EXAMPLE_MENU_CATEGORY', null, CONFIG) }, { id: 4, icon: 'fas fa-tag', name: locale.COMMON.TAGS, - to: '/tag', + href: '/tag', show: siteConfig('EXAMPLE_MENU_TAG', null, CONFIG) } ] From ff9d211a0adb56f1c99c83500613648164fa11ca Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 8 May 2024 15:29:03 +0800 Subject: [PATCH 05/12] =?UTF-8?q?slug=20=E8=B0=83=E6=95=B4=20=E5=85=BC?= =?UTF-8?q?=E5=AE=B9fukasawa=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fukasawa/components/MenuItemCollapse.js | 6 +- themes/fukasawa/components/MenuItemDrop.js | 4 +- themes/fukasawa/components/MenuItemNormal.js | 28 +++++---- themes/fukasawa/components/MenuList.js | 62 ++++++++++++++----- 4 files changed, 65 insertions(+), 35 deletions(-) diff --git a/themes/fukasawa/components/MenuItemCollapse.js b/themes/fukasawa/components/MenuItemCollapse.js index 2d36242c..eb00850f 100644 --- a/themes/fukasawa/components/MenuItemCollapse.js +++ b/themes/fukasawa/components/MenuItemCollapse.js @@ -21,7 +21,7 @@ export const MenuItemCollapse = props => { return null } - const selected = router.pathname === link.to || router.asPath === link.to + const selected = router.pathname === link.href || router.asPath === link.href const toggleShow = () => { changeShow(!show) @@ -43,7 +43,7 @@ export const MenuItemCollapse = props => { onClick={toggleShow}> {!hasSubMenu && (
    @@ -79,7 +79,7 @@ export const MenuItemCollapse = props => { className='whitespace-nowrap dark:text-gray-200 not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'> - +
    { className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '> {!hasSubMenu && (
    @@ -47,7 +47,7 @@ export const MenuItemDrop = ({ link }) => { return (
  • {sLink.icon && ( diff --git a/themes/fukasawa/components/MenuItemNormal.js b/themes/fukasawa/components/MenuItemNormal.js index 5910babb..a4ccf59d 100644 --- a/themes/fukasawa/components/MenuItemNormal.js +++ b/themes/fukasawa/components/MenuItemNormal.js @@ -4,21 +4,23 @@ import { useRouter } from 'next/router' export const MenuItemNormal = props => { const { link } = props const router = useRouter() - const selected = (router.pathname === link.to) || (router.asPath === link.to) + const selected = router.pathname === link.href || router.asPath === link.href if (!link || !link.show) { return null } - return - -
    -
    {link.name}
    -
    - {link.slot} - + return ( + +
    +
    {link.name}
    +
    + {link.slot} + ) } diff --git a/themes/fukasawa/components/MenuList.js b/themes/fukasawa/components/MenuList.js index 6b5be406..33e7695b 100644 --- a/themes/fukasawa/components/MenuList.js +++ b/themes/fukasawa/components/MenuList.js @@ -1,19 +1,39 @@ +import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' import CONFIG from '../config' -import { siteConfig } from '@/lib/config' -import { MenuItemDrop } from './MenuItemDrop' import { MenuItemCollapse } from './MenuItemCollapse' - -export const MenuList = (props) => { +import { MenuItemDrop } from './MenuItemDrop' +/** + * 菜单列表 + * @param {*} props + * @returns + */ +export const MenuList = props => { const { customNav, customMenu } = props const { locale } = useGlobal() let links = [ - { name: locale.NAV.INDEX, to: '/' || '/', show: true }, - { name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('FUKASAWA_MENU_CATEGORY', null, CONFIG) }, - { name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('FUKASAWA_MENU_TAG', null, CONFIG) }, - { name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('FUKASAWA_MENU_ARCHIVE', null, CONFIG) }, - { name: locale.NAV.SEARCH, to: '/search', show: siteConfig('FUKASAWA_MENU_SEARCH', null, CONFIG) } + { name: locale.NAV.INDEX, href: '/' || '/', show: true }, + { + name: locale.COMMON.CATEGORY, + href: '/category', + show: siteConfig('FUKASAWA_MENU_CATEGORY', null, CONFIG) + }, + { + name: locale.COMMON.TAGS, + href: '/tag', + show: siteConfig('FUKASAWA_MENU_TAG', null, CONFIG) + }, + { + name: locale.NAV.ARCHIVE, + href: '/archive', + show: siteConfig('FUKASAWA_MENU_ARCHIVE', null, CONFIG) + }, + { + name: locale.NAV.SEARCH, + href: '/search', + show: siteConfig('FUKASAWA_MENU_SEARCH', null, CONFIG) + } ] if (customNav) { @@ -29,14 +49,22 @@ export const MenuList = (props) => { return null } - return (<> - - {links?.map((link, index) => )} - - - {links?.map((link, index) => )} - + return ( + <> + + {links?.map((link, index) => ( + + ))} + + + {links?.map((link, index) => ( + + ))} + - ) } From d3efac607487b9c2db42e9044418638602792c01 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 8 May 2024 15:35:57 +0800 Subject: [PATCH 06/12] =?UTF-8?q?slug=E8=B0=83=E6=95=B4=20=E5=85=BC?= =?UTF-8?q?=E5=AE=B9game=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../game/components/GameListIndexCombine.js | 8 +++---- themes/game/components/GameListNormal.js | 22 +++++++++++++------ themes/game/components/MenuItemCollapse.js | 4 ++-- themes/game/components/MenuItemDrop.js | 4 ++-- themes/game/components/MenuList.js | 6 ++--- 5 files changed, 25 insertions(+), 19 deletions(-) diff --git a/themes/game/components/GameListIndexCombine.js b/themes/game/components/GameListIndexCombine.js index 681efd27..ac8b14ba 100644 --- a/themes/game/components/GameListIndexCombine.js +++ b/themes/game/components/GameListIndexCombine.js @@ -2,7 +2,7 @@ import { AdSlot } from '@/components/GoogleAdsense' import LazyImage from '@/components/LazyImage' import { siteConfig } from '@/lib/config' -import { checkContainHttp, deepClone, sliceUrlFromHttp } from '@/lib/utils' +import { deepClone } from '@/lib/utils' import Link from 'next/link' import { useState } from 'react' import CONFIG from '../config' @@ -139,14 +139,12 @@ const GameItem = ({ item, isLargeCard }) => { const { title } = item const img = item.pageCoverThumbnail const [showType, setShowType] = useState('img') // img or video - const url = checkContainHttp(item.slug) - ? sliceUrlFromHttp(item.slug) - : `${siteConfig('SUB_PATH', '')}/${item.slug}` + const video = item?.ext?.video return ( { diff --git a/themes/game/components/GameListNormal.js b/themes/game/components/GameListNormal.js index b9bc9603..22fc4a6f 100644 --- a/themes/game/components/GameListNormal.js +++ b/themes/game/components/GameListNormal.js @@ -1,6 +1,5 @@ /* eslint-disable @next/next/no-img-element */ -import { siteConfig } from '@/lib/config' -import { checkContainHttp, deepClone, sliceUrlFromHttp } from '@/lib/utils' +import { deepClone } from '@/lib/utils' import Link from 'next/link' import { useState } from 'react' @@ -43,12 +42,11 @@ const GameItem = ({ item }) => { const { title } = item const img = item.pageCoverThumbnail const [showType, setShowType] = useState('img') // img or video - const url = checkContainHttp(item.slug) ? sliceUrlFromHttp(item.slug) : `${siteConfig('SUB_PATH', '')}/${item.slug}` const video = item?.ext?.video return ( { setShowType('video') }} @@ -58,17 +56,27 @@ const GameItem = ({ item }) => { title={title} className={`card-single h-28 w-28 relative shadow rounded-md overflow-hidden flex justify-center items-center group hover:border-purple-400`}> -
    {title}
    +
    + {title} +
    {showType === 'video' && ( -