From c5167d9fdd6e5ff71e8704e760b241bc61b57c4d Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 11 May 2022 10:59:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=B4=E5=83=8F=E8=AF=BB=E5=8F=96Notion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 2 +- lib/notion/getNotionData.js | 46 +++++++++++++---------- next.config.js | 3 +- themes/hexo/components/InfoCard.js | 13 ++----- themes/medium/LayoutBase.js | 2 +- themes/medium/components/ArticleDetail.js | 15 +++----- themes/medium/components/InfoCard.js | 16 +++----- themes/next/components/InfoCard.js | 14 ++----- themes/next/components/SideAreaLeft.js | 2 +- themes/next/components/SideBar.js | 5 ++- 10 files changed, 52 insertions(+), 66 deletions(-) diff --git a/blog.config.js b/blog.config.js index 3d739589..460d7268 100644 --- a/blog.config.js +++ b/blog.config.js @@ -3,7 +3,6 @@ const BLOG = { AUTHOR: 'tangly1024', // 作者 BIO: '一个普通的干饭人🍚', // 作者简介 LINK: 'https://tangly1024.com', // 网站地址 - AVATAR: '/avatar.png', // 个人头像 默认取public目录下的avatar.png KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开 NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5 @@ -122,6 +121,7 @@ const BLOG = { ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx // 无关紧要的配置 + AVATAR: '/avatar.png', // 作者头像，被notion中的ICON覆盖。如果没有ICON则取public目录下的avatar.png TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖 DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖 diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js index cc7e8c8c..0b13db15 100644 --- a/lib/notion/getNotionData.js +++ b/lib/notion/getNotionData.js @@ -25,12 +25,11 @@ export async function getGlobalNotionData({ from, pageType = ['Post'] }) { - // 深拷贝数据 + // 获取Notion数据 const notionPageData = deepClone(await getNotionPageData({ pageId, from })) - const allPosts = await getAllPosts({ notionPageData, from, pageType }) - notionPageData.allPosts = allPosts - // 删除前端不需要的数据 + // 获取文章列表 + notionPageData.allPosts = await getAllPosts({ notionPageData, from, pageType }) delete notionPageData.block delete notionPageData.collection delete notionPageData.collectionQuery @@ -49,14 +48,10 @@ export async function getGlobalNotionData({ */ function getLatestPosts({ allPosts, from, latestPostCount }) { const latestPosts = Object.create(allPosts).sort((a, b) => { - console.log('排序过程', a, b) const dateA = new Date(a?.lastEditedTime || a?.createdTime || a?.date?.start_date) const dateB = new Date(b?.lastEditedTime || b?.createdTime || b?.date?.start_date) - // const dateA = new Date(a.date?.start_date) - // const dateB = new Date(b.date?.start_date) return dateB - dateA }) - console.log('排序结果', latestPosts) return latestPosts.slice(0, latestPostCount) } @@ -171,22 +166,35 @@ function getAllCategories({ allPosts, categoryOptions, sliceCount = 0 }) { function getBlogInfo({ collection, block }) { const title = collection?.name?.[0][0] || BLOG.TITLE const description = collection?.description?.[0][0] || BLOG.DESCRIPTION - const pageCover = mapCoverUrl(collection?.cover, block) - return { title, description, pageCover } + const pageCover = collection?.cover ? mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value) : BLOG.HOME_BANNER_IMAGE + const icon = collection?.icon ? mapCollectionImg(collection?.icon, collection) : BLOG.AVATAR + return { title, description, pageCover, icon } } /** - * 网站封面背景图 + * Notion图片映射 * @param pageCover * @returns {string} */ -const mapCoverUrl = (pageCover, block) => { - if (!pageCover || pageCover === '') { - return BLOG.HOME_BANNER_IMAGE +const mapImgUrl = (img, value) => { + if (img) { + if (img.startsWith('/')) return 'https://www.notion.so' + img + if (img.startsWith('http')) return defaultMapImageUrl(img, value) } - if (pageCover) { - if (pageCover.startsWith('/')) return 'https://www.notion.so' + pageCover - if (pageCover.startsWith('http')) return defaultMapImageUrl(pageCover, block[idToUuid(BLOG.NOTION_PAGE_ID)].value) +} + +/** + * collection 图片映射 + * @param {*} img + * @param {*} value + * @returns + */ +const mapCollectionImg = (img, value) => { + if (img) { + if (img.startsWith('/')) return 'https://www.notion.so' + img + if (img.startsWith('http')) { + return 'https://www.notion.so/image/' + encodeURIComponent(img) + '?table=collection&id=' + value.id + } } } @@ -246,9 +254,10 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) { const categories = getAllCategories({ allPosts, categoryOptions, sliceCount: BLOG.PREVIEW_CATEGORY_COUNT }) const tags = getAllTags({ allPosts, tagOptions, sliceCount: BLOG.PREVIEW_TAG_COUNT }) const latestPosts = getLatestPosts({ allPosts, from, latestPostCount: 5 }) - const siteInfo = getBlogInfo({ collection, block }) + const siteInfo = getBlogInfo({ collection: collection, block: block }) return { + siteInfo, collection, collectionQuery, collectionId, @@ -259,7 +268,6 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) { tagOptions, categoryOptions, rawMetadata, - siteInfo, customNav, postCount, pageIds, diff --git a/next.config.js b/next.config.js index 2eb48080..f3bd40ae 100644 --- a/next.config.js +++ b/next.config.js @@ -6,12 +6,13 @@ module.exports = withBundleAnalyzer({ webpack5: true }, images: { + // 允许next/image加载的图片 域名 domains: [ 'gravatar.com', 'www.notion.so', 'avatars.githubusercontent.com', 'images.unsplash.com' - ] // 允许next/image加载的图片 域名 + ] }, async headers() { return [ diff --git a/themes/hexo/components/InfoCard.js b/themes/hexo/components/InfoCard.js index 3fcce159..bc2983db 100644 --- a/themes/hexo/components/InfoCard.js +++ b/themes/hexo/components/InfoCard.js @@ -1,11 +1,10 @@ import BLOG from '@/blog.config' -import Image from 'next/image' import { useRouter } from 'next/router' import Card from './Card' import SocialButton from './SocialButton' import MenuGroupCard from './MenuGroupCard' export function InfoCard (props) { - const { className } = props + const { className, siteInfo } = props const router = useRouter() return
- {BLOG.AUTHOR} + {/* eslint-disable-next-line @next/next/no-img-element */} +
{BLOG.AUTHOR}
{BLOG.BIO}
diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js index 064c9b38..847b4ca2 100644 --- a/themes/medium/LayoutBase.js +++ b/themes/medium/LayoutBase.js @@ -46,7 +46,7 @@ const LayoutBase = props => { {slotRight}
{router.pathname !== '/search' && } - {showInfoCard && } + {showInfoCard && } {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && }
diff --git a/themes/medium/components/ArticleDetail.js b/themes/medium/components/ArticleDetail.js index ddaa9a76..7a4cdc61 100644 --- a/themes/medium/components/ArticleDetail.js +++ b/themes/medium/components/ArticleDetail.js @@ -1,5 +1,4 @@ import Comment from '@/components/Comment' -import Image from 'next/image' import Link from 'next/link' import ArticleAround from './ArticleAround' import CategoryItem from './CategoryItem' @@ -11,7 +10,7 @@ import BLOG from '@/blog.config' import NotionPage from '@/components/NotionPage' export const ArticleDetail = props => { - const { post, prev, next } = props + const { post, prev, next, siteInfo } = props const { locale } = useGlobal() const date = formatDate( @@ -23,14 +22,10 @@ export const ArticleDetail = props => {
<> - {BLOG.AUTHOR} + + {/* eslint-disable-next-line @next/next/no-img-element */} + +
{BLOG.AUTHOR}
diff --git a/themes/medium/components/InfoCard.js b/themes/medium/components/InfoCard.js index a0e3ccbc..ce3f7bc3 100644 --- a/themes/medium/components/InfoCard.js +++ b/themes/medium/components/InfoCard.js @@ -1,22 +1,16 @@ import BLOG from '@/blog.config' -import Image from 'next/image' import Router from 'next/router' import React from 'react' import SocialButton from './SocialButton' -const InfoCard = () => { +const InfoCard = (props) => { + const { siteInfo } = props return
{ Router.push('/about') }}> - {BLOG.AUTHOR} -
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
{BLOG.AUTHOR}
{BLOG.BIO}
diff --git a/themes/next/components/InfoCard.js b/themes/next/components/InfoCard.js index 27538b6e..6ddde9c4 100644 --- a/themes/next/components/InfoCard.js +++ b/themes/next/components/InfoCard.js @@ -1,21 +1,15 @@ import BLOG from '@/blog.config' -import Image from 'next/image' import Router from 'next/router' import React from 'react' import SocialButton from './SocialButton' -const InfoCard = () => { +const InfoCard = (props) => { + const { siteInfo } = props return <>
{ Router.push('/') }}> - {BLOG.AUTHOR} + {/* eslint-disable-next-line @next/next/no-img-element */} +
{BLOG.AUTHOR}
{BLOG.BIO}
diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js index 2d3a4db5..e0f3a931 100644 --- a/themes/next/components/SideAreaLeft.js +++ b/themes/next/components/SideAreaLeft.js @@ -47,7 +47,7 @@ const SideAreaLeft = props => { )}
- + <>
diff --git a/themes/next/components/SideBar.js b/themes/next/components/SideBar.js index afd5333e..a90c5c3d 100644 --- a/themes/next/components/SideBar.js +++ b/themes/next/components/SideBar.js @@ -16,14 +16,15 @@ import React from 'react' * @returns {JSX.Element} * @constructor */ -const SideBar = ({ tags, currentTag, post, slot, categories, currentCategory }) => { +const SideBar = (props) => { + const { tags, currentTag, post, slot, categories, currentCategory } = props const { locale } = useGlobal() return