From 097eee18a35e93ba8ab11b2f83237144a2be1e70 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 14 Mar 2024 14:51:53 +0800 Subject: [PATCH 1/2] youtube cover --- styles/notion.css | 170 ++++++++++++++++++++++++---------------------- 1 file changed, 87 insertions(+), 83 deletions(-) diff --git a/styles/notion.css b/styles/notion.css index b78ab06b..e231c45f 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -116,7 +116,6 @@ } } - .notion-page-content-inner { position: relative; display: flex; @@ -179,7 +178,6 @@ color: var(--select-color-2) !important; } - .notion-app { position: relative; background: var(--bg-color); @@ -211,17 +209,17 @@ /* width: auto !important; */ } -@media (max-width: 768px){ - .medium-zoom-image--opened { - object-fit: fill !important; - height: auto !important; - } +@media (max-width: 768px) { + .medium-zoom-image--opened { + object-fit: fill !important; + height: auto !important; + } } -@media (min-width: 768px){ - .medium-zoom-image--opened { - object-fit: scale-down !important; - } +@media (min-width: 768px) { + .medium-zoom-image--opened { + object-fit: scale-down !important; + } } .notion-frame { @@ -405,13 +403,13 @@ summary > .notion-h { .notion-h1 { font-size: 1.575em; margin-top: 1.08em; - @apply border-b w-full + @apply border-b w-full; } .notion-h2 { - @apply w-full + @apply w-full; } .notion-h3 { - @apply w-full + @apply w-full; } .notion-header-anchor { @@ -443,7 +441,7 @@ summary > .notion-h { .notion-h:hover .notion-hash-link { opacity: 1; - @apply dark:fill-gray-200 + @apply dark:fill-gray-200; } .notion-hash-link { @@ -560,10 +558,12 @@ summary > .notion-h { color: inherit; word-break: break-word; text-decoration: inherit; - border-bottom: .05em solid !important; + border-bottom: 0.05em solid !important; border-color: var(--fg-color-2); opacity: 0.7; - transition: border-color 100ms ease-in, opacity 100ms ease-in; + transition: + border-color 100ms ease-in, + opacity 100ms ease-in; } .notion-link:hover { @@ -601,7 +601,7 @@ summary > .notion-h { margin: 2px 4px 0 2px; fill: var(--fg-color-6); color: var(--fg-color-icon); - @apply dark:fill-gray-200 + @apply dark:fill-gray-200; } img.notion-page-icon, @@ -667,12 +667,12 @@ svg.notion-page-icon { } .notion-list-numbered > .notion-list-numbered { - list-style-type: lower-alpha; + list-style-type: lower-alpha; } .notion-list-numbered > .notion-list-numbered > .notion-list-numbered { - list-style-type: lower-roman; - } + list-style-type: lower-roman; +} .notion-list-disc li { padding-left: 0.1em; @@ -701,7 +701,7 @@ svg.notion-page-icon { } .notion-asset-wrapper-image > div { - height: auto !important; + height: auto !important; } .notion-asset-wrapper-full { @@ -709,7 +709,7 @@ svg.notion-page-icon { } .notion-asset-wrapper img { - width: 90%; + /* width: 90%; */ /* height: 100%; */ height: auto !important; max-height: 100%; @@ -851,7 +851,7 @@ code[class*='language-'] { .notion-bookmark-link { display: flex; margin-top: 6px; - @apply w-52 md:w-80 + @apply w-52 md:w-80; } .notion-bookmark-link > img { @@ -919,7 +919,7 @@ code[class*='language-'] { font-size: 14px; line-height: 1.4; color: var(--fg-color-3); - @apply dark:text-gray-300 + @apply dark:text-gray-300; } .notion-callout { @@ -1122,7 +1122,7 @@ code[class*='language-'] { .notion-table-of-contents { width: 100%; margin: 4px 0; - @apply bg-gray-50 dark:bg-gray-900 p-2 + @apply bg-gray-50 dark:bg-gray-900 p-2; } .notion-table-of-contents-item { @@ -1142,8 +1142,7 @@ code[class*='language-'] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - @apply dark:text-white - + @apply dark:text-white; } .notion-table-of-contents-item:hover { @@ -1296,8 +1295,8 @@ code[class*='language-'] { transition: background 20ms ease-in 0s; color: inherit; text-decoration: none; - - @apply dark:stroke-slate-200 + + @apply dark:stroke-slate-200; } .notion-file-link:hover { @@ -1337,7 +1336,7 @@ code[class*='language-'] { line-height: 16px; margin-left: 6px; - @apply dark:text-gray-400 !important + @apply dark:text-gray-400 !important; } .notion-audio { @@ -1396,8 +1395,8 @@ code[class*='language-'] { white-space: normal; } -.katex-display>.katex>.katex-html>.tag { - position: inherit !important; +.katex-display > .katex > .katex-html > .tag { + position: inherit !important; } .notion-page-title { @@ -1424,13 +1423,13 @@ code[class*='language-'] { @apply max-w-0; } -.notion-collection-card{ +.notion-collection-card { /* cursor: default !important; */ } .notion-collection-card-property .notion-link { border-bottom: 0 none; - cursor: pointer + cursor: pointer; } .notion-collection-card-property .notion-page-title { @@ -1469,7 +1468,7 @@ code[class*='language-'] { } .notion-collection-row { - @apply hidden + @apply hidden; } .notion-collection-row-body { @@ -1612,7 +1611,8 @@ code[class*='language-'] { } .lazy-image-real.medium-zoom-image { - transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), + transition: + transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 400ms ease-out !important; will-change: opacity, transform; } @@ -1700,12 +1700,16 @@ svg + .notion-page-title-text { @apply text-gray-600 dark:text-gray-300; } -.notion-gray_background,.notion-brown_background, -.notion-orange_background,.notion-yellow_background, -.notion-blue_background,.notion-purple_background, -.notion-teal_background,.notion-red_background, -.notion-pink_background{ - @apply dark:text-black +.notion-gray_background, +.notion-brown_background, +.notion-orange_background, +.notion-yellow_background, +.notion-blue_background, +.notion-purple_background, +.notion-teal_background, +.notion-red_background, +.notion-pink_background { + @apply dark:text-black; } .notion-bookmark:hover { @@ -1737,7 +1741,7 @@ svg + .notion-page-title-text { padding: 4px 2px; white-space: nowrap; overflow: hidden; - @apply px-0 !important + @apply px-0 !important; } .notion-collection-header-title { @@ -1791,7 +1795,7 @@ svg + .notion-page-title-text { /* fill: var(--fg-color); */ fill: rgba(55, 53, 47); margin-right: 6px; - @apply dark:fill-gray-200 + @apply dark:fill-gray-200; } .notion-collection-view-type-title { @@ -1799,13 +1803,13 @@ svg + .notion-page-title-text { overflow: hidden; text-overflow: ellipsis; color: var(--fg-color); - @apply dark:text-gray-200 + @apply dark:text-gray-200; } .notion-table { align-self: center; overflow: auto hidden; - @apply w-full !important + @apply w-full !important; } .notion-table-view { @@ -1814,13 +1818,13 @@ svg + .notion-page-title-text { min-width: var(--notion-max-width); padding-left: 0; transition: padding 200ms ease-out; - @apply px-0 !important + @apply px-0 !important; } .notion-table-header { display: flex; position: absolute; - z-index:30; + z-index: 30; height: 33px; color: var(--fg-color-3); min-width: var(--notion-max-width); @@ -1872,7 +1876,7 @@ svg + .notion-page-title-text { line-height: 120%; min-width: 0; font-size: 14px; - @apply dark:text-gray-200 + @apply dark:text-gray-200; } .notion-collection-column-title-icon { @@ -1883,12 +1887,11 @@ svg + .notion-page-title-text { min-height: 14px; fill: var(--fg-color-2); margin-right: 6px; - @apply dark:text-gray-200 dark:fill-gray-200 - + @apply dark:text-gray-200 dark:fill-gray-200; } .notion-collection-view-tabs-content-item-active { - @apply dark:border-gray-300 + @apply dark:border-gray-300; } .notion-collection-column-title-body { @@ -1947,12 +1950,12 @@ svg + .notion-page-title-text { padding: 7px 8px 0; } -.notion-simple-table { +.notion-simple-table { @apply whitespace-nowrap overflow-x-auto block w-full border-0 !important; } .notion-asset-wrapper-pdf > div { - display: block !important; + display: block !important; } /* https://github.com/kchen0x */ @@ -1972,47 +1975,49 @@ svg + .notion-page-title-text { /* color: var(--notion-gray); */ } -.notion-asset-wrapper-pdf>div{ - width:unset!important +.notion-asset-wrapper-pdf > div { + width: unset !important; } /* pdf预览适配页面 */ -.react-pdf__Page__canvas,.react-pdf__Page__textContent{ - width: 100% !important; - height: auto !important; +.react-pdf__Page__canvas, +.react-pdf__Page__textContent { + width: 100% !important; + height: auto !important; } - /* simple table设置 */ -table,thead,tbody{ - display:block +table, +thead, +tbody { + display: block; } -thead, tbody tr { - display:table; - width:100%; - table-layout:fixed; +thead, +tbody tr { + display: table; + width: 100%; + table-layout: fixed; } -.notion-collection-card{ - @apply dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-black +.notion-collection-card { + @apply dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-black; } -.notion-code-copy{ - display: none; +.notion-code-copy { + display: none; } - -pre[class*="language-mermaid"] { - @apply bg-gray-50 dark:bg-gray-200 !important; +pre[class*='language-mermaid'] { + @apply bg-gray-50 dark:bg-gray-200 !important; } /* mermaid 原文隐藏 */ code.language-mermaid { - display:none + display: none; } -.code-toolbar{ +.code-toolbar { @apply w-full shadow-md pb-0; } @@ -2036,7 +2041,7 @@ code.language-mermaid { @apply dark:border-gray-200 !important; } -.notion-external-image > svg > g > path{ +.notion-external-image > svg > g > path { @apply dark:fill-gray-200 !important; } @@ -2049,17 +2054,16 @@ code.language-mermaid { } /* 表格头 */ -.notion-simple-table tr:first-child td{ +.notion-simple-table tr:first-child td { background-color: #f5f6f8; @apply text-center font-bold dark:bg-gray-800 !important; - } -.notion-simple-table td{ - border: 1px solid var(#eee) !important +.notion-simple-table td { + border: 1px solid var(#eee) !important; } /* 竖屏视频高度bug */ -figure.notion-asset-wrapper.notion-asset-wrapper-video>div { - height: 100% !important; +figure.notion-asset-wrapper.notion-asset-wrapper-video > div { + height: 100% !important; } From 7826cef9350b68476c09db56e85ba16bc5844e70 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 14 Mar 2024 17:53:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?plog=20=E7=82=B9=E5=87=BB=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/utils/index.js | 80 +++++++------- themes/plog/components/Modal.js | 185 ++++++++++++++++++++------------ 2 files changed, 158 insertions(+), 107 deletions(-) diff --git a/lib/utils/index.js b/lib/utils/index.js index d632e1c3..9f5891e2 100644 --- a/lib/utils/index.js +++ b/lib/utils/index.js @@ -16,7 +16,7 @@ export const isSearchEngineBot = () => { return false } // 获取用户代理字符串 - const userAgent = navigator.userAgent; + const userAgent = navigator.userAgent // 使用正则表达式检测是否包含搜索引擎爬虫关键字 return /Googlebot|bingbot|Baidu/.test(userAgent) } @@ -24,8 +24,8 @@ export const isSearchEngineBot = () => { /** * 组件持久化 */ -export const memorize = (Component) => { - const MemoizedComponent = (props) => { +export const memorize = Component => { + const MemoizedComponent = props => { return } return memo(MemoizedComponent) @@ -34,26 +34,26 @@ export const memorize = (Component) => { // 转换外链 export function sliceUrlFromHttp(str) { // 检查字符串是否包含http - if (str.includes('http:') || str.includes('https:')) { + if (str?.includes('http:') || str?.includes('https:')) { // 如果包含，找到http的位置 - const index = str.indexOf('http'); + const index = str?.indexOf('http') // 返回http之后的部分 - return str.slice(index, str.length); + return str.slice(index, str.length) } else { // 如果不包含，返回原字符串 - return str; + return str } } // 检查是否外链 export function checkContainHttp(str) { // 检查字符串是否包含http - if (str.includes('http:') || str.includes('https:')) { + if (str?.includes('http:') || str?.includes('https:')) { // 如果包含，找到http的位置 - return str.indexOf('http') > -1 + return str?.indexOf('http') > -1 } else { // 不包含 - return false; + return false } } @@ -65,7 +65,10 @@ export function checkContainHttp(str) { */ export function loadExternalResource(url, type) { // 检查是否已存在 - const elements = type === 'js' ? document.querySelectorAll(`[src='${url}']`) : document.querySelectorAll(`[href='${url}']`) + const elements = + type === 'js' + ? document.querySelectorAll(`[src='${url}']`) + : document.querySelectorAll(`[href='${url}']`) return new Promise((resolve, reject) => { if (elements.length > 0 || !url) { @@ -112,9 +115,11 @@ export function getQueryVariable(key) { const vars = query.split('&') for (let i = 0; i < vars.length; i++) { const pair = vars[i].split('=') - if (pair[0] === key) { return pair[1] } + if (pair[0] === key) { + return pair[1] + } } - return (false) + return false } /** * 获取 URL 中指定参数的值 @@ -124,9 +129,9 @@ export function getQueryVariable(key) { */ export function getQueryParam(url, param) { // 移除哈希部分 - const urlWithoutHash = url.split('#')[0]; - const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1]); - return searchParams.get(param); + const urlWithoutHash = url.split('#')[0] + const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1]) + return searchParams.get(param) } /** @@ -157,7 +162,7 @@ export function mergeDeep(target, ...sources) { * @returns {boolean} */ export function isObject(item) { - return (item && typeof item === 'object' && !Array.isArray(item)) + return item && typeof item === 'object' && !Array.isArray(item) } /** @@ -210,10 +215,7 @@ export const delay = ms => new Promise(resolve => setTimeout(resolve, ms)) * @returns {*} */ export const getListByPage = function (list, pageIndex, pageSize) { - return list.slice( - 0, - pageIndex * pageSize - ) + return list.slice(0, pageIndex * pageSize) } /** @@ -230,7 +232,7 @@ export const isMobile = () => { // isMobile = true // } - if (!isMobile && (/Mobi|Android|iPhone/i.test(navigator.userAgent))) { + if (!isMobile && /Mobi|Android|iPhone/i.test(navigator.userAgent)) { isMobile = true } @@ -249,41 +251,41 @@ export const isMobile = () => { * 扫描页面上的所有文本节点，将url格式的文本转为可点击链接 * @param {*} node */ -export const scanAndConvertToLinks = (node) => { +export const scanAndConvertToLinks = node => { if (node.nodeType === Node.TEXT_NODE) { - const text = node.textContent; - const urlRegex = /https?:\/\/[^\s]+/g; - let lastIndex = 0; - let match; + const text = node.textContent + const urlRegex = /https?:\/\/[^\s]+/g + let lastIndex = 0 + let match - const newNode = document.createElement('span'); + const newNode = document.createElement('span') while ((match = urlRegex.exec(text)) !== null) { - const beforeText = text.substring(lastIndex, match.index); - const url = match[0]; + const beforeText = text.substring(lastIndex, match.index) + const url = match[0] if (beforeText) { - newNode.appendChild(document.createTextNode(beforeText)); + newNode.appendChild(document.createTextNode(beforeText)) } - const link = document.createElement('a'); - link.href = url; + const link = document.createElement('a') + link.href = url link.target = '_blank' - link.textContent = url; + link.textContent = url - newNode.appendChild(link); + newNode.appendChild(link) - lastIndex = urlRegex.lastIndex; + lastIndex = urlRegex.lastIndex } if (lastIndex < text.length) { - newNode.appendChild(document.createTextNode(text.substring(lastIndex))); + newNode.appendChild(document.createTextNode(text.substring(lastIndex))) } - node.parentNode.replaceChild(newNode, node); + node.parentNode.replaceChild(newNode, node) } else if (node.nodeType === Node.ELEMENT_NODE) { for (const childNode of node.childNodes) { - scanAndConvertToLinks(childNode); + scanAndConvertToLinks(childNode) } } } diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js index 17ae4da6..71dba58c 100644 --- a/themes/plog/components/Modal.js +++ b/themes/plog/components/Modal.js @@ -6,17 +6,28 @@ import Link from 'next/link' import { siteConfig } from '@/lib/config' import LazyImage from '@/components/LazyImage' import { compressImage } from '@/lib/notion/mapImage' +import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /** * 弹出框 */ export default function Modal(props) { - const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal() + const { showModal, setShowModal, modalContent, setModalContent } = + usePlogGlobal() const { siteInfo, posts } = props const cancelButtonRef = useRef(null) - const img = compressImage(modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, 'webp') + const img = compressImage( + modalContent?.pageCover || siteInfo?.pageCover, + 1200, + 85, + 'webp' + ) const imgRef = useRef(null) + const url = checkContainHttp(modalContent?.slug) + ? sliceUrlFromHttp(modalContent?.slug) + : `${siteConfig('SUB_PATH', '')}/${modalContent?.slug}` + // 添加loading状态 const [loading, setLoading] = useState(true) @@ -53,73 +64,111 @@ export default function Modal(props) { } return ( - - - {/* 遮罩 */} - + + {/* 遮罩 */} + +
+ + +
+
+ + + {/* 添加onLoad事件处理函数 */} + {/* 添加loading状态 */} +
-
- - -
-
- - - {/* 添加loading状态 */} -
- -
- - {/* 添加onLoad事件处理函数 */} - - - {!loading && (<> -
- -
-

{modalContent?.title}

-
- - -
- {modalContent?.summary} -
- - - {modalContent?.category && ( -
- - {modalContent?.category} - -
- )} -
-
-
-
-
- )} - - - -
+
-
- + + + + + + {!loading && ( + <> +
+
+

+ {modalContent?.title} +

+
+
+ {modalContent?.summary} +
+ + {modalContent?.category && ( +
+ + {modalContent?.category} + +
+ )} +
+ {/*
*/} +
+ +
+
+ +
+ {/*
*/} + + )} + + + + + + ) }