初始化Hexo主题

themes/Hexo/Layout404.js

@@ -0,0 +1,6 @@
+
+export const Layout404 = () => {
+  return <div>
+   404 Not found.
+  </div>
+}

themes/Hexo/LayoutArchive.js

@@ -0,0 +1,5 @@
+export const LayoutArchive = ({ posts, tags, categories, postCount }) => {
+  return <div>
+    Archive Page
+  </div>
+}

themes/Hexo/LayoutBase.js

@@ -0,0 +1,40 @@
+import CommonHead from '@/components/CommonHead'
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+ * @param children
+ * @param layout
+ * @param tags
+ * @param meta
+ * @param post
+ * @param currentSearch
+ * @param currentCategory
+ * @param currentTag
+ * @param categories
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = ({
+  children,
+  headerSlot,
+  tags,
+  meta,
+  post,
+  postCount,
+  sideBarSlot,
+  floatSlot,
+  rightAreaSlot,
+  currentSearch,
+  currentCategory,
+  currentTag,
+  categories
+}) => {
+  return (<>
+    <CommonHead meta={meta} />
+    <main id='wrapper' className='flex justify-center flex-1 pb-12'>
+      {children}
+    </main>
+  </>)
+}
+
+export default LayoutBase

themes/Hexo/LayoutCategory.js

@@ -0,0 +1,5 @@
+export const LayoutCategory = ({ tags, posts, category, categories, latestPosts, postCount }) => {
+  return <div>
+    Category -  {category}
+  </div>
+}

themes/Hexo/LayoutCategoryIndex.js

@@ -0,0 +1,11 @@
+export const LayoutCategoryIndex = ({
+  tags,
+  allPosts,
+  categories,
+  postCount,
+  latestPosts
+}) => {
+  return <div>
+    CategoryIndex
+  </div>
+}

themes/Hexo/LayoutIndex.js

@@ -0,0 +1,3 @@
+export const LayoutIndex = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
+  return <div>Index</div>
+}

themes/Hexo/LayoutPage.js

@@ -0,0 +1,5 @@
+export const LayoutPage = ({ page, posts, tags, meta, categories, postCount, latestPosts }) => {
+  return <div>
+    Page - {page}
+  </div>
+}

themes/Hexo/LayoutSearch.js

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router'
+
+export const LayoutSearch = ({
+  posts,
+  tags,
+  categories,
+  postCount
+}) => {
+  let filteredPosts
+  const searchKey = getSearchKey()
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  } else {
+    filteredPosts = posts
+  }
+
+  console.log(filteredPosts)
+
+  return <div>
+    Search {searchKey}
+  </div>
+}
+
+function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}

themes/Hexo/LayoutSlug.js

@@ -0,0 +1,21 @@
+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'
+
+export const LayoutSlug = ({
+  post,
+  tags,
+  prev,
+  next,
+  recommendPosts,
+  categories,
+  postCount,
+  latestPosts
+}) => {
+  return <div>
+    Slug
+  </div>
+}

themes/Hexo/LayoutTag.js

@@ -0,0 +1,5 @@
+export const LayoutTag = ({ tags, posts, tag, categories, postCount, latestPosts }) => {
+  return <div>
+     Tag - {tag}
+   </div>
+}

themes/Hexo/LayoutTagIndex.js

@@ -0,0 +1,5 @@
+export const LayoutTagIndex = ({ tags, categories, postCount, latestPosts }) => {
+  return <div>
+     TagIndex
+   </div>
+}

themes/Hexo/components/Header.js

@@ -0,0 +1,118 @@
+import { useGlobal } from '@/lib/global'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useEffect, useState } from 'react'
+import Typed from 'typed.js'
+import CONFIG_NEXT from '../config_next'
+
+let wrapperTop = 0
+let windowTop = 0
+let autoScroll = false
+
+/**
+ *
+ * @returns 头图
+ */
+export default function Header () {
+  const [typed, changeType] = useState()
+  useEffect(() => {
+    if (!typed && window && document.getElementById('typed')) {
+      changeType(
+        new Typed('#typed', {
+          strings: CONFIG_NEXT.HOME_BANNER_Strings,
+          typeSpeed: 200,
+          backSpeed: 100,
+          backDelay: 400,
+          showCursor: true,
+          smartBackspace: true
+        })
+      )
+    }
+  })
+  const { theme } = useGlobal()
+
+  const autoScrollEnd = () => {
+    if (autoScroll) {
+      windowTop = window.scrollY
+      autoScroll = false
+    }
+  }
+
+  const scrollTrigger = () => {
+    if (
+      (window.scrollY > windowTop) &
+      (window.scrollY < window.innerHeight) &&
+      !autoScroll
+    ) {
+      autoScroll = true
+      window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+      setTimeout(autoScrollEnd, 500)
+    }
+    if (
+      (window.scrollY < windowTop) &
+      (window.scrollY < window.innerHeight) &&
+      !autoScroll
+    ) {
+      autoScroll = true
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      setTimeout(autoScrollEnd, 500)
+    }
+    windowTop = window.scrollY
+
+    updateTopNav()
+  }
+
+  const updateTopNav = () => {
+    if (theme !== 'dark') {
+      const stickyNavElement = document.getElementById('sticky-nav')
+      if (window.scrollY < window.innerHeight) {
+        stickyNavElement.classList.add('dark')
+      } else {
+        stickyNavElement.classList.remove('dark')
+      }
+    }
+  }
+
+  function updateHeaderHeight () {
+    setTimeout(() => {
+      if (window) {
+        const wrapperElement = document.getElementById('wrapper')
+        wrapperTop = wrapperElement.offsetTop
+      }
+    }, 500)
+  }
+
+  useEffect(() => {
+    updateHeaderHeight()
+    updateTopNav()
+    window.addEventListener('scroll', scrollTrigger)
+    window.addEventListener('resize', updateHeaderHeight)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+      window.removeEventListener('resize', updateHeaderHeight)
+    }
+  })
+
+  return (
+    <header
+      id="header"
+      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
+      style={{
+        backgroundImage:
+          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${CONFIG_NEXT.HOME_BANNER_IMAGE}")`
+      }}
+    >
+      <div className="absolute flex h-full items-center lg:-mt-14 justify-center w-full text-4xl md:text-7xl text-white">
+        <div id='typed' className='flex text-center font-serif'/>
+      </div>
+      <div
+        onClick={() => {
+          window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+        }}
+        className="cursor-pointer w-full text-center py-4 text-5xl absolute bottom-10 text-white"
+      >
+        <FontAwesomeIcon icon={faAngleDown} className='animate-bounce'/>
+      </div>
+    </header>
+  )
+}

themes/Hexo/index.js

@@ -0,0 +1,10 @@
+export { LayoutIndex } from './LayoutIndex'
+export { LayoutSearch } from './LayoutSearch'
+export { LayoutArchive } from './LayoutArchive'
+export { LayoutSlug } from './LayoutSlug'
+export { Layout404 } from './Layout404'
+export { LayoutCategory } from './LayoutCategory'
+export { LayoutCategoryIndex } from './LayoutCategoryIndex'
+export { LayoutPage } from './LayoutPage'
+export { LayoutTag } from './LayoutTag'
+export { LayoutTagIndex } from './LayoutTagIndex'