d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-08 07:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Next主题 SEO

Browse Source
This commit is contained in:
tangly1024.com
2024-01-31 18:45:11 +08:00
parent eced20bfe7
commit 765ba1cb25
21 changed files with 88 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
themes/next/components/Announcement.js
View File

@@ -14,11 +14,7 @@ const Announcement = ({ post, className }) => {
<i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
</div>
</div>
{post && (<div id="announcement-content" data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="200"
data-aos-once="true"
data-aos-anchor-placement="top-bottom">
{post && (<div id="announcement-content">
<NotionPage post={post} className='text-center ' />
</div>)}
</>

15
themes/next/components/ArticleDetail.js
View File

@@ -26,19 +26,22 @@ export default function ArticleDetail(props) {
const url = siteConfig('LINK') + useRouter().asPath
const { locale } = useGlobal()
const showArticleInfo = siteConfig('NEXT_ARTICLE_INFO', null, CONFIG)
// 动画样式 首屏卡片不用，后面翻出来的加动画
const aosProps = {
'data-aos': 'fade-down',
'data-aos-duration': '400',
'data-aos-once': 'true',
'data-aos-anchor-placement': 'top-bottom'
}
return (
<div id="article-wrapper"
className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
<div itemScope itemType="https://schema.org/Movie"
data-aos="fade-down"
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-hexo-black-gray article-padding"
>
{showArticleInfo && <header>
{showArticleInfo && <header {...aosProps}>
{/* 头图 */}
{siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) && post?.type && !post?.type !== 'Page' && post?.pageCover && (
<div className="w-full relative md:flex-shrink-0 overflow-hidden">
@@ -52,7 +55,7 @@ export default function ArticleDetail(props) {
</div>
{/* meta */}
<section className="mt-2 text-gray-400 dark:text-gray-400 font-light leading-7 text-sm">
<section className="mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm">
<div className='flex flex-wrap justify-center'>
{post?.type !== 'Page' && (<>
<Link

4
themes/next/components/BlogAround.js
View File

@@ -14,7 +14,7 @@ export default function BlogAround ({ prev, next }) {
{prev && <Link
href={`/${prev.slug}`}
passHref
className='text-sm py-3 text-gray-400 hover:underline cursor-pointer'>
className='text-sm py-3 text-gray-500 hover:underline cursor-pointer'>
<i className='mr-1 fas fa-angle-double-left' />{prev.title}
@@ -22,7 +22,7 @@ export default function BlogAround ({ prev, next }) {
{next && <Link
href={`/${next.slug}`}
passHref
className='text-sm flex py-3 text-gray-400 hover:underline cursor-pointer'>
className='text-sm flex py-3 text-gray-500 hover:underline cursor-pointer'>
{next.title}
<i className='ml-1 my-1 fas fa-angle-double-right' />

2
themes/next/components/BlogPostArchive.js
View File

@@ -27,7 +27,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
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?.publishDay}>
<span className="text-gray-400">{post.date?.start_date}</span>{' '}
<span className="text-gray-500">{post.date?.start_date}</span>{' '}
&nbsp;
<Link
href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}

43
themes/next/components/BlogPostCard.js
View File

@@ -10,9 +10,19 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
import { formatDateFmt } from '@/lib/formatDate'
import { siteConfig } from '@/lib/config'
const BlogPostCard = ({ post, showSummary }) => {
const BlogPostCard = ({ post, index, showSummary }) => {
const { locale } = useGlobal()
const showPreview = siteConfig('NEXT_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
// 动画样式 首屏卡片不用，后面翻出来的加动画
const aosProps = index > 2
? {
'data-aos': 'fade-down',
'data-aos-duration': '400',
'data-aos-once': 'true',
'data-aos-anchor-placement': 'top-bottom'
}
: {}
return (
<Card className="w-full">
<div
@@ -20,26 +30,19 @@ const BlogPostCard = ({ post, showSummary }) => {
className="flex flex-col-reverse justify-between duration-300"
>
<div className="lg:p-8 p-4 flex flex-col w-full">
{/* 文章标题 */}
<Link
{...aosProps}
href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
passHref
data-aos="fade-down"
data-aos-duration="500"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
<NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
</Link>
<div data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="100"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 `}>
<div {...aosProps} className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-500 `}>
<div>
{post.category && (
@@ -63,6 +66,7 @@ const BlogPostCard = ({ post, showSummary }) => {
<span className='menu-link'>{post.date?.start_date}</span>
</Link>
</div>
<TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
<div className="hover:text-blue-500 dark:hover:text-blue-400 md:flex-nowrap flex-wrap md:justify-start inline-block">
@@ -73,12 +77,7 @@ const BlogPostCard = ({ post, showSummary }) => {
</div>
{(!showPreview || showSummary) && !post.results && (
<p data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="100"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
<p {...aosProps} className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
@@ -93,11 +92,7 @@ const BlogPostCard = ({ post, showSummary }) => {
)}
{showPreview && post?.blockMap && (
<div data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="100"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"className="overflow-ellipsis truncate">
<div className="overflow-ellipsis truncate">
<NotionPage post={post} />
</div>
)}

4
themes/next/components/BlogPostListPage.js
View File

@@ -21,8 +21,8 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
<div>
{/* 文章列表 */}
<div id="posts-wrapper" className="flex flex-wrap lg:space-y-4 space-y-1">
{posts?.map(post => (
<BlogPostCard key={post.id} post={post} />
{posts?.map((post, index) => (
<BlogPostCard key={post.id} index={index} post={post} />
))}
</div>
<PaginationNumber page={page} totalPage={totalPage} />

8
themes/next/components/Card.js
View File

@@ -1,11 +1,11 @@
/**
* 卡片组件
* @param {*} param0
* @returns
* @param {*} param0
* @returns
*/
const Card = (props) => {
const { children, headerSlot, className } = props
return <div className={className}>
const { children, headerSlot, className } = props
return <div className={className}>
<>{headerSlot}</>
<section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
{children}

2
themes/next/components/CategoryGroup.js
View File

@@ -19,7 +19,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
: 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
' text-sm w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'}>
<i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-400 fa-folder '} mr-2 fas`} />{category.name}({category.count})
<i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`} />{category.name}({category.count})
</Link>
);
})}

8
themes/next/components/MenuList.js
View File

@@ -33,19 +33,19 @@ export const MenuList = (props) => {
return (
<>
{/* 大屏模式菜单 */}
<nav id='nav' data-aos="fade-down"
<menu id='nav' data-aos="fade-down"
data-aos-duration="500"
data-aos-delay="400"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
{links.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
</nav>
</menu>
{/* 移动端菜单 */}
<div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
<menu id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
{links?.map((link, index) => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link} />)}
</div>
</menu>
</>
)
}

2
themes/next/components/NextRecentComments.js
View File

@@ -26,7 +26,7 @@ const NextRecentComments = (props) => {
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
<div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
<div className='dark:text-gray-400 text-gray-500 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
</div>)}
</>

2
themes/next/components/SearchInput.js
View File

@@ -106,7 +106,7 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
{(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} />
<i className='hover:text-black transform duration-200 text-gray-500 cursor-pointer fas fa-times' onClick={cleanSearch} />
</div>
)}
</div>

4
themes/next/components/SideAreaRight.js
View File

@@ -59,7 +59,7 @@ const SideAreaRight = (props) => {
<Link
href={'/category'}
passHref
className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
className='text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
@@ -79,7 +79,7 @@ const SideAreaRight = (props) => {
<Link
href={'/tag'}
passHref
className="text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer">
className="text-gray-500 hover:text-black dark:hover:text-white hover:underline cursor-pointer">
{locale.COMMON.MORE}{' '}
<i className='fas fa-angle-double-right' />

4
themes/next/components/SideBar.js
View File

@@ -35,7 +35,7 @@ const SideBar = (props) => {
<Link
href={'/category'}
passHref
className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>
@@ -53,7 +53,7 @@ const SideBar = (props) => {
<Link
href={'/tag'}
passHref
className='text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
className='text-gray-500 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>

10
themes/next/components/TopNav.js
View File

@@ -56,7 +56,7 @@ const TopNav = (props) => {
}
const { searchModal } = useNextGlobal()
const showSeachModal = () => {
const showSearchModal = () => {
if (siteConfig('ALGOLIA_APP_ID')) {
searchModal?.current?.openSearch()
} else {
@@ -73,7 +73,7 @@ const TopNav = (props) => {
<Link
href={'/category'}
passHref
className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
@@ -90,7 +90,7 @@ const TopNav = (props) => {
<Link
href={'/tag'}
passHref
className='text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
className='text-gray-500 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
@@ -123,8 +123,8 @@ const TopNav = (props) => {
{/* 右侧功能 */}
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div className="cursor-pointer block lg:hidden" onClick={showSeachModal}>
<i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
<div className="cursor-pointer block lg:hidden" onClick={showSearchModal}>
<i className="mr-2 fas fa-search" />
</div>
</div>
</div>

33
themes/next/index.js
View File

@@ -21,12 +21,13 @@ import { useRouter } from 'next/router'
import ArticleDetail from './components/ArticleDetail'
import Link from 'next/link'
import BlogListBar from './components/BlogListBar'
import { Transition } from '@headlessui/react'
import { Style } from './style'
import replaceSearchResult from '@/components/Mark'
import CommonHead from '@/components/CommonHead'
import { siteConfig } from '@/lib/config'
import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
import Announcement from './components/Announcement'
import Card from './components/Card'
// 主题全局状态
const ThemeGlobalNext = createContext()
@@ -39,7 +40,6 @@ export const useNextGlobal = () => useContext(ThemeGlobalNext)
*/
const LayoutBase = (props) => {
const { children, headerSlot, rightAreaSlot, meta, post } = props
const { onLoading } = useGlobal()
const targetRef = useRef(null)
const floatButtonGroup = useRef(null)
const [showRightFloat, switchShow] = useState(false)
@@ -108,19 +108,7 @@ const LayoutBase = (props) => {
{/* 中央内容 */}
<section id='container-inner' className={`${siteConfig('NEXT_NAV_TYPE', null, CONFIG) !== 'normal' ? 'mt-24' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`} ref={targetRef}>
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{children}
</Transition>
{children}
</section>
{/* 右侧栏样式 */}
@@ -157,7 +145,20 @@ const LayoutBase = (props) => {
* @returns
*/
const LayoutIndex = (props) => {
return <LayoutPostList {...props} />
const { notice } = props
return <>
{/* 首页移动端顶部显示公告 */}
<Card className='my-2 lg:hidden'>
<Announcement post={notice} />
</Card>
<BlogListBar {...props} />
{siteConfig('POST_LIST_STYLE') !== 'page'
? <BlogPostListScroll {...props} showSummary={true} />
: <BlogPostListPage {...props} />
}
</>
}
/**