Example主题支持配置：标题栏背景、文章页布局

themes/example/components/TitleBar.js

@@ -0,0 +1,48 @@
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+/**
+ * 标题栏
+ */
+export default function TitleBar(props) {
+  const { post } = props
+  const { fullWidth, siteInfo } = useGlobal()
+
+  const title = post?.title || siteConfig('TITLE')
+  const description = post?.description || siteConfig('AUTHOR')
+  const headerImage = post?.pageCoverThumbnail
+    ? post.pageCoverThumbnail
+    : siteInfo?.pageCover
+
+  const TITLE_BG = siteConfig('EXAMPLE_TITLE_IMAGE', false, CONFIG)
+
+  return (
+    <>
+      {/* 标题栏 */}
+      {!fullWidth && (
+        <div className='relative overflow-hidden text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b'>
+          <h1 className='title-1 relative text-xl md:text-4xl pb-4 z-10'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {title}
+          </h1>
+          <p className='title-2 relative leading-loose text-gray-dark z-10'>
+            {description}
+          </p>
+          {TITLE_BG && (
+            <>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={headerImage}
+                className='absolute object-cover top-0 left-0 w-full h-full select-none opacity-70 z-0'
+              />
+            </>
+          )}
+        </div>
+      )}
+    </>
+  )
+}