diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js index b0c45191..8112b85e 100644 --- a/lib/notion/getNotionData.js +++ b/lib/notion/getNotionData.js @@ -151,10 +151,10 @@ function getCategoryOptions(schema) { * @param from * @returns {Promise<{title,description,pageCover,icon}>} */ -function getBlogInfo({ collection, block }) { +function getSiteInfo({ collection, block }) { const title = collection?.name?.[0][0] || BLOG.TITLE const description = collection?.description ? Object.assign(collection).description[0][0] : BLOG.DESCRIPTION - const pageCover = collection?.cover ? (mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value)) : BLOG.HOME_BANNER_IMAGE + const pageCover = collection?.cover ? mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value) : BLOG.HOME_BANNER_IMAGE let icon = collection?.icon ? mapImgUrl(collection?.icon, collection, 'collection') : BLOG.AVATAR // 用户头像压缩一下 @@ -181,7 +181,7 @@ async function getNotice(post) { const EmptyData = (pageId) => { const empty = { notice: null, - siteInfo: getBlogInfo({}), + siteInfo: getSiteInfo({}), allPages: [{ id: 1, title: `无法获取Notion数据,请检查Notion_ID: \n 当前 ${pageId}`, summary: '访问文档获取帮助→ https://tangly1024.com/article/vercel-deploy-notion-next', status: 'Published', type: 'Post', slug: '13a171332816461db29d50e9f575b00d', date: { start_date: '2023-04-24', lastEditedTime: '2023-04-24', tagItems: [] } }], collection: [], collectionQuery: {}, @@ -223,7 +223,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) { return EmptyData(pageId) } const collection = Object.values(pageRecordMap.collection)[0]?.value || {} - const siteInfo = getBlogInfo({ collection, block }) + const siteInfo = getSiteInfo({ collection, block }) const collectionId = rawMetadata?.collection_id const collectionQuery = pageRecordMap.collection_query const collectionView = pageRecordMap.collection_view diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index 1d4554df..0a420727 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -2,9 +2,9 @@ import { getTextContent, getDateValue } from 'notion-utils' import { NotionAPI } from 'notion-client' import BLOG from '@/blog.config' import formatDate from '../formatDate' -import { defaultMapImageUrl } from 'react-notion-x' // import { createHash } from 'crypto' import md5 from 'js-md5' +import { mapImgUrl } from './mapImage' export default async function getPageProperties(id, block, schema, authToken, tagOptions) { const rawProperties = Object.entries(block?.[id]?.value?.properties || []) @@ -96,8 +96,9 @@ export default async function getPageProperties(id, block, schema, authToken, ta properties.createdTime = formatDate(new Date(value.created_time).toString(), BLOG.LANG) 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) ?? '' + properties.pageIcon = mapImgUrl(block[id].value?.format?.page_icon, block[id].value) ?? '' + properties.pageCover = mapImgUrl(block[id].value?.format?.page_cover, block[id].value) ?? '' + properties.pageCoverThumbnail = mapImgUrl(block[id].value?.format?.page_cover, block[id].value, 'block', 'pageCoverThumbnail') ?? '' properties.content = value.content ?? [] properties.password = properties.password ? md5(properties.slug + properties.password) @@ -109,27 +110,6 @@ export default async function getPageProperties(id, block, schema, authToken, ta return properties } -// 从Block获取封面图;优先取PageCover,否则取内容图片 -function getImageUrl(imgObj, blockVal) { - if (!imgObj) { - return null - } - if (imgObj.startsWith('/')) { - return BLOG.NOTION_HOST + imgObj // notion内部图片转相对路径为绝对路径 - } - - if (imgObj.startsWith('http')) { - // 判断如果是notion上传的图片要拼接访问token - const u = new URL(imgObj) - if (u.pathname.startsWith('/secure.notion-static.com') && u.hostname.endsWith('.amazonaws.com')) { - return defaultMapImageUrl(imgObj, blockVal) // notion上传的图片需要转换请求地址 - } - } - - // 其他图片链接 或 emoji - return imgObj -} - function mapProperties(properties) { if (properties?.type === BLOG.NOTION_PROPERTY_NAME.type_post) { properties.type = 'Post' diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js index 2bb8faf3..ea30fbfc 100644 --- a/lib/notion/mapImage.js +++ b/lib/notion/mapImage.js @@ -1,37 +1,74 @@ import BLOG from '@/blog.config' /** - * notion图片可以通过指定url-query参数来压缩裁剪图片 例如 ?width=200 + * 压缩图片 + * 1. Notion图床可以通过指定url-query参数来压缩裁剪图片 例如 ?xx=xx&width=400 + * 2. UnPlash 图片可以通过api q=50 控制压缩质量 width=400 控制图片尺寸 * @param {*} image */ -const compressImage = (image) => { - if (image && image.indexOf(BLOG.NOTION_HOST) === 0) { - return image + '&width=200' +const compressImage = (image, width = 400) => { + if (!image) { + return null } + if (image.indexOf(BLOG.NOTION_HOST) === 0) { + return `${image}&width=${width}` + } + // 压缩unsplash图片 + if (image.indexOf('https://images.unsplash.com/') === 0) { + // 将URL解析为一个对象 + const urlObj = new URL(image) + // 获取URL参数 + const params = new URLSearchParams(urlObj.search) + // 将q参数的值替换 + params.set('q', '50') + // 尺寸 + params.set('width', width) + // 格式 + params.set('fmt', 'webp') + // 生成新的URL + urlObj.search = params.toString() + return urlObj.toString() + } + + // 此处还可以添加您的自定义图传的封面图压缩参数。 + // .e.g + if (image.indexOf('https://your_picture_bed') === 0) { + return 'do_somethin_here' + } + + return image } + /** - * Notion图片映射处理有emoji的图标 + * 图片映射 + * 1. 如果是 /xx.xx 相对路径格式,则转化为 完整notion域名图片 + * 2. 如果是 bookmark类型的block 图片封面无需处理 * @param {*} img * @param {*} value * @returns */ -const mapImgUrl = (img, block, type = 'block') => { - let ret = null +const mapImgUrl = (img, block, type = 'block', from) => { if (!img) { - return ret + return null } + let ret = null // 相对目录,则视为notion的自带图片 if (img.startsWith('/')) { ret = BLOG.NOTION_HOST + img - } - // 书签的地址本身就是永久链接,无需处理 - if (!ret && block?.type === 'bookmark') { + } else { ret = img } - // notion永久图床地址 - if (!ret && ret !== null && ret.indexOf('secure.notion-static.com') > 0 && (BLOG.IMG_URL_TYPE === 'Notion' || type !== 'block')) { + + // Notion 图床转换为永久地址 + if (ret.indexOf('secure.notion-static.com') > 0 && (BLOG.IMG_URL_TYPE === 'Notion' || type !== 'block')) { ret = BLOG.NOTION_HOST + '/image/' + encodeURIComponent(ret) + '?table=' + type + '&id=' + block.id } + + // 文章封面 + if (from === 'pageCoverThumbnail') { + ret = compressImage(ret) + } + return ret } diff --git a/pages/[...slug].js b/pages/[...slug].js index cc2edcd5..5363f73a 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -92,7 +92,7 @@ const Slug = props => { description: post?.summary, type: post?.type, slug: post?.slug, - image: post?.page_cover || (siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE), + image: post?.pageCoverThumbnail || (siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE), category: post?.category?.[0], tags: post?.tags } diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js index b773e29f..c02e6a63 100644 --- a/themes/example/components/BlogPostCard.js +++ b/themes/example/components/BlogPostCard.js @@ -41,7 +41,7 @@ const BlogPostCard = ({ post }) => { {showPageCover && (
-
+
)} diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js index ea76fd9c..78f2f47f 100644 --- a/themes/fukasawa/components/ArticleDetail.js +++ b/themes/fukasawa/components/ArticleDetail.js @@ -22,10 +22,10 @@ export default function ArticleDetail(props) { const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE) return (
- {post?.type && !post?.type !== 'Page' && post?.page_cover && ( + {post?.type && !post?.type !== 'Page' && post?.pageCover && (
{/* eslint-disable-next-line @next/next/no-img-element */} - {post.title} + {post.title}
)}
{ const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap // matery 主题默认强制显示图片 - if (post && !post.page_cover) { - post.page_cover = siteInfo?.pageCover + if (post && !post.pageCover) { + post.pageCoverThumbnail = siteInfo?.pageCover } - const showPageCover = CONFIG_FUKA.POST_LIST_COVER && post?.page_cover + const showPageCover = CONFIG_FUKA.POST_LIST_COVER && post?.pageCoverThumbnail return (
{ {post.summary}

)} - + {/* 分类标签 */}
- + {post.category} - +
@@ -61,11 +61,11 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
{/* eslint-disable-next-line @next/next/no-img-element */} {post.title} - {/* {post.title} */} + {/* {post.title} */}
)} diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js index 9b5a5500..85b9de6d 100644 --- a/themes/hexo/components/ArticleRecommend.js +++ b/themes/hexo/components/ArticleRecommend.js @@ -29,8 +29,8 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
{recommendPosts.map(post => { - const headerImage = post?.page_cover - ? `url("${post.page_cover}")` + const headerImage = post?.pageCoverThumbnail + ? `url("${post.pageCoverThumbnail}")` : `url("${siteInfo?.pageCover}")` return ( diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index af2192b0..5c49b88f 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -7,10 +7,10 @@ import BLOG from '@/blog.config' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap - if (post && !post.page_cover && CONFIG_HEXO.POST_LIST_COVER_DEFAULT) { - post.page_cover = siteInfo?.pageCover + if (post && !post.pageCoverThumbnail && CONFIG_HEXO.POST_LIST_COVER_DEFAULT) { + post.pageCover = siteInfo?.pageCoverThumbnail } - const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.page_cover && !showPreview + const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview // const delay = (index % 2) * 200 return ( @@ -36,7 +36,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { {showPageCover && (
-
+
)} diff --git a/themes/hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js index 95997fa3..9d47074b 100644 --- a/themes/hexo/components/HeaderArticle.js +++ b/themes/hexo/components/HeaderArticle.js @@ -11,7 +11,7 @@ export default function HeaderArticle({ post, siteInfo }) { if (!post) { return <> } - const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")` + const headerImage = post?.pageCover ? `url("${post.pageCover}")` : `url("${siteInfo?.pageCover}")` const date = formatDate( post?.date?.start_date || post?.createdTime, diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js index b7f7e558..20f515a5 100644 --- a/themes/hexo/components/LatestPostsGroup.js +++ b/themes/hexo/components/LatestPostsGroup.js @@ -29,7 +29,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => { {latestPosts.map(post => { const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}` - const headerImage = post?.page_cover ? post.page_cover : siteInfo?.pageCover + const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover return ( (
{recommendPosts.map(post => { - const headerImage = post?.page_cover - ? `url("${post.page_cover}")` + const headerImage = post?.pageCoverThumbnail + ? `url("${post.pageCoverThumbnail}")` : `url("${siteInfo?.pageCover}")` return ( diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js index fd5c5163..a43ac4da 100644 --- a/themes/matery/components/BlogPostCard.js +++ b/themes/matery/components/BlogPostCard.js @@ -9,10 +9,10 @@ import TwikooCommentCount from '@/components/TwikooCommentCount' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap // matery 主题默认强制显示图片 - if (post && !post.page_cover) { - post.page_cover = siteInfo?.pageCover + if (post && !post.pageCoverThumbnail) { + post.pageCoverThumbnail = siteInfo?.pageCover } - const showPageCover = CONFIG_MATERY.POST_LIST_COVER && post?.page_cover + const showPageCover = CONFIG_MATERY.POST_LIST_COVER && post?.pageCoverThumbnail const delay = (index % 3) * 300 return (
{ 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 */} {post.title} diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js index 2a526c8a..78013e8a 100644 --- a/themes/matery/components/HeaderArticle.js +++ b/themes/matery/components/HeaderArticle.js @@ -1,7 +1,7 @@ import Image from 'next/image' export default function HeaderArticle({ post, siteInfo }) { - const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover + const headerImage = post?.pageCoverThumbnail ? post?.pageCoverThumbnail : siteInfo?.pageCover const title = post?.title return (
{
{latestPosts.map(post => { const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}` - const headerImage = post?.page_cover - ? `url("${post.page_cover}")` + const headerImage = post?.pageCoverThumbnail + ? `url("${post.pageCoverThumbnail}")` : `url("${siteInfo?.pageCover}")` return ( diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js index 051bd5a3..998dd086 100644 --- a/themes/medium/components/BlogPostCard.js +++ b/themes/medium/components/BlogPostCard.js @@ -31,7 +31,7 @@ const BlogPostCard = ({ post, showSummary }) => {
{CONFIG_MEDIUM.POST_LIST_COVER &&
{/* eslint-disable-next-line @next/next/no-img-element */} - +
} {post.title}
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js index da882db9..d443f374 100644 --- a/themes/next/components/ArticleDetail.js +++ b/themes/next/components/ArticleDetail.js @@ -39,10 +39,10 @@ export default function ArticleDetail(props) { {showArticleInfo &&
{/* 头图 */} - {CONFIG_NEXT.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.page_cover && ( + {CONFIG_NEXT.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.pageCover && (
{/* eslint-disable-next-line @next/next/no-img-element */} - {post.title} + {post.title}
)} diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js index 2fb0c279..779e4971 100644 --- a/themes/next/components/BlogPostCard.js +++ b/themes/next/components/BlogPostCard.js @@ -114,12 +114,12 @@ const BlogPostCard = ({ post, showSummary }) => {
- {CONFIG_NEXT.POST_LIST_COVER && post?.page_cover && ( + {CONFIG_NEXT.POST_LIST_COVER && post?.pageCoverThumbnail && (