mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-01 23:16:51 +00:00
样式调整
This commit is contained in:
tangly1024
@@ -1,6 +1,69 @@
|
||||
export const LayoutArchive = (props) => {
|
||||
// const { posts, tags, categories, postCount } = props
|
||||
return <div {...props}>
|
||||
Archive Page
|
||||
</div>
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutArchive = props => {
|
||||
const { posts } = props
|
||||
const { locale } = useGlobal()
|
||||
const postsSortByDate = Object.create(posts)
|
||||
|
||||
postsSortByDate.sort((a, b) => {
|
||||
const dateA = new Date(a?.date.start_date || a.createdTime)
|
||||
const dateB = new Date(b?.date.start_date || b.createdTime)
|
||||
return dateB - dateA
|
||||
})
|
||||
|
||||
const meta = {
|
||||
title: `${locale.NAV.ARCHIVE} | ${BLOG.TITLE}`,
|
||||
description: BLOG.DESCRIPTION,
|
||||
type: 'website'
|
||||
}
|
||||
|
||||
const archivePosts = {}
|
||||
|
||||
postsSortByDate.forEach(post => {
|
||||
const date = post.date.start_date.slice(0, 7)
|
||||
if (archivePosts[date]) {
|
||||
archivePosts[date].push(post)
|
||||
} else {
|
||||
archivePosts[date] = [post]
|
||||
}
|
||||
})
|
||||
return (
|
||||
<LayoutBase {...props} meta={meta}>
|
||||
<div className="mb-10 pb-20 md:p-12 p-3 min-h-full">
|
||||
{Object.keys(archivePosts).map(archiveTitle => (
|
||||
<div key={archiveTitle}>
|
||||
<div
|
||||
className="pt-16 pb-4 text-3xl dark:text-gray-300"
|
||||
id={archiveTitle}
|
||||
>
|
||||
{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?.date?.start_date}>
|
||||
<span className="text-gray-400">
|
||||
{post.date.start_date}
|
||||
</span>{' '}
|
||||
|
||||
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
|
||||
<a className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
|
||||
{post.title}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import Live2D from '@/components/Live2D'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
/**
|
||||
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
|
||||
|
||||
@@ -10,47 +11,123 @@ import BLOG from '@/blog.config'
|
||||
* @constructor
|
||||
*/
|
||||
const LayoutBase = props => {
|
||||
const { children, meta } = props
|
||||
const { children, meta, customNav } = props
|
||||
const { locale } = useGlobal()
|
||||
const d = new Date()
|
||||
const currentYear = d.getFullYear()
|
||||
const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
|
||||
|
||||
let links = [
|
||||
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search' },
|
||||
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive' },
|
||||
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category' },
|
||||
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag' }
|
||||
]
|
||||
|
||||
if (customNav) {
|
||||
links = links.concat(customNav)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<CommonHead meta={meta} />
|
||||
{/* 导航菜单 */}
|
||||
<div className="w-full flex justify-center my-2">
|
||||
<nav className="max-w-6xl space-x-3 underline">
|
||||
<Link href="/">
|
||||
<a>首页</a>
|
||||
</Link>
|
||||
</nav>
|
||||
<div className=" max-w-6xl justify-between w-full flex">
|
||||
<section>
|
||||
<Link title={BLOG.TITLE} href={'/'}>
|
||||
<a className={'cursor-pointer flex items-center hover:underline'}>
|
||||
<i className={'fas fa-home mr-1'} />
|
||||
<div className="text-center">{BLOG.TITLE} </div>
|
||||
</a>
|
||||
</Link>
|
||||
</section>
|
||||
<nav className="space-x-3 flex">
|
||||
{links.map(link => {
|
||||
if (link) {
|
||||
return (
|
||||
<Link key={`${link.to}`} title={link.to} href={link.to}>
|
||||
<a
|
||||
className={
|
||||
'cursor-pointer flex items-center hover:underline'
|
||||
}
|
||||
>
|
||||
<i className={`${link.icon} mr-1`} />
|
||||
<div className="text-center">{link.name}</div>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容主体 */}
|
||||
<main id="wrapper" className="flex justify-center flex-1 pb-12">
|
||||
<div className="max-w-4xl px-3">{children}</div>
|
||||
<div >
|
||||
<div className='sticky top-0 z-40'>
|
||||
<Live2D/>
|
||||
<div className="max-w-4xl w-full px-3">{children}</div>
|
||||
<div>
|
||||
<div className="sticky top-0 z-40">
|
||||
<Live2D />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer
|
||||
className='font-sans dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6'
|
||||
>
|
||||
<i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
|
||||
<br/>
|
||||
|
||||
<span>Powered by <a href='https://notion.so' className='underline font-bold dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
|
||||
|
||||
{BLOG.BEI_AN && <><br /><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
|
||||
<br/>
|
||||
<span className='hidden busuanzi_container_site_pv'>
|
||||
<i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span> </span>
|
||||
<span className='pl-2 hidden busuanzi_container_site_uv'>
|
||||
<i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
|
||||
<br/>
|
||||
{/* 页脚 */}
|
||||
<footer className="font-sans dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6">
|
||||
<i className="fas fa-copyright" /> {`${startYear}${currentYear}`}{' '}
|
||||
<span>
|
||||
<i className="mx-1 animate-pulse fas fa-heart" />{' '}
|
||||
<a
|
||||
href={BLOG.LINK}
|
||||
className="underline font-bold dark:text-gray-300 "
|
||||
>
|
||||
{BLOG.AUTHOR}
|
||||
</a>
|
||||
.
|
||||
<br />
|
||||
<span>
|
||||
Powered by{' '}
|
||||
<a
|
||||
href="https://notion.so"
|
||||
className="underline font-bold dark:text-gray-300"
|
||||
>
|
||||
Notion
|
||||
</a>{' '}
|
||||
&{' '}
|
||||
<a
|
||||
href="https://github.com/tangly1024/NotionNext"
|
||||
className="underline font-bold dark:text-gray-300"
|
||||
>
|
||||
NotionNext {BLOG.VERSION}
|
||||
</a>
|
||||
.
|
||||
</span>
|
||||
</span>
|
||||
{BLOG.BEI_AN && (
|
||||
<>
|
||||
<br />
|
||||
<i className="fas fa-shield-alt" />{' '}
|
||||
<a href="https://beian.miit.gov.cn/" className="mr-2">
|
||||
{BLOG.BEI_AN}
|
||||
</a>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<br />
|
||||
<span className="hidden busuanzi_container_site_pv">
|
||||
<i className="fas fa-eye" />
|
||||
<span className="px-1 busuanzi_value_site_pv"> </span>{' '}
|
||||
</span>
|
||||
<span className="pl-2 hidden busuanzi_container_site_uv">
|
||||
<i className="fas fa-users" />{' '}
|
||||
<span className="px-1 busuanzi_value_site_uv"> </span>{' '}
|
||||
</span>
|
||||
<br />
|
||||
<h1>{meta?.title || BLOG.TITLE}</h1>
|
||||
</footer>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,48 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategory = (props) => {
|
||||
const { category } = props
|
||||
return <LayoutBase {...props}>
|
||||
Category - {category}
|
||||
</LayoutBase>
|
||||
export const LayoutCategory = props => {
|
||||
const { category, posts } = props
|
||||
const { locale } = useGlobal()
|
||||
|
||||
const [page, updatePage] = useState(1)
|
||||
let hasMore = false
|
||||
const postsToShow = posts
|
||||
? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
|
||||
: []
|
||||
|
||||
if (posts) {
|
||||
const totalCount = posts.length
|
||||
hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
|
||||
}
|
||||
const handleGetMore = () => {
|
||||
if (!hasMore) return
|
||||
updatePage(page + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
Category - {category}
|
||||
{postsToShow.map(p => (
|
||||
<div key={p.id} className="border my-12">
|
||||
<Link href={`/article/${p.slug}`}>
|
||||
<a className="underline cursor-pointer">{p.title}</a>
|
||||
</Link>
|
||||
<div>{p.summary}</div>
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<div
|
||||
onClick={handleGetMore}
|
||||
className="w-full my-4 py-4 text-center cursor-pointer "
|
||||
>
|
||||
{' '}
|
||||
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,25 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutCategoryIndex = (props) => {
|
||||
// const { tags, allPosts, categories, postCount, latestPosts } = props
|
||||
const { categories } = props
|
||||
const { locale } = useGlobal()
|
||||
return <LayoutBase {...props}>
|
||||
CategoryIndex
|
||||
<div className=' p-10'>
|
||||
<div className='dark:text-gray-200 mb-5'>
|
||||
<i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
|
||||
</div>
|
||||
<div id='category-list' className='duration-200 flex flex-wrap'>
|
||||
{categories && categories.map(category => {
|
||||
return <Link key={category.name} href={`/category/${category.name}`} passHref>
|
||||
<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>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
}
|
||||
|
||||
@@ -1,41 +1,59 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutSearch = props => {
|
||||
const { keyword, posts } = props
|
||||
const router = useRouter()
|
||||
const currentSearch = keyword || router?.query?.s
|
||||
let handleTextColor = false
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (currentSearch && !handleTextColor) {
|
||||
const container = document.getElementById('container')
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(`${currentSearch}`, 'gim')
|
||||
container.innerHTML = container.innerHTML.replace(
|
||||
re,
|
||||
`<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
|
||||
)
|
||||
handleTextColor = true
|
||||
}
|
||||
const container = document.getElementById('container')
|
||||
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)
|
||||
})
|
||||
|
||||
const { locale } = useGlobal()
|
||||
|
||||
const [page, updatePage] = useState(1)
|
||||
let hasMore = false
|
||||
const postsToShow = posts
|
||||
? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
|
||||
: []
|
||||
|
||||
if (posts) {
|
||||
const totalCount = posts.length
|
||||
hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
|
||||
}
|
||||
const handleGetMore = () => {
|
||||
if (!hasMore) return
|
||||
updatePage(page + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
<h2>Search</h2>
|
||||
<div id="container">
|
||||
{posts.map(p => (
|
||||
<div key={p.id} className="border my-12">
|
||||
<Link href={`/article/${p.slug}`}>
|
||||
<a className="underline cursor-pointer">{p.title}</a>
|
||||
</Link>
|
||||
<div>{p.summary}</div>
|
||||
</div>
|
||||
))}
|
||||
<h2>Search - {keyword}</h2>
|
||||
<SearchInput {...props} />
|
||||
{postsToShow.map(p => (
|
||||
<div key={p.id} className="border my-12">
|
||||
<Link href={`/article/${p.slug}`}>
|
||||
<a className="underline cursor-pointer">{p.title}</a>
|
||||
</Link>
|
||||
<div>{p.summary}</div>
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<div
|
||||
onClick={handleGetMore}
|
||||
className="w-full my-4 py-4 text-center cursor-pointer "
|
||||
>
|
||||
{' '}
|
||||
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
|
||||
@@ -1,8 +1,49 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTag = (props) => {
|
||||
const { tag } = props
|
||||
return <LayoutBase>
|
||||
Tag - {tag}
|
||||
</LayoutBase>
|
||||
export const LayoutTag = props => {
|
||||
const { tag, posts } = props
|
||||
const { locale } = useGlobal()
|
||||
|
||||
const [page, updatePage] = useState(1)
|
||||
|
||||
let hasMore = false
|
||||
const postsToShow = posts
|
||||
? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
|
||||
: []
|
||||
|
||||
if (posts) {
|
||||
const totalCount = posts.length
|
||||
hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
|
||||
}
|
||||
const handleGetMore = () => {
|
||||
if (!hasMore) return
|
||||
updatePage(page + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<LayoutBase>
|
||||
Tag - {tag}
|
||||
{postsToShow.map(p => (
|
||||
<div key={p.id} className="border my-12">
|
||||
<Link href={`/article/${p.slug}`}>
|
||||
<a className="underline cursor-pointer">{p.title}</a>
|
||||
</Link>
|
||||
<div>{p.summary}</div>
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<div
|
||||
onClick={handleGetMore}
|
||||
className="w-full my-4 py-4 text-center cursor-pointer "
|
||||
>
|
||||
{' '}
|
||||
{hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,24 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import LayoutBase from './LayoutBase'
|
||||
|
||||
export const LayoutTagIndex = (props) => {
|
||||
// const { tags, categories, postCount, latestPosts } = props
|
||||
const { tags } = props
|
||||
const { locale } = useGlobal()
|
||||
return <LayoutBase {...props}>
|
||||
TagIndex
|
||||
</LayoutBase>
|
||||
<div className='p-10'>
|
||||
<div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag'/>{locale.COMMON.TAGS}:</div>
|
||||
<div id='tags-list' className='duration-200 flex flex-wrap'>
|
||||
{ tags.map(tag => {
|
||||
return <div key={tag.name} className='p-2'>
|
||||
<Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref>
|
||||
<a 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>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
}) }
|
||||
</div>
|
||||
</div> </LayoutBase>
|
||||
}
|
||||
|
||||
87
themes/empty/components/SearchInput.js
Normal file
87
themes/empty/components/SearchInput.js
Normal file
@@ -0,0 +1,87 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { useImperativeHandle, useRef, useState } from 'react'
|
||||
|
||||
let lock = false
|
||||
|
||||
const SearchInput = ({ currentTag, currentSearch, cRef }) => {
|
||||
const { locale } = useGlobal()
|
||||
const router = useRouter()
|
||||
const searchInputRef = useRef(null)
|
||||
useImperativeHandle(cRef, () => {
|
||||
return {
|
||||
focus: () => {
|
||||
searchInputRef?.current?.focus()
|
||||
}
|
||||
}
|
||||
})
|
||||
const handleSearch = () => {
|
||||
const key = searchInputRef.current.value
|
||||
if (key && key !== '') {
|
||||
router.push({ pathname: '/search/' + key }).then(r => {
|
||||
console.log('搜索', key)
|
||||
})
|
||||
} else {
|
||||
router.push({ pathname: '/' }).then(r => {
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleKeyUp = (e) => {
|
||||
if (e.keyCode === 13) { // 回车
|
||||
handleSearch(searchInputRef.current.value)
|
||||
} else if (e.keyCode === 27) { // ESC
|
||||
cleanSearch()
|
||||
}
|
||||
}
|
||||
const cleanSearch = () => {
|
||||
searchInputRef.current.value = ''
|
||||
setShowClean(false)
|
||||
}
|
||||
function lockSearchInput () {
|
||||
lock = true
|
||||
}
|
||||
|
||||
function unLockSearchInput () {
|
||||
lock = false
|
||||
}
|
||||
const [showClean, setShowClean] = useState(false)
|
||||
const updateSearchKey = (val) => {
|
||||
if (lock) {
|
||||
return
|
||||
}
|
||||
searchInputRef.current.value = val
|
||||
if (val) {
|
||||
setShowClean(true)
|
||||
} else {
|
||||
setShowClean(false)
|
||||
}
|
||||
}
|
||||
|
||||
return <section className='flex w-full bg-gray-100'>
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type='text'
|
||||
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
|
||||
className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
|
||||
onKeyUp={handleKeyUp}
|
||||
onCompositionStart={lockSearchInput}
|
||||
onCompositionUpdate={lockSearchInput}
|
||||
onCompositionEnd={unLockSearchInput}
|
||||
onChange={e => updateSearchKey(e.target.value)}
|
||||
defaultValue={currentSearch || ''}
|
||||
/>
|
||||
|
||||
<div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
|
||||
onClick={handleSearch}>
|
||||
<i className={'hover:text-black transform duration-200 text-gray-500 cursor-pointer fas fa-search'} />
|
||||
</div>
|
||||
|
||||
{(showClean &&
|
||||
<div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
|
||||
<i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
}
|
||||
|
||||
export default SearchInput
|
||||
Reference in New Issue
Block a user