Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
actions-user committed May 25, 2024
2 parents 018565e + 2eb95b2 commit 1d25fc0
Show file tree
Hide file tree
Showing 9 changed files with 166 additions and 38 deletions.
59 changes: 59 additions & 0 deletions components/Notification.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { useState } from 'react'

const useNotification = () => {
const [message, setMessage] = useState('')
const [isVisible, setIsVisible] = useState(false)

const showNotification = msg => {
setMessage(msg)
setIsVisible(true)
setTimeout(() => {
setIsVisible(false)
}, 3000)
}

const closeNotification = () => {
setIsVisible(false)
}

// 测试通知效果
// const toggleVisible = () => {
// setIsVisible(prev => !prev) // 使用函数式更新
// }
// useEffect(() => {
// document?.addEventListener('click', toggleVisible)
// return () => {
// document?.removeEventListener('click', toggleVisible)
// }
// }, [])

/**
* 通知组件
* @returns
*/
const Notification = () => {
return (
<div
className={`notification fixed left-0 w-full px-2 z-50 transform transition-all duration-300 ${
isVisible ? 'bottom-20 animate__animated animate__fadeIn' : ''
} `}>
<div className='max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg'>
{message}
<button
onClick={closeNotification}
className='ml-4 p-2 cursor-pointer bg-transparent text-white border-none'>
<i className='fas fa-times' />
</button>
</div>
</div>
)
}

return {
showNotification,
closeNotification,
Notification
}
}

