小优化

2026-05-14 07:26:52 +00:00 · 2023-12-01 16:16:57 +08:00
parent 96a72c0c3d
commit 0ebddba378
6 changed files with 55 additions and 34 deletions
--- a/blog.config.js
+++ b/blog.config.js
@@ -398,6 +398,7 @@ const BLOG = {
  IMG_LAZY_LOAD_PLACEHOLDER: process.env.NEXT_PUBLIC_IMG_LAZY_LOAD_PLACEHOLDER || 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', // 懒加载占位图片地址，支持base64或url
  IMG_URL_TYPE: process.env.NEXT_PUBLIC_IMG_TYPE || 'Notion', // 此配置已失效，请勿使用；AMAZON方案不再支持，仅支持Notion方案。 ['Notion','AMAZON'] 站点图片前缀 默认 Notion:(https://notion.so/images/xx) ， AMAZON(https://s3.us-west-2.amazonaws.com/xxx)
  IMG_SHADOW: process.env.NEXT_PUBLIC_IMG_SHADOW || false, // 文章图片是否自动添加阴影
+  IMG_COMPRESS_WIDTH: process.env.NEXT_PUBLIC_IMG_COMPRESS_WIDTH || 800, // Notion图片压缩宽度

  // 开发相关
  NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
--- a/themes/simple/components/BlogItem.js
+++ b/themes/simple/components/BlogItem.js
@@ -3,43 +3,60 @@ import CONFIG from '../config'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { formatDateFmt } from '@/lib/formatDate'
 import { siteConfig } from '@/lib/config'
+import LazyImage from '@/components/LazyImage'

 export const BlogItem = props => {
  const { post } = props
+  const showPageCover = siteConfig('SIMPLE_POST_COVER_ENABLE', false, CONFIG)

  return <div key={post.id} className="h-42 my-6 pb-12 border-b dark:border-gray-800" >
        {/* 文章标题 */}

-        <h2 className="mb-2">
-            <Link
-                href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
-                className="blog-item-title font-bold text-black text-2xl menu-link">
-                {post.title}
-            </Link>
-        </h2>
+        <div className='flex'>
+            <div className='article-cover h-full'>
+                {/* 图片封面 */}
+                {showPageCover && (
+                    <div className="overflow-hidden mr-2 w-56 h-full">
+                        <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
+                            <LazyImage src={post?.pageCoverThumbnail} className='w-56 h-full object-cover object-center group-hover:scale-110 duration-500' />
+                        </Link>
+                    </div>
+                )}
+            </div>

-        {/* 文章信息 */}
-
-        <div className="mb-5 text-md text-gray-700 dark:text-gray-300 flex-wrap flex leading-6">
-            <div className='space-x-2'>
-                <span>  <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)} className='p-1 hover:text-red-400 transition-all duration-200'><i className="fa-regular fa-user"></i> {siteConfig('AUTHOR')}</a></span>
-                <span>
-                    <Link className='p-1 hover:text-red-400 transition-all duration-200' href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
-                        <i className="fa-regular fa-clock" /> {post.date?.start_date || post.createdTime}
+            <div className='article-info'>
+                <h2 className="mb-2">
+                    <Link
+                        href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+                        className="blog-item-title font-bold text-black text-2xl menu-link">
+                        {post.title}
                    </Link>
-                </span>
-                <span><TwikooCommentCount post={post} /></span>
-            </div>
+                </h2>

-            <div>
-                {post.category && <Link href={`/category/${post.category}`} className='p-1'> <span className="hover:text-red-400 transition-all duration-200"><i className="fa-regular fa-folder mr-0.5"/>{post.category}</span></Link>}
-                {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <Link key={t} href={`/tag/${t}`} className=' hover:text-red-400 transition-all duration-200'><span > /{t}</span></Link>)}
-            </div>
-        </div>
+                {/* 文章信息 */}

