Merge branch 'main' of https://github.com/tangly1024/NotionNext

laye0619 · Apr 24, 2024 · 6c25b95 · 6c25b95
2 parents c06cb42 + 2dd9be9
commit 6c25b95
Show file tree

Hide file tree

Showing 37 changed files with 179 additions and 146 deletions.
diff --git a/.env.local b/.env.local
@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.4.3
+NEXT_PUBLIC_VERSION=4.4.4
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可
@@ -62,6 +62,7 @@ NEXT_PUBLIC_VERSION=4.4.3
 # NEXT_PUBLIC_ALGOLIA_INDEX=
 # NEXT_PUBLIC_PREVIEW_CATEGORY_COUNT=  
 # NEXT_PUBLIC_PREVIEW_TAG_COUNT=
+# NEXT_PUBLIC_POST_TITLE_ICON=
 # NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK=   
 # NEXT_PUBLIC_FIREWORKS=
 # NEXT_PUBLIC_FIREWORKS_COLOR=

diff --git a/blog.config.js b/blog.config.js
@@ -230,6 +230,7 @@ const BLOG = {
   PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
   PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
 
+  POST_TITLE_ICON: process.env.NEXT_PUBLIC_POST_TITLE_ICON || true, // 是否显示标题icon
   POST_DISABLE_GALLERY_CLICK:
     process.env.NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK || false, // 画册视图禁止点击，方便在友链页面的画册插入链接
 

diff --git a/components/GlobalHead.js b/components/GlobalHead.js
@@ -1,7 +1,9 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { loadExternalResource } from '@/lib/utils'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 /**
  * 页面的Head头，通常有用于SEO
@@ -10,7 +12,9 @@ import { useRouter } from 'next/router'
  */
 const GlobalHead = props => {
   const { children, siteInfo } = props
-  let url = siteConfig('PATH')?.length ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}` : siteConfig('LINK')
+  let url = siteConfig('PATH')?.length
+    ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
+    : siteConfig('LINK')
   let image
   const router = useRouter()
   const meta = getSEOMeta(props, router, useGlobal())
@@ -24,19 +28,50 @@ const GlobalHead = props => {
   const keywords = meta?.tags || siteConfig('KEYWORDS')
   const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
   const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
+  const favicon = siteConfig('BLOG_FAVICON')
+  const webFontUrl = siteConfig('FONT_URL')
+
+  useEffect(() => {
+    // 使用WebFontLoader字体加载
+    loadExternalResource(
+      'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js',
+      'js'
+    ).then(url => {
+      const WebFont = window?.WebFont
+      if (WebFont) {
+        console.log('LoadWebFont', webFontUrl)
+        WebFont.load({
+          custom: {
+            // families: ['"LXGW WenKai"'],
+            urls: webFontUrl
+          }
+        })
+      }
+    })
+  }, [])
 
   return (
     <Head>
+      <link rel='icon' href={favicon} />
       <title>{title}</title>
       <meta name='theme-color' content={siteConfig('BACKGROUND_DARK')} />
-      <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' />
+      <meta
+        name='viewport'
+        content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0'
+      />
       <meta name='robots' content='follow, index' />
       <meta charSet='UTF-8' />
       {siteConfig('SEO_GOOGLE_SITE_VERIFICATION') && (
-        <meta name='google-site-verification' content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')} />
+        <meta
+          name='google-site-verification'
+          content={siteConfig('SEO_GOOGLE_SITE_VERIFICATION')}
+        />
       )}
       {siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
-        <meta name='baidu-site-verification' content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')} />
+        <meta
+          name='baidu-site-verification'
+          content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')}
+        />
       )}
       <meta name='keywords' content={keywords} />
       <meta name='description' content={description} />
@@ -57,13 +92,17 @@ const GlobalHead = props => {
             rel='webmention'
             href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/webmention`}
           />
-          <link rel='pingback' href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`} />
+          <link
+            rel='pingback'
+            href={`https://webmention.io/${siteConfig('COMMENT_WEBMENTION_HOSTNAME')}/xmlrpc`}
+          />
         </>
       )}
 
