From 437f9691151dbccb96d517b2caf4ebbca0310d1b Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sun, 18 Jun 2023 11:12:54 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=8B=E7=BC=A9=E5=B0=81=E9=9D=A2=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/notion/getPageProperties.js | 28 ++----------- lib/notion/mapImage.js | 42 +++++++++++++++----- pages/[...slug].js | 2 +- themes/example/components/BlogPostCard.js | 2 +- themes/fukasawa/components/ArticleDetail.js | 4 +- themes/fukasawa/components/BlogCard.js | 16 ++++---- themes/hexo/components/ArticleRecommend.js | 4 +- themes/hexo/components/BlogPostCard.js | 8 ++-- themes/hexo/components/HeaderArticle.js | 2 +- themes/hexo/components/LatestPostsGroup.js | 2 +- themes/matery/components/ArticleRecommend.js | 4 +- themes/matery/components/BlogPostCard.js | 8 ++-- themes/matery/components/HeaderArticle.js | 2 +- themes/matery/components/LatestPostsGroup.js | 4 +- themes/medium/components/BlogPostCard.js | 2 +- themes/next/components/ArticleDetail.js | 4 +- themes/next/components/BlogPostCard.js | 4 +- 17 files changed, 69 insertions(+), 69 deletions(-) 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 ddad3bdc..0dae6ab9 100644 --- a/lib/notion/mapImage.js +++ b/lib/notion/mapImage.js @@ -1,13 +1,33 @@ 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) => { +const compressImage = (image, width = 400) => { if (image && image.indexOf(BLOG.NOTION_HOST) === 0) { - return image + '&width=200' + return `${image}&width=${width}` } + // 压缩unsplash图片 + if (image && 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() + } + + return image } /** @@ -18,7 +38,7 @@ const compressImage = (image) => { * @param {*} value * @returns */ -const mapImgUrl = (img, block, type = 'block') => { +const mapImgUrl = (img, block, type = 'block', from) => { if (!img) { return null } @@ -30,16 +50,16 @@ const mapImgUrl = (img, block, type = 'block') => { ret = img } - // 书签的地址本身就是永久链接，无需处理 - if (block?.type === 'bookmark') { - ret = img - } - - // notion 图床转换为永久图床地址 + // 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 } - console.log('图床', ret) + + // 文章封面 + 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 && (