Skip to content

Commit 6c6f895

Browse files
actions-useractions-user
committed
2 parents dcf15ea + 6f03028 commit 6c6f895

File tree

3 files changed

+189
-154
lines changed

3 files changed

+189
-154
lines changed

‎components/NotionPage.js

+152-115
Original file line numberDiff line numberDiff line change
@@ -7,81 +7,16 @@ import dynamic from 'next/dynamic'
77
import { useEffect, useRef } from 'react'
88
import { NotionRenderer } from 'react-notion-x'
99

10-
const Code = dynamic(
11-
() =>
12-
import('react-notion-x/build/third-party/code').then(async m => {
13-
return m.Code
14-
}),
15-
{ ssr: false }
16-
)
17-
18-
// 公式
19-
const Equation = dynamic(
20-
() =>
21-
import('@/components/Equation').then(async m => {
22-
// 化学方程式
23-
await import('@/lib/plugins/mhchem')
24-
return m.Equation
25-
}),
26-
{ ssr: false }
27-
)
28-
29-
const Pdf = dynamic(
30-
() => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
31-
{
32-
ssr: false
33-
}
34-
)
35-
36-
// https://github.com/txs
37-
// import PrismMac from '@/components/PrismMac'
38-
const PrismMac = dynamic(() => import('@/components/PrismMac'), {
39-
ssr: false
40-
})
41-
42-
/**
43-
* tweet嵌入
44-
*/
45-
const TweetEmbed = dynamic(() => import('react-tweet-embed'), {
46-
ssr: false
47-
})
48-
4910
/**
50-
* 文内google广告
51-
*/
52-
const AdEmbed = dynamic(
53-
() => import('@/components/GoogleAdsense').then(m => m.AdEmbed),
54-
{ ssr: true }
55-
)
56-
57-
const Collection = dynamic(
58-
() =>
59-
import('react-notion-x/build/third-party/collection').then(
60-
m => m.Collection
61-
),
62-
{
63-
ssr: true
64-
}
65-
)
66-
67-
const Modal = dynamic(
68-
() => import('react-notion-x/build/third-party/modal').then(m => m.Modal),
69-
{ ssr: false }
70-
)
71-
72-
const Tweet = ({ id }) => {
73-
return <TweetEmbed tweetId={id} />
74-
}
75-
76-
/**
77-
* Notin渲染成网页的核心组件
11+
* 整个站点的核心组件
12+
* 将Notion数据渲染成网页
7813
* @param {*} param0
7914
* @returns
8015
*/
8116
const NotionPage = ({ post, className }) => {
82-
useEffect(() => {
83-
autoScrollToTarget()
84-
}, [])
17+
// 是否关闭数据库和画册的点击跳转
18+
const POST_DISABLE_GALLERY_CLICK = siteConfig('POST_DISABLE_GALLERY_CLICK')
19+
const POST_DISABLE_DATABASE_CLICK = siteConfig('POST_DISABLE_DATABASE_CLICK')
8520

8621
const zoom =
8722
isBrowser &&
@@ -93,56 +28,31 @@ const NotionPage = ({ post, className }) => {
9328

9429
const zoomRef = useRef(zoom ? zoom.clone() : null)
9530

31+
// 页面首次打开时执行的勾子
9632
useEffect(() => {
97-
// 将相册gallery下的图片加入放大功能
98-
if (siteConfig('POST_DISABLE_GALLERY_CLICK')) {
99-
setTimeout(() => {
100-
if (isBrowser) {
101-
const imgList = document?.querySelectorAll(
102-
'.notion-collection-card-cover img'
103-
)
104-
if (imgList && zoomRef.current) {
105-
for (let i = 0; i < imgList.length; i++) {
106-
zoomRef.current.attach(imgList[i])
107-
}
108-
}
33+
// 检测当前的url并自动滚动到对应目标
34+
autoScrollToTarget()
35+
}, [])
10936

110-
const cards = document.getElementsByClassName(
111-
'notion-collection-card'
112-
)
113-
for (const e of cards) {
114-
e.removeAttribute('href')
115-
}
116-
}
117-
}, 800)
37+
// 页面文章发生变化时会执行的勾子
38+
useEffect(() => {
39+
// 相册视图点击禁止跳转，只能放大查看图片
40+
if (POST_DISABLE_GALLERY_CLICK) {
41+
// 针对页面中的gallery视图，点击后是放大图片还是跳转到gallery的内部页面
42+
processGalleryImg(zoomRef?.current)
11843
}
11944

120-
/**
121-
* 处理页面内连接跳转
122-
* 如果链接就是当前网站，则不打开新窗口访问
123-
*/
124-
if (isBrowser) {
125-
const currentURL = window.location.origin + window.location.pathname
126-
const allAnchorTags = document.getElementsByTagName('a') // 或者使用 document.querySelectorAll('a') 获取 NodeList
127-
for (const anchorTag of allAnchorTags) {
128-
if (anchorTag?.target === '_blank') {
129-
const hrefWithoutQueryHash = anchorTag.href
130-
.split('?')[0]
131-
.split('#')[0]
132-
const hrefWithRelativeHash =
133-
currentURL.split('#')[0] + anchorTag.href.split('#')[1]
134-
135-
if (
136-
currentURL === hrefWithoutQueryHash ||
137-
currentURL === hrefWithRelativeHash
138-
) {
139-
anchorTag.target = '_self'
140-
}
141-
}
142-
}
45+
// 页内数据库点击禁止跳转，只能查看
46+
if (POST_DISABLE_DATABASE_CLICK) {
47+
processDisableDatabaseUrl()
14348
}
14449

145-
// 放大图片：调整图片质量
50+
// 若url是本站域名，则之间在当前窗口打开、不开新窗口
51+
processPageUrl()
52+
53+
/**
54+
* 放大查看图片时替换成高清图像
55+
*/
14656
const observer = new MutationObserver((mutationsList, observer) => {
14757
mutationsList.forEach(mutation => {
14858
if (
@@ -165,7 +75,7 @@ const NotionPage = ({ post, className }) => {
16575
})
16676
})
16777

168-
// 监视整个文档中的元素和属性的变化
78+
// 监视页面元素和属性变化
16979
observer.observe(document.body, {
17080
attributes: true,
17181
subtree: true,
@@ -201,6 +111,65 @@ const NotionPage = ({ post, className }) => {
201111
)
202112
}
203113

114+
/**
115+
* 页面的数据库链接禁止跳转，只能查看
116+
*/
117+
const processDisableDatabaseUrl = () => {
118+
if (isBrowser) {
119+
const links = document.querySelectorAll('.notion-table a')
120+
for (const e of links) {
121+
e.removeAttribute('href')
122+
}
123+
}
124+
}
125+
126+
/**
127+
* gallery视图，点击后是放大图片还是跳转到gallery的内部页面
128+
*/
129+
const processGalleryImg = zoom => {
130+
setTimeout(() => {
131+
if (isBrowser) {
132+
const imgList = document?.querySelectorAll(
133+
'.notion-collection-card-cover img'
134+
)
135+
if (imgList && zoom) {
136+
for (let i = 0; i < imgList.length; i++) {
137+
zoom.attach(imgList[i])
138+
}
139+
}
140+
141+
const cards = document.getElementsByClassName('notion-collection-card')
142+
for (const e of cards) {
143+
e.removeAttribute('href')
144+
}
145+
}
146+
}, 800)
147+
}
148+
149+
/**
150+
* 处理页面内连接跳转
151+
* 如果链接就是当网站，则不打开新窗口访问
152+
*/
153+
const processPageUrl = () => {
154+
if (isBrowser) {
155+
const currentURL = window.location.origin + window.location.pathname
156+
const allAnchorTags = document.getElementsByTagName('a') // 或者使用 document.querySelectorAll('a') 获取 NodeList
157+
for (const anchorTag of allAnchorTags) {
158+
if (anchorTag?.target === '_blank') {
159+
const hrefWithoutQueryHash = anchorTag.href.split('?')[0].split('#')[0]
160+
const hrefWithRelativeHash =
161+
currentURL.split('#')[0] + anchorTag.href.split('#')[1]
162+
163+
if (
164+
currentURL === hrefWithoutQueryHash ||
165+
currentURL === hrefWithRelativeHash
166+
) {
167+
anchorTag.target = '_self'
168+
}
169+
}
170+
}
171+
}
172+
}
204173
/**
205174
* 根据url参数自动滚动到指定区域
206175
*/
@@ -248,4 +217,72 @@ function getMediumZoomMargin() {
248217
return 72
249218
}
250219
}
220+
221+
// 代码
222+
const Code = dynamic(
223+
() =>
224+
import('react-notion-x/build/third-party/code').then(async m => {
225+
return m.Code
226+
}),
227+
{ ssr: false }
228+
)
229+
230+
// 公式
231+
const Equation = dynamic(
232+
() =>
233+
import('@/components/Equation').then(async m => {
234+
// 化学方程式
235+
await import('@/lib/plugins/mhchem')
236+
return m.Equation
237+
}),
238+
{ ssr: false }
239+
)
240+
241+
// 文档
242+
const Pdf = dynamic(
243+
() => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
244+
{
245+
ssr: false
246+
}
247+
)
248+
249+
// 美化代码 from: https://github.com/txs
250+
const PrismMac = dynamic(() => import('@/components/PrismMac'), {
251+
ssr: false
252+
})
253+
254+
/**
255+
* tweet嵌入
256+
*/
257+
const TweetEmbed = dynamic(() => import('react-tweet-embed'), {
258+
ssr: false
259+
})
260+
261+
/**
262+
* 文内google广告
263+
*/
264+
const AdEmbed = dynamic(
265+
() => import('@/components/GoogleAdsense').then(m => m.AdEmbed),
266+
{ ssr: true }
267+
)
268+
269+
const Collection = dynamic(
270+
() =>
271+
import('react-notion-x/build/third-party/collection').then(
272+
m => m.Collection
273+
),
274+
{
275+
ssr: true
276+
}
277+
)
278+
279+
const Modal = dynamic(
280+
() => import('react-notion-x/build/third-party/modal').then(m => m.Modal),
281+
{ ssr: false }
282+
)
283+
284+
const Tweet = ({ id }) => {
285+
return <TweetEmbed tweetId={id} />
286+
}
287+
251288
export default NotionPage

‎themes/matery/components/Header.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { siteConfig } from '@/lib/config'
33
import { useGlobal } from '@/lib/global'
44
import throttle from 'lodash.throttle'
55
import Link from 'next/link'
6+
import { useRouter } from 'next/router'
67
import { useCallback, useEffect, useRef, useState } from 'react'
78
import CONFIG from '../config'
89
import CategoryGroup from './CategoryGroup'
@@ -28,6 +29,7 @@ const Header = props => {
2829
const throttleMs = 200
2930
const showSearchButton = siteConfig('MATERY_MENU_SEARCH', false, CONFIG)
3031

32+
const router = useRouter()
3133
const scrollTrigger = useCallback(
3234
throttle(() => {
3335
requestAnimationFrame(() => {
@@ -85,7 +87,7 @@ const Header = props => {
8587
return () => {
8688
window.removeEventListener('scroll', scrollTrigger)
8789
}
88-
}, [])
90+
}, [router])
8991

9092
const [isOpen, changeShow] = useState(false)
9193

0 commit comments

Comments
 (0)