-      {siteConfig('COMMENT_WEBMENTION_ENABLE') && siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
-        <link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
-      )}
+      {siteConfig('COMMENT_WEBMENTION_ENABLE') &&
+        siteConfig('COMMENT_WEBMENTION_AUTH') !== '' && (
+          <link href={siteConfig('COMMENT_WEBMENTION_AUTH')} rel='me' />
+        )}
 
       {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && (
         <meta name='referrer' content='no-referrer-when-downgrade' />
@@ -73,7 +112,10 @@ const GlobalHead = props => {
           <meta property='article:published_time' content={meta.publishDay} />
           <meta property='article:author' content={siteConfig('AUTHOR')} />
           <meta property='article:section' content={category} />
-          <meta property='article:publisher' content={siteConfig('FACEBOOK_PAGE')} />
+          <meta
+            property='article:publisher'
+            content={siteConfig('FACEBOOK_PAGE')}
+          />
         </>
       )}
       {children}
@@ -181,7 +223,9 @@ const getSEOMeta = (props, router, global) => {
       }
     default:
       return {
-        title: post ? `${post?.title} | ${siteInfo?.title}` : `${siteInfo?.title} | loading`,
+        title: post
+          ? `${post?.title} | ${siteInfo?.title}`
+          : `${siteInfo?.title} | loading`,
         description: post?.summary,
         type: post?.type,
         slug: post?.slug,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.4.3",
+  "version": "4.4.4",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

diff --git a/pages/_app.js b/pages/_app.js
@@ -3,8 +3,8 @@ import '@/styles/globals.css'
 import '@/styles/utility-patterns.css'
 
 // core styles shared by all of react-notion-x (required)
-// import 'react-notion-x/src/styles.css' // 原版的react-notion-x
-import '@/styles/notion.css' //  重写notion样式
+import '@/styles/notion.css' //  重写部分notion样式
+import 'react-notion-x/src/styles.css' // 原版的react-notion-x
 
 import useAdjustStyle from '@/hooks/useAdjustStyle'
 import { GlobalContextProvider } from '@/lib/global'

diff --git a/pages/_document.js b/pages/_document.js
@@ -30,25 +30,6 @@ class MyDocument extends Document {
               />
             </>
           )}
-
-          {BLOG.FONT_URL?.map((fontUrl, index) => {
-            if (
-              fontUrl.endsWith('.css') ||
-              fontUrl.includes('googleapis.com/css')
-            ) {
-              return <link key={index} rel='stylesheet' href={fontUrl} />
-            } else {
-              return (
-                <link
-                  key={index}
-                  rel='preload'
-                  href={fontUrl}
-                  as='font'
-                  type='font/woff2'
-                />
-              )
-            }
-          })}
         </Head>
 
         <body>

diff --git a/themes/commerce/components/PostHeader.js b/themes/commerce/components/PostHeader.js
@@ -29,7 +29,7 @@ export default function PostHeader({ post }) {
 
           {/* 文章Title */}
           <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
-            <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' /><div className='text-4xl mx-1'>{post.title}</div>
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />}<div className='text-4xl mx-1'>{post.title}</div>
           </div>
 
         </div>

diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js
@@ -16,7 +16,7 @@ const BlogPostCard = ({ post }) => {
                 <Link
                     href={`/${post.slug}`}
                     className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                    <NotionIcon icon={post.pageIcon} />{post?.title}
+                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post?.title}
                 </Link>
             </h2>
 

diff --git a/themes/example/components/Title.js b/themes/example/components/Title.js
@@ -12,7 +12,7 @@ export const Title = (props) => {
   const description = post?.description || siteConfig('AUTHOR')
 
   return <div className="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="text-xl md:text-4xl pb-4"><NotionIcon icon={post?.pageIcon} />{title}</h1>
+        <h1 className="text-xl md:text-4xl pb-4">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{title}</h1>
         <p className="leading-loose text-gray-dark">
             {description}
         </p>

diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
@@ -10,6 +10,7 @@ import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/utils/formatDate'
 import WWAds from '@/components/WWAds'
 import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
 
 /**
  *
@@ -37,7 +38,7 @@ export default function ArticleDetail(props) {
 
           {/* 文章Title */}
           <div className="font-bold text-4xl text-black dark:text-white">
-            <NotionIcon icon={post?.pageIcon} />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post.title}
           </div>
 
           <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">

diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js
@@ -71,7 +71,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
               passHref
               href={url}
               className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
-              <NotionIcon icon={post.pageIcon} /> {post.title}
+              {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />} {post.title}
             </Link>
           </h2>
 

diff --git a/themes/game/components/BlogPost.js b/themes/game/components/BlogPost.js
@@ -15,7 +15,7 @@ const BlogPost = ({ post }) => {
       <article key={post.id} className="mb-6 md:mb-8">
         <header className="flex flex-col justify-between md:flex-row md:items-baseline">
           <h2 className="text-lg md:text-xl font-medium mb-2 cursor-pointer text-black dark:text-gray-100">
-            <NotionIcon icon={post.pageIcon} />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
           </h2>
           <time className="flex-shrink-0 text-gray-600 dark:text-gray-400">
             {post?.publishDay}

diff --git a/themes/game/components/PostInfo.js b/themes/game/components/PostInfo.js
@@ -1,6 +1,7 @@
 import NotionIcon from '@/components/NotionIcon'
 import Link from 'next/link'
 import TagItem from './TagItem'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 文章详情页说明信息
@@ -25,7 +26,7 @@ export default function PostInfo(props) {
         </div>
 
         <h1 className='font-bold text-3xl text-black dark:text-white'>
-          <NotionIcon icon={post?.pageIcon} />
+          {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}
           {post?.title}
         </h1>
 

diff --git a/themes/gitbook/components/BlogPostCard.js b/themes/gitbook/components/BlogPostCard.js
@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, className }) => {
         <Link href={url} passHref>
             <div key={post.id} className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600' : ''}`}>
                 <div className="w-full select-none">
-                    <NotionIcon icon={post?.pageIcon}/> {post.title}
+                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />} {post.title}
                 </div>
                 {/* 最新文章加个红点 */}
                 {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && <Badge/>}

diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
@@ -275,7 +275,7 @@ const LayoutSlug = (props) => {
             {!lock && <div id='container'>
 
                 {/* title */}
-                <h1 className="text-3xl pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
+                <h1 className="text-3xl pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
 
                 {/* Notion文章主体 */}
                 {post && (<section id="article-wrapper" className="px-1">

diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
@@ -44,7 +44,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                             href={url}
                             passHref
                             className={' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
-                            <NotionIcon icon={post.pageIcon} /><span className='menu-link '>{post.title}</span>
+                            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}<span className='menu-link '>{post.title}</span>
                         </Link>
                     </header>