Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
actions-user committed May 29, 2024
2 parents 02ae96d + c24f9a0 commit c9413c3
Show file tree
Hide file tree
Showing 10 changed files with 216 additions and 150 deletions.
1 change: 1 addition & 0 deletions blog.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const BLOG = {
APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 , dark夜间模式, auto根据时间和主题自动夜间模式
APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间,false时关闭根据时间自动切换夜间模式

TAG_SORT_BY_COUNT: true, // 标签是否按照文章数量倒序排列,文章多的标签排在前。
IS_TAG_COLOR_DISTINGUISHED:
process.env.NEXT_PUBLIC_IS_TAG_COLOR_DISTINGUISHED === 'true' || true, // 对于名称相同的tag是否区分tag的颜色

Expand Down
37 changes: 30 additions & 7 deletions components/CustomContextMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,9 @@ export default function CustomContextMenu(props) {
setShow(true)
}

/**
* 鼠标点击事件
*/
const handleClick = event => {
if (menuRef.current && !menuRef.current.contains(event.target)) {
setShow(false)
Expand Down Expand Up @@ -140,6 +143,26 @@ export default function CustomContextMenu(props) {
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
}

// 一些配置变量
const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST = siteConfig(
'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST'
)
const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY = siteConfig(
'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY'
)
const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG = siteConfig(
'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG'
)
const CAN_COPY = siteConfig('CAN_COPY')
const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK = siteConfig(
'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK'
)
const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE = siteConfig(
'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE'
)
const CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH = siteConfig(
'CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH'
)
return (
<div
ref={menuRef}
Expand Down Expand Up @@ -167,7 +190,7 @@ export default function CustomContextMenu(props) {

{/* 跳转导航按钮 */}
<div className='w-full px-2'>
{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST') && (
{CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST && (
<div
onClick={handleJumpToRandomPost}
title={locale.MENU.WALK_AROUND}
Expand All @@ -177,7 +200,7 @@ export default function CustomContextMenu(props) {
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY') && (
{CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY && (
<Link
href='/category'
title={locale.MENU.CATEGORY}
Expand All @@ -187,7 +210,7 @@ export default function CustomContextMenu(props) {
</Link>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG') && (
{CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG && (
<Link
href='/tag'
title={locale.MENU.TAGS}
Expand All @@ -202,7 +225,7 @@ export default function CustomContextMenu(props) {

{/* 功能按钮 */}
<div className='w-full px-2'>
{siteConfig('CAN_COPY') && (
{CAN_COPY && (
<div
onClick={handleCopy}
title={locale.MENU.COPY}
Expand All @@ -212,7 +235,7 @@ export default function CustomContextMenu(props) {
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK') && (
{CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK && (
<div
onClick={handleCopyLink}
title={locale.MENU.SHARE_URL}
Expand All @@ -222,7 +245,7 @@ export default function CustomContextMenu(props) {
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE') && (
{CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE && (
<div
onClick={handleChangeDarkMode}
title={
Expand All @@ -241,7 +264,7 @@ export default function CustomContextMenu(props) {
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH') && (
{CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH && (
<div
onClick={handleChangeTheme}
title={locale.MENU.THEME_SWITCH}
Expand Down
20 changes: 14 additions & 6 deletions lib/db/getSiteData.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import getAllPageIds from '@/lib/notion/getAllPageIds'
import { getAllTags } from '@/lib/notion/getAllTags'
import { getConfigMapFromConfigPage } from '@/lib/notion/getNotionConfig'
import getPageProperties, {
adjustPageProperties
adjustPageProperties
} from '@/lib/notion/getPageProperties'
import { fetchInBatches, getPage } from '@/lib/notion/getPostBlocks'
import { compressImage, mapImgUrl } from '@/lib/notion/mapImage'
Expand Down Expand Up @@ -77,15 +77,17 @@ export async function getNotionPageData({ pageId, from }) {
}

// 返回给前端的数据做处理
return compressData(deepClone(data))
return handleDataBeforeReturn(deepClone(data))
}

/**
* 减少返回给前端的数据
* 并脱敏
* 返回给浏览器前端的数据处理
* 适当脱敏
* 减少体积
* 其它处理
* @param {*} db
*/
function compressData(db) {
function handleDataBeforeReturn(db) {
// 清理多余数据
delete db.block
delete db.schema
Expand Down Expand Up @@ -545,11 +547,17 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
)
})?.[0]
)
// 所有分类
const categoryOptions = getAllCategories({
allPages,
categoryOptions: getCategoryOptions(schema)
})
const tagOptions = getAllTags({ allPages, tagOptions: getTagOptions(schema) })
// 所有标签
const tagOptions = getAllTags({
allPages,
tagOptions: getTagOptions(schema),
NOTION_CONFIG
})
// 旧的菜单
const customNav = getCustomNav({
allPages: collectionData.filter(
Expand Down
12 changes: 9 additions & 3 deletions lib/notion/getAllCategories.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { isIterable } from '../utils'
* 获取所有文章的标签
* @param allPosts
* @param sliceCount 默认截取数量为12,若为0则返回全部
* @param tagOptions tags的下拉选项
* @param categoryOptions categories的下拉选项
* @returns {Promise<{}|*[]>}
*/

Expand All @@ -13,8 +13,14 @@ import { isIterable } from '../utils'
* @param allPosts
* @returns {Promise<{}|*[]>}
*/
export function getAllCategories({ allPages, categoryOptions, sliceCount = 0 }) {
const allPosts = allPages?.filter(page => page.type === 'Post' && page.status === 'Published')
export function getAllCategories({
allPages,
categoryOptions,
sliceCount = 0
}) {
const allPosts = allPages?.filter(
page => page.type === 'Post' && page.status === 'Published'
)
if (!allPosts || !categoryOptions) {
return []
}
Expand Down
25 changes: 20 additions & 5 deletions lib/notion/getAllTags.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { siteConfig } from '../config'
import { isIterable } from '../utils'
import BLOG from '@/blog.config'

/**
* 获取所有文章的标签
Expand All @@ -8,8 +8,15 @@ import BLOG from '@/blog.config'
* @param tagOptions tags的下拉选项
* @returns {Promise<{}|*[]>}
*/
export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
const allPosts = allPages?.filter(page => page.type === 'Post' && page.status === 'Published')
export function getAllTags({
allPages,
sliceCount = 0,
tagOptions,
NOTION_CONFIG
}) {
const allPosts = allPages?.filter(
page => page.type === 'Post' && page.status === 'Published'
)

if (!allPosts || !tagOptions) {
return []
Expand All @@ -27,7 +34,12 @@ export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
})

const list = []
const { IS_TAG_COLOR_DISTINGUISHED } = BLOG
const IS_TAG_COLOR_DISTINGUISHED = siteConfig(
'IS_TAG_COLOR_DISTINGUISHED',
false,
NOTION_CONFIG
)
const TAG_SORT_BY_COUNT = siteConfig('TAG_SORT_BY_COUNT', true, NOTION_CONFIG)
if (isIterable(tagOptions)) {
if (!IS_TAG_COLOR_DISTINGUISHED) {
// 如果不区分颜色, 那么不同颜色相同名称的tag当做同一种tag
Expand All @@ -52,7 +64,10 @@ export function getAllTags({ allPages, sliceCount = 0, tagOptions }) {
}

// 按照数量排序
// list.sort((a, b) => b.count - a.count)
if (TAG_SORT_BY_COUNT) {
list.sort((a, b) => b.count - a.count)
}

if (sliceCount && sliceCount > 0) {
return list.slice(0, sliceCount)
} else {
Expand Down
55 changes: 24 additions & 31 deletions themes/heo/components/PaginationNumber.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const PaginationNumber = ({ page, totalPage }) => {
return (
<>
{/* pc端分页按钮 */}
<div className="hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto">
<div className='hidden lg:flex justify-between items-end mt-10 font-medium text-black duration-500 dark:text-gray-300 pt-3 space-x-2 overflow-x-auto'>
{/* 上一页 */}
<Link
href={{
Expand All @@ -54,32 +54,29 @@ const PaginationNumber = ({ page, totalPage }) => {
: `${pagePrefix}/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
rel="prev"
className={`${currentPage === 1 ? 'invisible' : 'block'}`}
>
<div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
<i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
<div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
<div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
<i className='fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
<div className='absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0'>
{locale.PAGINATION.PREV}
</div>
</div>
</Link>

{/* 分页 */}
<div className="flex items-center space-x-2">
<div className='flex items-center space-x-2'>
{pages}

{/* 跳转页码 */}
<div className="bg-white hover:bg-gray-100 dark:hover:bg-yellow-600 dark:bg-[#1e1e1e] h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200">
<div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600 dark:bg-[#1e1e1e] h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
<input
value={value}
className="w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg"
onInput={handleInputChange}
></input>
className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
onInput={handleInputChange}></input>
<div
onClick={jumpToPage}
className="cursor-pointer hover:bg-indigo-600 dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white"
>
className='cursor-pointer hover:bg-indigo-600 dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
<ChevronDoubleRight className={'w-4 h-4'} />
</div>
</div>
Expand All @@ -91,12 +88,11 @@ const PaginationNumber = ({ page, totalPage }) => {
pathname: `${pagePrefix}/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
rel="next"
className={`${+showNext ? 'block' : 'invisible'} `}
>
<div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
<i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
<div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
rel='next'
className={`${+showNext ? 'block' : 'invisible'} `}>
<div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
<i className='fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
<div className='absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2'>
{locale.PAGINATION.NEXT}
</div>
</div>
Expand All @@ -105,7 +101,7 @@ const PaginationNumber = ({ page, totalPage }) => {

{/* 移动端分页 */}

<div className="lg:hidden w-full flex flex-row">
<div className='lg:hidden w-full flex flex-row'>
{/* 上一页 */}
<Link
href={{
Expand All @@ -115,23 +111,21 @@ const PaginationNumber = ({ page, totalPage }) => {
: `${pagePrefix}/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
rel="prev"
className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
>
rel='prev'
className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
{locale.PAGINATION.PREV}
</Link>

{showPrev && showNext && <div className="w-12"></div>}
{showPrev && showNext && <div className='w-12'></div>}

{/* 下一页 */}
<Link
href={{
pathname: `${pagePrefix}/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
rel="next"
className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
>
rel='next'
className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
{locale.PAGINATION.NEXT}
</Link>
</div>
Expand Down Expand Up @@ -161,8 +155,7 @@ function getPageElement(page, currentPage, pagePrefix) {
? 'bg-indigo-600 dark:bg-yellow-600 text-white '
: 'dark:bg-[#1e1e1e] bg-white') +
' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
}
>
}>
{page}
</Link>
)
Expand Down Expand Up @@ -195,7 +188,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
}
if (startPage > 2) {
pages.push(
<div key={-1} className="-mt-2 mx-1">
<div key={-1} className='-mt-2 mx-1'>
...{' '}
</div>
)
Expand Down
Loading

0 comments on commit c9413c3

Please sign in to comment.