提交部分页面

styles/globals.css

@@ -188,4 +188,8 @@ nav {
   width: 100%;
   background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
   padding-bottom: 34px;
+}
+
+.shadow-text{
+  text-shadow: 0.1em 0.1em 0.2em black;
 }

themes/Empty/LayoutSlug.js

@@ -1,18 +1,27 @@
+import BLOG from '@/blog.config'
 import 'prismjs'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import LayoutBase from './LayoutBase'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
 
 export const LayoutSlug = (props) => {
   const { post } = props
-  return <div>
+  const meta = {
+    title: `${post.title} | ${BLOG.TITLE}`,
+    description: post.summary,
+    type: 'article',
+    tags: post.tags
+  }
+
+  return <LayoutBase {...props} meta={meta}>
     <h1>Slug - {post?.title}</h1>
     <p>
       {/* Notion文章主体 */}
@@ -32,5 +41,5 @@ export const LayoutSlug = (props) => {
       </section>
       </p>
 
-  </div>
+  </LayoutBase>
 }

themes/Hexo/LayoutBase.js

@@ -1,41 +1,34 @@
 import CommonHead from '@/components/CommonHead'
 
+import Footer from './components/Footer'
+import SideRight from './components/SideRight'
+
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
- * @param children
- * @param layout
- * @param tags
- * @param meta
- * @param post
- * @param currentSearch
- * @param currentCategory
- * @param currentTag
- * @param categories
+ * @param props
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = ({
-  children,
-  headerSlot,
-  tags,
-  meta,
-  post,
-  postCount,
-  sideBarSlot,
-  floatSlot,
-  rightAreaSlot,
-  currentSearch,
-  currentCategory,
-  currentTag,
-  categories
-}) => {
-  return (<>
+const LayoutBase = (props) => {
+  const { children, headerSlot, meta } = props
+
+  return (<div className='bg-white'>
     <CommonHead meta={meta} />
+
     {headerSlot}
-    <main id='wrapper' className='flex justify-center flex-1 pb-12'>
-      {children}
+
+    <main id='wrapper' className='flex w-full justify-center py-8 min-h-screen'>
+
+      <div id='container-inner' className='w-full mx-auto flex justify-between max-w-6xl'>
+        {children}
+        <SideRight {...props}/>
+      </div>
+
     </main>
-  </>)
+
+    <Footer title={meta.title}/>
+
+  </div>)
 }
 
 export default LayoutBase

themes/Hexo/LayoutIndex.js

@@ -1,9 +1,10 @@
+import BlogPostListPage from './components/BlogPostListPage'
 import Header from './components/Header'
 import CONFIG_HEXO from './config_hexo'
 import LayoutBase from './LayoutBase'
 
 export const LayoutIndex = (props) => {
   return <LayoutBase {...props} headerSlot={CONFIG_HEXO.HOME_BANNER_ENABLE && <Header/>}>
-
+      <BlogPostListPage {...props}/>
   </LayoutBase>
 }

themes/Hexo/LayoutSlug.js

@@ -1,21 +1,84 @@
+import BLOG from '@/blog.config'
+import formatDate from '@/lib/formatDate'
+import { useGlobal } from '@/lib/global'
+import { faFolderOpen } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
 import 'prismjs'
 import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-java'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
+import CONFIG_NEXT from '../NEXT/config_next'
+import ArticleDetail from './components/ArticleDetail'
+import Card from './components/Card'
+import LayoutBase from './LayoutBase'
 
-export const LayoutSlug = ({
-  post,
-  tags,
-  prev,
-  next,
-  recommendPosts,
-  categories,
-  postCount,
-  latestPosts
-}) => {
-  return <div>
-    Slug
-  </div>
+export const LayoutSlug = props => {
+  const { post } = props
+  const meta = {
+    title: `${post.title} | ${BLOG.TITLE}`,
+    description: post.summary,
+    type: 'article',
+    tags: post.tags
+  }
+
+  const { locale } = useGlobal()
+  const date = formatDate(
+    post?.date?.start_date || post.createdTime,
+    locale.LOCALE
+  )
+
+  const headerSlot = (
+    <div className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat"
+    style={{ backgroundImage: `url("/${CONFIG_NEXT.HOME_BANNER_IMAGE}")` }}>
+
+      <header className="animate__slideInDown animate__animated bg-black bg-opacity-50 absolute top-0 w-full h-96 py-10 flex justify-center items-center font-sans">
+        <div>
+          {/* 文章Title */}
+          <div className="font-bold text-3xl shadow-text flex justify-center text-white dark:text-white font-sans">
+            {post.title}
+          </div>
+
+          <section className="flex-wrap shadow-text flex justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
+            <div>
+              <Link href={`/category/${post.category}`} passHref>
+                <a className="cursor-pointer text-md mr-2 dark:hover:text-white border-b dark:border-gray-500 border-dashed">
+                  <FontAwesomeIcon icon={faFolderOpen} className="mr-1" />
+                  {post.category}
+                </a>
+              </Link>
+              <span className="mr-2">|</span>
+
+              {post.type[0] !== 'Page' && (<>
+                  <Link
+                    href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                    passHref
+                  >
+                    <a className="pl-1 mr-2 cursor-pointer hover:underline border-b dark:border-gray-500 border-dashed">
+                      {date}
+                    </a>
+                  </Link>
+                </>)}
+
+              <div className="hidden busuanzi_container_page_pv font-light mr-2">
+                <span className="mr-2">|</span>
+                <span className="mr-2 busuanzi_value_page_pv" />次访问
+              </div>
+            </div>
+          </section>
+        </div>
+      </header>
+    </div>
+  )
+
+  return (
+    <LayoutBase headerSlot={headerSlot} {...props} meta={meta}>
+      <Card className="w-full">
+        <ArticleDetail {...props} />
+      </Card>
+    </LayoutBase>
+  )
 }

themes/Hexo/components/ArticleDetail.js

@@ -0,0 +1,98 @@
+import Comment from '@/components/Comment'
+import mediumZoom from 'medium-zoom'
+import 'prismjs'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-typescript'
+import { useEffect, useRef } from 'react'
+import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
+  const zoom = typeof window !== 'undefined' && mediumZoom({
+    container: '.notion-viewport',
+    background: 'rgba(0, 0, 0, 0.2)',
+    margin: getMediumZoomMargin()
+  })
+  const zoomRef = useRef(zoom ? zoom.clone() : null)
+
+  useEffect(() => {
+    // 将所有container下的所有图片添加medium-zoom
+    const container = document?.getElementById('container')
+    const imgList = container?.getElementsByTagName('img')
+    if (imgList && zoomRef.current) {
+      for (let i = 0; i < imgList.length; i++) {
+        (zoomRef.current).attach(imgList[i])
+      }
+    }
+  })
+
+  return (<div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto w-screen md:w-full md:px-5 ">
+    <article itemScope itemType="https://schema.org/Movie"
+      className="subpixel-antialiased  dark:border-gray-700 bg-white dark:bg-gray-800"
+    >
+
+      {/* Notion文章主体 */}
+      <section id='notion-article' className='px-1'>
+        {post.blockMap && (
+          <NotionRenderer
+            recordMap={post.blockMap}
+            mapPageUrl={mapPageUrl}
+            components={{
+              equation: Equation,
+              code: Code,
+              collectionRow: CollectionRow,
+              collection: Collection
+            }}
+          />
+        )}
+      </section>
+
+      <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
+        {/* 文章内嵌广告 */}
+        <ins className="adsbygoogle"
+          style={{ display: 'block', textAlign: 'center' }}
+          data-adtest="on"
+          data-ad-layout="in-article"
+          data-ad-format="fluid"
+          data-ad-client="ca-pub-2708419466378217"
+          data-ad-slot="3806269138"/>
+      </section>
+
+    </article>
+
+    {/* 评论互动 */}
+    <div className="duration-200 px-12 w-screen md:w-full overflow-x-auto bg-white dark:bg-gray-800">
+        <div className='text-2xl mt-8 mx-8'>发表评论</div>
+       <Comment frontMatter={post} />
+    </div>
+  </div>)
+}
+
+const mapPageUrl = id => {
+  return 'https://www.notion.so/' + id.replace(/-/g, '')
+}
+
+function getMediumZoomMargin () {
+  const width = window.innerWidth
+
+  if (width < 500) {
+    return 8
+  } else if (width < 800) {
+    return 20
+  } else if (width < 1280) {
+    return 30
+  } else if (width < 1600) {
+    return 40
+  } else if (width < 1920) {
+    return 48
+  } else {
+    return 72
+  }
+}