diff --git a/components/FlipCard.js b/components/FlipCard.js index 86565138..9bf4fc82 100644 --- a/components/FlipCard.js +++ b/components/FlipCard.js @@ -13,10 +13,14 @@ export default function FlipCard(props) { } return ( -
-
{props.frontContent}
-
{props.backContent}
- -
+ ) } diff --git a/components/HeroIcons.js b/components/HeroIcons.js index 9eb24422..c9cbcce2 100644 --- a/components/HeroIcons.js +++ b/components/HeroIcons.js @@ -45,6 +45,12 @@ export const ChevronRight = ({ className }) => { } +export const ChevronDoubleRight = ({ className }) => { + return + + +} + export const InformationCircle = ({ className }) => { return diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js index 559afb91..f9ecc319 100644 --- a/lib/lang/zh-CN.js +++ b/lib/lang/zh-CN.js @@ -47,8 +47,8 @@ export default { WORD_COUNT: '字数' }, PAGINATION: { - PREV: '上一页', - NEXT: '下一页' + PREV: '上页', + NEXT: '下页' }, SEARCH: { ARTICLES: '搜索文章', diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js index da681845..43be9051 100644 --- a/themes/heo/components/BlogPostCard.js +++ b/themes/heo/components/BlogPostCard.js @@ -1,34 +1,79 @@ import Link from 'next/link' -import React from 'react' +import React, { useState } from 'react' import CONFIG from '../config' -import { BlogPostCardInfo } from './BlogPostCardInfo' import BLOG from '@/blog.config' +import TagItemMini from './TagItemMini' // import Image from 'next/image' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap + const [onHover, setOnHover] = useState(false) if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) { post.pageCoverThumbnail = siteInfo?.pageCover } const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview - console.log(post, post.pageCoverThumbnail) return ( -
-
+
+
setOnHover(true)} onMouseLeave={() => setOnHover(false)} className={'w-full hover:border-indigo-600 duration-300 transition-colors border justify-between flex flex-col lg:h-96 overflow-hidden rounded-xl bg-white '}> {/* 图片封面 */} {showPageCover && ( -
+
-
+
)} {/* 文字区块 */} - + {/* */} +
+
+ {/* 分类 */} + {post?.category &&
+ + {post.category} + +
} + {/* 标题 */} + + + {post.title} + + + + {/* 摘要 */} + {(!showPreview || showSummary) && !post.results && ( +

+ {post.summary} +

+ )} + + {/* 搜索结果 */} + {post.results && ( +

+ {post.results.map(r => ( + {r} + ))} +

+ )} + +
+
+ {' '} + {post.tagItems?.map(tag => ( + + ))} +
+
+
+ +
diff --git a/themes/heo/components/BlogPostCardInfo.js b/themes/heo/components/BlogPostCardInfo.js deleted file mode 100644 index 4d233072..00000000 --- a/themes/heo/components/BlogPostCardInfo.js +++ /dev/null @@ -1,60 +0,0 @@ -import Link from 'next/link' -import TagItemMini from './TagItemMini' -import BLOG from '@/blog.config' - -/** - * 博客列表的文字内容 - * @param {*} param0 - * @returns - */ -export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => { - return
- -
- - {/* 分类 */} - {post?.category &&
- - {post.category} - -
} - - {/* 标题 */} - - - {post.title} - - - - {/* 摘要 */} - {(!showPreview || showSummary) && !post.results && ( -

- {post.summary} -

- )} - - {/* 搜索结果 */} - {post.results && ( -

- {post.results.map(r => ( - {r} - ))} -

- )} - -
-
- {' '} - {post.tagItems?.map(tag => ( - - ))} -
-
-
- -
-} diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js index 031ea6c3..cb8d9399 100644 --- a/themes/heo/components/CategoryBar.js +++ b/themes/heo/components/CategoryBar.js @@ -11,8 +11,8 @@ export default function CategoryBar(props) { const { categoryOptions } = props const { locale } = useGlobal() - return
+ return
@@ -26,7 +26,7 @@ export default function CategoryBar(props) {
- + {locale.COMMON.MORE}
@@ -41,7 +41,7 @@ export default function CategoryBar(props) { const MenuItem = ({ href, name }) => { const router = useRouter() const selected = router.pathname === href - return
+ return
{name}
} diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js index 17ad8ece..34bca55d 100644 --- a/themes/heo/components/InfoCard.js +++ b/themes/heo/components/InfoCard.js @@ -36,13 +36,21 @@ export function InfoCard(props) {
- -
- -
了解更多
-
- +
) } + +/** + * 了解更多按鈕 + * @returns + */ +function MoreButton() { + return +
+ +
了解更多
+
+ +} diff --git a/themes/heo/components/PaginationNumber.js b/themes/heo/components/PaginationNumber.js index 42281b93..7be7901a 100644 --- a/themes/heo/components/PaginationNumber.js +++ b/themes/heo/components/PaginationNumber.js @@ -1,5 +1,8 @@ +import { ChevronDoubleRight } from '@/components/HeroIcons' +import { useGlobal } from '@/lib/global' import Link from 'next/link' import { useRouter } from 'next/router' +import { useState } from 'react' /** * 数字翻页插件 @@ -10,65 +13,113 @@ import { useRouter } from 'next/router' */ const PaginationNumber = ({ page, totalPage }) => { const router = useRouter() + const { locale } = useGlobal() const currentPage = +page const showNext = page < totalPage const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '') const pages = generatePages(pagePrefix, page, currentPage, totalPage) + const [value, setValue] = useState('') + + const handleInputChange = (event) => { + const newValue = event.target.value.replace(/[^0-9]/g, '') + setValue(newValue) + } + + /** + * 调到指定页 + */ + const jumpToPage = () => { + router.push(value === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${value}`) + } + return ( -
- {/* 上一页 */} - +
+ {/* 上一页 */} + +
+ +
+ {locale.PAGINATION.PREV} +
+
- + - + {/* 分页 */} +
+ {pages} - {pages} + {/* 跳转页码 */} +
+ +
+ +
+
+
- {/* 下一页 */} - + {/* 下一页 */} + - - - -
+
+ +
+ {locale.PAGINATION.NEXT} +
+
+ +
) } +/** + * 页码按钮 + * @param {*} page + * @param {*} currentPage + * @param {*} pagePrefix + * @returns + */ function getPageElement(page, currentPage, pagePrefix) { + const selected = page + '' === currentPage + '' return ( ( + href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`} + key={page} + passHref + className={ + (selected + ? 'bg-indigo-600 dark:bg-indigo-500 text-white ' + : 'bg-white') + + ' hover:border-indigo-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors' + }> - {page} + {page} - ) + ) ) } +/** + * 获取所有页码 + * @param {*} pagePrefix + * @param {*} page + * @param {*} currentPage + * @param {*} totalPage + * @returns + */ function generatePages(pagePrefix, page, currentPage, totalPage) { const pages = [] const groupCount = 7 // 最多显示页签数 @@ -87,7 +138,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) { startPage = totalPage - dynamicGroupCount } if (startPage > 2) { - pages.push(
...
) + pages.push(
...
) } for (let i = 0; i < dynamicGroupCount; i++) { diff --git a/themes/heo/components/TagItemMini.js b/themes/heo/components/TagItemMini.js index d7b12d7b..ca598add 100644 --- a/themes/heo/components/TagItemMini.js +++ b/themes/heo/components/TagItemMini.js @@ -7,8 +7,8 @@ const TagItemMini = ({ tag, selected = false }) => { key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref - className={'cursor-pointer inline-block hover:text-blue-600 duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }> -
{tag.name + (tag.count ? `(${tag.count})` : '')}
+ className={'cursor-pointer inline-block hover:text-indigo-600 duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }> +
{tag.name + (tag.count ? `(${tag.count})` : '')}
) diff --git a/themes/heo/index.js b/themes/heo/index.js index fbc795ad..3e2c1322 100644 --- a/themes/heo/index.js +++ b/themes/heo/index.js @@ -113,8 +113,7 @@ const LayoutBase = props => { * @returns */ const LayoutIndex = (props) => { - const headerSlot = CONFIG.HOME_BANNER_ENABLE && - return + return } /** @@ -123,7 +122,7 @@ const LayoutIndex = (props) => { * @returns */ const LayoutPostList = (props) => { - return + return }> {BLOG.POST_LIST_STYLE === 'page' ? : }