diff --git a/.env.local b/.env.local index 073b8bbb..153de1d1 100644 --- a/.env.local +++ b/.env.local @@ -1,5 +1,5 @@ # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables -NEXT_PUBLIC_VERSION=4.4.6 +NEXT_PUBLIC_VERSION=4.5.0 # 可在此添加环境变量，去掉最左边的（# ）注释即可 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) { @@ -312,6 +295,7 @@ export function getNavPages({ allPages }) { tags: item.tags || null, summary: item.summary || null, slug: item.slug, + href: item.href, pageIcon: item.pageIcon || '', lastEditedDate: item.lastEditedDate, publishDate: item.publishDate, diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index fefdad4d..5326c7ea 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 => { @@ -118,27 +119,43 @@ export default async function getPageProperties( delete properties.content // 处理URL + // 1.按照用户配置的URL_PREFIX 转换一下slug + // 2.为文章添加一个href字段，存储最终调整的路径 if (properties.type === 'Post') { - properties.slug = BLOG.POST_URL_PREFIX - ? generateCustomizeUrl(properties) - : properties.slug ?? properties.id + if (BLOG.POST_URL_PREFIX) { + properties.slug = generateCustomizeSlug(properties) + } + properties.href = 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 +168,7 @@ export default async function getPageProperties( * @param {*} str * @returns */ -function converToJSON(str) { +function convertToJSON(str) { if (!str) { return {} } @@ -188,11 +205,11 @@ function mapProperties(properties) { /** * 获取自定义URL * 可以根据变量生成URL - * 支持：%year%/%month%/%day%/%slug% + * 支持：%category%/%year%/%month%/%day%/%slug% * @param {*} postProperties * @returns */ -function generateCustomizeUrl(postProperties) { +function generateCustomizeSlug(postProperties) { let fullPrefix = '' const allSlugPatterns = BLOG.POST_URL_PREFIX.split('/') allSlugPatterns.forEach((pattern, idx) => { @@ -210,6 +227,8 @@ function generateCustomizeUrl(postProperties) { fullPrefix += String(formatPostCreatedDate.getUTCDate()).padStart(2, 0) } else if (pattern === '%slug%') { fullPrefix += postProperties.slug ?? postProperties.id + } else if (pattern === '%category%' && postProperties?.category) { + fullPrefix += postProperties.category } else if (!pattern.includes('%')) { fullPrefix += pattern } else { 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/package.json b/package.json index 4be32288..26964d11 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notion-next", - "version": "4.4.6", + "version": "4.5.0", "homepage": "https://github.com/tangly1024/NotionNext.git", "license": "MIT", "repository": { diff --git a/pages/[prefix]/[slug]/[...suffix].js b/pages/[prefix]/[slug]/[...suffix].js index 763584e8..2050e81d 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,18 @@ 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 === suffix || + p.slug === fullSlug.substring(fullSlug.lastIndexOf('/') + 1) || + p.slug === fullSlug || + p.id === idToUuid(fullSlug)) ) }) @@ -132,16 +130,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 diff --git a/themes/commerce/components/Footer.js b/themes/commerce/components/Footer.js index 5aab31e4..27a558df 100644 --- a/themes/commerce/components/Footer.js +++ b/themes/commerce/components/Footer.js @@ -62,7 +62,7 @@ const Footer = props => { {menu.name} diff --git a/themes/commerce/components/Header.js b/themes/commerce/components/Header.js index af963564..39f77627 100644 --- a/themes/commerce/components/Header.js +++ b/themes/commerce/components/Header.js @@ -1,12 +1,12 @@ -import LogoBar from './LogoBar' -import { useEffect, useRef, useState } from 'react' import Collapse from '@/components/Collapse' -import { MenuBarMobile } from './MenuBarMobile' -import { useGlobal } from '@/lib/global' -import CONFIG from '../config' -import { MenuItemDrop } from './MenuItemDrop' import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import throttle from 'lodash.throttle' +import { useEffect, useRef, useState } from 'react' +import CONFIG from '../config' +import LogoBar from './LogoBar' +import { MenuBarMobile } from './MenuBarMobile' +import { MenuItemDrop } from './MenuItemDrop' /** * 顶部导航栏 + 菜单 @@ -21,10 +21,30 @@ export default function Header(props) { const { locale } = useGlobal() const defaultLinks = [ - { icon: 'fas fa-th', 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, to: '/archive', show: CONFIG.MENU_ARCHIVE }, - { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH } + { + icon: 'fas fa-th', + name: locale.COMMON.CATEGORY, + href: '/category', + show: CONFIG.MENU_CATEGORY + }, + { + icon: 'fas fa-tag', + name: locale.COMMON.TAGS, + href: '/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 + } ] let links = defaultLinks.concat(customNav) @@ -65,32 +85,52 @@ export default function Header(props) { return null } - return
+ return ( +
+ {/* 导航栏菜单内容 */} +
+ {/* 左侧图标Logo */} + - {/* 导航栏菜单内容 */} -
- - {/* 左侧图标Logo */} - - - {/* 移动端折叠按钮 */} -
-
- {isOpen ? : } -
-
- - {/* 桌面端顶部菜单 */} -
- {links && links?.map(link => )} -
+ {/* 移动端折叠按钮 */} +
+
+ {isOpen ? ( + + ) : ( + + )} +
- {/* 移动端折叠菜单 */} - -
- collapseRef.current?.updateCollapseHeight(param)} /> -
- + {/* 桌面端顶部菜单 */} +
+ {links && + links?.map(link => )} +
+
+ + {/* 移动端折叠菜单 */} + +
+ + collapseRef.current?.updateCollapseHeight(param) + } + /> +
+
+ ) } diff --git a/themes/commerce/components/MenuBarMobile.js b/themes/commerce/components/MenuBarMobile.js index a8ba0f12..829c44c6 100644 --- a/themes/commerce/components/MenuBarMobile.js +++ b/themes/commerce/components/MenuBarMobile.js @@ -1,18 +1,22 @@ +import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' import CONFIG from '../config' import { MenuItemCollapse } from './MenuItemCollapse' -import { siteConfig } from '@/lib/config' -export const MenuBarMobile = (props) => { +export const MenuBarMobile = props => { const { customMenu, customNav } = props const { locale } = useGlobal() let links = [ - // { name: locale.NAV.INDEX, to: '/' || '/', show: true }, - { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY }, - { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }, - { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE } - // { name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH } + // { name: locale.NAV.INDEX, href: '/' || '/', show: true }, + { + name: locale.COMMON.CATEGORY, + href: '/category', + show: CONFIG.MENU_CATEGORY + }, + { name: locale.COMMON.TAGS, href: '/tag', show: CONFIG.MENU_TAG }, + { name: locale.NAV.ARCHIVE, href: '/archive', show: CONFIG.MENU_ARCHIVE } + // { name: locale.NAV.SEARCH, href: '/search', show: CONFIG.MENU_SEARCH } ] if (customNav) { @@ -30,7 +34,13 @@ export const MenuBarMobile = (props) => { return ( ) } diff --git a/themes/commerce/components/MenuGroupCard.js b/themes/commerce/components/MenuGroupCard.js index 99c94626..63f0f48e 100644 --- a/themes/commerce/components/MenuGroupCard.js +++ b/themes/commerce/components/MenuGroupCard.js @@ -14,19 +14,19 @@ const MenuGroupCard = props => { const links = [ { name: locale.COMMON.ARTICLE, - to: '/archive', + href: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE }, { name: locale.COMMON.CATEGORY, - to: '/category', + href: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY }, { name: locale.COMMON.TAGS, - to: '/tag', + href: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG } @@ -46,9 +46,9 @@ const MenuGroupCard = props => { if (link.show) { return ( { onClick={toggleShow}> {!hasSubMenu && ( @@ -64,7 +64,7 @@ export const MenuItemCollapse = props => {
- + {link?.icon && }{' '} {sLink.title} diff --git a/themes/commerce/components/MenuItemDrop.js b/themes/commerce/components/MenuItemDrop.js index fabd6c10..d5b80449 100644 --- a/themes/commerce/components/MenuItemDrop.js +++ b/themes/commerce/components/MenuItemDrop.js @@ -2,10 +2,15 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { useState } from 'react' +/** + * 下拉菜单 + * @param {*} param0 + * @returns + */ export const MenuItemDrop = ({ link }) => { const [show, changeShow] = useState(false) const hasSubMenu = link?.subMenus?.length > 0 - const selected = useRouter().asPath === link?.to + const selected = useRouter().asPath === link?.href if (!link || !link.show) { return null @@ -18,7 +23,7 @@ export const MenuItemDrop = ({ link }) => { className='h-full'> {!hasSubMenu && ( {link?.icon && }
{link?.name}
@@ -45,7 +50,7 @@ export const MenuItemDrop = ({ link }) => {
  • - + {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 ( + <> + + + ) } diff --git a/themes/example/components/BlogItem.js b/themes/example/components/BlogItem.js index f1e54ffe..90a40f3a 100644 --- a/themes/example/components/BlogItem.js +++ b/themes/example/components/BlogItem.js @@ -2,7 +2,6 @@ import LazyImage from '@/components/LazyImage' import NotionIcon from '@/components/NotionIcon' import TwikooCommentCount from '@/components/TwikooCommentCount' import { siteConfig } from '@/lib/config' -import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' import Link from 'next/link' import CONFIG from '../config' @@ -15,9 +14,6 @@ const BlogItem = ({ post }) => { const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail - const url = checkContainHttp(post.slug) - ? sliceUrlFromHttp(post.slug) - : `${siteConfig('SUB_PATH', '')}/${post.slug}` return (
    {

    {siteConfig('POST_TITLE_ICON') && ( @@ -72,7 +68,7 @@ const BlogItem = ({ post }) => { {/* 图片封面 */} {showPageCover && (
    - + {archivePosts[archiveTitle].map(post => { - const url = checkContainHttp(post.slug) - ? sliceUrlFromHttp(post.slug) - : `${siteConfig('SUB_PATH', '')}/${post.slug}` - return (
  • {post?.publishDay}   {post.title} 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) } ] diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js index 6e31efac..7419dede 100644 --- a/themes/fukasawa/components/BlogCard.js +++ b/themes/fukasawa/components/BlogCard.js @@ -1,7 +1,6 @@ import LazyImage from '@/components/LazyImage' import NotionIcon from '@/components/NotionIcon' import { siteConfig } from '@/lib/config' -import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' import Link from 'next/link' import CONFIG from '../config' import TagItemMini from './TagItemMini' @@ -41,10 +40,6 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => { } : {} - const url = checkContainHttp(post.slug) - ? sliceUrlFromHttp(post.slug) - : `${siteConfig('SUB_PATH', '')}/${post.slug}` - return (
    {
    {/* 封面图 */} {showPageCover && ( - +
    {

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

    diff --git a/themes/fukasawa/components/BlogPostArchive.js b/themes/fukasawa/components/BlogPostArchive.js index 300098d4..bcdafccf 100644 --- a/themes/fukasawa/components/BlogPostArchive.js +++ b/themes/fukasawa/components/BlogPostArchive.js @@ -1,6 +1,4 @@ import Link from 'next/link' -import { siteConfig } from '@/lib/config' -import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 博客归档 @@ -16,31 +14,28 @@ const BlogArchiveItem = ({ posts = [], archiveTitle }) => { return (
    + className='pt-16 pb-4 text-3xl dark:text-gray-300' + id={archiveTitle}> {archiveTitle}
      {posts?.map(post => { - const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` - return
    • -
      - {post.date?.start_date}{' '} -   - - - {post.title} - - -
      -
      • + return ( +
    • +
      + {post.date?.start_date}{' '} +   + + {post.title} + +
      +
      • + ) })}
    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) => ( + + ))} + - ) } diff --git a/themes/game/components/BlogArchiveItem.js b/themes/game/components/BlogArchiveItem.js index ac1c2522..4a92959e 100644 --- a/themes/game/components/BlogArchiveItem.js +++ b/themes/game/components/BlogArchiveItem.js @@ -1,6 +1,4 @@ -import { siteConfig } from '@/lib/config' import Link from 'next/link' -import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 归档分组文章 @@ -9,36 +7,31 @@ import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' */ export default function BlogArchiveItem({ archiveTitle, archivePosts }) { return ( -
    -
    - {archiveTitle} -
    +
    +
    + {archiveTitle} +
    -
      - {archivePosts[archiveTitle].map(post => { - const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` - - return
    • -
      - - {post.date?.start_date} - {' '} -   - - - {post.title} - - -
      -
      • - })} -
    -
    +
      + {archivePosts[archiveTitle].map(post => { + return ( +
    • +
      + {post.date?.start_date}{' '} +   + + {post.title} + +
      +
      • + ) + })} +
    +
    ) } diff --git a/themes/game/components/BlogPost.js b/themes/game/components/BlogPost.js index fbe52fdf..0131dc62 100644 --- a/themes/game/components/BlogPost.js +++ b/themes/game/components/BlogPost.js @@ -1,40 +1,40 @@ -import Link from 'next/link' -import { siteConfig } from '@/lib/config' -import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' import NotionIcon from '@/components/NotionIcon' import NotionPage from '@/components/NotionPage' +import { siteConfig } from '@/lib/config' +import Link from 'next/link' const BlogPost = ({ post }) => { - const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` - const showPreview = siteConfig('POST_LIST_PREVIEW') && post.blockMap return ( - ( - -
    -
    -

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

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

    -
    - {!showPreview &&

    - {post.summary} -

    } + {!showPreview && ( +

    + {post.summary} +

    + )} {showPreview && post?.blockMap && ( -
    +
    -
    +
    )}
    - - ) + ) } 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' && ( -