heo 主题置顶推荐文章

Han-Orz · Jul 30, 2023 · ec26ab8 · ec26ab8
1 parent d1dfd32
commit ec26ab8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js
@@ -184,7 +184,7 @@ export function getNavPages({ allPages }) {
     return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published'
   })
 
-  return allNavPages.map(item => ({ id: item.id, title: item.title || '', pageCover: item.pageCover || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug }))
+  return allNavPages.map(item => ({ id: item.id, title: item.title || '', pageCoverThumbnail: item.pageCoverThumbnail || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug }))
 }
 
 /**

diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
@@ -154,16 +154,34 @@ function GroupMenu() {
  * 置顶文章区域
  */
 function TopGroup(props) {
-  const { latestPosts, siteInfo } = props
+  const { latestPosts, allNavPages, siteInfo } = props
   const todayCardRef = useRef()
   function handleMouseLeave() {
     todayCardRef.current.coverUp()
   }
+
+  let topPosts = []
+  // 默认展示最近更新
+  if (!CONFIG.HERO_RECOMMEND_POST_TAG || CONFIG.HERO_RECOMMEND_POST_TAG === '') {
+    topPosts = latestPosts
+  } else {
+    // 展示特定标签文章
+    for (const post of allNavPages) {
+      if (topPosts.length === 6) {
+        break
+      }
+      // 查找标签
+      if (post.tags.indexOf(CONFIG.HERO_RECOMMEND_POST_TAG) >= 0) {
+        topPosts.push(post)
+      }
+    }
+  }
+  console.log('top', topPosts)
   return (
         <div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
-            {/* 置顶最新文章 */}
+            {/* 置顶推荐文章 */}
             <div id='top-group' className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3 xl:h-[342px]'>
-                {latestPosts?.map((p, index) => {
+                {topPosts?.map((p, index) => {
                   return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={index}>
                         <div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl'>
                             <LazyImage priority={index === 0} className='h-24 object-cover' alt={p?.title} src={p?.pageCoverThumbnail || siteInfo?.pageCover} />

diff --git a/themes/heo/config.js b/themes/heo/config.js
@@ -22,6 +22,9 @@ const CONFIG = {
   HERO_CATEGORY_2: { title: '热门文章', url: '/tag/热门文章' },
   HERO_CATEGORY_3: { title: '实用教程', url: '/tag/实用教程' },
 
+  // 英雄区右侧推荐文章标签, 例如 [推荐] , 最多六篇文章; 若留空白''，则推荐最近更新文章
+  HERO_RECOMMEND_POST_TAG: '推荐', // 例如 推荐
+
   // 右侧个人资料卡牌欢迎语，点击可自动切换
   INFOCARD_GREETINGS: [
     '你好！我是',

diff --git a/themes/heo/index.js b/themes/heo/index.js
@@ -81,7 +81,6 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = (props) => {
-  console.log('首页', props)
   const headerSlot = <header>
         {/* 顶部导航 */}
         <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>