最新文章组件，按修改时间倒序

2026-06-02 15:10:16 +00:00 · 2022-04-07 17:00:10 +08:00
parent 7c63f7a5d6
commit cab1c2da68
7 changed files with 44 additions and 49 deletions
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -22,7 +22,7 @@ const LayoutBase = (props) => {
  const { children, headerSlot, floatSlot, meta, siteInfo } = props
  const [show, switchShow] = useState(false)
  // const [percent, changePercent] = useState(0) // 页面阅读百分比
-  const rightAreaSlot = <Live2D/>
+  const rightAreaSlot = <Live2D />
  const { onLoading } = useGlobal()

  const scrollListener = () => {
@@ -48,7 +48,7 @@ const LayoutBase = (props) => {
  return (<div className='bg-hexo-background-gray dark:bg-black'>
    <CommonHead meta={meta} />

-    <TopNav {...props}/>
+    <TopNav {...props} />

    {headerSlot}

@@ -56,24 +56,24 @@ const LayoutBase = (props) => {

      <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-center lg:space-x-4'>
        <div className='flex-grow w-full lg:max-w-4xl'>
-          {onLoading ? <LoadingCover/> : children}
+          {onLoading ? <LoadingCover /> : children}
        </div>

-        <SideRight {...props} slot={rightAreaSlot}/>
+        <SideRight {...props} slot={rightAreaSlot} />
      </div>

    </main>

-     {/* 右下角悬浮 */}
-     <div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'>
-        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-300  animate__faster flex flex-col items-center cursor-pointer '}>
-          <FloatDarkModeButton/>
-          {floatSlot}
-          <JumpToTopButton/>
-        </div>
+    {/* 右下角悬浮 */}
+    <div className='bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'>
+      <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp justify-center duration-300  animate__faster flex flex-col items-center cursor-pointer '}>
+        <FloatDarkModeButton />
+        {floatSlot}
+        <JumpToTopButton />
      </div>
+    </div>

-    <Footer title={siteInfo?.title || BLOG.TITLE}/>
+    <Footer title={siteInfo?.title || BLOG.TITLE} />

  </div>)
 }
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -9,14 +9,13 @@ import { useRouter } from 'next/router'
 * @param sliceCount 截取展示的数量 默认6
 * @constructor
 */
-const LatestPostsGroup = ({ posts, siteInfo }) => {
-  if (!posts) {
+const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
+  if (!latestPosts) {
    return <></>
  }
  // 获取当前路径
  const currentPath = useRouter().asPath
  const { locale } = useGlobal()
-
  return (
    <>
      <div className="font-sans mb-2 px-1 flex flex-nowrap justify-between">
@@ -25,7 +24,7 @@ const LatestPostsGroup = ({ posts, siteInfo }) => {
          {locale.COMMON.LATEST_POSTS}
        </div>
      </div>
-      {posts.map(post => {
+      {latestPosts.map(post => {
        const selected = currentPath === `${BLOG.SUB_PATH}/article/${post.slug}`
        const headerImage = post?.page_cover
          ? `url("${post.page_cover}")`
@@ -52,7 +51,7 @@ const LatestPostsGroup = ({ posts, siteInfo }) => {
              >
                <div>
                  <div style={{ WebkitLineClamp: 2 }}>{post.title}</div>
-                  <div className="text-gray-500">{post.date?.start_date}</div>
+                  <div className="text-gray-500">{post.lastEditedTime}</div>
                </div>
              </div>
            </a>
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -6,7 +6,7 @@ import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import { AnalyticsCard } from './AnalyticsCard'
 import CONFIG_HEXO from '../config_hexo'
-export default function SideRight (props) {
+export default function SideRight(props) {
  const {
    post, currentCategory, categories, latestPosts, tags,
    currentTag, showCategory, showTag, slot
@@ -14,13 +14,13 @@ export default function SideRight (props) {

  return (
    <div className={'lg:w-80 px-2 space-y-4 pt-4 lg:pt-0'}>
-      <InfoCard {...props}/>
-      { CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props}/>}
+      <InfoCard {...props} />
+      {CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}

      {showCategory && (
        <Card>
          <div className='ml-2 mb-1 font-sans'>
-            <i className='fas fa-th'/> 分类
+            <i className='fas fa-th' /> 分类
          </div>
          <CategoryGroup
            currentCategory={currentCategory}
@@ -34,11 +34,11 @@ export default function SideRight (props) {
        </Card>
      )}
      {CONFIG_HEXO.WIDGET_LATEST_POSTS && latestPosts && latestPosts.length > 0 && <Card>
-        <LatestPostsGroup posts={latestPosts} {...props} />
+        <LatestPostsGroup {...props} />
      </Card>}

      <div className='sticky top-20'>
-       {post && post.toc && <Card>
+        {post && post.toc && <Card>
          <Catalog toc={post.toc} />
        </Card>}
        {slot}
--- a/themes/next/LayoutIndex.js
+++ b/themes/next/LayoutIndex.js
@@ -8,7 +8,7 @@ import CONFIG_NEXT from './config_next'

 export const LayoutIndex = (props) => {
  const { latestPosts } = props
-  const rightAreaSlot = CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
+  const rightAreaSlot = CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup latestPosts={latestPosts} /></Card>
  return <LayoutBase
    headerSlot={CONFIG_NEXT.HOME_BANNER && <Header />}
    sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
@@ -18,6 +18,6 @@ export const LayoutIndex = (props) => {
    {CONFIG_NEXT.POST_LIST_TYPE !== 'page'
      ? <BlogPostListScroll {...props} showSummary={true} />
      : <BlogPostListPage {...props} />
-      }
+    }
  </LayoutBase>
 }
--- a/themes/next/components/LatestPostsGroup.js
+++ b/themes/next/components/LatestPostsGroup.js
@@ -9,8 +9,8 @@ import { useRouter } from 'next/router'
 * @param sliceCount 截取展示的数量 默认6
 * @constructor
 */
-const LatestPostsGroup = ({ posts }) => {
-  if (!posts) {
+const LatestPostsGroup = ({ latestPosts }) => {
+  if (!latestPosts) {
    return <></>
  }
  // 获取当前路径
@@ -21,11 +21,11 @@ const LatestPostsGroup = ({ posts }) => {
    <>
      <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between">
        <div className="font-light text-gray-600  dark:text-gray-200">
-          <i className="mr-2 fas fa-archive" />
+          <i className="mr-2 fas fa-history" />
          {locale.COMMON.LATEST_POSTS}
        </div>
      </div>
-      {posts.map(post => {
+      {latestPosts.map(post => {
        const selected = currentPath === `${BLOG.SUB_PATH}/article/${post.slug}`
        return (
          <Link
--- a/themes/next/config_next.js
+++ b/themes/next/config_next.js
@@ -12,7 +12,7 @@ const CONFIG_NEXT = {

  // 右侧组件
  RIGHT_BAR: true, // 是否显示右侧栏
-  RIGHT_LATEST_POSTS: false, // 右侧栏最新文章
+  RIGHT_LATEST_POSTS: true, // 右侧栏最新文章
  RIGHT_CATEGORY_LIST: true, // 右侧边栏文章分类列表
  RIGHT_TAG_LIST: true, // 右侧边栏标签分类列表
  RIGHT_AD: false, // 右侧广告