Merge branch 'tangly1024:main' into main

2026-05-14 07:26:52 +00:00 · 2023-03-15 09:27:27 +08:00
parent 41b855fe2c 7c4ff16914
commit 6fcc22caaa
12 changed files with 69 additions and 35 deletions
--- a/blog.config.js
+++ b/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
--- a/components/ExternalScript.js
+++ b/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')
--- a/pages/[...slug].js
+++ b/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
  }
 }
--- a/pages/sitemap.xml.js
+++ b/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],
--- a/public/avatar.svg
+++ b/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>
--- a/public/css/img-shadow.css
+++ b/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;
+}
--- a/styles/notion.css
+++ b/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 {
--- a/themes/hexo/components/BlogPostCard.js
+++ b/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
-            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>
+        <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary}/>

         {/* 图片封面 */}
        {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'
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/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 <>
-        {/* 标题 */}
-        <Link
+/**
+ * 博客列表的文字内容
+ * @param {*} param0
+ * @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 && (
-            <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}
-                className="replace py-3 h-28 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
+          {/* 摘要 */}
+          {(!showPreview || showSummary) && !post.results && (
+            <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '3', WebkitBoxOrient: 'vertical' }}
+                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 className="text-gray-400 justify-between flex">
+       </div>
+
+       <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>
 }
--- a/themes/hexo/components/Header.js
+++ b/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'
--- a/themes/hexo/config_hexo.js
+++ b/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, // 显示分类
--- a/themes/simple/components/Header.js
+++ b/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>