From 7826cef9350b68476c09db56e85ba16bc5844e70 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 14 Mar 2024 17:53:48 +0800 Subject: [PATCH] =?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 | 179 ++++++++++++++++++++------------ 2 files changed, 155 insertions(+), 104 deletions(-) diff --git a/lib/utils/index.js b/lib/utils/index.js index d632e1c3cbc..9f5891e2148 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 17ae4da61b1..71dba58ce01 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 ( - - - {/* 遮罩 */} - -
- + + + {/* 遮罩 */} + +
+ -
-
- - - {/* 添加loading状态 */} -
- -
- - {/* 添加onLoad事件处理函数 */} - +
+
+ + + {/* 添加onLoad事件处理函数 */} + {/* 添加loading状态 */} +
+ +
- {!loading && (<> -
- -
-

{modalContent?.title}

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

+ {modalContent?.title} +

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