Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/tangly1024/NotionNext
Browse files Browse the repository at this point in the history
  • Loading branch information
@actions-user
actions-user committed May 10, 2024
2 parents d676d6c + 2da448f commit fb02d8a
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 123 deletions.
83 changes: 57 additions & 26 deletions components/GlobalHead.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ import { useRouter } from 'next/router'
import { useEffect } from 'react'

/**
* 页面的Head头，通常有用于SEO
* 页面的Head头，有用于SEO
* @param {*} param0
* @returns
*/
const GlobalHead = props => {
const { children, siteInfo, post } = props
const { children, siteInfo, post, NOTION_CONFIG } = props
let url = siteConfig('PATH')?.length
? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
: siteConfig('LINK')
let image
const router = useRouter()
const meta = getSEOMeta(props, router, useGlobal())
const meta = getSEOMeta(props, router, useGlobal()?.locale)
if (meta) {
url = `${url}/${meta.slug}`
image = meta.image || '/bg_image.jpg'
Expand All @@ -29,7 +29,45 @@ const GlobalHead = props => {
const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
const favicon = siteConfig('BLOG_FAVICON')
const webFontUrl = siteConfig('FONT_URL')
const BACKGROUND_DARK = siteConfig('BACKGROUND_DARK', '', NOTION_CONFIG)

const SEO_BAIDU_SITE_VERIFICATION = siteConfig(
'SEO_BAIDU_SITE_VERIFICATION',
null,
NOTION_CONFIG
)

const SEO_GOOGLE_SITE_VERIFICATION = siteConfig(
'SEO_GOOGLE_SITE_VERIFICATION',
null,
NOTION_CONFIG
)

const BLOG_FAVICON = siteConfig('BLOG_FAVICON', null, NOTION_CONFIG)

const COMMENT_WEBMENTION_ENABLE = siteConfig(
'COMMENT_WEBMENTION_ENABLE',
null,
NOTION_CONFIG
)

const COMMENT_WEBMENTION_HOSTNAME = siteConfig(
'COMMENT_WEBMENTION_HOSTNAME',
null,
NOTION_CONFIG
)
const COMMENT_WEBMENTION_AUTH = siteConfig(
'COMMENT_WEBMENTION_AUTH',
null,
NOTION_CONFIG
)
const ANALYTICS_BUSUANZI_ENABLE = siteConfig(
'ANALYTICS_BUSUANZI_ENABLE',
null,
NOTION_CONFIG
)

const FACEBOOK_PAGE = siteConfig('FACEBOOK_PAGE', null, NOTION_CONFIG)
// SEO关键词
let keywords = meta?.tags || siteConfig('KEYWORDS')
if (post?.tags && post?.tags?.length > 0) {
Expand Down Expand Up @@ -59,24 +97,23 @@ const GlobalHead = props => {
<Head>
<link rel='icon' href={favicon} />
<title>{title}</title>
<meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />

<meta name='theme-color' content={BACKGROUND_DARK} />
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0'
/>
<meta name='robots' content='follow, index' />
<meta charSet='UTF-8' />
{siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
{SEO_GOOGLE_SITE_VERIFICATION && (
<meta
name='google-site-verification'
content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
content={SEO_GOOGLE_SITE_VERIFICATION}
/>
)}
{siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
{SEO_BAIDU_SITE_VERIFICATION && (
<meta
name='baidu-site-verification'
content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
content={SEO_BAIDU_SITE_VERIFICATION}
/>
)}
<meta name='keywords' content={keywords} />
Expand All @@ -86,44 +123,39 @@ const GlobalHead = props => {
<meta property='og:description' content={description} />
<meta property='og:url' content={url} />
<meta property='og:image' content={image} />
<meta property='og:site_name' content={siteConfig('TITLE')} />
<meta property='og:site_name' content={title} />
<meta property='og:type' content={type} />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:description' content={description} />
<meta name='twitter:title' content={title} />

<link rel='icon' href={`${siteConfig('BLOG_FAVICON')}`} />
<link rel='icon' href={BLOG_FAVICON} />

{siteConfig('COMMENT_WEBMENTION_ENABLE') && (
{COMMENT_WEBMENTION_ENABLE && (
<>
<link
rel='webmention'
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/webmention`}
/>
<link
rel='pingback'
href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
href={`https://webmention.io/${COMMENT_WEBMENTION_HOSTNAME}/xmlrpc`}
/>
{COMMENT_WEBMENTION_AUTH && (
<link href={COMMENT_WEBMENTION_AUTH} rel='me' />
)}
</>
)}

{siteConfig('COMMENT_WEBMENTION_ENABLE') &&
siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
<link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
)}

{JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
{ANALYTICS_BUSUANZI_ENABLE && (
<meta name='referrer' content='no-referrer-when-downgrade' />
)}
{meta?.type === 'Post' && (
<>
<meta property='article:published_time' content={meta.publishDay} />
<meta property='article:author' content={siteConfig('AUTHOR')} />
<meta property='article:section' content={category} />
<meta
property='article:publisher'
content={siteConfig('FACEBOOK_PAGE')}
/>
<meta property='article:publisher' content={FACEBOOK_PAGE} />
</>
)}
{children}
Expand All @@ -136,8 +168,7 @@ const GlobalHead = props => {
* @param {*} props
* @param {*} router
*/
const getSEOMeta = (props, router, global) => {
const { locale } = global
const getSEOMeta = (props, router, locale) => {
const { post, siteInfo, tag, category, page } = props
const keyword = router?.query?.s

Expand Down
34 changes: 17 additions & 17 deletions components/NotionPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,35 +84,35 @@ const NotionPage = ({ post, className }) => {
}, [])

const zoom =
typeof window !== 'undefined' &&
isBrowser &&
mediumZoom({
container: '.notion-viewport',
// container: '.notion-viewport',
background: 'rgba(0, 0, 0, 0.2)',
margin: getMediumZoomMargin()
})

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

useEffect(() => {
if (!isBrowser) return

// 将相册gallery下的图片加入放大功能
if (siteConfig('POST_DISABLE_GALLERY_CLICK')) {
setTimeout(() => {
const imgList = document?.querySelectorAll(
'.notion-asset-wrapper-image img'
)

console.log('放大', imgList)

if (imgList && zoomRef.current) {
for (let i = 0; i < imgList.length; i++) {
zoomRef.current.attach(imgList[i])
if (isBrowser) {
const imgList = document?.querySelectorAll(
'.notion-collection-card-cover img'
)
if (imgList && zoomRef.current) {
for (let i = 0; i < imgList.length; i++) {
zoomRef.current.attach(imgList[i])
}
}
}

const cards = document.getElementsByClassName('notion-collection-card')
for (const e of cards) {
e.removeAttribute('href')
const cards = document.getElementsByClassName(
'notion-collection-card'
)
for (const e of cards) {
e.removeAttribute('href')
}
}
}, 800)
}
Expand Down
13 changes: 1 addition & 12 deletions pages/[prefix]/[slug]/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@ import BLOG from '@/blog.config'
import { siteConfig } from '@/lib/config'
import { getGlobalData, getPost, getPostBlocks } from '@/lib/db/getSiteData'
import { uploadDataToAlgolia } from '@/lib/plugins/algolia'
import {
checkSlugHasNoSlash,
checkSlugHasOneSlash,
getRecommendPost
} from '@/lib/utils/post'
import { checkSlugHasOneSlash, getRecommendPost } from '@/lib/utils/post'
import { idToUuid } from 'notion-utils'
import Slug from '..'

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

return {
paths: paths,
Expand Down
104 changes: 66 additions & 38 deletions themes/gitbook/components/NavPostList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,56 +17,30 @@ const NavPostList = props => {
const { locale, currentSearch } = useGlobal()
const router = useRouter()

// 按分类将文章分组成文件夹
const categoryFolders = groupArticles(filteredNavPages)

// 存放被展开的分组
const [expandedGroups, setExpandedGroups] = useState([])

// 排他折叠
// 是否排他折叠，一次只展开一个文件夹
const GITBOOK_EXCLUSIVE_COLLAPSE = siteConfig(
'GITBOOK_EXCLUSIVE_COLLAPSE',
null,
CONFIG
)

// 按照分类、分组折叠内榕
const categoryFolders = filteredNavPages?.reduce((groups, item) => {
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串

let existingGroup = null
// 开启自动分组排序
if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
} else {
existingGroup = groups[groups.length - 1] // 获取最后一个分组
}

// 添加数据
if (existingGroup && existingGroup.category === categoryName) {
existingGroup.items.push(item)
} else {
groups.push({ category: categoryName, items: [item] })
}
return groups
}, [])

// 首次打开页面时，跟踪是否已经选择了一个项
categoryFolders?.forEach(group => {
let hasExpandFolder = false
group.items.forEach(post => {
if (router.asPath.split('?')[0] === '/' + post.slug) {
hasExpandFolder = true
}
})
group.selected = hasExpandFolder
})

// 如果都没有选中默认打开第一个
// 展开文件夹
useEffect(() => {
setTimeout(() => {
if (expandedGroups.length === 0) {
setExpandedGroups([0])
}
// 默认展开一个
const defaultOpenIndex = getDefaultOpenIndexByPath(
categoryFolders,
router.asPath.split('?')[0]
)
setExpandedGroups([defaultOpenIndex])
}, 500)
}, [router])
}, [router, filteredNavPages])

// 折叠项切换，当折叠或展开数组时会调用
const toggleItem = index => {
Expand All @@ -93,6 +67,8 @@ const NavPostList = props => {
// 更新展开分组数组
setExpandedGroups(newExpandedGroups)
}

// 空数据返回
if (!categoryFolders || categoryFolders.length === 0) {
// 空白内容
return (
Expand Down Expand Up @@ -123,4 +99,56 @@ const NavPostList = props => {
)
}

// 按照分类将文章分组成文件夹
function groupArticles(filteredNavPages) {
if (!filteredNavPages) {
return []
}
const groups = []

for (let i = 0; i < filteredNavPages.length; i++) {
const item = filteredNavPages[i]
const categoryName = item?.category ? item?.category : '' // 将category转换为字符串

let existingGroup = null
// 开启自动分组排序；将同分类的自动归到同一个文件夹，忽略Notion中的排序
if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
} else {
existingGroup = groups[groups.length - 1] // 获取最后一个分组
}

// 添加数据
if (existingGroup && existingGroup.category === categoryName) {
existingGroup.items.push(item)
} else {
groups.push({ category: categoryName, items: [item] })
}
}
return groups
}

/**
* 查看当前路由需要展开的菜单索引
* 路过都没有，则返回0，即默认展开第一个
* @param {*} categoryFolders
* @param {*} path
* @returns {number} 返回需要展开的菜单索引
*/
function getDefaultOpenIndexByPath(categoryFolders, path) {
// 默认展开第一个索引
let defaultIndex = 0

// 查找满足条件的第一个索引
const index = categoryFolders.findIndex(group => {
return group.items.some(post => path === '/' + post.slug)
})

// 如果找到满足条件的索引，则设置为该索引
if (index !== -1) {
defaultIndex = index
}

return defaultIndex
}
export default NavPostList
Loading

0 comments on commit fb02d8a

Please sign in to comment.