Skip to content

Commit f1e303d

Browse files
committed
2 parents a6bb38c + 2da448f commit f1e303d

File tree

5 files changed

+184
-123
lines changed

5 files changed

+184
-123
lines changed

components/GlobalHead.js

+57-26
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ import { useRouter } from 'next/router'
66
import { useEffect } from 'react'
77

88
/**
9-
* 页面的Head头,通常有用于SEO
9+
* 页面的Head头,有用于SEO
1010
* @param {*} param0
1111
* @returns
1212
*/
1313
const GlobalHead = props => {
14-
const { children, siteInfo, post } = props
14+
const { children, siteInfo, post, NOTION_CONFIG } = props
1515
let url = siteConfig('PATH')?.length
1616
? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
1717
: siteConfig('LINK')
1818
let image
1919
const router = useRouter()
20-
const meta = getSEOMeta(props, router, useGlobal())
20+
const meta = getSEOMeta(props, router, useGlobal()?.locale)
2121
if (meta) {
2222
url = `${url}/${meta.slug}`
2323
image = meta.image || '/bg_image.jpg'
@@ -29,7 +29,45 @@ const GlobalHead = props => {
2929
const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類,Facebook 用這個來抓連結的分類
3030
const favicon = siteConfig('BLOG_FAVICON')
3131
const webFontUrl = siteConfig('FONT_URL')
32+
const BACKGROUND_DARK = siteConfig('BACKGROUND_DARK', '', NOTION_CONFIG)
3233

34+
const SEO_BAIDU_SITE_VERIFICATION = siteConfig(
35+
'SEO_BAIDU_SITE_VERIFICATION',
36+
null,
37+
NOTION_CONFIG
38+
)
39+
40+
const SEO_GOOGLE_SITE_VERIFICATION = siteConfig(
41+
'SEO_GOOGLE_SITE_VERIFICATION',
42+
null,
43+
NOTION_CONFIG
44+
)
45+
46+
const BLOG_FAVICON = siteConfig('BLOG_FAVICON', null, NOTION_CONFIG)
47+
48+
const COMMENT_WEBMENTION_ENABLE = siteConfig(
49+
'COMMENT_WEBMENTION_ENABLE',
50+
null,
51+
NOTION_CONFIG
52+
)
53+
54+
const COMMENT_WEBMENTION_HOSTNAME = siteConfig(
55+
'COMMENT_WEBMENTION_HOSTNAME',
56+
null,
57+
NOTION_CONFIG
58+
)
59+
const COMMENT_WEBMENTION_AUTH = siteConfig(
60+
'COMMENT_WEBMENTION_AUTH',
61+
null,
62+
NOTION_CONFIG
63+
)
64+
const ANALYTICS_BUSUANZI_ENABLE = siteConfig(
65+
'ANALYTICS_BUSUANZI_ENABLE',
66+
null,
67+
NOTION_CONFIG
68+
)
69+
70+
const FACEBOOK_PAGE = siteConfig('FACEBOOK_PAGE', null, NOTION_CONFIG)
3371
// SEO关键词
3472
let keywords = meta?.tags || siteConfig('KEYWORDS')
3573
if (post?.tags && post?.tags?.length > 0) {
@@ -59,24 +97,23 @@ const GlobalHead = props => {
5997
<Head>
6098
<link rel='icon' href={favicon} />
6199
<title>{title}</title>
62-
<meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />
63-
100+
<meta name='theme-color' content={BACKGROUND_DARK} />
64101
<meta
65102
name='viewport'
66103
content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0'
67104
/>
68105
<meta name='robots' content='follow, index' />
69106
<meta charSet='UTF-8' />
70-
{siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
107+
{SEO_GOOGLE_SITE_VERIFICATION && (
71108
<meta
72109
name='google-site-verification'
73-
content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
110+
content={SEO_GOOGLE_SITE_VERIFICATION}
74111
/>
75112
)}
76-
{siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
113+
{SEO_BAIDU_SITE_VERIFICATION && (
77114
<meta
78115
name='baidu-site-verification'
79-
content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
116+
content={SEO_BAIDU_SITE_VERIFICATION}
80117
/>
81118
)}
82119
<meta name='keywords' content={keywords} />
@@ -86,44 +123,39 @@ const GlobalHead = props => {
86123
<meta property='og:description' content={description} />
87124
<meta property='og:url' content={url} />
88125
<meta property='og:image' content={image} />
89-
<meta property='og:site_name' content={siteConfig('TITLE')} />
126+
<meta property='og:site_name' content={title} />
90127
<meta property='og:type' content={type} />
91128
<meta name='twitter:card' content='summary_large_image' />
92129
<meta name='twitter:description' content={description} />
93130
<meta name='twitter:title' content={title} />
94131

95-
<link rel='icon' href={`${siteConfig('BLOG_FAVICON')}`} />
132+
<link rel='icon' href={BLOG_FAVICON} />
96133

97-
{siteConfig('COMMENT_WEBMENTION_ENABLE') && (
134+
{COMMENT_WEBMENTION_ENABLE && (
98135
<>
99136
<link
100137
rel='webmention'
101-
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
138+
href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/webmention`}
102139
/>
103140
<link
104141
rel='pingback'
105-
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
142+
href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/xmlrpc`}
106143
/>
144+
{COMMENT_WEBMENTION_AUTH && (
145+
<link href={COMMENT_WEBMENTION_AUTH} rel='me' />
146+
)}
107147
</>
108148
)}
109149

110-
{siteConfig('COMMENT_WEBMENTION_ENABLE') &&
111-
siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
112-
<link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
113-
)}
114-
115-
{JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
150+
{ANALYTICS_BUSUANZI_ENABLE && (
116151
<meta name='referrer' content='no-referrer-when-downgrade' />
117152
)}
118153
{meta?.type === 'Post' && (
119154
<>
120155
<meta property='article:published_time' content={meta.publishDay} />
121156
<meta property='article:author' content={siteConfig('AUTHOR')} />
122157
<meta property='article:section' content={category} />
123-
<meta
124-
property='article:publisher'
125-
content={siteConfig('FACEBOOK_PAGE')}
126-
/>
158+
<meta property='article:publisher' content={FACEBOOK_PAGE} />
127159
</>
128160
)}
129161
{children}
@@ -136,8 +168,7 @@ const GlobalHead = props => {
136168
* @param {*} props
137169
* @param {*} router
138170
*/
139-
const getSEOMeta = (props, router, global) => {
140-
const { locale } = global
171+
const getSEOMeta = (props, router, locale) => {
141172
const { post, siteInfo, tag, category, page } = props
142173
const keyword = router?.query?.s
143174

components/NotionPage.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -84,35 +84,35 @@ const NotionPage = ({ post, className }) => {
8484
}, [])
8585

8686
const zoom =
87-
typeof window !== 'undefined' &&
87+
isBrowser &&
8888
mediumZoom({
89-
container: '.notion-viewport',
89+
// container: '.notion-viewport',
9090
background: 'rgba(0, 0, 0, 0.2)',
9191
margin: getMediumZoomMargin()
9292
})
93+
9394
const zoomRef = useRef(zoom ? zoom.clone() : null)
9495

9596
useEffect(() => {
96-
if (!isBrowser) return
97-
9897
// 将相册gallery下的图片加入放大功能
9998
if (siteConfig('POST_DISABLE_GALLERY_CLICK')) {
10099
setTimeout(() => {
101-
const imgList = document?.querySelectorAll(
102-
'.notion-asset-wrapper-image img'
103-
)
104-
105-
console.log('放大', imgList)
106-
107-
if (imgList && zoomRef.current) {
108-
for (let i = 0; i < imgList.length; i++) {
109-
zoomRef.current.attach(imgList[i])
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+
}
110108
}
111-
}
112109

113-
const cards = document.getElementsByClassName('notion-collection-card')
114-
for (const e of cards) {
115-
e.removeAttribute('href')
110+
const cards = document.getElementsByClassName(
111+
'notion-collection-card'
112+
)
113+
for (const e of cards) {
114+
e.removeAttribute('href')
115+
}
116116
}
117117
}, 800)
118118
}

pages/[prefix]/[slug]/index.js

+1-12
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@ import BLOG from '@/blog.config'
22
import { siteConfig } from '@/lib/config'
33
import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
44
import { uploadDataToAlgolia } from '@/lib/plugins/algolia'
5-
import {
6-
checkSlugHasNoSlash,
7-
checkSlugHasOneSlash,
8-
getRecommendPost
9-
} from '@/lib/utils/post'
5+
import { checkSlugHasOneSlash, getRecommendPost } from '@/lib/utils/post'
106
import { idToUuid } from 'notion-utils'
117
import Slug from '..'
128

@@ -42,13 +38,6 @@ export async function getStaticPaths() {
4238
// 增加一种访问路径 允许通过 [category]/[slug] 访问文章
4339
// 例如文章slug 是 test ,然后文章的分类category是 production
4440
// 则除了 [domain]/[slug] 以外,还支持分类名访问: [domain]/[category]/[slug]
45-
console.log(
46-
allPages
47-
?.filter(row => checkSlugHasNoSlash(row) && row.category)
48-
.map(row => ({
49-
params: { prefix: row.category, slug: row.slug }
50-
}))
51-
)
5241

5342
return {
5443
paths: paths,

themes/gitbook/components/NavPostList.js

+66-38
Original file line numberDiff line numberDiff line change
@@ -17,56 +17,30 @@ const NavPostList = props => {
1717
const { locale, currentSearch } = useGlobal()
1818
const router = useRouter()
1919

20+
// 按分类将文章分组成文件夹
21+
const categoryFolders = groupArticles(filteredNavPages)
22+
2023
// 存放被展开的分组
2124
const [expandedGroups, setExpandedGroups] = useState([])
2225

23-
// 排他折叠
26+
// 是否排他折叠,一次只展开一个文件夹
2427
const GITBOOK_EXCLUSIVE_COLLAPSE = siteConfig(
2528
'GITBOOK_EXCLUSIVE_COLLAPSE',
2629
null,
2730
CONFIG
2831
)
2932

30-
// 按照分类、分组折叠内榕
31-
const categoryFolders = filteredNavPages?.reduce((groups, item) => {
32-
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
33-
34-
let existingGroup = null
35-
// 开启自动分组排序
36-
if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
37-
existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
38-
} else {
39-
existingGroup = groups[groups.length - 1] // 获取最后一个分组
40-
}
41-
42-
// 添加数据
43-
if (existingGroup && existingGroup.category === categoryName) {
44-
existingGroup.items.push(item)
45-
} else {
46-
groups.push({ category: categoryName, items: [item] })
47-
}
48-
return groups
49-
}, [])
50-
51-
// 首次打开页面时,跟踪是否已经选择了一个项
52-
categoryFolders?.forEach(group => {
53-
let hasExpandFolder = false
54-
group.items.forEach(post => {
55-
if (router.asPath.split('?')[0] === '/' + post.slug) {
56-
hasExpandFolder = true
57-
}
58-
})
59-
group.selected = hasExpandFolder
60-
})
61-
62-
// 如果都没有选中默认打开第一个
33+
// 展开文件夹
6334
useEffect(() => {
6435
setTimeout(() => {
65-
if (expandedGroups.length === 0) {
66-
setExpandedGroups([0])
67-
}
36+
// 默认展开一个
37+
const defaultOpenIndex = getDefaultOpenIndexByPath(
38+
categoryFolders,
39+
router.asPath.split('?')[0]
40+
)
41+
setExpandedGroups([defaultOpenIndex])
6842
}, 500)
69-
}, [router])
43+
}, [router, filteredNavPages])
7044

7145
// 折叠项切换,当折叠或展开数组时会调用
7246
const toggleItem = index => {
@@ -93,6 +67,8 @@ const NavPostList = props => {
9367
// 更新展开分组数组
9468
setExpandedGroups(newExpandedGroups)
9569
}
70+
71+
// 空数据返回
9672
if (!categoryFolders || categoryFolders.length === 0) {
9773
// 空白内容
9874
return (
@@ -123,4 +99,56 @@ const NavPostList = props => {
12399
)
124100
}
125101

102+
// 按照分类将文章分组成文件夹
103+
function groupArticles(filteredNavPages) {
104+
if (!filteredNavPages) {
105+
return []
106+
}
107+
const groups = []
108+
109+
for (let i = 0; i < filteredNavPages.length; i++) {
110+
const item = filteredNavPages[i]
111+
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
112+
113+
let existingGroup = null
114+
// 开启自动分组排序;将同分类的自动归到同一个文件夹,忽略Notion中的排序
115+
if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
116+
existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
117+
} else {
118+
existingGroup = groups[groups.length - 1] // 获取最后一个分组
119+
}
120+
121+
// 添加数据
122+
if (existingGroup && existingGroup.category === categoryName) {
123+
existingGroup.items.push(item)
124+
} else {
125+
groups.push({ category: categoryName, items: [item] })
126+
}
127+
}
128+
return groups
129+
}
130+
131+
/**
132+
* 查看当前路由需要展开的菜单索引
133+
* 路过都没有,则返回0,即默认展开第一个
134+
* @param {*} categoryFolders
135+
* @param {*} path
136+
* @returns {number} 返回需要展开的菜单索引
137+
*/
138+
function getDefaultOpenIndexByPath(categoryFolders, path) {
139+
// 默认展开第一个索引
140+
let defaultIndex = 0
141+
142+
// 查找满足条件的第一个索引
143+
const index = categoryFolders.findIndex(group => {
144+
return group.items.some(post => path === '/' + post.slug)
145+
})
146+
147+
// 如果找到满足条件的索引,则设置为该索引
148+
if (index !== -1) {
149+
defaultIndex = index
150+
}
151+
152+
return defaultIndex
153+
}
126154
export default NavPostList

0 commit comments

Comments
 (0)