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 */}
-

+
)}
{
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 */}

- {/*
*/}
+ {/*
*/}
)}
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 */}

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_LIST_COVER && post?.page_cover && (
+ {CONFIG_NEXT.POST_LIST_COVER && post?.pageCoverThumbnail && (