Merge pull request #1113 from tangly1024/fix/website-performance

feat 压缩网站Notion头像

lib/notion/getNotionData.js

@@ -7,7 +7,7 @@ import { getAllCategories } from './getAllCategories'
 import getAllPageIds from './getAllPageIds'
 import { getAllTags } from './getAllTags'
 import getPageProperties from './getPageProperties'
-import { mapImgUrl } from './mapImage'
+import { mapImgUrl, compressImage } from './mapImage'
 
 /**
  * 获取博客数据
@@ -155,7 +155,10 @@ function getBlogInfo({ 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
-  let icon = collection?.icon ? (mapImgUrl(collection?.icon, collection, 'collection')) : BLOG.AVATAR
+  let icon = collection?.icon ? mapImgUrl(collection?.icon, collection, 'collection') : BLOG.AVATAR
+  // 用户头像压缩一下
+  icon = compressImage(icon)
+
   // 站点图标不能是emoji情
   const emojiPattern = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g
   if (emojiPattern.test(icon)) {

lib/notion/mapImage.js

@@ -1,5 +1,14 @@
 import BLOG from '@/blog.config'
 
+/**
+ * notion图片可以通过指定url-query参数来压缩裁剪图片 例如 ?width=200
+ * @param {*} image
+ */
+const compressImage = (image) => {
+  if (image.indexOf(BLOG.NOTION_HOST) === 0) {
+    return image + '&width=200'
+  }
+}
 /**
  * Notion图片映射处理有emoji的图标
  * @param {*} img
@@ -32,4 +41,4 @@ const mapImgUrl = (img, block, type = 'block') => {
   return ret
 }
 
-export { mapImgUrl }
+export { mapImgUrl, compressImage }