From f5a710ce904a412ce9e6100994d11fe3f9c4a4a8 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 31 Jan 2024 21:54:28 +0800 Subject: [PATCH 1/5] nav-theme postCard http link --- themes/nav/components/BlogPostCard.js | 7 +-- themes/nav/components/BlogPostListAll.js | 54 +----------------------- 2 files changed, 6 insertions(+), 55 deletions(-) diff --git a/themes/nav/components/BlogPostCard.js b/themes/nav/components/BlogPostCard.js index e0040f7a..d52ef0e6 100755 --- a/themes/nav/components/BlogPostCard.js +++ b/themes/nav/components/BlogPostCard.js @@ -8,8 +8,9 @@ const BlogPostCard = ({ post, className }) => { const currentSelected = router.asPath.split('?')[0] === '/' + post.slug let pageIcon = post.pageIcon !== '' ? post.pageIcon : siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') pageIcon = post.pageIcon.indexOf('amazonaws.com') !== -1 ? post.pageIcon + '&width=88' : post.pageIcon + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return ( - +
@@ -21,7 +22,7 @@ const BlogPostCard = ({ post, className }) => {
) - function removeHttp(str) { + function sliceUrlFromHttp(str) { // 检查字符串是否包含http if (str.includes('http')) { // 如果包含，找到http的位置 @@ -33,7 +34,7 @@ const BlogPostCard = ({ post, className }) => { return str; } } - function checkRemoveHttp(str) { + function checkContainHttp(str) { // 检查字符串是否包含http if (str.includes('http')) { // 如果包含，找到http的位置 diff --git a/themes/nav/components/BlogPostListAll.js b/themes/nav/components/BlogPostListAll.js index d1249c56..9b3bc85c 100755 --- a/themes/nav/components/BlogPostListAll.js +++ b/themes/nav/components/BlogPostListAll.js @@ -13,15 +13,9 @@ import { siteConfig } from '@/lib/config' * @constructor */ const BlogPostListAll = (props) => { - // const { customMenu, posts, category, tag, allNavPages, categoryOptions } = props - // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages) const { customMenu } = props - - // const [filteredNavPages, setFilteredNavPages] = useState(allNavPages) const { filteredNavPages, setFilteredNavPages, allNavPages } = useNavGlobal() - // const [filteredNavPages] = useState(allNavPages) - // const router = useRouter() // 对自定义分类格式化，方便后续使用分类名称做索引，检索同步图标信息 // 目前只支持二级分类 const links = customMenu @@ -29,9 +23,6 @@ const BlogPostListAll = (props) => { // for循环遍历数组 links?.map((link, i) => { const linkTitle = link.title + '' - // console.log('####### link') - // console.log(link) - // filterLinks[linkTitle] = link filterLinks[linkTitle] = { title: link.title, icon: link.icon, pageIcon: link.pageIcon } if (link?.subMenus) { link.subMenus?.map((group, index) => { @@ -44,22 +35,10 @@ const BlogPostListAll = (props) => { } }) - console.log('####### filterLinks') - console.log(filterLinks) - - // console.log('####### filterLinks') - // console.log(filterLinks) - const selectedSth = false const groupedArray = filteredNavPages?.reduce((groups, item) => { const categoryName = item?.category ? item?.category : '' // 将category转换为字符串 const categoryIcon = filterLinks[categoryName]?.icon ? filterLinks[categoryName]?.icon : '' // 将pageIcon转换为字符串 - - // console.log('####### categoryName') - // console.log(categoryName) - // console.log('####### categoryIcon') - // console.log(categoryIcon) - let existingGroup = null // 开启自动分组排序 if (JSON.parse(siteConfig('NAV_AUTO_SORT', null, CONFIG))) { @@ -81,17 +60,9 @@ const BlogPostListAll = (props) => { groupedArray?.map((group) => { // 自定义分类图标与post的category共用 // 判断自定义分类与Post中category同名的项，将icon的值传递给post - // let groupTitle = group?.category - // item.icon = filterLinks[categoryName]?.icon ? filterLinks[categoryName]?.icon : '' - // console.log('####### item') - // console.log(item) + const groupSelected = false - // for (const post of group?.items) { - // if (router.asPath.split('?')[0] === '/' + post.slug) { - // groupSelected = true - // selectedSth = true - // } - // } + group.selected = groupSelected return null }) @@ -110,27 +81,6 @@ const BlogPostListAll = (props) => {
} - // 处理自定义导航菜单项 - // let keyword = searchInputRef.current.value - // if (keyword) { - // keyword = keyword.trim() - // } else { - // setFilteredNavPages(allNavPages) - // } - // for (const filterGroup of filterAllNavPages) { - // for (let i = filterGroup.items.length - 1; i >= 0; i--) { - // const post = filterGroup.items[i] - // const articleInfo = post.title + '' - // const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1 - // if (!hit) { - // // 删除 - // filterGroup.items.splice(i, 1) - // } - // } - // if (filterGroup.items && filterGroup.items.length > 0) { - // filterPosts.push(filterGroup) - // } - // } } export default BlogPostListAll From ea859a6c3c54bb3221e2871e6f61959939bfbdb5 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 31 Jan 2024 21:59:11 +0800 Subject: [PATCH 2/5] Annotation --- themes/nav/components/BlogPostCard.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/themes/nav/components/BlogPostCard.js b/themes/nav/components/BlogPostCard.js index d52ef0e6..cc3934e0 100755 --- a/themes/nav/components/BlogPostCard.js +++ b/themes/nav/components/BlogPostCard.js @@ -22,6 +22,8 @@ const BlogPostCard = ({ post, className }) => { ) + + // 检查连接是否是外链 function sliceUrlFromHttp(str) { // 检查字符串是否包含http if (str.includes('http')) { From 66fc70e4f9c3b04668ff576891e2dffab3dd45d6 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 1 Feb 2024 11:57:31 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E4=B8=9D=E6=BB=91=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ThemeSwitch.js | 8 +++++--- pages/_document.js | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js index 6284e2b6..ba39b539 100644 --- a/components/ThemeSwitch.js +++ b/components/ThemeSwitch.js @@ -25,7 +25,9 @@ const ThemeSwitch = () => { const query = router.query query.theme = newTheme router.push({ pathname: router.pathname, query }).then(() => { - setIsLoading(false) + setTimeout(() => { + setIsLoading(false) + }, 500); }) } @@ -72,8 +74,8 @@ const ThemeSwitch = () => { {/* 切换主题加载时的全屏遮罩 */} -
diff --git a/pages/_document.js b/pages/_document.js index 976a45fb..e1e78253 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -28,7 +28,7 @@ class MyDocument extends Document { })} - +
From 022706bb40338613e0d39c408e1330401d765821 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 1 Feb 2024 15:25:07 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fukasawa=E5=87=8F=E5=B0=91=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E3=80=81=E5=B9=B6=E6=94=AF=E6=8C=81=E8=B0=83=E6=95=B4?= =?UTF-8?q?=EF=BC=9B=20=E5=9B=BE=E7=89=87=E7=94=BB=E8=B4=A8=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E6=94=AF=E6=8C=81=E8=B0=83=E8=8A=82=EF=BC=9B=20?= =?UTF-8?q?=E5=8D=9A=E5=AE=A2=E6=94=AF=E6=8C=81=E5=A4=96=E9=93=BE=E6=96=87?= =?UTF-8?q?=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 2 + components/NotionPage.js | 33 ++++++++- lib/notion/getNotionData.js | 2 +- lib/notion/mapImage.js | 41 ++++++----- lib/utils.js | 27 +++++++ .../example/components/BlogListGroupByDate.js | 11 +-- themes/example/components/BlogPostCard.js | 4 +- themes/fukasawa/components/AsideLeft.js | 71 ++++++++++++------- themes/fukasawa/components/BlogCard.js | 31 +++++--- themes/fukasawa/components/BlogPostArchive.js | 10 +-- .../fukasawa/components/MenuItemCollapse.js | 2 +- themes/fukasawa/config.js | 4 +- themes/fukasawa/index.js | 21 +----- themes/gitbook/components/BlogArchiveItem.js | 11 +-- themes/gitbook/components/BlogPostCard.js | 4 +- themes/heo/components/ArticleRecommend.js | 4 +- themes/heo/components/BlogPostArchive.js | 8 ++- themes/heo/components/BlogPostCard.js | 6 +- themes/heo/components/LatestPostsGroup.js | 4 +- themes/heo/components/LatestPostsGroupMini.js | 5 +- themes/hexo/components/ArticleRecommend.js | 4 +- themes/hexo/components/BlogPostArchive.js | 10 +-- themes/hexo/components/BlogPostCard.js | 5 +- themes/hexo/components/BlogPostCardInfo.js | 4 +- themes/hexo/components/LatestPostsGroup.js | 7 +- themes/matery/components/ArticleRecommend.js | 4 +- themes/matery/components/BlogPostArchive.js | 13 ++-- themes/matery/components/BlogPostCard.js | 6 +- themes/medium/components/BlogArchiveItem.js | 15 ++-- themes/medium/components/BlogPostCard.js | 6 +- themes/nav/components/BlogArchiveItem.js | 11 +-- themes/nav/components/BlogPostCard.js | 25 +------ themes/next/components/BlogPostArchive.js | 11 +-- themes/next/components/BlogPostCard.js | 8 ++- themes/next/components/LatestPostsGroup.js | 4 +- themes/nobelium/components/BlogArchiveItem.js | 11 +-- themes/nobelium/components/BlogPost.js | 5 +- themes/plog/components/BlogArchiveItem.js | 11 +-- themes/plog/components/BlogPost.js | 2 +- themes/plog/index.js | 3 +- themes/simple/components/BlogArchiveItem.js | 10 +-- themes/simple/components/BlogItem.js | 8 ++- themes/simple/components/Header.js | 4 +- 43 files changed, 308 insertions(+), 180 deletions(-) diff --git a/blog.config.js b/blog.config.js index f13937be..3aa7b0a8 100644 --- a/blog.config.js +++ b/blog.config.js @@ -37,6 +37,8 @@ const BLOG = { BLOG_FAVICON: process.env.NEXT_PUBLIC_FAVICON || '/favicon.ico', // blog favicon 配置, 默认使用 /public/favicon.ico，支持在线图片，如 https://img.imesong.com/favicon.png + IMAGE_COMPRESS_WIDTH: process.env.NEXT_PUBLIC_IMAGE_COMPRESS_WIDTH || 800, // 图片压缩宽度默认值，作用于博客封面和文章内容 越小加载图片越快 + IMAGE_ZOOM_IN_WIDTH: process.env.NEXT_PUBLIC_IMAGE_ZOOM_IN_WIDTH || 1200, // 文章图片点击放大后的画质宽度，不代表在网页中的实际展示宽度 RANDOM_IMAGE_URL: process.env.NEXT_PUBLIC_RANDOM_IMAGE_URL || '', // 随机图片API,如果未配置下面的关键字，主页封面，头像，文章封面图都会被替换为随机图片 RANDOM_IMAGE_REPLACE_TEXT: process.env.NEXT_PUBLIC_RANDOM_IMAGE_NOT_REPLACE_TEXT || 'images.unsplash.com', // 触发替换图片的 url 关键字(多个支持用英文逗号分开)，只有图片地址中包含此关键字才会替换为上方随机图片url // eg: images.unsplash.com(notion图床的所有图片都会替换),如果你在 notion 里已经添加了一个随机图片 url，恰巧那个服务跑路或者挂掉，想一键切换所有配图可以将该 url 配置在这里 diff --git a/components/NotionPage.js b/components/NotionPage.js index fb68691a..58153fbd 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -2,7 +2,7 @@ import dynamic from 'next/dynamic' import mediumZoom from '@fisch0920/medium-zoom' import { useEffect, useRef } from 'react' import 'katex/dist/katex.min.css' -import { mapImgUrl } from '@/lib/notion/mapImage' +import { compressImage, mapImgUrl } from '@/lib/notion/mapImage' import { isBrowser } from '@/lib/utils' import { siteConfig } from '@/lib/config' import { NotionRenderer } from 'react-notion-x' @@ -61,6 +61,11 @@ const Tweet = ({ id }) => { return } +/** + * Notin渲染成网页的核心组件 + * @param {*} param0 + * @returns + */ const NotionPage = ({ post, className }) => { useEffect(() => { autoScrollToTarget() @@ -74,6 +79,8 @@ const NotionPage = ({ post, className }) => { const zoomRef = useRef(zoom ? zoom.clone() : null) useEffect(() => { + if (!isBrowser) return; + // 将相册gallery下的图片加入放大功能 if (siteConfig('POST_DISABLE_GALLERY_CLICK')) { setTimeout(() => { @@ -111,6 +118,30 @@ const NotionPage = ({ post, className }) => { } } } + + // 放大图片：调整图片质量 + const observer = new MutationObserver((mutationsList, observer) => { + mutationsList.forEach(mutation => { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + if (mutation.target.classList.contains('medium-zoom-image--opened')) { + // 等待动画完成后替换为更高清的图像 + setTimeout(() => { + // 获取该元素的 src 属性 + const src = mutation?.target?.getAttribute('src'); + // 替换为更高清的图像 + mutation?.target?.setAttribute('src', compressImage(src, siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200))); + }, 800); + } + } + }); + }); + + // 监视整个文档中的元素和属性的变化 + observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['class'] }); + + return () => { + observer.disconnect(); + }; }, []) if (!post || !post.blockMap) { diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js index 4902f5e4..d094dd57 100755 --- a/lib/notion/getNotionData.js +++ b/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, compressImage } from './mapImage' +import { compressImage, mapImgUrl } from './mapImage' import { getConfigMapFromConfigPage } from './getNotionConfig' /** diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js index b0888386..615ed5c9 100644 --- a/lib/notion/mapImage.js +++ b/lib/notion/mapImage.js @@ -1,4 +1,5 @@ import BLOG from '@/blog.config' +import { siteConfig } from '../config' /** * 图片映射 @@ -58,7 +59,7 @@ const mapImgUrl = (img, block, type = 'block', from = 'post') => { // 统一压缩图片 if (from === 'pageCoverThumbnail' || block.type === 'image' || block.type === 'page') { - const width = block?.format?.block_width || 200 + const width = block?.format?.block_width ret = compressImage(ret, width) } @@ -81,19 +82,29 @@ function isEmoji(str) { * 2. UnPlash 图片可以通过api q=50 控制压缩质量 width=400 控制图片尺寸 * @param {*} image */ -const compressImage = (image, width = 800, quality = 50, fmt = 'webp') => { - if (!image) { - return null +const compressImage = (image, width, quality = 50, fmt = 'webp') => { + if (!image || image.indexOf('http') !== 0) { + return image } + + if (!width || width === 0) { + width = siteConfig('IMAGE_COMPRESS_WIDTH') + } + + // 将URL解析为一个对象 + const urlObj = new URL(image) + // 获取URL参数 + const params = new URLSearchParams(urlObj.search) + + // Notion图床 if (image.indexOf(BLOG.NOTION_HOST) === 0 && image.indexOf('amazonaws.com') > 0) { - return `${image}&width=${width}&cache=v2` - } - // 压缩unsplash图片 - if (image.indexOf('https://images.unsplash.com/') === 0) { - // 将URL解析为一个对象 - const urlObj = new URL(image) - // 获取URL参数 - const params = new URLSearchParams(urlObj.search) + params.set('width', width) + params.set('cache', 'v2') + // 生成新的URL + urlObj.search = params.toString() + return urlObj.toString() + } else if (image.indexOf('https://images.unsplash.com/') === 0) { + // 压缩unsplash图片 // 将q参数的值替换 params.set('q', quality) // 尺寸 @@ -104,11 +115,9 @@ const compressImage = (image, width = 800, quality = 50, fmt = 'webp') => { // 生成新的URL urlObj.search = params.toString() return urlObj.toString() - } - - // 此处还可以添加您的自定义图传的封面图压缩参数。 + } else if (image.indexOf('https://your_picture_bed') === 0) { + // 此处还可以添加您的自定义图传的封面图压缩参数。 // .e.g - if (image.indexOf('https://your_picture_bed') === 0) { return 'do_somethin_here' } diff --git a/lib/utils.js b/lib/utils.js index 3f0d858e..a892c275 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -30,6 +30,33 @@ export const memorize = (Component) => { } return memo(MemoizedComponent) } + +// 转换外链 +export function sliceUrlFromHttp(str) { + // 检查字符串是否包含http + if (str.includes('http')) { + // 如果包含，找到http的位置 + const index = str.indexOf('http'); + // 返回http之后的部分 + return str.slice(index, str.length); + } else { + // 如果不包含，返回原字符串 + return str; + } +} + +// 检查是否外链 +export function checkContainHttp(str) { + // 检查字符串是否包含http + if (str.includes('http')) { + // 如果包含，找到http的位置 + return str.indexOf('http') > -1 + } else { + // 不包含 + return false; + } +} + /** * 加载外部资源 * @param url 地址 例如 https://xx.com/xx.js diff --git a/themes/example/components/BlogListGroupByDate.js b/themes/example/components/BlogListGroupByDate.js index 29598f0b..7a8fe083 100644 --- a/themes/example/components/BlogListGroupByDate.js +++ b/themes/example/components/BlogListGroupByDate.js @@ -1,4 +1,5 @@ import { siteConfig } from '@/lib/config' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' import Link from 'next/link' /** @@ -14,8 +15,10 @@ export default function BlogListGroupByDate({ archiveTitle, archivePosts }) {
    - {archivePosts[archiveTitle].map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + + return
  • @@ -24,12 +27,12 @@ export default function BlogListGroupByDate({ archiveTitle, archivePosts }) { {post?.publishDay} {' '}   - + {post.title}
    • - ))} + })}
} diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js index cd330a83..a8783f8c 100644 --- a/themes/example/components/BlogPostCard.js +++ b/themes/example/components/BlogPostCard.js @@ -3,9 +3,11 @@ import CONFIG from '../config' import Link from 'next/link' import TwikooCommentCount from '@/components/TwikooCommentCount' import LazyImage from '@/components/LazyImage' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' const BlogPostCard = ({ post }) => { const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return
@@ -41,7 +43,7 @@ const BlogPostCard = ({ post }) => { {/* 图片封面 */} {showPageCover && (
- +
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js index 955cc628..5083269b 100644 --- a/themes/fukasawa/components/AsideLeft.js +++ b/themes/fukasawa/components/AsideLeft.js @@ -9,11 +9,14 @@ import Announcement from './Announcement' import { useRouter } from 'next/router' import DarkModeButton from '@/components/DarkModeButton' import SocialButton from './SocialButton' -import { useFukasawaGlobal } from '..' import CONFIG from '@/themes/fukasawa/config' import { AdSlot } from '@/components/GoogleAdsense' import { siteConfig } from '@/lib/config' import MailChimpForm from './MailChimpForm' +import { useGlobal } from '@/lib/global' +import { useEffect, useState } from 'react' +import { isBrowser } from '@/lib/utils' +import { debounce } from 'lodash' /** * 侧边栏 @@ -23,39 +26,59 @@ import MailChimpForm from './MailChimpForm' function AsideLeft(props) { const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, notice } = props const router = useRouter() - const { isCollapsed, setIsCollapse } = useFukasawaGlobal() + const { fullWidth } = useGlobal() + + const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG) + + // 侧边栏折叠从 本地存储中获取 open 状态的初始值 + const [isCollapsed, setIsCollapse] = useState(() => { + if (typeof window !== 'undefined') { + return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT + } + return FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT + }) + + // 在组件卸载时保存 open 状态到本地存储中 + useEffect(() => { + if (isBrowser) { + localStorage.setItem('fukasawa-sidebar-collapse', isCollapsed) + } + }, [isCollapsed]) + // 折叠侧边栏 const toggleOpen = () => { setIsCollapse(!isCollapsed) } // 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false - // useEffect(() => { - // const handleResize = debounce(() => { - // if (window.innerWidth < 1366 || window.scrollY >= 100) { - // setIsCollapse(true) - // } else { - // setIsCollapse(false) - // } - // }, 100) + useEffect(() => { + if (!siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL', false, CONFIG)) { + return + } + const handleResize = debounce(() => { + if (window.innerWidth < 1366 || window.scrollY >= 1366) { + setIsCollapse(true) + } else { + setIsCollapse(false) + } + }, 100) - // console.log('router', router) - // if (router.pathname === '/[...slug]') { - // window.addEventListener('resize', handleResize) - // window.addEventListener('scroll', handleResize, { passive: true }) - // } + if (post) { + window.addEventListener('resize', handleResize) + window.addEventListener('scroll', handleResize, { passive: true }) + } - // return () => { - // if (router.pathname === '/[...slug]') { - // window.removeEventListener('resize', handleResize) - // window.removeEventListener('scroll', handleResize, { passive: true }) - // } - // } - // }, []) + return () => { + if (post) { + window.removeEventListener('resize', handleResize) + window.removeEventListener('scroll', handleResize, { passive: true }) + } + } + }, []) - return ) diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index ee21c056..af682d02 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -3,7 +3,7 @@ import CONFIG from '../config' import { BlogPostCardInfo } from './BlogPostCardInfo' import { siteConfig } from '@/lib/config' import LazyImage from '@/components/LazyImage' -// import Image from 'next/image' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const showPreview = siteConfig('HEXO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap @@ -12,6 +12,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { } const showPageCover = siteConfig('HEXO_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && !showPreview // const delay = (index % 2) * 200 + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return ( @@ -32,7 +33,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { {/* 图片封面 */} {showPageCover && (
- +
diff --git a/themes/hexo/components/BlogPostCardInfo.js b/themes/hexo/components/BlogPostCardInfo.js index e7636de9..890952d5 100644 --- a/themes/hexo/components/BlogPostCardInfo.js +++ b/themes/hexo/components/BlogPostCardInfo.js @@ -4,6 +4,7 @@ import TagItemMini from './TagItemMini' import TwikooCommentCount from '@/components/TwikooCommentCount' import { siteConfig } from '@/lib/config' import { formatDateFmt } from '@/lib/formatDate' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 博客列表的文字内容 @@ -11,11 +12,12 @@ import { formatDateFmt } from '@/lib/formatDate' * @returns */ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return
{/* 标题 */} diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js index f9ac9026..e8dc4140 100644 --- a/themes/hexo/components/LatestPostsGroup.js +++ b/themes/hexo/components/LatestPostsGroup.js @@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global' // import Image from 'next/image' import Link from 'next/link' import { useRouter } from 'next/router' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 最新文章列表 @@ -28,15 +29,15 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
{latestPosts.map(post => { - const selected = currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}` - const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + const selected = currentPath === url return ( ( diff --git a/themes/matery/components/ArticleRecommend.js b/themes/matery/components/ArticleRecommend.js index 0751fbaf..ec0517d3 100644 --- a/themes/matery/components/ArticleRecommend.js +++ b/themes/matery/components/ArticleRecommend.js @@ -3,6 +3,7 @@ import CONFIG from '../config' import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' import LazyImage from '@/components/LazyImage' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 关联推荐文章 @@ -33,12 +34,13 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) { const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return ( ( diff --git a/themes/matery/components/BlogPostArchive.js b/themes/matery/components/BlogPostArchive.js index 0eec29f5..0cfff1ac 100644 --- a/themes/matery/components/BlogPostArchive.js +++ b/themes/matery/components/BlogPostArchive.js @@ -1,5 +1,6 @@ import Link from 'next/link' import { siteConfig } from '@/lib/config' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 博客归档列表 @@ -21,17 +22,17 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => { {archiveTitle}
    - {posts?.map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + + return
  • {post.date?.start_date}{' '}   - {post.title} @@ -39,7 +40,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
    • - ))} + })}
) diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js index 13aef2e0..7700957d 100644 --- a/themes/matery/components/BlogPostCard.js +++ b/themes/matery/components/BlogPostCard.js @@ -5,7 +5,7 @@ import CONFIG from '../config' import TwikooCommentCount from '@/components/TwikooCommentCount' import LazyImage from '@/components/LazyImage' import { formatDateFmt } from '@/lib/formatDate' -// import Image from 'next/image' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const showPreview = siteConfig('MATERY_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap @@ -15,6 +15,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { } const showPageCover = siteConfig('MATERY_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail const delay = (index % 3) * 300 + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + return (
{ {/* 头部图片 填充卡片 */} {showPageCover && ( - +
    - {archivePosts[archiveTitle]?.map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + + return
  • + >
    {post.date?.start_date} {' '}   - {post.title}
    -
    • - ))} + + })}
) diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js index 5473a04c..a3e9e6bf 100644 --- a/themes/medium/components/BlogPostCard.js +++ b/themes/medium/components/BlogPostCard.js @@ -7,10 +7,12 @@ import CategoryItem from './CategoryItem' import TagItemMini from './TagItemMini' import TwikooCommentCount from '@/components/TwikooCommentCount' import LazyImage from '@/components/LazyImage' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' const BlogPostCard = ({ post, showSummary }) => { const showPreview = siteConfig('MEDIUM_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap const { locale } = useGlobal() + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return (
{
{
diff --git a/themes/nav/components/BlogArchiveItem.js b/themes/nav/components/BlogArchiveItem.js index efd67565..ad9ac831 100755 --- a/themes/nav/components/BlogArchiveItem.js +++ b/themes/nav/components/BlogArchiveItem.js @@ -1,5 +1,6 @@ import { siteConfig } from '@/lib/config' import Link from 'next/link' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 归档分组 @@ -13,8 +14,10 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) { {archiveTitle}
    - {archivePosts[archiveTitle]?.map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + + return
  • @@ -23,13 +26,13 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) { {' '}   - {post.title}
    • - ))} + })}
) diff --git a/themes/nav/components/BlogPostCard.js b/themes/nav/components/BlogPostCard.js index cc3934e0..92c5fe2b 100755 --- a/themes/nav/components/BlogPostCard.js +++ b/themes/nav/components/BlogPostCard.js @@ -2,6 +2,7 @@ import Link from 'next/link' import NotionIcon from './NotionIcon' import { useRouter } from 'next/router' import { siteConfig } from '@/lib/config' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' const BlogPostCard = ({ post, className }) => { const router = useRouter() @@ -22,30 +23,6 @@ const BlogPostCard = ({ post, className }) => {
) - - // 检查连接是否是外链 - function sliceUrlFromHttp(str) { - // 检查字符串是否包含http - if (str.includes('http')) { - // 如果包含，找到http的位置 - const index = str.indexOf('http'); - // 返回http之后的部分 - return str.slice(index, str.length); - } else { - // 如果不包含，返回原字符串 - return str; - } - } - function checkContainHttp(str) { - // 检查字符串是否包含http - if (str.includes('http')) { - // 如果包含，找到http的位置 - return str.indexOf('http') > -1 - } else { - // 不包含 - return false; - } - } } export default BlogPostCard diff --git a/themes/next/components/BlogPostArchive.js b/themes/next/components/BlogPostArchive.js index 91e98a70..2b09e868 100644 --- a/themes/next/components/BlogPostArchive.js +++ b/themes/next/components/BlogPostArchive.js @@ -1,5 +1,6 @@ import { siteConfig } from '@/lib/config' import Link from 'next/link' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 博客归档列表 @@ -21,8 +22,10 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => { {archiveTitle}
    - {posts?.map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + + return
  • @@ -30,7 +33,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => { {post.date?.start_date}{' '}   @@ -39,7 +42,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
- ))} + })} ) diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js index 51e31578..53cc4ee3 100644 --- a/themes/next/components/BlogPostCard.js +++ b/themes/next/components/BlogPostCard.js @@ -9,6 +9,7 @@ import NotionIcon from '@/components/NotionIcon' import TwikooCommentCount from '@/components/TwikooCommentCount' import { formatDateFmt } from '@/lib/formatDate' import { siteConfig } from '@/lib/config' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' const BlogPostCard = ({ post, index, showSummary }) => { const { locale } = useGlobal() @@ -22,6 +23,7 @@ const BlogPostCard = ({ post, index, showSummary }) => { 'data-aos-anchor-placement': 'top-bottom' } : {} + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return ( @@ -34,7 +36,7 @@ const BlogPostCard = ({ post, index, showSummary }) => { {/* 文章标题 */} @@ -99,7 +101,7 @@ const BlogPostCard = ({ post, index, showSummary }) => {
{locale.COMMON.ARTICLE_DETAIL} @@ -110,7 +112,7 @@ const BlogPostCard = ({ post, index, showSummary }) => {
{siteConfig('NEXT_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && ( - +
{
{latestPosts.map(post => { const selected = currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}` + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return ( ( diff --git a/themes/nobelium/components/BlogArchiveItem.js b/themes/nobelium/components/BlogArchiveItem.js index 809ac6d8..ac1c2522 100644 --- a/themes/nobelium/components/BlogArchiveItem.js +++ b/themes/nobelium/components/BlogArchiveItem.js @@ -1,5 +1,6 @@ import { siteConfig } from '@/lib/config' import Link from 'next/link' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 归档分组文章 @@ -14,8 +15,10 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
    - {archivePosts[archiveTitle].map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + + return
  • @@ -25,7 +28,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) { {' '}   @@ -34,7 +37,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
    • - ))} + })}
) diff --git a/themes/nobelium/components/BlogPost.js b/themes/nobelium/components/BlogPost.js index 1d641975..8af88325 100644 --- a/themes/nobelium/components/BlogPost.js +++ b/themes/nobelium/components/BlogPost.js @@ -1,9 +1,12 @@ import Link from 'next/link' import { siteConfig } from '@/lib/config' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' const BlogPost = ({ post }) => { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + return ( - ( + (
diff --git a/themes/plog/components/BlogArchiveItem.js b/themes/plog/components/BlogArchiveItem.js index 4d3f3d02..47127415 100644 --- a/themes/plog/components/BlogArchiveItem.js +++ b/themes/plog/components/BlogArchiveItem.js @@ -1,5 +1,6 @@ import Link from 'next/link' import { siteConfig } from '@/lib/config' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 归档分组文章 @@ -14,8 +15,10 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
    - {archivePosts[archiveTitle].map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + + return
  • @@ -25,7 +28,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) { {' '}   @@ -34,7 +37,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
    • - ))} + })}
) diff --git a/themes/plog/components/BlogPost.js b/themes/plog/components/BlogPost.js index a75fa8d5..66811a80 100644 --- a/themes/plog/components/BlogPost.js +++ b/themes/plog/components/BlogPost.js @@ -11,7 +11,7 @@ import LazyImage from '@/components/LazyImage' */ const BlogPost = (props) => { const { post, index, siteInfo } = props - const pageThumbnail = compressImage(post?.pageCoverThumbnail || siteInfo?.pageCover, 800, 80) + const pageThumbnail = compressImage(post?.pageCoverThumbnail || siteInfo?.pageCover) const { setModalContent, setShowModal } = usePlogGlobal() const handleClick = () => { setShowModal(true) diff --git a/themes/plog/index.js b/themes/plog/index.js index 80bad683..017417d1 100644 --- a/themes/plog/index.js +++ b/themes/plog/index.js @@ -41,7 +41,7 @@ const LayoutBase = props => { // 页面切换关闭遮罩 const router = useRouter() - const closeModal = ()=>{ + const closeModal = () => { setShowModal(false) } @@ -52,7 +52,6 @@ const LayoutBase = props => { } }, [router.events]) - return (
diff --git a/themes/simple/components/BlogArchiveItem.js b/themes/simple/components/BlogArchiveItem.js index 809ac6d8..270dc90c 100644 --- a/themes/simple/components/BlogArchiveItem.js +++ b/themes/simple/components/BlogArchiveItem.js @@ -1,5 +1,6 @@ import { siteConfig } from '@/lib/config' import Link from 'next/link' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 归档分组文章 @@ -14,8 +15,9 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
    - {archivePosts[archiveTitle].map(post => ( -
  • { + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` + return
  • @@ -25,7 +27,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) { {' '}   @@ -34,7 +36,7 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
    • - ))} + })}
) diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js index 8d682e11..625435af 100644 --- a/themes/simple/components/BlogItem.js +++ b/themes/simple/components/BlogItem.js @@ -4,10 +4,12 @@ import TwikooCommentCount from '@/components/TwikooCommentCount' import { formatDateFmt } from '@/lib/formatDate' import { siteConfig } from '@/lib/config' import LazyImage from '@/components/LazyImage' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' export const BlogItem = props => { const { post } = props const showPageCover = siteConfig('SIMPLE_POST_COVER_ENABLE', false, CONFIG) + const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return
{/* 文章标题 */} @@ -17,7 +19,7 @@ export const BlogItem = props => { {/* 图片封面 */} {showPageCover && (
- +
@@ -27,7 +29,7 @@ export const BlogItem = props => {

{post.title} @@ -60,7 +62,7 @@ export const BlogItem = props => {

- + Continue Reading
diff --git a/themes/simple/components/Header.js b/themes/simple/components/Header.js index 96f504cf..f2b359ad 100644 --- a/themes/simple/components/Header.js +++ b/themes/simple/components/Header.js @@ -3,7 +3,6 @@ import Link from 'next/link' import CONFIG from '../config' import SocialButton from './SocialButton' import { siteConfig } from '@/lib/config' -import { compressImage } from '@/lib/notion/mapImage' /** * 网站顶部 @@ -11,7 +10,6 @@ import { compressImage } from '@/lib/notion/mapImage' */ export default function Header (props) { const { siteInfo } = props - const avatar = compressImage(siteInfo?.icon || siteConfig('AVATAR'), 200) return (
@@ -20,7 +18,7 @@ export default function Header (props) { {/* 可使用一张单图作为logo */}
- +
From 9a2d86e4dc20081a414597811a20abd2ff6fa6df Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 1 Feb 2024 17:58:38 +0800 Subject: [PATCH 5/5] callout-text style overflow-hidden --- styles/notion.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/notion.css b/styles/notion.css index cd461c33..b78ab06b 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -950,6 +950,7 @@ code[class*='language-'] { margin-left: 8px; white-space: pre-wrap; word-break: break-word; + overflow: hidden; } .notion-toggle {