分类、标签

themes/Medium/LayoutBase.js

@@ -9,7 +9,6 @@ import TopNavBar from './components/TopNavBar'
 import SearchInput from './components/SearchInput'
 import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
-import JumpToTopButton from './components/JumpToTopButton'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -18,7 +17,7 @@ import JumpToTopButton from './components/JumpToTopButton'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta, showInfoCard = true, slotRight } = props
+  const { children, meta, showInfoCard = true, slotRight, slotTop } = props
   const { locale } = useGlobal()
 
   return (
@@ -32,6 +31,7 @@ const LayoutBase = props => {
           {/* 移动端顶部菜单 */}
           <TopNavBar />
           <div className='px-5 max-w-5xl justify-center mx-auto'>
+            {slotTop}
             {children}
           </div>
         </div>

themes/Medium/LayoutCategory.js

@@ -1,8 +1,13 @@
 import LayoutBase from './LayoutBase'
 import BlogPostListScroll from './components/BlogPostListScroll'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTh } from '@fortawesome/free-solid-svg-icons'
 
 export const LayoutCategory = (props) => {
-  return <LayoutBase {...props}>
+  const { category } = props
+  const slotTop = <div className='flex items-center font-sans p-8'><div className='text-xl'><FontAwesomeIcon icon={faTh} className='mr-2'/>分类：</div>{category}</div>
+
+  return <LayoutBase {...props} slotTop={slotTop}>
     <BlogPostListScroll {...props} />
   </LayoutBase>
 }

themes/Medium/LayoutSlug.js

@@ -25,6 +25,9 @@ import ArticleAround from './components/ArticleAround'
 import Catalog from './components/Catalog'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEye } from '@fortawesome/free-solid-svg-icons'
+import CategoryItem from './components/CategoryItem'
+import TagItemMini from './components/TagItemMini'
+import CONFIG_MEDIUM from './config_medium'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -135,6 +138,12 @@ export const LayoutSlug = props => {
         />
       </section>
       <section>
+        <div className='flex justify-between'>
+        { CONFIG_MEDIUM.POST_DETAIL_CATEGORY && <CategoryItem category={post.category}/>}
+        <div>
+        { CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+        </div>
+        </div>
         <ArticleAround prev={prev} next={next} />
         <Comment frontMatter={post} />
       </section>

themes/Medium/LayoutTag.js

@@ -1,8 +1,13 @@
 import LayoutBase from './LayoutBase'
 import BlogPostListScroll from './components/BlogPostListScroll'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTag } from '@fortawesome/free-solid-svg-icons'
 
 export const LayoutTag = (props) => {
-  return <LayoutBase>
+  const { tag } = props
+  const slotTop = <div className='flex items-center font-sans p-8'><div className='text-xl'><FontAwesomeIcon icon={faTag} className='mr-2'/>标签：</div>{tag}</div>
+
+  return <LayoutBase {...props} slotTop={slotTop}>
     <BlogPostListScroll {...props} />
    </LayoutBase>
 }

themes/Medium/components/BlogPostCard.js

@@ -6,6 +6,8 @@ import Link from 'next/link'
 import React from 'react'
 import { Code, Collection, Equation, NotionRenderer } from 'react-notion-x'
 import CONFIG_MEDIUM from '../config_medium'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
@@ -20,8 +22,14 @@ const BlogPostCard = ({ post, showSummary }) => {
             </a>
           </Link>
 
-          <div className={'flex mt-2 items-center justify-start flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '}>
-            {post.date.start_date}
+          <div className={'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'}>
+            <div className='text-sm py-1'>{post.date.start_date}</div>
+            { CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category}/>}
+            { CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+          </div>
+
+          <div className='flex'>
+
           </div>
 
           {(!showPreview || showSummary) && <p className='my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>

themes/Medium/components/CategoryGroup.js

@@ -1,7 +1,7 @@
-import { faFolder, faFolderOpen, faTag, faTh } from '@fortawesome/free-solid-svg-icons'
+import { faTh } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
 import React from 'react'
+import CategoryItem from './CategoryItem'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   if (!categories) {
@@ -12,16 +12,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
     <div className='flex flex-wrap'>
       {Object.keys(categories).map(category => {
         const selected = currentCategory === category
-        return <Link key={category} href={`/category/${category}`} passHref>
-          <a className={(selected
-            ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
-            : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-600') +
-          '  text-sm items-center duration-300 cursor-pointer py-1 font-light px-2 whitespace-nowrap'}>
-            <div><FontAwesomeIcon icon={selected ? faFolderOpen : faFolder}
-                                  className={'mr-2'} />{category}({categories[category]})
-            </div>
-          </a>
-        </Link>
+        return <CategoryItem key={category} selected={selected} category={category} categoryCount={categories[category]}/>
       })}
     </div>
   </div>

themes/Medium/components/CategoryItem.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFolderOpen, faFolder } from '@fortawesome/free-solid-svg-icons'
+
+export default function CategoryItem ({ key, selected, category, categoryCount }) {
+  return <Link key={key || category} href={`/category/${category}`} passHref>
+    <a className={(selected
+      ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
+      : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-600') +
+    ' flex text-sm items-center duration-300 cursor-pointer py-1 font-light px-2 whitespace-nowrap'}>
+      <div><FontAwesomeIcon icon={selected ? faFolderOpen : faFolder}
+                            className={'mr-2'} />{category} {categoryCount && ({ categoryCount })}
+      </div>
+    </a>
+  </Link>
+}

themes/Medium/config_medium.js

@@ -1,7 +1,12 @@
 const CONFIG_MEDIUM = {
 
   POST_LIST_COVER: true, // 文章列表显示图片封面
-  POST_LIST_PREVIEW: true, // 显示文章预览
+  POST_LIST_PREVIEW: true, // 列表显示文章预览
+  POST_LIST_CATEGORY: true, // 列表显示文章分类
+  POST_LIST_TAG: true, // 列表显示文章标签
+
+  POST_DETAIL_CATEGORY: true, // 文章显示分类
+  POST_DETAIL_TAG: true, // 文章显示标签
 
   // 菜单
   MENU_ABOUT: true, // 显示关于