diff --git a/blog.config.js b/blog.config.js index 7c5faf6c..12663fcf 100644 --- a/blog.config.js +++ b/blog.config.js @@ -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的颜色 diff --git a/components/CustomContextMenu.js b/components/CustomContextMenu.js index 229d830f..74fafbe8 100644 --- a/components/CustomContextMenu.js +++ b/components/CustomContextMenu.js @@ -56,6 +56,9 @@ export default function CustomContextMenu(props) { setShow(true) } + /** + * 鼠标点击事件 + */ const handleClick = event => { if (menuRef.current && !menuRef.current.contains(event.target)) { setShow(false) @@ -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 (
- {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST') && ( + {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST && (
)} - {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY') && ( + {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY && ( )} - {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG') && ( + {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG && ( - {siteConfig('CAN_COPY') && ( + {CAN_COPY && (
)} - {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK') && ( + {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK && (
)} - {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE') && ( + {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE && (
)} - {siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH') && ( + {CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH && (
} */ @@ -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 [] } diff --git a/lib/notion/getAllTags.js b/lib/notion/getAllTags.js index 4c7559b9..cac8dac7 100644 --- a/lib/notion/getAllTags.js +++ b/lib/notion/getAllTags.js @@ -1,5 +1,5 @@ +import { siteConfig } from '../config' import { isIterable } from '../utils' -import BLOG from '@/blog.config' /** * 获取所有文章的标签 @@ -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 [] @@ -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 @@ -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 { diff --git a/themes/heo/components/PaginationNumber.js b/themes/heo/components/PaginationNumber.js index 54c1bf34..5110064e 100644 --- a/themes/heo/components/PaginationNumber.js +++ b/themes/heo/components/PaginationNumber.js @@ -44,7 +44,7 @@ const PaginationNumber = ({ page, totalPage }) => { return ( <> {/* pc端分页按钮 */} -
+
{/* 上一页 */} { : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }} - rel="prev" - className={`${currentPage === 1 ? 'invisible' : 'block'}`} - > -
- -
+ rel='prev' + className={`${currentPage === 1 ? 'invisible' : 'block'}`}> +
+ +
{locale.PAGINATION.PREV}
{/* 分页 */} -
+
{pages} {/* 跳转页码 */} -
+
+ 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}>
+ 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'>
@@ -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'} `} - > -
- -
+ rel='next' + className={`${+showNext ? 'block' : 'invisible'} `}> +
+ +
{locale.PAGINATION.NEXT}
@@ -105,7 +101,7 @@ 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} - {showPrev && showNext &&
} + {showPrev && showNext &&
} {/* 下一页 */} { 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}
@@ -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} ) @@ -195,7 +188,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) { } if (startPage > 2) { pages.push( -
+
...{' '}
) diff --git a/themes/heo/components/SideRight.js b/themes/heo/components/SideRight.js index 775b9b76..996c50de 100644 --- a/themes/heo/components/SideRight.js +++ b/themes/heo/components/SideRight.js @@ -1,12 +1,12 @@ +import Live2D from '@/components/Live2D' +import dynamic from 'next/dynamic' +import { AnalyticsCard } from './AnalyticsCard' import Card from './Card' -import TagGroups from './TagGroups' import Catalog from './Catalog' import { InfoCard } from './InfoCard' -import dynamic from 'next/dynamic' -import Live2D from '@/components/Live2D' -import { AnalyticsCard } from './AnalyticsCard' -import TouchMeCard from './TouchMeCard' import LatestPostsGroupMini from './LatestPostsGroupMini' +import TagGroups from './TagGroups' +import TouchMeCard from './TouchMeCard' const FaceBookPage = dynamic( () => { @@ -27,46 +27,46 @@ const FaceBookPage = dynamic( * @returns */ export default function SideRight(props) { - const { - post, tagOptions, - currentTag, rightAreaSlot - } = props + const { post, tagOptions, currentTag, rightAreaSlot } = props + + // 只摘取标签的前60个，防止右侧过长 + const sortedTags = tagOptions?.slice(0, 60) || [] return ( -
+
+ - +
+ {/* 文章页显示目录 */} + {post && post.toc && post.toc.length > 0 && ( + + + + )} -
- - {/* 文章页显示目录 */} - {post && post.toc && post.toc.length > 0 && ( - - - - )} - - {/* 联系交流群 */} - - - {/* 最新文章列表 */} - - - {rightAreaSlot} - - - - - {/* 标签和成绩 */} - - -
- - -
+ {/* 联系交流群 */} + + {/* 最新文章列表 */} + + + {rightAreaSlot} + + + + + {/* 标签和成绩 */} + + +
+ + +
+
) } diff --git a/themes/heo/index.js b/themes/heo/index.js index f7725939..bd2fb42b 100644 --- a/themes/heo/index.js +++ b/themes/heo/index.js @@ -56,7 +56,7 @@ const LayoutBase = props => { const router = useRouter() const headerSlot = ( -
+
{/* 顶部导航 */}
diff --git a/themes/next/components/PaginationNumber.js b/themes/next/components/PaginationNumber.js index 808dd217..af72c797 100644 --- a/themes/next/components/PaginationNumber.js +++ b/themes/next/components/PaginationNumber.js @@ -12,74 +12,75 @@ const PaginationNumber = ({ page, totalPage }) => { const router = useRouter() const currentPage = +page const showNext = currentPage !== totalPage - const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '') + const pagePrefix = router.asPath + .split('?')[0] + .replace(/\/page\/[1-9]\d*/, '') + .replace(/\/$/, '') const pages = generatePages(pagePrefix, page, currentPage, totalPage) return (
- {/* 上一页 */} - - - + data-aos='fade-down' + data-aos-duration='300' + data-aos-once='false' + data-aos-anchor-placement='top-bottom' + className='mt-5 py-3 flex justify-center items-end font-medium text-black hover:shadow-xl duration-200 transition-all bg-white dark:bg-hexo-black-gray dark:text-gray-300 shadow space-x-2'> + {/* 上一页 */} + + + - {pages} + {pages} - {/* 下一页 */} - - - + {/* 下一页 */} + + +
) } function getPageElement(pagePrefix, page, currentPage) { return ( - ( - {page} - - ) + ) } function generatePages(pagePrefix, page, currentPage, totalPage) { @@ -100,7 +101,11 @@ function generatePages(pagePrefix, page, currentPage, totalPage) { startPage = totalPage - dynamicGroupCount } if (startPage > 2) { - pages.push(
...
) + pages.push( +
+ ...{' '} +
+ ) } for (let i = 0; i < dynamicGroupCount; i++) { @@ -110,7 +115,11 @@ function generatePages(pagePrefix, page, currentPage, totalPage) { } if (startPage + dynamicGroupCount < totalPage) { - pages.push(
...
) + pages.push( +
+ ...{' '} +
+ ) } pages.push(getPageElement(pagePrefix, totalPage, page)) diff --git a/themes/theme.js b/themes/theme.js index 3b89d92a..1c04e335 100644 --- a/themes/theme.js +++ b/themes/theme.js @@ -14,7 +14,11 @@ export const { THEMES = [] } = getConfig().publicRuntimeConfig */ export const getGlobalLayoutByTheme = themeQuery => { if (themeQuery !== BLOG.THEME) { - return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]), { ssr: true }) + return dynamic( + () => + import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]), + { ssr: true } + ) } else { return ThemeComponents[getLayoutNameByPath('-1')] } @@ -36,7 +40,8 @@ export const getLayoutByTheme = ({ router, theme }) => { checkThemeDOM() }, 500) - const components = m[getLayoutNameByPath(router.pathname, router.asPath)] + const components = + m[getLayoutNameByPath(router.pathname, router.asPath)] if (components) { return components } else { @@ -49,7 +54,8 @@ export const getLayoutByTheme = ({ router, theme }) => { setTimeout(() => { checkThemeDOM() }, 100) - const components = ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)] + const components = + ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)] if (components) { return components } else { @@ -102,7 +108,7 @@ export const initDarkMode = (updateDarkMode, defaultDarkMode) => { const userDarkMode = loadDarkModeFromLocalStorage() if (userDarkMode) { newDarkMode = userDarkMode === 'dark' || userDarkMode === 'true' - saveDarkModeToLocalStorage(newDarkMode) //用户手动的才保存 + saveDarkModeToLocalStorage(newDarkMode) // 用户手动的才保存 } // 如果站点强制设置默认深色，则优先级改过用 @@ -117,7 +123,9 @@ export const initDarkMode = (updateDarkMode, defaultDarkMode) => { } updateDarkMode(newDarkMode) - document.getElementsByTagName('html')[0].setAttribute('class', newDarkMode ? 'dark' : 'light') + document + .getElementsByTagName('html')[0] + .setAttribute('class', newDarkMode ? 'dark' : 'light') } /** @@ -131,11 +139,14 @@ export function isPreferDark() { if (BLOG.APPEARANCE === 'auto') { // 系统深色模式或时间是夜间时，强行置为夜间模式 const date = new Date() - const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + const prefersDarkMode = window.matchMedia( + '(prefers-color-scheme: dark)' + ).matches return ( prefersDarkMode || (BLOG.APPEARANCE_DARK_TIME && - (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1])) + (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || + date.getHours() < BLOG.APPEARANCE_DARK_TIME[1])) ) } return false