From ffc263630903a708063d06b488596e27ef297fe6 Mon Sep 17 00:00:00 2001 From: CodeMaker-Zhao Date: Sat, 3 Dec 2022 17:44:41 +0800 Subject: [PATCH 1/4] fix: solve one character search bug --- package.json | 1 + themes/example/LayoutSearch.js | 9 +++++++-- themes/fukasawa/LayoutSearch.js | 9 +++++++-- themes/hexo/LayoutSearch.js | 11 +++++++---- themes/medium/LayoutSearch.js | 9 +++++++-- themes/next/LayoutSearch.js | 9 +++++++-- 6 files changed, 36 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index a5c72494..1858d25f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "gitalk": "^1.7.2", "localStorage": "^1.0.4", "lodash.throttle": "^4.1.1", + "mark.js": "^8.11.1", "memory-cache": "^0.2.0", "mermaid": "9.2.2", "mongodb": "^4.6.0", diff --git a/themes/example/LayoutSearch.js b/themes/example/LayoutSearch.js index 984e47e7..23b10b7a 100644 --- a/themes/example/LayoutSearch.js +++ b/themes/example/LayoutSearch.js @@ -4,6 +4,7 @@ import { BlogListScroll } from './components/BlogListScroll' import { useRouter } from 'next/router' import { useEffect } from 'react' import SearchInput from './components/SearchInput' +import Mark from 'mark.js' import LayoutBase from './LayoutBase' import { isBrowser } from '@/lib/utils' @@ -15,8 +16,12 @@ export const LayoutSearch = props => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${keyword}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + const re = new RegExp(keyword, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 100) }, [router.events]) diff --git a/themes/fukasawa/LayoutSearch.js b/themes/fukasawa/LayoutSearch.js index 9329846d..fcfa35b2 100644 --- a/themes/fukasawa/LayoutSearch.js +++ b/themes/fukasawa/LayoutSearch.js @@ -4,6 +4,7 @@ import BlogListPage from './components/BlogListPage' import BlogListScroll from './components/BlogListScroll' import { useRouter } from 'next/router' import { useEffect } from 'react' +import Mark from 'mark.js' import { isBrowser } from '@/lib/utils' export const LayoutSearch = (props) => { @@ -14,8 +15,12 @@ export const LayoutSearch = (props) => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${currentSearch}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${currentSearch}`) + const re = new RegExp(currentSearch, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 100) }) diff --git a/themes/hexo/LayoutSearch.js b/themes/hexo/LayoutSearch.js index 6454ef3a..679975cb 100644 --- a/themes/hexo/LayoutSearch.js +++ b/themes/hexo/LayoutSearch.js @@ -6,6 +6,7 @@ import BlogPostListPage from './components/BlogPostListPage' import LayoutBase from './LayoutBase' import SearchInput from './components/SearchInput' import { useGlobal } from '@/lib/global' +import Mark from 'mark.js' import TagItemMini from './components/TagItemMini' import Card from './components/Card' import Link from 'next/link' @@ -25,10 +26,12 @@ export const LayoutSearch = props => { const targets = document.getElementsByClassName('replace') for (const container of targets) { if (container && container.innerHTML) { - const re = new RegExp(`${currentSearch}`, 'gim') - container.innerHTML = container.innerHTML.replace( - re, `${currentSearch}` - ) + const re = new RegExp(currentSearch, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } } } diff --git a/themes/medium/LayoutSearch.js b/themes/medium/LayoutSearch.js index 9a34bcec..76a9ddae 100644 --- a/themes/medium/LayoutSearch.js +++ b/themes/medium/LayoutSearch.js @@ -6,6 +6,7 @@ import CategoryGroup from './components/CategoryGroup' import { useEffect } from 'react' import { isBrowser } from '@/lib/utils' import BLOG from '@/blog.config' +import Mark from 'mark.js' import BlogPostListScroll from './components/BlogPostListScroll' import BlogPostListPage from './components/BlogPostListPage' @@ -16,8 +17,12 @@ export const LayoutSearch = (props) => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${keyword}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + const re = new RegExp(keyword, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 100) diff --git a/themes/next/LayoutSearch.js b/themes/next/LayoutSearch.js index d4ec1bb8..78664343 100644 --- a/themes/next/LayoutSearch.js +++ b/themes/next/LayoutSearch.js @@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global' import { isBrowser } from '@/lib/utils' import BlogPostListScroll from './components/BlogPostListScroll' import BlogPostListPage from './components/BlogPostListPage' +import Mark from 'mark.js' import BLOG from '@/blog.config' export const LayoutSearch = (props) => { @@ -12,8 +13,12 @@ export const LayoutSearch = (props) => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${keyword}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + const re = new RegExp(keyword, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 200) return ( From 942f33d5bca98ec8f6868c0a8777c46718ed188f Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 3 Dec 2022 20:46:28 +0800 Subject: [PATCH 2/4] contributor --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 14c81beb..df20f48e 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,9 @@ yarn run start # 本地启动NextJS服务 ifyz
ifyz
🔧 🐛 + SwwweetOrange
SwwweetOrange
🔧 🐛 + + From ebf55f504f5cbb7dbbc5a0b7a20976643a54560b Mon Sep 17 00:00:00 2001 From: CodeMaker-Zhao Date: Sat, 3 Dec 2022 21:30:27 +0800 Subject: [PATCH 3/4] fix: solve linked img crash --- themes/hexo/components/BlogPostCard.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index 45d3e24a..8105e545 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -7,6 +7,11 @@ import NotionPage from '@/components/NotionPage' const BlogPostCard = ({ post, showSummary }) => { const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap + const linkedCoverPrefix = 'https://www.notion.so/image/' + if (post?.page_cover && post?.page_cover?.startsWith(linkedCoverPrefix)) { + const linkedCoverPrefixLength = linkedCoverPrefix.length + post.page_cover = decodeURIComponent(post.page_cover.slice(linkedCoverPrefixLength)) + } return (
Date: Sun, 4 Dec 2022 12:09:11 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B0=81=E9=9D=A2?= =?UTF-8?q?=E5=9B=BEbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/notion/getPageProperties.js | 33 ++++++++++++++------------ themes/hexo/components/BlogPostCard.js | 5 ---- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index 771915e9..1eced850 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -79,8 +79,8 @@ 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 = getPageIcon(id, block) ?? '' - properties.page_cover = getPostCover(id, block) ?? siteInfo?.pageCover + 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) ?? siteInfo?.pageCover properties.content = value.content ?? [] properties.tagItems = properties?.tags?.map(tag => { return { name: tag, color: tagOptions?.find(t => t.value === tag)?.color || 'gray' } @@ -89,20 +89,23 @@ export default async function getPageProperties(id, block, schema, authToken, ta return properties // 从Block获取封面图;优先取PageCover，否则取内容图片 - function getPostCover(id, block) { - const pageCover = block[id].value?.format?.page_cover - if (pageCover) { - if (pageCover.startsWith('/')) return 'https://www.notion.so' + pageCover - if (pageCover.startsWith('http')) return defaultMapImageUrl(pageCover, block[id].value) + function getImageUrl(imgObj, blockVal) { + if (!imgObj) { + return null + } + if (imgObj.startsWith('/')) { + return 'https://www.notion.so' + imgObj // notion内部图片转相对路径为绝对路径 } - } -} -function getPageIcon(id, block) { - const pageIcon = block[id].value?.format?.page_icon - if (pageIcon) { - if (pageIcon.startsWith('/')) return 'https://www.notion.so' + pageIcon - if (pageIcon.startsWith('http')) return defaultMapImageUrl(pageIcon, block[id].value) - return pageIcon + 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 } } diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index 8105e545..45d3e24a 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -7,11 +7,6 @@ import NotionPage from '@/components/NotionPage' const BlogPostCard = ({ post, showSummary }) => { const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap - const linkedCoverPrefix = 'https://www.notion.so/image/' - if (post?.page_cover && post?.page_cover?.startsWith(linkedCoverPrefix)) { - const linkedCoverPrefixLength = linkedCoverPrefix.length - post.page_cover = decodeURIComponent(post.page_cover.slice(linkedCoverPrefixLength)) - } return (