Merge branch 'tangly1024:main' into main

blog.config.js

@@ -218,13 +218,14 @@ const BLOG = {
   ENABLE_RSS: process.env.NEXT_PUBLIC_ENABLE_RSS || true, // 是否开启RSS订阅功能
 
   // 作废配置
-  AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.png', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
+  AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.svg', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
   TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
   HOME_BANNER_IMAGE: process.env.NEXT_PUBLIC_HOME_BANNER_IMAGE || './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
   DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
 
   // 网站图片
   IMG_URL_TYPE: process.env.NEXT_PUBLIC_IMG_TYPE || '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, // 文章图片是否自动添加阴影
 
   // 开发相关
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public

components/ExternalScript.js

@@ -12,6 +12,12 @@ const ExternalScript = () => {
     loadExternalResource(BLOG.FONT_AWESOME, 'css')
     loadExternalResource('/css/custom.css', 'css')
     loadExternalResource('/js/custom.js', 'js')
+
+    // 自动添加图片阴影
+    if (BLOG.IMG_SHADOW) {
+      loadExternalResource('/css/img-shadow.css', 'css')
+    }
+
     if (BLOG.CUSTOM_EXTERNAL_JS && BLOG.CUSTOM_EXTERNAL_JS.length > 0) {
       for (const url of BLOG.CUSTOM_EXTERNAL_JS) {
         loadExternalResource(url, 'js')

pages/[...slug].js

@@ -100,7 +100,7 @@ export async function getStaticPaths() {
   const from = 'slug-paths'
   const { allPages } = await getGlobalNotionData({ from })
   return {
-    paths: allPages.map(row => ({ params: { slug: [row.slug] } })),
+    paths: allPages?.map(row => ({ params: { slug: [row.slug] } })),
     fallback: true
   }
 }

pages/sitemap.xml.js

@@ -38,7 +38,7 @@ export const getServerSideProps = async (ctx) => {
       priority: '0.7'
     }
   ]
-  const postFields = allPages?.map(post => {
+  const postFields = allPages?.filter(p => p.status === BLOG.NOTION_PROPERTY_NAME.status_publish)?.map(post => {
     return {
       loc: `${BLOG.LINK}/${post.slug}`,
       lastmod: new Date(post?.date?.start_date || post?.createdTime).toISOString().split('T')[0],

public/avatar.svg

@@ -0,0 +1,11 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="200" height="200" fill="#111111"/>
+<path d="M200.563 83.7392H169V144.594H168.092L126.765 83.7392H99.9706V200H131.534V138.918H132.215L174.223 200H200.563V83.7392Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="200" height="200" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/css/img-shadow.css

@@ -0,0 +1,4 @@
+/* 图片阴影 */
+#notion-article img{
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}

styles/notion.css

@@ -180,7 +180,7 @@
 }
 
 .notion-simple-table {
-  @apply whitespace-nowrap overflow-x-scroll block
+  @apply whitespace-nowrap overflow-x-auto block
 }
 
 .notion-app {

themes/hexo/components/BlogPostCard.js

@@ -11,39 +11,30 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
     post.page_cover = siteInfo?.pageCover
   }
   const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.page_cover
-  const delay = (index % 2) * 200
 
   return (
     <div
         key={post.id}
         className={`flex md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER ? 'even:md:flex-row-reverse' : ''}
-        w-full md:h-52 justify-between overflow-hidden
+        w-full justify-between overflow-hidden
         border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
 
         {/* 文字内容 */}
-        <div
+        <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary}/>
-            data-aos="fade-up"
-            data-aos-duration="200"
-            data-aos-delay={delay}
-            data-aos-once="true"
-            data-aos-anchor-placement="top-bottom"
-            className={`flex flex-col lg:p-6 p-4  ${showPageCover ? 'md:w-7/12 w-full ' : 'w-full'}`}>
-
-            <BlogPostCardInfo post={post} showPreview={showPreview} showSummary={showSummary}/>
-
-        </div>
 
          {/* 图片封面 */}
         {showPageCover && !showPreview && post?.page_cover && (
-           <div className="flex overflow-hidden md:w-5/12 h-full">
+           <div className="h-auto md:w-5/12">
                 <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
+                    {/* <img
                         src={post?.page_cover}
                         alt={post.title}
                         loading='lazy'
-                        className="w-full cursor-pointer object-cover duration-200 hover:scale-125 "
+                        className="w-full relative cursor-pointer object-cover duration-200 hover:scale-125 "
-                    />
+                    /> */}
+                    <div className='bg-center bg-cover md:h-full h-52' style={{ backgroundImage: `url('${post?.page_cover}')` }}/>
+
                     {/* <div className='relative w-full h-full'>
                     <Image
                      className='hover:scale-125 transition cursor-pointer duration-500'

themes/hexo/components/BlogPostCardInfo.js

@@ -3,10 +3,25 @@ import NotionPage from '@/components/NotionPage'
 import Link from 'next/link'
 import TagItemMini from './TagItemMini'
 
-export const BlogPostCardInfo = ({ post, showPreview, showSummary }) => {
+/**
-  return <>
+ * 博客列表的文字内容
-        {/* 标题 */}
+ * @param {*} param0
-        <Link
+ * @returns
+ */
+export const BlogPostCardInfo = ({ index, post, showPreview, showPageCover, showSummary }) => {
+  const delay = (index % 2) * 200
+
+  return <div
+            data-aos="fade-up"
+            data-aos-duration="200"
+            data-aos-delay={delay}
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"
+            className={`h-56 flex flex-col justify-between lg:p-6 p-4 md:max-h-60 ${showPageCover ? 'md:w-7/12 w-full ' : 'w-full'}`}>
+       <div>
+
+         {/* 标题 */}
+         <Link
             href={`${BLOG.SUB_PATH}/${post.slug}`}
             passHref
             className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
@@ -32,13 +47,13 @@ export const BlogPostCardInfo = ({ post, showPreview, showSummary }) => {
             </Link>
         </div>
 
-        {/* 摘要 */}
+          {/* 摘要 */}
-        {(!showPreview || showSummary) && !post.results && (
+          {(!showPreview || showSummary) && !post.results && (
-            <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}
+            <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '3', WebkitBoxOrient: 'vertical' }}
-                className="replace py-3 h-28 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
+                className="replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
                 {post.summary}
             </p>
-        )}
+          )}
 
         {/* 搜索结果 */}
         {post.results && (
@@ -55,8 +70,11 @@ export const BlogPostCardInfo = ({ post, showPreview, showSummary }) => {
             </div>
         )}
 
-        {/* 分类标签 */}
+       </div>
-        <div className="text-gray-400 justify-between flex">
+
+       <div>
+         {/* 分类标签 */}
+         <div className="text-gray-400 justify-between flex">
             <Link
                 href={`/category/${post.category}`}
                 passHref
@@ -75,5 +93,6 @@ export const BlogPostCardInfo = ({ post, showPreview, showSummary }) => {
                 </div>
             </div>
         </div>
-    </>
+       </div>
+       </div>
 }

themes/hexo/components/Header.js

@@ -87,7 +87,7 @@ const Header = props => {
             id="header"
             className="w-full h-screen bg-black text-white relative"
         >
-            <div className='w-full h-full'>
+            <div className={`w-full h-full ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`}>
                 {/* <Image src={siteInfo.pageCover} fill
                     style={{ objectFit: 'cover' }}
                     className='opacity-70'

themes/hexo/config_hexo.js

@@ -3,6 +3,7 @@ const CONFIG_HEXO = {
   HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
   HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+  HOME_NAV_BACKGROUND_IMG_FIXED: true, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动
 
   // 菜单配置
   MENU_CATEGORY: true, // 显示分类

themes/simple/components/Header.js

@@ -9,6 +9,7 @@ import CONFIG_SIMPLE from '../config_simple'
  */
 export const Header = (props) => {
   const { siteInfo } = props
+  const avatar = siteInfo?.icon || BLOG.AVATAR
 
   return (
         <header className="text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10">
@@ -20,7 +21,7 @@ export const Header = (props) => {
                     <div className='flex space-x-6'>
                         <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
                             {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={siteInfo?.icon} className='rounded-full' width={160} alt={BLOG.AUTHOR} />
+                            <img src={avatar} className='rounded-full' width={160} alt={BLOG.AUTHOR} />
                         </div>
 
                         <div>