export default useNotification
4 changes: 3 additions & 1 deletion lib/lang/en-US.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@ export default {
ARTICLE: 'Article',
VISITORS: 'Visitors',
VIEWS: 'Views',
COPYRIGHT_NOTICE: 'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!',
COPYRIGHT_NOTICE:
'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!',
RESULT_OF_SEARCH: 'Results Found',
ARTICLE_DETAIL: 'Article Details',
PASSWORD_ERROR: 'Password Error!',
ARTICLE_LOCK_TIPS: 'Please Enter the password:',
ARTICLE_UNLOCK_TIPS: 'Article Unlocked',
NO_RESULTS_FOUND: 'No results found.',
SUBMIT: 'Submit',
POST_TIME: 'Post on',
Expand Down
7 changes: 5 additions & 2 deletions lib/lang/ja-JP.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,14 @@ export default {
ARTICLE: '記事',
VISITORS: '人の訪問者',
VIEWS: '回の閲覧',
COPYRIGHT_NOTICE: 'この記事はCC BY-NC-SA 4.0 ライセンスの下でライセンスされています。転載する場合には出典を明らかにしてください。',
COPYRIGHT_NOTICE:
'この記事はCC BY-NC-SA 4.0 ライセンスの下でライセンスされています。転載する場合には出典を明らかにしてください。',
RESULT_OF_SEARCH: '個の検索結果',
ARTICLE_DETAIL: '記事の詳細',
PASSWORD_ERROR: 'パスワードが違います!',
ARTICLE_LOCK_TIPS: 'この記事はロックされています。アクセスパスワードを入力してください。',
ARTICLE_LOCK_TIPS:
'この記事はロックされています。アクセスパスワードを入力してください。',
ARTICLE_UNLOCK_TIPS: '記事がロック解除されました',
SUBMIT: '送信',
POST_TIME: '公開日',
LAST_EDITED_TIME: '最終更新日',
Expand Down
1 change: 1 addition & 0 deletions lib/lang/zh-CN.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default {
ARTICLE_DETAIL: '文章详情',
PASSWORD_ERROR: '密码错误!',
ARTICLE_LOCK_TIPS: '文章已上锁,请输入访问密码',
ARTICLE_UNLOCK_TIPS: '文章已解锁',
SUBMIT: '提交',
POST_TIME: '发布于',
LAST_EDITED_TIME: '最后更新',
Expand Down
37 changes: 37 additions & 0 deletions lib/password.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { isBrowser } from './utils'

/**
* 获取默认密码
* 用户可以通过url中拼接参数,输入密码
* 输入过一次的密码会被存储在浏览器中,便于下一次免密访问
* 返回的是一组历史密码,便于客户端多次尝试
*/
export const getPasswordQuery = path => {
// 使用 URL 对象解析 URL
const url = new URL(path, isBrowser ? window.location.origin : '')

// 获取查询参数
const queryParams = Object.fromEntries(url.searchParams.entries())

// 请求中带着密码
if (queryParams.password) {
// 将已输入密码作为默认密码存放在 localStorage,便于下次读取并自动尝试
localStorage.setItem('password_default', queryParams.password)
}

// 获取路径部分
const cleanedPath = url.pathname

// 从 localStorage 中获取相关密码
const storedPassword = localStorage.getItem('password_' + cleanedPath)
const defaultPassword = localStorage.getItem('password_default')

// 将所有密码存储在一个数组中,并过滤掉无效值
const passwords = [
queryParams.password,
storedPassword,
defaultPassword
].filter(Boolean)

return passwords
}
25 changes: 20 additions & 5 deletions pages/[prefix]/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import BLOG from '@/blog.config'
import useNotification from '@/components/Notification'
import { siteConfig } from '@/lib/config'
import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
import { useGlobal } from '@/lib/global'
import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
import { getPasswordQuery } from '@/lib/password'
import { uploadDataToAlgolia } from '@/lib/plugins/algolia'
import { checkSlugHasNoSlash, getRecommendPost } from '@/lib/utils/post'
import { getLayoutByTheme } from '@/themes/theme'
Expand All @@ -19,9 +22,11 @@ import { useEffect, useState } from 'react'
const Slug = props => {
const { post } = props
const router = useRouter()
const { locale } = useGlobal()

// 文章锁🔐
const [lock, setLock] = useState(post?.password && post?.password !== '')
const { showNotification, Notification } = useNotification()

/**
* 验证文章密码
Expand All @@ -36,6 +41,7 @@ const Slug = props => {
setLock(false)
// 输入密码存入localStorage,下次自动提交
localStorage.setItem('password_' + router.asPath, passInput)
showNotification(locale.COMMON.ARTICLE_UNLOCK_TIPS) // 设置解锁成功提示显示
return true
}
return false
Expand All @@ -56,10 +62,14 @@ const Slug = props => {
}
}

// 从localStorage中读取上次记录 自动提交密码
const passInput = localStorage.getItem('password_' + router.asPath)
if (passInput) {
validPassword(passInput)
// 读取上次记录 自动提交密码
const passInputs = getPasswordQuery(router.asPath)
if (passInputs.length > 0) {
for (const passInput of passInputs) {
if (validPassword(passInput)) {
break // 密码验证成功,停止尝试
}
}
}
}, [post])

Expand All @@ -83,7 +93,12 @@ const Slug = props => {
theme: siteConfig('THEME'),
router: useRouter()
})
return <Layout {...props} />
return (
<>
<Layout {...props} />
{!lock && <Notification />}
</>
)
}

export async function getStaticPaths() {
Expand Down
8 changes: 4 additions & 4 deletions themes/gitbook/components/NavPostItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ const NavPostItem = props => {
!expanded && <Badge />}
</div>
<Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
{group?.items?.map(post => (
<div key={post.id} className='ml-3 border-l'>
{group?.items?.map((post, index) => (
<div key={index} className='ml-3 border-l'>
<BlogPostCard className='text-sm ml-3' post={post} />
</div>
))}
Expand All @@ -51,8 +51,8 @@ const NavPostItem = props => {
} else {
return (
<>
{group?.items?.map(post => (
<div key={post.id}>
{group?.items?.map((post, index) => (
<div key={index}>
<BlogPostCard className='text-sm py-2' post={post} />
</div>
))}
Expand Down
11 changes: 5 additions & 6 deletions themes/gitbook/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { isBrowser } from '@/lib/utils'
import { getShortId } from '@/lib/utils/pageId'
import { Transition } from '@headlessui/react'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { useRouter } from 'next/router'
Expand Down Expand Up @@ -102,7 +101,7 @@ const LayoutBase = props => {
slotRight,
slotTop
} = props
const { onLoading, fullWidth } = useGlobal()
const { fullWidth } = useGlobal()
const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false)
const [pageNavVisible, changePageNavVisible] = useState(false)
Expand Down Expand Up @@ -174,7 +173,7 @@ const LayoutBase = props => {
{slotTop}
<WWAds className='w-full' orientation='horizontal' />

<Transition
{/* <Transition
show={!onLoading}
appear={true}
enter='transition ease-in-out duration-700 transform order-first'
Expand All @@ -183,9 +182,9 @@ const LayoutBase = props => {
leave='transition ease-in-out duration-300 transform'
leaveFrom='opacity-100 translate-y-0'
leaveTo='opacity-0 -translate-y-16'
unmount={false}>
{children}
</Transition>
unmount={false}> */}
{children}
{/* </Transition> */}

{/* Google广告 */}
<AdSlot type='in-article' />
Expand Down
52 changes: 32 additions & 20 deletions themes/nav/components/NavPostItem.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import BlogPostCard from './BlogPostCard'
import { useState } from 'react'
import Collapse from '@/components/Collapse'
import { useState } from 'react'
import BlogPostCard from './BlogPostCard'

/**
* 导航列表
Expand All @@ -9,7 +9,7 @@ import Collapse from '@/components/Collapse'
* @returns {JSX.Element}
* @constructor
*/
const NavPostItem = (props) => {
const NavPostItem = props => {
const { group } = props
const [isOpen, changeIsOpen] = useState(group?.selected)

Expand All @@ -20,25 +20,37 @@ const NavPostItem = (props) => {
console.log(group)

if (group?.category) {
return <>
<div
onClick={toggleOpenSubMenu}
className='select-none flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
<span>{group?.category}</span>
<div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
return (
<>
<div
onClick={toggleOpenSubMenu}
className='select-none flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600'
key={group?.category}>
<span>{group?.category}</span>
<div className='inline-flex items-center select-none pointer-events-none '>
<i
className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i>
</div>
</div>
<Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{group?.items?.map((post, index) => (
<div key={index} className='ml-3 border-l'>
<BlogPostCard className='text-sm ml-3' post={post} />
</div>
<Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{group?.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
<BlogPostCard className='text-sm ml-3' post={post} /></div>))
}
</Collapse>
</>
))}
</Collapse>
</>
)
} else {
return <>
{group?.items?.map(post => (<div key={post.id} >
<BlogPostCard className='text-sm py-2' post={post} /></div>))
}
</>
return (
<>
{group?.items?.map((post, index) => (
<div key={index}>
<BlogPostCard className='text-sm py-2' post={post} />
</div>
))}
</>
)
}
}

Expand Down

0 comments on commit 1d25fc0

Please sign in to comment.