magzine - 移动端菜单OpenWrite限制

This commit is contained in:
tangly1024.com
2024-09-18 09:45:49 +08:00
parent 7476b6db3e
commit ea4dacad18
3 changed files with 12 additions and 11 deletions

View File

@@ -79,13 +79,14 @@ const OpenWrite = () => {
return return
} }
if (isBrowser && blogId) { if (isBrowser && blogId) {
toggleTocItems(true) // 禁止目录项的点击
// Check if the element with id 'read-more-wrap' already exists // Check if the element with id 'read-more-wrap' already exists
const readMoreWrap = document.getElementById('read-more-wrap') const readMoreWrap = document.getElementById('read-more-wrap')
// Only load the script if the element doesn't exist // Only load the script if the element doesn't exist
if (!readMoreWrap) { if (!readMoreWrap) {
loadOpenWrite() loadOpenWrite()
toggleTocItems(true) // 禁止目录项的点击
} }
} }
}) })

View File

@@ -70,7 +70,7 @@ const Catalog = ({ toc, className }) => {
<div <div
className='overflow-y-auto scroll-hidden lg:max-h-dvh max-h-44' className='overflow-y-auto scroll-hidden lg:max-h-dvh max-h-44'
ref={tRef}> ref={tRef}>
<nav className='h-full text-black'> <nav className='h-full text-black'>
{toc.map(tocItem => { {toc.map(tocItem => {
const id = uuidToId(tocItem.id) const id = uuidToId(tocItem.id)
tocIds.push(id) tocIds.push(id)
@@ -78,14 +78,14 @@ const Catalog = ({ toc, className }) => {
<a <a
key={id} key={id}
href={`#${id}`} href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform dark:text-gray-300 className={`notion-table-of-contents-item duration-300 transform dark:text-gray-400
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}> notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
<span <span
style={{ style={{
display: 'inline-block', display: 'inline-block',
marginLeft: tocItem.indentLevel * 16 marginLeft: tocItem.indentLevel * 16
}} }}
className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}> className={`truncate ${activeSection === id ? 'font-bold text-gray-500 dark:text-white underline' : ''}`}>
{tocItem.text} {tocItem.text}
</span> </span>
</a> </a>

View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'
import { isBrowser } from '@/lib/utils' import { isBrowser } from '@/lib/utils'
import { useEffect, useState } from 'react'
/** /**
* 顶部页面阅读进度条 * 顶部页面阅读进度条
@@ -10,7 +10,8 @@ const Progress = ({ targetRef, showPercent = true }) => {
const currentRef = targetRef?.current || targetRef const currentRef = targetRef?.current || targetRef
const [percent, changePercent] = useState(0) const [percent, changePercent] = useState(0)
const scrollListener = () => { const scrollListener = () => {
const target = currentRef || (isBrowser && document.getElementById('article-wrapper')) const target =
currentRef || (isBrowser && document.getElementById('article-wrapper'))
if (target) { if (target) {
const clientHeight = target.clientHeight const clientHeight = target.clientHeight
const scrollY = window.pageYOffset const scrollY = window.pageYOffset
@@ -28,13 +29,12 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, []) }, [])
return ( return (
<div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black"> <div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black'>
<div <div
className="h-4 bg-gray-600 duration-200" className='h-4 bg-gray-600 dark:bg-hexo-black-gray duration-200'
style={{ width: `${percent}%` }} style={{ width: `${percent}%` }}>
>
{showPercent && ( {showPercent && (
<div className="text-right text-white text-xs">{percent}%</div> <div className='text-right text-white text-xs'>{percent}%</div>
)} )}
</div> </div>
</div> </div>