From 19bddf1fe9e4b3ea848f0bbc52255f872e701dcb Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Tue, 28 May 2024 11:53:30 +0800 Subject: [PATCH] =?UTF-8?q?heo=E4=B8=BB=E9=A2=98=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=AF=B9=E7=A7=B0=E6=80=A7=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/heo/components/PaginationNumber.js | 55 +++++----- themes/heo/components/SideRight.js | 80 +++++++-------- themes/heo/index.js | 2 +- themes/next/components/PaginationNumber.js | 113 +++++++++++---------- themes/theme.js | 25 +++-- 5 files changed, 144 insertions(+), 131 deletions(-) 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..1fcf9639 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