Merge pull request #2733 from tangly1024/feat/theme-magzine

Feat/theme magzine

.env.local

@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.7.0
+NEXT_PUBLIC_VERSION=4.7.1
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

components/ExternalPlugins.js

@@ -63,7 +63,8 @@ const ExternalPlugin = props => {
   const MOUSE_FOLLOW = siteConfig('MOUSE_FOLLOW')
   const CUSTOM_EXTERNAL_CSS = siteConfig('CUSTOM_EXTERNAL_CSS')
   const CUSTOM_EXTERNAL_JS = siteConfig('CUSTOM_EXTERNAL_JS')
-  const ENABLE_NPROGRSS = siteConfig('ENABLE_NPROGRSS', true)
+  // 默认关闭NProgress
+  const ENABLE_NPROGRSS = siteConfig('ENABLE_NPROGRSS', false)
 
   // 自定义样式css和js引入
   if (isBrowser) {

components/OpenWrite.js

@@ -73,8 +73,11 @@ const OpenWrite = () => {
       console.error('OpenWrite 加载异常', error)
     }
   }
-
   useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      console.log('开发环境:屏蔽OpenWrite')
+      return
+    }
     if (isBrowser && blogId) {
       // Check if the element with id 'read-more-wrap' already exists
       const readMoreWrap = document.getElementById('read-more-wrap')

components/ShareBar.js

@@ -1,22 +1,30 @@
 import { siteConfig } from '@/lib/config'
 import dynamic from 'next/dynamic'
 
-const ShareButtons = dynamic(() => import('@/components/ShareButtons'), { ssr: false })
+const ShareButtons = dynamic(() => import('@/components/ShareButtons'), {
+  ssr: false
+})
 
 /**
  * 分享栏
  * @param {} param0
  * @returns
  */
 const ShareBar = ({ post }) => {
-  if (!JSON.parse(siteConfig('POST_SHARE_BAR_ENABLE')) || !post || post?.type !== 'Post') {
+  if (
+    !JSON.parse(siteConfig('POST_SHARE_BAR_ENABLE')) ||
+    !post ||
+    post?.type !== 'Post'
+  ) {
     return <></>
   }
 
-  return <div className='m-1 overflow-x-auto'>
-        <div className='flex w-full md:justify-end'>
-            <ShareButtons post={post} />
-        </div>
+  return (
+    <div className='m-1 overflow-x-auto'>
+      <div className='flex w-full md:justify-end'>
+        <ShareButtons post={post} />
+      </div>
     </div>
+  )
 }
 export default ShareBar

lib/cache/cache_manager.js

@@ -8,7 +8,7 @@ import MemoryCache from './memory_cache'
  * @returns
  */
 export async function getDataFromCache(key, force) {
-  if (JSON.parse(BLOG.ENABLE_CACHE) || force) {
+  if (BLOG.ENABLE_CACHE || force) {
     const dataFromCache = await getApi().getCache(key)
     if (JSON.stringify(dataFromCache) === '[]') {
       return null

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

styles/notion.css

@@ -403,7 +403,8 @@ summary > .notion-h {
 .notion-h1 {
   font-size: 1.575em;
   margin-top: 1.08em;
-  @apply border-b w-full;
+  @apply w-full;
+  /* @apply border-b w-full; */
 }
 .notion-h2 {
   @apply w-full;
@@ -554,7 +555,7 @@ summary > .notion-h {
   width: 100%;
   margin: 6px 0;
   padding: 0;
-  border-bottom-width: 1px;
+  /* border-bottom-width: 1px; */
 }
 
 .notion-link {
@@ -1664,9 +1665,8 @@ code[class*='language-'] {
 }
 
 /* NOTION CSS OVERRIDE */
-
 .notion {
-  @apply dark:text-gray-300;
+  @apply dark:text-gray-100;
   overflow-wrap: break-word;
 }
 .notion,

themes/magzine/components/Announcement.js

@@ -0,0 +1,30 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+/**
+ * Magzine主题的公告
+ */
+const Announcement = ({ post, className }) => {
+  //   const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return (
+      <div className={className}>
+        <section
+          id='announcement-wrapper'
+          className='dark:text-gray-300 rounded-xl px-2'>
+          {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+          {post && (
+            <div id='announcement-content'>
+              <NotionPage post={post} className='' />
+            </div>
+          )}
+        </section>
+      </div>
+    )
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/magzine/components/ArticleAround.js

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAround ({ prev, next }) {
+  if (!prev || !next) {
+    return <></>
+  }
+  return (
+    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+      <Link
+        href={`/${prev.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+
+        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+
+      </Link>
+      <Link
+        href={`/${next.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
+        {next.title}
+        <i className='ml-1 my-1 fas fa-angle-double-right' />
+
+      </Link>
+    </section>
+  )
+}

themes/magzine/components/ArticleInfo.js

@@ -0,0 +1,55 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 文章详情页介绍
+ * @param {*} props
+ * @returns
+ */
+export default function ArticleInfo(props) {
+  const { post, siteInfo } = props
+
+  return (
+    <>
+      <div className='flex flex-col gap-y-4 py-4 px-2 lg:px-0'>
+        <div className='flex justify-center mr-2 items-center'>
+          {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+            <CategoryItem category={post?.category} />
+          )}
+          <div
+            className={
+              'flex items-center justify-start flex-wrap space-x-3 text-gray-400'
+            }>
+            {siteConfig('MAGZINE_POST_LIST_TAG') &&
+              post?.tagItems?.map(tag => (
+                <TagItemMini key={tag.name} tag={tag} />
+              ))}
+          </div>
+        </div>
+
+        {/* title */}
+        <h2 className='text-4xl text-center dark:text-gray-300'>
+          {siteConfig('POST_TITLE_ICON') && (
+            <NotionIcon icon={post?.pageIcon} />
+          )}
+          {post?.title}
+        </h2>
+
+        <div className='text-xl text-center'>{post?.summary}</div>
+      </div>
+
+      {post?.type && !post?.type !== 'Page' && post?.pageCover && (
+        <div className='w-full relative md:flex-shrink-0 overflow-hidden'>
+          <LazyImage
+            alt={post?.title}
+            src={post?.pageCover}
+            className='object-cover max-h-[60vh] w-full'
+          />
+        </div>
+      )}
+    </>
+  )
+}

themes/magzine/components/ArticleLock.js

@@ -0,0 +1,61 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
+  return (
+    <div
+      id='container'
+      className='w-full flex justify-center items-center h-96 '>
+      <div className='text-center space-y-3'>
+        <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+        <div className='flex mx-4'>
+          <input
+            id='password'
+            type='password'
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                submitPassword()
+              }
+            }}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300  leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-gray-500 hover:bg-gray-400 text-white rounded-r duration-300'>
+            <i className={'duration-200 cursor-pointer fas fa-key'}>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
+        </div>
+        <div id='tips'></div>
+      </div>
+    </div>
+  )
+}

themes/magzine/components/BannerFullWidth.js

@@ -0,0 +1,30 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import BannerItem from './BannerItem'
+
+/**
+ * 全宽
+ * @param {*} props
+ * @returns
+ */
+export default function BannerFullWidth() {
+  const { siteInfo } = useGlobal()
+  const banner = siteConfig('MAGZINE_HOME_BANNER_ENABLE')
+  if (!banner) {
+    return null
+  }
+  return (
+    <div className='w-full flex lg:flex-row flex-col justify-between h-96 bg-black'>
+      <LazyImage
+        alt={siteInfo?.title}
+        src={siteInfo?.pageCover}
+        className={`banner-cover w-full h-96 object-cover object-center `}
+      />
+
+      <div className='w-full flex items-center justify-center'>
+        <BannerItem />
+      </div>
+    </div>
+  )
+}

themes/magzine/components/BannerItem.js

@@ -0,0 +1,35 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/**
+ * 文字广告Banner
+ * @param {*} props
+ * @returns
+ */
+export default function BannerItem() {
+  // 首屏信息栏按钮文字
+  const banner = siteConfig('MAGZINE_HOME_BANNER_ENABLE')
+  const button = siteConfig('MAGZINE_HOME_BUTTON')
+  const text = siteConfig('MAGZINE_HOME_BUTTON_TEXT')
+  const url = siteConfig('MAGZINE_HOME_BUTTON_URL')
+  const title = siteConfig('MAGZINE_HOME_TITLE')
+  const description = siteConfig('MAGZINE_HOME_DESCRIPTION')
+  const tips = siteConfig('MAGZINE_HOME_TIPS')
+  if (!banner) {
+    return null
+  }
+
+  return (
+    <div className='flex flex-col p-5 gap-y-5 dark items-center justify-between w-full bg-black text-white'>
+      {/* 首屏导航按钮 */}
+      <h2 className='text-2xl font-semibold'>{title}</h2>
+      <h3 className='text-sm'>{description}</h3>
+      {button && (
+        <div className='mt-2 text-center px-6 py-3 font-semibold rounded-3xl text-black bg-[#7BE986] hover:bg-[#62BA6B]'>
+          <Link href={url}>{text}</Link>
+        </div>
+      )}
+      <span className='text-xs'>{tips}</span>
+    </div>
+  )
+}

themes/magzine/components/Card.js

@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {children}
+    </section>
+  </div>
+}
+export default Card