-        <div className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
-            {post.summary}
-            {post.summary && <span>...</span>}
+                <div className="mb-5 text-md text-gray-700 dark:text-gray-300 flex-wrap flex leading-6">
+                    <div className='space-x-2'>
+                        <span>  <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)} className='p-1 hover:text-red-400 transition-all duration-200'><i className="fa-regular fa-user"></i> {siteConfig('AUTHOR')}</a></span>
+                        <span>
+                            <Link className='p-1 hover:text-red-400 transition-all duration-200' href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
+                                <i className="fa-regular fa-clock" /> {post.date?.start_date || post.createdTime}
+                            </Link>
+                        </span>
+                        <span><TwikooCommentCount post={post} /></span>
+                    </div>
+
+                    <div>
+                        {post.category && <Link href={`/category/${post.category}`} className='p-1'> <span className="hover:text-red-400 transition-all duration-200"><i className="fa-regular fa-folder mr-0.5" />{post.category}</span></Link>}
+                        {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <Link key={t} href={`/tag/${t}`} className=' hover:text-red-400 transition-all duration-200'><span > /{t}</span></Link>)}
+                    </div>
+                </div>
+
+                <div className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
+                    {post.summary}
+                    {post.summary && <span>...</span>}
+                </div>
+            </div>
        </div>

        <div className='block'>
--- a/themes/simple/components/Header.js
+++ b/themes/simple/components/Header.js
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import CONFIG from '../config'
 import SocialButton from './SocialButton'
 import { siteConfig } from '@/lib/config'
+import { compressImage } from '@/lib/notion/mapImage'

 /**
 * 网站顶部
@@ -10,7 +11,7 @@ import { siteConfig } from '@/lib/config'
 */
 export const Header = (props) => {
  const { siteInfo } = props
-  const avatar = siteInfo?.icon || siteConfig('AVATAR')
+  const avatar = compressImage(siteInfo?.icon || siteConfig('AVATAR'), 200)

  return (
        <header className="text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10">
@@ -18,8 +19,8 @@ export const Header = (props) => {
                <Link href='/'>
                    {/* 可使用一张单图作为logo */}
                    <div className='flex space-x-6'>
-                        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
-                            <LazyImage src={avatar} className='rounded-full' width={130} height={130} alt={siteConfig('AUTHOR')} />
+                        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer justify-center items-center flex'>
+                            <LazyImage src={avatar} className='rounded-full' width={120} height={120} alt={siteConfig('AUTHOR')} />
                        </div>

                        <div className='flex-col flex justify-center'>
--- a/themes/simple/components/MenuList.js
+++ b/themes/simple/components/MenuList.js
@@ -51,7 +51,7 @@ export const MenuList = ({ customNav, customMenu }) => {
  return (<>
        {/* 大屏模式菜单 */}
        <div id='nav-menu-pc' className='hidden md:flex my-auto'>
-            {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+            {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
        </div>
        {/* 移动端小屏菜单 */}
        <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
@@ -62,7 +62,7 @@ export const MenuList = ({ customNav, customMenu }) => {

            <Collapse collapseRef={collapseRef} className='absolute w-full top-12 left-0' isOpen={isOpen}>
                <div id='menu-wrap' className='bg-white dark:border-hexo-black-gray border'>
-                {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
+                {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
                </div>
            </Collapse>
        </div>
--- a/themes/simple/components/SocialButton.js
+++ b/themes/simple/components/SocialButton.js
@@ -6,8 +6,8 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='w-52 justify-center flex-wrap flex'>
-    <div className='space-x-3 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
+  return <div className='w-52 justify-center flex-wrap flex my-2'>
+    <div className='space-x-5 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
        <i className='fab fa-github transform hover:scale-125 duration-150'/>
      </a>}
--- a/themes/simple/config.js
+++ b/themes/simple/config.js
@@ -9,10 +9,12 @@ const CONFIG = {

  SIMPLE_POST_AD_ENABLE: process.env.NEXT_PUBLIC_SIMPLE_POST_AD_ENABLE || false, // 文章列表是否插入广告

+  SIMPLE_POST_COVER_ENABLE: process.env.NEXT_PUBLIC_SIMPLE_POST_COVER_ENABLE || false, // 是否展示博客封面
+
  // 菜单配置
  SIMPLE_MENU_CATEGORY: true, // 显示分类
  SIMPLE_MENU_TAG: true, // 显示标签
  SIMPLE_MENU_ARCHIVE: true, // 显示归档
  SIMPLE_MENU_SEARCH: true // 显示搜索
 }
-export default CONFIG
+export default CO