优化样式，侧边栏增加公告栏，文章列表增加标签

themes/fukasawa/LayoutTag.js

@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
+import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'
 
 export const LayoutTag = (props) => {

themes/fukasawa/LayoutTagIndex.js

@@ -1,5 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import TagItem from './components/TagItem'
+import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'
 
 export const LayoutTagIndex = (props) => {
@@ -8,11 +9,15 @@ export const LayoutTagIndex = (props) => {
   return <LayoutBase {...props} >
     <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
       <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag'/>{locale.COMMON.TAGS}:</div>
-      <div id='tags-list' className='duration-200 flex flex-wrap'>
-        { tagOptions.map(tag => {
-          return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>
-        }) }
-      </div>
+        <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
+          {tagOptions.map(tag => {
+            return (
+              <div key={tag.name} className="p-2">
+                <TagItemMini key={tag.name} tag={tag} />
+              </div>
+            )
+          })}
+        </div>
     </div>
   </LayoutBase>
 }

themes/fukasawa/components/Announcement.js

@@ -0,0 +1,21 @@
+import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+  const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
+            {post && (<div id="announcement-content">
+            <NotionPage post={post} className='text-center ' />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/fukasawa/components/ArticleDetail.js

@@ -1,3 +1,4 @@
+import TagItemMini from './TagItemMini'
 import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
 import formatDate from '@/lib/formatDate'
@@ -33,7 +34,7 @@ export default function ArticleDetail(props) {
         <header className='animate__slideInDown animate__animated'>
 
           {/* 文章Title */}
-          <div className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
+          <div className="font-bold text-4xl text-black dark:text-white">
             {post.title}
           </div>
 
@@ -68,11 +69,15 @@ export default function ArticleDetail(props) {
                 </span>
               </>)}
 
-              <div className=" busuanzi_container_page_pv font-light mr-2">
-                <i className='mr-1 fas fa-eye' />
-                &nbsp;
-                <span className="mr-2 busuanzi_value_page_pv" />
-              </div>
+            <div className='my-2'>
+                {post.tagItems && (
+                    <div className="flex flex-nowrap overflow-x-auto">
+                        {post.tagItems.map(tag => (
+                            <TagItemMini key={tag.name} tag={tag} />
+                        ))}
+                    </div>
+                )}
+            </div>
             </div>
 
           </section>

themes/fukasawa/components/AsideLeft.js

@@ -5,42 +5,48 @@ import GroupTag from './GroupTag'
 import SearchInput from './SearchInput'
 import SiteInfo from './SiteInfo'
 import Catalog from './Catalog'
+import Announcement from './Announcement'
 import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 
 function AsideLeft (props) {
-  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo } = props
+  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
   const router = useRouter()
-  return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
+  return <div className='sideLeft relative w-80 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
     <Logo {...props}/>
+    
+    <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
+      { siteInfo?.description }
+    </section>
 
     <section className='flex flex-col text-gray-600'>
-      <hr className='w-12 my-8' />
+      <div className='w-12 my-4' />
       <MenuList {...props}/>
     </section>
 
     <section className='flex flex-col text-gray-600'>
-      <hr className='w-12 my-8' />
+      <div className='w-12 my-4' />
       <SearchInput {...props}/>
     </section>
 
-    <section className='flex flex-col dark:text-gray-300'>
-      <hr className='w-12 my-8' />
-      { siteInfo?.description }
-    </section>
 
+    <section className='flex flex-col dark:text-gray-300'>
+      <div className='w-12 my-4' />
+      <Announcement post={notice}/>
+    </section>
+      
     {router.asPath !== '/tag' && <section className='flex flex-col'>
-      <hr className='w-12 my-8 ' />
+      <div className='w-12 my-4' />
       <GroupTag tags={tagOptions} currentTag={currentTag}/>
     </section>}
 
     {router.asPath !== '/category' && <section className='flex flex-col'>
-      <hr className='w-12 my-8 ' />
+      <div className='w-12 my-4' />
       <GroupCategory categories={categoryOptions} currentCategory={currentCategory}/>
     </section>}
 
     <section className='flex flex-col'>
-      <hr className='w-12 my-8 ' />
+      <div className='w-12 my-4' />
       <SiteInfo/>
     </section>
 

themes/fukasawa/components/BlogCard.js

@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import TagItemMini from './TagItemMini'
 import React from 'react'
 import CONFIG_FUKA from '../config_fuka'
 
@@ -28,10 +29,31 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
             </Link>
 
             {(!showPreview || showSummary) && (
-                <p className="mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
+                <p className="mt-1 mb-1 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
                 {post.summary}
                 </p>
             )}
+            
+                {/* 分类标签 */}
+                <div className="mt-1 text-gray-400 justify-between flex">
+                    <Link
+                        href={`/category/${post.category}`}
+                        passHref
+                        className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+            
+                        <i className="mr-1 far fa-folder" />
+                        {post.category}
+            
+                    </Link>
+                    <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                        <div>
+                            {' '}
+                            {post.tagItems.map(tag => (
+                                <TagItemMini key={tag.name} tag={tag} />
+                            ))}
+                        </div>
+                    </div>
+                </div>
             </div>
 
             {showPageCover && (