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 && (