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

2026-05-14 07:26:52 +00:00 · 2022-04-07 17:00:10 +08:00
parent 7c63f7a5d6
commit cab1c2da68
7 changed files with 44 additions and 49 deletions
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -30,7 +30,7 @@ import { getAllTags } from './getAllTags'
  }
 *
 */
-export async function getGlobalNotionData ({
+export async function getGlobalNotionData({
  pageId = BLOG.NOTION_PAGE_ID,
  from,
  latestPostCount = 5,
@@ -52,25 +52,21 @@ export async function getGlobalNotionData ({
 }

 /**
- * 获取最新文章
+ * 获取最新文章 根据最后修改时间倒序排列
 * @param {*}} param0
 * @returns
 */
-async function getLatestPosts ({ notionPageData, from, latestPostCount }) {
+async function getLatestPosts({ notionPageData, from, latestPostCount }) {
  const allPosts = await getAllPosts({ notionPageData, from, pageType: ['Post'] })
-  let latestPosts = Object.create(allPosts)
-  // 时间排序
-  latestPosts.sort((a, b) => {
-    // const dateA = new Date(a?.lastEditedTime || a.createdTime)
-    // const dateB = new Date(b?.lastEditedTime || b.createdTime)
-    const dateA = new Date(a.date?.start_date)
-    const dateB = new Date(b.date?.start_date)
+  const latestPosts = Object.create(allPosts).sort((a, b) => {
+    const dateA = new Date(a?.lastEditedTime || a?.createdTime || a?.date?.start_date)
+    const dateB = new Date(b?.lastEditedTime || b?.createdTime || b?.date?.start_date)
+    // const dateA = new Date(a.date?.start_date)
+    // const dateB = new Date(b.date?.start_date)
    return dateB - dateA
  })

-  // 只取前五
-  latestPosts = latestPosts.slice(0, latestPostCount)
-  return latestPosts
+  return latestPosts.slice(0, latestPostCount)
 }

 /**
@@ -79,7 +75,7 @@ async function getLatestPosts ({ notionPageData, from, latestPostCount }) {
 * @param from 请求来源
 * @returns {Promise<JSX.Element|*|*[]>}
 */
-export async function getNotionPageData ({ pageId, from }) {
+export async function getNotionPageData({ pageId, from }) {
  // 尝试从缓存获取
  const cacheKey = 'page_block_' + pageId
  const data = await getDataFromCache(cacheKey)
@@ -100,7 +96,7 @@ export async function getNotionPageData ({ pageId, from }) {
 * @param notionPageData
 * @returns {Promise<[]|*[]>}
 */
-async function getCustomNav ({ notionPageData }) {
+async function getCustomNav({ notionPageData }) {
  if (!notionPageData) {
    notionPageData = await getNotionPageData({ from: 'custom-nav' })
  }
@@ -126,7 +122,7 @@ async function getCustomNav ({ notionPageData }) {
 * @param schema
 * @returns {undefined}
 */
-function getTagOptions (schema) {
+function getTagOptions(schema) {
  if (!schema) return {}
  const tagSchema = Object.values(schema).find(e => e.name === 'tags')
  return tagSchema?.options || []
@@ -137,7 +133,7 @@ function getTagOptions (schema) {
 * @param schema
 * @returns {{}|*|*[]}
 */
-function getCategoryOptions (schema) {
+function getCategoryOptions(schema) {
  if (!schema) return {}
  const categorySchema = Object.values(schema).find(e => e.name === 'category')
  return categorySchema?.options || []
@@ -149,7 +145,7 @@ function getCategoryOptions (schema) {
 * @param from
 * @returns {Promise<{title,description,pageCover}>}
 */
-async function getBlogInfo ({ notionPageData, from }) {
+async function getBlogInfo({ notionPageData, from }) {
  if (!notionPageData) {
    notionPageData = await getNotionPageData({ from })
  }
@@ -182,7 +178,7 @@ const mapCoverUrl = (pageCover, block) => {
 * 调用NotionAPI获取Page数据
 * @returns {Promise<JSX.Element|null|*>}
 */
-async function getPageRecordMapByNotionAPI ({ pageId, from }) {
+async function getPageRecordMapByNotionAPI({ pageId, from }) {
  const pageRecordMap = await getPostBlocks(pageId, from)
  if (!pageRecordMap) {
    return []
--- 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, // 右侧广告