diff --git a/themes/Hexo/Layout404.js b/themes/Hexo/Layout404.js new file mode 100644 index 00000000..cd28a607 --- /dev/null +++ b/themes/Hexo/Layout404.js @@ -0,0 +1,6 @@ + +export const Layout404 = () => { + return
+ 404 Not found. +
+} diff --git a/themes/Hexo/LayoutArchive.js b/themes/Hexo/LayoutArchive.js new file mode 100644 index 00000000..e46502fc --- /dev/null +++ b/themes/Hexo/LayoutArchive.js @@ -0,0 +1,5 @@ +export const LayoutArchive = ({ posts, tags, categories, postCount }) => { + return
+ Archive Page +
+} diff --git a/themes/Hexo/LayoutBase.js b/themes/Hexo/LayoutBase.js new file mode 100644 index 00000000..d302c580 --- /dev/null +++ b/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 (<> + +
+ {children} +
+ ) +} + +export default LayoutBase diff --git a/themes/Hexo/LayoutCategory.js b/themes/Hexo/LayoutCategory.js new file mode 100644 index 00000000..60e0d11a --- /dev/null +++ b/themes/Hexo/LayoutCategory.js @@ -0,0 +1,5 @@ +export const LayoutCategory = ({ tags, posts, category, categories, latestPosts, postCount }) => { + return
+ Category - {category} +
+} diff --git a/themes/Hexo/LayoutCategoryIndex.js b/themes/Hexo/LayoutCategoryIndex.js new file mode 100644 index 00000000..467bde1c --- /dev/null +++ b/themes/Hexo/LayoutCategoryIndex.js @@ -0,0 +1,11 @@ +export const LayoutCategoryIndex = ({ + tags, + allPosts, + categories, + postCount, + latestPosts +}) => { + return
+ CategoryIndex +
+} diff --git a/themes/Hexo/LayoutIndex.js b/themes/Hexo/LayoutIndex.js new file mode 100644 index 00000000..986951c3 --- /dev/null +++ b/themes/Hexo/LayoutIndex.js @@ -0,0 +1,3 @@ +export const LayoutIndex = ({ posts, tags, meta, categories, postCount, latestPosts }) => { + return
Index
+} diff --git a/themes/Hexo/LayoutPage.js b/themes/Hexo/LayoutPage.js new file mode 100644 index 00000000..c025ff3c --- /dev/null +++ b/themes/Hexo/LayoutPage.js @@ -0,0 +1,5 @@ +export const LayoutPage = ({ page, posts, tags, meta, categories, postCount, latestPosts }) => { + return
+ Page - {page} +
+} diff --git a/themes/Hexo/LayoutSearch.js b/themes/Hexo/LayoutSearch.js new file mode 100644 index 00000000..76e4867c --- /dev/null +++ b/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
+ Search {searchKey} +
+} + +function getSearchKey () { + const router = useRouter() + if (router.query && router.query.s) { + return router.query.s + } + return null +} diff --git a/themes/Hexo/LayoutSlug.js b/themes/Hexo/LayoutSlug.js new file mode 100644 index 00000000..9335af67 --- /dev/null +++ b/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
+ Slug +
+} diff --git a/themes/Hexo/LayoutTag.js b/themes/Hexo/LayoutTag.js new file mode 100644 index 00000000..cae36f38 --- /dev/null +++ b/themes/Hexo/LayoutTag.js @@ -0,0 +1,5 @@ +export const LayoutTag = ({ tags, posts, tag, categories, postCount, latestPosts }) => { + return
+ Tag - {tag} +
+} diff --git a/themes/Hexo/LayoutTagIndex.js b/themes/Hexo/LayoutTagIndex.js new file mode 100644 index 00000000..deb76f8e --- /dev/null +++ b/themes/Hexo/LayoutTagIndex.js @@ -0,0 +1,5 @@ +export const LayoutTagIndex = ({ tags, categories, postCount, latestPosts }) => { + return
+ TagIndex +
+} diff --git a/themes/Hexo/components/Header.js b/themes/Hexo/components/Header.js new file mode 100644 index 00000000..2e18fbe3 --- /dev/null +++ b/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 ( + + ) +} diff --git a/themes/Hexo/config_hexo.js b/themes/Hexo/config_hexo.js new file mode 100644 index 00000000..e69de29b diff --git a/themes/Hexo/index.js b/themes/Hexo/index.js new file mode 100644 index 00000000..aabed077 --- /dev/null +++ b/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'