mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
group theme files - example
This commit is contained in:
tangly1024.com
@@ -1,438 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 这是一个空白主题，方便您用作创建新主题时的模板，从而开发出您自己喜欢的主题
|
||||
* 1. 禁用了代码质量检查功能，提高了代码的宽容度；您可以使用标准的html写法
|
||||
* 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来
|
||||
* 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
|
||||
*/
|
||||
import BLOG from '@/blog.config'
|
||||
import DarkModeButton from '@/components/DarkModeButton'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
|
||||
/**
|
||||
* 这是个配置文件，可以方便在此统一配置信息
|
||||
*/
|
||||
const THEME_CONFIG = { THEME: 'blank' }
|
||||
|
||||
/**
|
||||
* 布局框架
|
||||
* 作为一个基础框架使用，定义了整个主题每个页面必备的顶部导航栏和页脚
|
||||
* 其它页面都嵌入到此框架中使用
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutBase = (props) => {
|
||||
const { siteInfo, children } = props
|
||||
return <div id='theme-blank' className="flex flex-col justify-between bg-white">
|
||||
{/* 顶部导航栏 */}
|
||||
<NavBar siteInfo={siteInfo} />
|
||||
|
||||
{/* 内容 */}
|
||||
<div id='content-wrapper'>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* 底部页脚 */}
|
||||
<Footer />
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页布局
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutIndex = (props) => {
|
||||
const { siteInfo } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<CTA siteInfo={siteInfo} />
|
||||
<PostList {...props} />
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 文章详情页布局
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutSlug = (props) => <LayoutBase {...props}>
|
||||
<div className='p-12 max-w-screen-xl justify-center mx-auto'>
|
||||
<NotionPage {...props} />
|
||||
</div>
|
||||
<PostList {...props} />
|
||||
</LayoutBase>
|
||||
|
||||
// 其他布局暂时留空
|
||||
const LayoutSearch = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
const LayoutArchive = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
const Layout404 = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
const LayoutCategory = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
const LayoutCategoryIndex = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
const LayoutPage = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
const LayoutTag = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
const LayoutTagIndex = (props) => <LayoutBase {...props}><CTA /></LayoutBase>
|
||||
|
||||
/**
|
||||
* 文章列表
|
||||
*/
|
||||
const PostList = (props) => {
|
||||
const { latestPosts } = props
|
||||
return <div className="max-w-screen-xl p-8 mx-auto bg-white">
|
||||
<div className="flex items-end justify-between mb-12 header">
|
||||
<div className="title">
|
||||
<p className="mb-4 text-4xl font-bold text-gray-800">
|
||||
Lastest articles
|
||||
</p>
|
||||
<p className="text-2xl font-light text-gray-400">
|
||||
All article are verified by 2 experts and valdiate by the CTO
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-12 md:grid-cols-2 xl:grid-cols-3">
|
||||
{latestPosts?.map(post => (
|
||||
<div key={post.id} className="m-auto overflow-hidden rounded-lg shadow-lg cursor-pointer h-90 w-60 md:w-80">
|
||||
<Link href={post.slug} className="block w-full h-full">
|
||||
<img alt="blog photo" src={post.pageCover || BLOG.HOME_BANNER_IMAGE} className="object-cover w-full max-h-40" />
|
||||
<div className="w-full p-4 bg-white dark:bg-gray-800">
|
||||
<p className="font-medium text-indigo-500 text-md">
|
||||
{post.category}
|
||||
</p>
|
||||
<p className="mb-2 text-xl font-medium text-gray-800 dark:text-white">
|
||||
{post.title}
|
||||
</p>
|
||||
<p className="font-light text-gray-400 dark:text-gray-300 text-md">
|
||||
{post.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center mt-4 justify-starts">
|
||||
|
||||
{post.tags?.map(t => {
|
||||
return <div key={t} className="text-xs mr-2 py-1.5 px-4 text-gray-600 bg-blue-100 rounded-2xl">
|
||||
#{t}
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航栏
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
const NavBar = ({ siteInfo }) => {
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
const toggleMenu = () => {
|
||||
setShowMenu(!showMenu)
|
||||
}
|
||||
return <div>
|
||||
<nav className="bg-white dark:bg-gray-800 shadow ">
|
||||
<div className="px-8 mx-auto max-w-7xl">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo菜单区域 */}
|
||||
<div className=" flex items-center">
|
||||
<a className="flex-shrink-0" href="/">
|
||||
<img className="w-8 h-8" src="/favicon.svg" alt="NotionNext" />
|
||||
</a>
|
||||
<div className={'hidden md:block'}>
|
||||
<div className="flex items-baseline ml-10 space-x-4">
|
||||
<a className="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/#">
|
||||
Home
|
||||
</a>
|
||||
<a className="text-gray-800 dark:text-white hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/#">
|
||||
Gallery
|
||||
</a>
|
||||
<a className="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/#">
|
||||
Content
|
||||
</a>
|
||||
<a className="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/#">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="block">
|
||||
<div className="flex items-center ml-4 md:ml-6">
|
||||
<a href="https://github.com/tangly1024/NotionNext" className="p-1 text-gray-400 rounded-full focus:outline-none hover:text-gray-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span className="sr-only">
|
||||
View github
|
||||
</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="text-xl transition-colors duration-200 hover:text-gray-800 dark:hover:text-white" viewBox="0 0 1792 1792">
|
||||
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<div className="relative ml-3">
|
||||
<div className="relative inline-block text-left">
|
||||
<div>
|
||||
<button onClick={toggleMenu} type="button" className=" flex items-center justify-center w-full rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500" id="options-menu">
|
||||
<svg width="20" fill="currentColor" height="20" className="text-gray-800" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className={`${showMenu ? 'md:block' : 'hidden'} absolute right-0 w-56 mt-2 origin-top-right bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5`}>
|
||||
<div className="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
||||
<a href="#" className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600" role="menuitem">
|
||||
<span className="flex flex-col">
|
||||
<span>
|
||||
Settings
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600" role="menuitem">
|
||||
<span className="flex flex-col">
|
||||
<span>
|
||||
Account
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600" role="menuitem">
|
||||
<span className="flex flex-col">
|
||||
<span>
|
||||
Logout
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex -mr-2 md:hidden">
|
||||
<button className="text-gray-800 dark:text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none">
|
||||
<svg width="20" height="20" fill="currentColor" className="w-8 h-8" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 移动设备菜单 */}
|
||||
<div className="md:hidden">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a className="text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium" href="/#">
|
||||
Home
|
||||
</a>
|
||||
<a className="text-gray-800 dark:text-white block px-3 py-2 rounded-md text-base font-medium" href="/#">
|
||||
Gallery
|
||||
</a>
|
||||
<a className="text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium" href="/#">
|
||||
Content
|
||||
</a>
|
||||
<a className="text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium" href="/#">
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 页脚
|
||||
* @param {*} param0
|
||||
*/
|
||||
const Footer = ({ siteInfo }) => {
|
||||
return <footer className="bg-white dark:bg-gray-800 pt-4 pb-8 xl:pt-8">
|
||||
<div className='py-5'>
|
||||
<DarkModeButton />
|
||||
</div>
|
||||
<div className="max-w-screen-lg px-4 mx-auto text-gray-400 xl:max-w-screen-xl sm:px-6 md:px-8 dark:text-gray-300">
|
||||
<ul className="flex flex-wrap justify-center pb-8 text-lg font-light">
|
||||
<li className="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div className="text-center">
|
||||
<h2 className="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Components
|
||||
</h2>
|
||||
<ul>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Elements
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Commerces
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Navigation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div className="text-center">
|
||||
<h2 className="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Contacts
|
||||
</h2>
|
||||
<ul>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Facebook
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li className="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div className="text-center">
|
||||
<h2 className="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Customization
|
||||
</h2>
|
||||
<ul>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Themes
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
Plugins
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-4 transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
|
||||
<a href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-8 flex border-t border-gray-200 max-w-xs mx-auto items-center justify-between">
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" className="text-xl transition-colors duration-200 hover:text-gray-800 dark:hover:text-white" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" className="text-xl transition-colors duration-200 hover:text-gray-800 dark:hover:text-white" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="text-xl transition-colors duration-200 hover:text-gray-800 dark:hover:text-white" viewBox="0 0 1792 1792">
|
||||
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" className="text-xl transition-colors duration-200 hover:text-gray-800 dark:hover:text-white" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" className="text-xl transition-colors duration-200 hover:text-gray-800 dark:hover:text-white" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
<form className="flex flex-col justify-center w-3/4 max-w-sm space-y-3 md:flex-row md:w-full md:space-x-3 md:space-y-0">
|
||||
<div className=" relative ">
|
||||
<input type="text" id=""form-subscribe-Subscribe" className=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email" />
|
||||
</div>
|
||||
<button className="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
Created by Charlie
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
}
|
||||
|
||||
/**
|
||||
* 首版
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
const CTA = ({ siteInfo }) => {
|
||||
return <div className="relative z-20 flex items-center bg-white dark:bg-gray-800 h-screen">
|
||||
<div className="container relative flex flex-col items-center justify-between px-6 py-8 mx-auto">
|
||||
<div className="flex flex-col">
|
||||
<h1 className="w-full text-4xl font-light text-center text-gray-800 uppercase sm:text-5xl dark:text-white">
|
||||
The React Framework for Production
|
||||
</h1>
|
||||
<h2 className="w-full max-w-2xl py-8 mx-auto text-xl font-light text-center text-gray-500 dark:text-white">
|
||||
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
|
||||
</h2>
|
||||
<h3 className="w-full max-w-2xl py-8 mx-auto text-xl font-light text-center text-gray-500 dark:text-white">
|
||||
BLANK仅作为演示参考主题，便于开发着创建NotionNext主题
|
||||
</h3>
|
||||
<div className="flex items-center justify-center mt-4">
|
||||
<a href="#" className="px-4 py-2 mr-4 text-white uppercase bg-gray-800 border-2 border-transparent text-md hover:bg-gray-900">
|
||||
Get started
|
||||
</a>
|
||||
<a href="#" className="px-4 py-2 text-gray-800 uppercase bg-transparent border-2 border-gray-800 dark:text-white hover:bg-gray-800 hover:text-white text-md">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
export {
|
||||
THEME_CONFIG,
|
||||
LayoutIndex,
|
||||
LayoutSearch,
|
||||
LayoutArchive,
|
||||
LayoutSlug,
|
||||
Layout404,
|
||||
LayoutCategory,
|
||||
LayoutCategoryIndex,
|
||||
LayoutPage,
|
||||
LayoutTag,
|
||||
LayoutTagIndex
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const Layout404 = (props) => {
|
||||
return <LayoutBase {...props}>
|
||||
404 Not found.
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default Layout404
|
||||
@@ -1,47 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutArchive = props => {
|
||||
const { archivePosts } = props
|
||||
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
|
||||
{Object.keys(archivePosts).map(archiveTitle => (
|
||||
<div key={archiveTitle}>
|
||||
<div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
|
||||
{archiveTitle}
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
{archivePosts[archiveTitle].map(post => (
|
||||
<li
|
||||
key={post.id}
|
||||
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
|
||||
>
|
||||
<div id={post?.publishTime}>
|
||||
<span className="text-gray-400">
|
||||
{post.date?.start_date}
|
||||
</span>{' '}
|
||||
|
||||
<Link
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
passHref
|
||||
className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
|
||||
|
||||
{post.title}
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutArchive
|
||||
@@ -1,60 +0,0 @@
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import React from 'react'
|
||||
import { Header } from './components/Header'
|
||||
import { Nav } from './components/Nav'
|
||||
import { Footer } from './components/Footer'
|
||||
import { Title } from './components/Title'
|
||||
import { SideBar } from './components/SideBar'
|
||||
import JumpToTopButton from './components/JumpToTopButton'
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
/**
|
||||
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
|
||||
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const LayoutBase = props => {
|
||||
const { children, meta } = props
|
||||
const { onLoading } = useGlobal()
|
||||
|
||||
const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
|
||||
<div className='w-full h-screen flex justify-center items-center'>
|
||||
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div id='theme-example' className='dark:text-gray-300 bg-white dark:bg-black'>
|
||||
<CommonHead meta={meta} />
|
||||
{/* 顶栏LOGO */}
|
||||
<Header {...props} />
|
||||
|
||||
{/* 菜单 */}
|
||||
<Nav {...props} />
|
||||
|
||||
{/* 主体 */}
|
||||
<div id='container-inner' className="w-full relative z-10">
|
||||
|
||||
<Title {...props} />
|
||||
|
||||
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
|
||||
|
||||
<div className='w-full max-w-3xl xl:px-14 lg:px-4 '> {onLoading ? LoadingCover : children}</div>
|
||||
|
||||
<SideBar {...props} />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Footer {...props} />
|
||||
|
||||
<div className='fixed right-4 bottom-4 z-10'>
|
||||
<JumpToTopButton />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutBase
|
||||
@@ -1,12 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { BlogListPage } from './components/BlogListPage'
|
||||
import { BlogListScroll } from './components/BlogListScroll'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategory = props => {
|
||||
return <LayoutBase {...props}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
|
||||
</LayoutBase >
|
||||
}
|
||||
|
||||
export default LayoutCategory
|
||||
@@ -1,28 +0,0 @@
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = props => {
|
||||
const { categoryOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categoryOptions?.map(category => {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
legacyBehavior>
|
||||
<div
|
||||
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
|
||||
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutCategoryIndex
|
||||
@@ -1,15 +0,0 @@
|
||||
|
||||
import BLOG from '@/blog.config'
|
||||
import { BlogListPage } from './components/BlogListPage'
|
||||
import { BlogListScroll } from './components/BlogListScroll'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutIndex = props => {
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutIndex
|
||||
@@ -1,12 +0,0 @@
|
||||
import { BlogListPage } from './components/BlogListPage'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutPage = props => {
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<BlogListPage {...props} />
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutPage
|
||||
@@ -1,56 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { BlogListPage } from './components/BlogListPage'
|
||||
import { BlogListScroll } from './components/BlogListScroll'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect } from 'react'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import Mark from 'mark.js'
|
||||
import LayoutBase from './LayoutBase'
|
||||
import { isBrowser } from '@/lib/utils'
|
||||
|
||||
const LayoutSearch = props => {
|
||||
const { keyword } = props
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const container = isBrowser() && document.getElementById('posts-wrapper')
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(keyword, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
}, 100)
|
||||
}, [router.events])
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (keyword) {
|
||||
const targets = document.getElementsByClassName('replace')
|
||||
for (const container of targets) {
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(`${keyword}`, 'gim')
|
||||
container.innerHTML = container.innerHTML.replace(
|
||||
re,
|
||||
`<span class='text-red-500 border-b border-dashed'>${keyword}</span>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
}, [])
|
||||
|
||||
return <LayoutBase {...props}>
|
||||
<div className='pb-12'>
|
||||
<SearchInput {...props} />
|
||||
</div>
|
||||
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
|
||||
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
export default LayoutSearch
|
||||
@@ -1,33 +0,0 @@
|
||||
import LayoutBase from './LayoutBase'
|
||||
import { ArticleLock } from './components/ArticleLock'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import { ArticleInfo } from './components/ArticleInfo'
|
||||
import Comment from '@/components/Comment'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
|
||||
export const LayoutSlug = props => {
|
||||
const { post, lock, validPassword } = props
|
||||
|
||||
if (!post) {
|
||||
return <LayoutBase {...props} />
|
||||
}
|
||||
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
|
||||
{lock && <ArticleLock validPassword={validPassword} />}
|
||||
|
||||
{!lock && <div id="article-wrapper" className="px-2">
|
||||
{post && <>
|
||||
<ArticleInfo post={post} />
|
||||
<NotionPage post={post} />
|
||||
<ShareBar post={post} />
|
||||
<Comment frontMatter={post}/>
|
||||
</>}
|
||||
</div>}
|
||||
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutSlug
|
||||
@@ -1,12 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { BlogListPage } from './components/BlogListPage'
|
||||
import { BlogListScroll } from './components/BlogListScroll'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTag = props => {
|
||||
return <LayoutBase {...props}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
|
||||
</LayoutBase >
|
||||
}
|
||||
|
||||
export default LayoutTag
|
||||
@@ -1,31 +0,0 @@
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = (props) => {
|
||||
const { tagOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div>
|
||||
<div id='tags-list' className='duration-200 flex flex-wrap'>
|
||||
{tagOptions.map(tag => {
|
||||
return (
|
||||
<div key={tag.name} className='p-2'>
|
||||
<Link
|
||||
key={tag}
|
||||
href={`/tag/${encodeURIComponent(tag.name)}`}
|
||||
passHref
|
||||
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
|
||||
mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
|
||||
|
||||
<div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div> </LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutTagIndex
|
||||
@@ -5,7 +5,7 @@ const NotionPage = dynamic(() => import('@/components/NotionPage'))
|
||||
|
||||
const Announcement = ({ post, className }) => {
|
||||
const { locale } = useGlobal()
|
||||
if (!post) {
|
||||
if (!post || Object.keys(post).length === 0) {
|
||||
return <></>
|
||||
}
|
||||
return <aside className="rounded shadow overflow-hidden mb-6">
|
||||
|
||||
@@ -11,12 +11,12 @@ export const ArticleInfo = (props) => {
|
||||
<div>
|
||||
{post?.type !== 'Page' && <>
|
||||
<Link
|
||||
href={`/category/${post.category}`}
|
||||
href={`/category/${post?.category}`}
|
||||
passHref
|
||||
className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
|
||||
|
||||
<i className="mr-1 fas fa-folder-open" />
|
||||
{post.category}
|
||||
{post?.category}
|
||||
|
||||
</Link>
|
||||
<span className='mr-2'>|</span>
|
||||
@@ -33,7 +33,7 @@ export const ArticleInfo = (props) => {
|
||||
</Link>
|
||||
<span className='mr-2'>|</span>
|
||||
<span className='mx-2 text-gray-400 dark:text-gray-500'>
|
||||
{locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
|
||||
{locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedTime}
|
||||
</span>
|
||||
<span className='mr-2'>|</span>
|
||||
<span className="hidden busuanzi_container_page_pv font-light mr-2">
|
||||
|
||||
39
themes/example/components/BlogListGroupByDate.js
Normal file
39
themes/example/components/BlogListGroupByDate.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import BLOG, { LINK } from '@/blog.config'
|
||||
|
||||
/**
|
||||
* 按照日期将文章分组
|
||||
* 归档页面用到
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function BlogListGroupByDate({ archiveTitle, archivePosts }) {
|
||||
return <div key={archiveTitle}>
|
||||
<div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
|
||||
{archiveTitle}
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
{archivePosts[archiveTitle].map(post => (
|
||||
<li
|
||||
key={post.id}
|
||||
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
|
||||
>
|
||||
<div id={post?.publishTime}>
|
||||
<span className="text-gray-400">
|
||||
{post.date?.start_date}
|
||||
</span>{' '}
|
||||
|
||||
<LINK
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
passHref
|
||||
className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
|
||||
|
||||
{post.title}
|
||||
|
||||
</LINK>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export const BlogListPage = props => {
|
||||
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
|
||||
|
||||
return (
|
||||
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
|
||||
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
|
||||
|
||||
<div id="posts-wrapper">
|
||||
{posts?.map(post => (
|
||||
|
||||
@@ -6,13 +6,13 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
|
||||
const BlogPostCard = ({ post }) => {
|
||||
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
|
||||
|
||||
return <article className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
|
||||
return <article className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
|
||||
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
|
||||
<h2 className="mb-4">
|
||||
<Link
|
||||
href={`/${post.slug}`}
|
||||
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
|
||||
{post.title}
|
||||
{post?.title}
|
||||
</Link>
|
||||
</h2>
|
||||
|
||||
@@ -25,14 +25,14 @@ const BlogPostCard = ({ post }) => {
|
||||
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
|
||||
{!post.results && <p className="line-clamp-3 text-gray-700 dark:text-gray-400 leading-normal">
|
||||
{post.summary}
|
||||
</p>
|
||||
</p>}
|
||||
{/* 搜索结果 */}
|
||||
{post.results && (
|
||||
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
{post.results.map(r => (
|
||||
<span key={r}>{r}</span>
|
||||
<p className="line-clamp-3 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
{post.results.map((r, index) => (
|
||||
<span key={index}>{r}</span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
|
||||
20
themes/example/components/CategoryItem.js
Normal file
20
themes/example/components/CategoryItem.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* 文章分类
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function CategoryItem({ category }) {
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
legacyBehavior>
|
||||
<div className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
|
||||
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
8
themes/example/components/LoadingCover.js
Normal file
8
themes/example/components/LoadingCover.js
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
export default function LoadingCover() {
|
||||
return <div id='cover-loading' className={'z-50 opacity-50 pointer-events-none transition-all duration-300'}>
|
||||
<div className='w-full h-screen flex justify-center items-center'>
|
||||
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { useImperativeHandle, useRef, useState } from 'react'
|
||||
|
||||
let lock = false
|
||||
|
||||
const SearchInput = ({ currentTag, currentSearch, cRef }) => {
|
||||
const SearchInput = ({ currentTag, keyword, cRef }) => {
|
||||
const { locale } = useGlobal()
|
||||
const router = useRouter()
|
||||
const searchInputRef = useRef(null)
|
||||
@@ -68,7 +68,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
|
||||
onCompositionUpdate={lockSearchInput}
|
||||
onCompositionEnd={unLockSearchInput}
|
||||
onChange={e => updateSearchKey(e.target.value)}
|
||||
defaultValue={currentSearch || ''}
|
||||
defaultValue={keyword || ''}
|
||||
/>
|
||||
|
||||
<div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
|
||||
|
||||
18
themes/example/components/TagItem.js
Normal file
18
themes/example/components/TagItem.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* 标签
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function TagItem({ tag }) {
|
||||
return <div key={tag.name} className='p-2'>
|
||||
<Link
|
||||
key={tag}
|
||||
href={`/tag/${encodeURIComponent(tag.name)}`}
|
||||
passHref
|
||||
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
|
||||
<div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
@@ -1,25 +1,234 @@
|
||||
'use client'
|
||||
|
||||
import BLOG from '@/blog.config'
|
||||
import CONFIG_EXAMPLE from './config_example'
|
||||
import LayoutIndex from './LayoutIndex'
|
||||
import LayoutSearch from './LayoutSearch'
|
||||
import LayoutArchive from './LayoutArchive'
|
||||
import LayoutSlug from './LayoutSlug'
|
||||
import Layout404 from './Layout404'
|
||||
import LayoutCategory from './LayoutCategory'
|
||||
import LayoutCategoryIndex from './LayoutCategoryIndex'
|
||||
import LayoutPage from './LayoutPage'
|
||||
import LayoutTag from './LayoutTag'
|
||||
import LayoutTagIndex from './LayoutTagIndex'
|
||||
import CommonHead from '@/components/CommonHead'
|
||||
import { useEffect } from 'react'
|
||||
import { Header } from './components/Header'
|
||||
import { Nav } from './components/Nav'
|
||||
import { Footer } from './components/Footer'
|
||||
import { Title } from './components/Title'
|
||||
import { SideBar } from './components/SideBar'
|
||||
import { BlogListPage } from './components/BlogListPage'
|
||||
import { BlogListScroll } from './components/BlogListScroll'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { ArticleLock } from './components/ArticleLock'
|
||||
import { ArticleInfo } from './components/ArticleInfo'
|
||||
import JumpToTopButton from './components/JumpToTopButton'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import Comment from '@/components/Comment'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import Mark from 'mark.js'
|
||||
import { isBrowser } from '@/lib/utils'
|
||||
import LoadingCover from './components/LoadingCover'
|
||||
import BlogListGroupByDate from './components/BlogListGroupByDate'
|
||||
import CategoryItem from './components/CategoryItem'
|
||||
import TagItem from './components/TagItem'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
/**
|
||||
* 基础布局框架
|
||||
* 1.其它页面都嵌入在LayoutBase中
|
||||
* 2.采用左右两侧布局，移动端使用顶部导航栏
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const LayoutBase = props => {
|
||||
const { children, meta, slotTop } = props
|
||||
const { onLoading } = useGlobal()
|
||||
|
||||
return (
|
||||
<div id='theme-example' className='dark:text-gray-300 bg-white dark:bg-black'>
|
||||
<CommonHead meta={meta} />
|
||||
|
||||
{/* 页头 */}
|
||||
<Header {...props} />
|
||||
|
||||
{/* 菜单 */}
|
||||
<Nav {...props} />
|
||||
|
||||
{/* 主体 */}
|
||||
<div id='container-inner' className="w-full relative z-10">
|
||||
|
||||
{/* 标题栏 */}
|
||||
<Title {...props} />
|
||||
|
||||
<div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
|
||||
|
||||
{/* 内容 */}
|
||||
<div className='w-full max-w-3xl xl:px-14 lg:px-4 '>
|
||||
{/* 嵌入模块 */}
|
||||
{slotTop}
|
||||
{onLoading ? <LoadingCover /> : children}
|
||||
</div>
|
||||
|
||||
{/* 侧边栏 */}
|
||||
<SideBar {...props} />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 页脚 */}
|
||||
<Footer {...props} />
|
||||
|
||||
{/* 回顶按钮 */}
|
||||
<div className='fixed right-4 bottom-4 z-10'>
|
||||
<JumpToTopButton />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页
|
||||
* @param {*} props
|
||||
* @returns 此主题首页就是列表
|
||||
*/
|
||||
const LayoutIndex = props => {
|
||||
return <LayoutPostList {...props} />
|
||||
}
|
||||
|
||||
/**
|
||||
* 文章列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutPostList = props => {
|
||||
const { category, tag } = props
|
||||
let slotTop = null
|
||||
if (category) {
|
||||
slotTop = <div className='pb-12'><i className="mr-1 fas fa-folder-open" />{category}</div>
|
||||
} else if (tag) {
|
||||
slotTop = <div className='pb-12'>#{tag}</div>
|
||||
}
|
||||
return (
|
||||
<LayoutBase {...props} slotTop={slotTop}>
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 文章详情页
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutSlug = props => {
|
||||
const { post, lock, validPassword } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
{lock
|
||||
? <ArticleLock validPassword={validPassword} />
|
||||
: <div id="article-wrapper" className="px-2">
|
||||
<ArticleInfo post={post} />
|
||||
<NotionPage post={post} />
|
||||
<ShareBar post={post} />
|
||||
<Comment frontMatter={post} />
|
||||
</div>}
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 404页
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const Layout404 = (props) => {
|
||||
return <LayoutBase {...props}>404 Not found.</LayoutBase>
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索页
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutSearch = props => {
|
||||
const { keyword } = props
|
||||
// 嵌入一个搜索框在顶部
|
||||
const slotTop = <div className='pb-12'><SearchInput {...props} /></div>
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (isBrowser()) {
|
||||
// 高亮搜索到的结果
|
||||
const container = document.getElementById('posts-wrapper')
|
||||
console.log('container', container, keyword)
|
||||
if (keyword && container) {
|
||||
const re = new RegExp(keyword, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
}, [router])
|
||||
|
||||
return <LayoutPostList slotTop={slotTop} {...props} />
|
||||
}
|
||||
|
||||
/**
|
||||
* 归档列表
|
||||
* @param {*} props
|
||||
* @returns 按照日期将文章分组排序
|
||||
*/
|
||||
const LayoutArchive = props => {
|
||||
const { archivePosts } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
|
||||
{Object.keys(archivePosts).map(archiveTitle => (
|
||||
<BlogListGroupByDate key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
|
||||
))}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutCategoryIndex = props => {
|
||||
const { categoryOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categoryOptions?.map(category => <CategoryItem key={category.name} category={category} />)}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签列表
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutTagIndex = (props) => {
|
||||
const { tagOptions } = props
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<div id='tags-list' className='duration-200 flex flex-wrap'>
|
||||
{tagOptions.map(tag => <TagItem key={tag.name} tag={tag} />)}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
CONFIG_EXAMPLE as THEME_CONFIG,
|
||||
LayoutIndex,
|
||||
LayoutPostList,
|
||||
LayoutSearch,
|
||||
LayoutArchive,
|
||||
LayoutSlug,
|
||||
Layout404,
|
||||
LayoutCategory,
|
||||
LayoutCategoryIndex,
|
||||
LayoutPage,
|
||||
LayoutTag,
|
||||
LayoutTagIndex
|
||||
}
|
||||
|
||||
@@ -15,9 +15,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
|
||||
return (
|
||||
|
||||
<div
|
||||
className={`${CONFIG_HEXO.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`}
|
||||
>
|
||||
<div className={`${CONFIG_HEXO.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
|
||||
<div
|
||||
data-aos="fade-up"
|
||||
data-aos-easing="ease-in-out"
|
||||
|
||||
@@ -85,7 +85,7 @@ const BlogPostCard = ({ post, showSummary }) => {
|
||||
|
||||
{/* 搜索结果 */}
|
||||
{post.results && (
|
||||
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
<p className="line-clamp-4 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
{post.results.map(r => (
|
||||
<span key={r}>{r}</span>
|
||||
))}
|
||||
|
||||
@@ -23,7 +23,7 @@ export const getLayoutByTheme = (router) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 路径 对应的Layout名称
|
||||
* 根据路径 获取对应的layout
|
||||
* @param {*} path
|
||||
* @returns
|
||||
*/
|
||||
@@ -31,30 +31,24 @@ export const getLayoutNameByPath = (path) => {
|
||||
switch (path) {
|
||||
case '/':
|
||||
return 'LayoutIndex'
|
||||
case '/page/[page]':
|
||||
return 'LayoutPage'
|
||||
case '/archive':
|
||||
return 'LayoutArchive'
|
||||
case '/page/[page]':
|
||||
case '/category/[category]':
|
||||
case '/category/[category]/page/[page]':
|
||||
case '/tag/[tag]':
|
||||
case '/tag/[tag]/page/[page]':
|
||||
return 'LayoutPostList'
|
||||
case '/search':
|
||||
return 'LayoutSearch'
|
||||
case '/search/[keyword]':
|
||||
return 'LayoutSearch'
|
||||
case '/search/[keyword]/page/[page]':
|
||||
return 'LayoutSearch'
|
||||
case '/404':
|
||||
return 'Layout404'
|
||||
case '/tag':
|
||||
return 'LayoutTagIndex'
|
||||
case '/tag/[tag]':
|
||||
return 'LayoutTag'
|
||||
case '/tag/[tag]/page/[page]':
|
||||
return 'LayoutTag'
|
||||
case '/category':
|
||||
return 'LayoutCategoryIndex'
|
||||
case '/category/[category]':
|
||||
return 'LayoutCategory'
|
||||
case '/category/[category]/page/[page]':
|
||||
return 'LayoutCategory'
|
||||
default:
|
||||
return 'LayoutSlug'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user