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

Merge branch 'main' of https://github.com/tangly1024/NotionNext

Browse Source
This commit is contained in:
tangly1024
2023-07-22 22:06:14 +08:00
parent 20994a9d36 3d2db37d06
commit 4ed9b87981
68 changed files with 437 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@@ -1,2 +1,2 @@
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
NEXT_PUBLIC_VERSION=4.0.1
NEXT_PUBLIC_VERSION=4.0.3

6
blog.config.js
View File

@@ -73,9 +73,9 @@ const BLOG = {
'"Segoe UI Symbol"',
'"Apple Color Emoji"'
],
FONT_AWESOME: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || '/css/all.min.css', // font-awesome 字体图标地址、默认读取本地; 可选 https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
FONT_AWESOME: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', // font-awesome 字体图标地址; 可选 /css/all.min.css ， https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || true, // 自定义右键菜单，覆盖系统菜单
CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_CUSTOM_RIGHT_CLICK_CONTEXT_MENU || true, // 自定义右键菜单，覆盖系统菜单
// 自定义外部脚本，外部样式
CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
@@ -103,7 +103,7 @@ const BLOG = {
CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || 'false', // 是否折叠代码框
// Mermaid 图表CDN
MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdn.jsdelivr.net/npm/mermaid@10.2.2/dist/mermaid.min.js', // CDN
MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.4/mermaid.min.js', // CDN
BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'

106
components/CommonHead.js
View File

@@ -16,56 +16,66 @@ const CommonHead = ({ meta, children }) => {
const category = meta?.category || BLOG.KEYWORDS || '軟體科技' // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
return (
<Head>
<title>{title}</title>
<meta name="theme-color" content={BLOG.BACKGROUND_DARK} />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"/>
<meta name="robots" content="follow, index" />
<meta charSet="UTF-8" />
{BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
<meta
name="google-site-verification"
content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
/>
)}
{BLOG.SEO_BAIDU_SITE_VERIFICATION && (<meta name="baidu-site-verification" content={BLOG.SEO_BAIDU_SITE_VERIFICATION} />)}
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta property="og:locale" content={lang} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta property="og:site_name" content={BLOG.TITLE} />
<meta property="og:type" content={type} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content={description} />
<meta name="twitter:title" content={title} />
<Head>
<title>{title}</title>
<meta name="theme-color" content={BLOG.BACKGROUND_DARK} />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />
<meta name="robots" content="follow, index" />
<meta charSet="UTF-8" />
{BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
<meta
name="google-site-verification"
content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
/>
)}
{BLOG.SEO_BAIDU_SITE_VERIFICATION && (<meta name="baidu-site-verification" content={BLOG.SEO_BAIDU_SITE_VERIFICATION} />)}
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta property="og:locale" content={lang} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta property="og:site_name" content={BLOG.TITLE} />
<meta property="og:type" content={type} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content={description} />
<meta name="twitter:title" content={title} />
{BLOG.COMMENT_WEBMENTION.ENABLE && (
<>
<link rel="webmention" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/webmention`} />
<link rel="pingback" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/xmlrpc`} />
</>
)}
{BLOG.COMMENT_WEBMENTION.ENABLE && BLOG.COMMENT_WEBMENTION.AUTH !== '' && (
<link href={BLOG.COMMENT_WEBMENTION.AUTH} rel="me" />
)}
{/* 预加载字体 */}
{BLOG.FONT_AWESOME && <>
<link rel='preload' href={BLOG.FONT_AWESOME} as="style" crossOrigin="anonymous" />
<link rel="stylesheet" href={BLOG.FONT_AWESOME} crossOrigin="anonymous" referrerpolicy="no-referrer" />
</>}
{BLOG.FONT_URL?.map((fontUrl, index) => {
return <link key={index} rel='preload' href={fontUrl} as='font' type='font/woff2' />
})}
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
{meta?.type === 'Post' && (
<>
<meta
property="article:published_time"
content={meta.publishTime}
/>
<meta property="article:author" content={BLOG.AUTHOR} />
<meta property="article:section" content={category} />
<meta property="article:publisher" content={BLOG.FACEBOOK_PAGE} />
</>
)}
{children}
</Head>
{BLOG.COMMENT_WEBMENTION.ENABLE && (
<>
<link rel="webmention" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/webmention`} />
<link rel="pingback" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/xmlrpc`} />
</>
)}
{BLOG.COMMENT_WEBMENTION.ENABLE && BLOG.COMMENT_WEBMENTION.AUTH !== '' && (
<link href={BLOG.COMMENT_WEBMENTION.AUTH} rel="me" />
)}
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
{meta?.type === 'Post' && (
<>
<meta
property="article:published_time"
content={meta.publishTime}
/>
<meta property="article:author" content={BLOG.AUTHOR} />
<meta property="article:section" content={category} />
<meta property="article:publisher" content={BLOG.FACEBOOK_PAGE} />
</>
)}
{children}
</Head>
)
}

15
components/ExternalScript.js
View File

@@ -1,15 +1,15 @@
'use client'
import BLOG from '@/blog.config'
import { loadExternalResource } from '@/lib/utils'
import { useEffect } from 'react'
import { isBrowser, loadExternalResource } from '@/lib/utils'
/**
* 自定义引入外部JS 和 CSS
* @returns
*/
const ExternalScript = () => {
useEffect(() => {
if (isBrowser()) {
// 静态导入本地自定义样式
loadExternalResource(BLOG.FONT_AWESOME, 'css')
loadExternalResource('/css/custom.css', 'css')
loadExternalResource('/js/custom.js', 'js')
@@ -28,12 +28,7 @@ const ExternalScript = () => {
loadExternalResource(url, 'css')
}
}
// 渲染所有字体
BLOG.FONT_URL?.forEach(e => {
loadExternalResource(e, 'css')
})
}, [])
}
return null
}

5
components/GoogleAdsense.js
View File

@@ -34,7 +34,10 @@ export default function GoogleAdsense() {
const router = useRouter()
useEffect(() => {
initGoogleAdsense()
// 延迟3秒加载
setTimeout(() => {
initGoogleAdsense()
}, 3000)
}, [router])
return null

104
components/LazyImage.js Normal file
View File

@@ -0,0 +1,104 @@
import Head from 'next/head'
import React, { useEffect, useRef, useState } from 'react'
/**
* 默认懒加载占位图
*/
const loadingSVG = (
<svg
width="100"
height="100"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
fill="#ccc"
>
<circle cx="50" cy="50" r="42" strokeWidth="8" />
</svg>
)
/**
* 图片懒加载
* @param {*} param0
* @returns
*/
export default function LazyImage({
priority,
id,
src,
alt,
placeholderSrc = loadingSVG,
className,
width,
height,
onLoad,
style
}) {
const imageRef = useRef(null)
const [imageLoaded, setImageLoaded] = useState(false)
const handleImageLoad = () => {
setImageLoaded(true)
if (typeof onLoad === 'function') {
onLoad() // 触发传递的onLoad回调函数
}
}
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const lazyImage = entry.target
lazyImage.src = src
observer.unobserve(lazyImage)
}
})
},
{ rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later
)
if (imageRef.current) {
observer.observe(imageRef.current)
}
return () => {
if (imageRef.current) {
observer.unobserve(imageRef.current)
}
}
}, [src])
// 动态添加width、height和className属性，仅在它们为有效值时添加
const imgProps = {
ref: imageRef,
src: imageLoaded ? src : placeholderSrc,
alt: alt,
onLoad: handleImageLoad
}
if (id) {
imgProps.id = id
}
if (width && width !== 'auto') {
imgProps.width = width
}
if (height && height !== 'auto') {
imgProps.height = height
}
if (className) {
imgProps.className = className
}
if (style) {
imgProps.style = style
}
return (<>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img {...imgProps} />
{/* 预加载 */}
{priority && <Head>
<link rel='preload' as='image' src={src} />
</Head>}
</>)
}

6
components/NotionIcon.js
View File

@@ -1,3 +1,5 @@
import LazyImage from './LazyImage'
/**
* notion的图标icon
* 可能是emoji 可能是 svg 也可能是 图片
@@ -9,9 +11,7 @@ const NotionIcon = ({ icon }) => {
}
if (icon.startsWith('http') || icon.startsWith('data:')) {
// return <Image src={icon} width={30} height={30}/>
// eslint-disable-next-line @next/next/no-img-element
return <img src={icon} className='w-8 h-8 my-auto inline mr-1'/>
return <LazyImage src={icon} className='w-8 h-8 my-auto inline mr-1'/>
}
return <span className='mr-1'>{icon}</span>

4
lib/sitemap.xml.js
View File

@@ -21,9 +21,11 @@ export async function generateSitemapXml({ allPages }) {
changefreq: 'daily'
}]
// 循环页面生成
allPages?.forEach(post => {
const slugWithoutLeadingSlash = post?.slug?.startsWith('/') ? post?.slug?.slice(1) : post.slug
urls.push({
loc: `${BLOG.LINK}/${post.slug}`,
loc: `${BLOG.LINK}/${slugWithoutLeadingSlash}`,
lastmod: new Date(post?.publishTime).toISOString().split('T')[0],
changefreq: 'daily'
})

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "notion-next",
"version": "4.0.1",
"version": "4.0.3",
"homepage": "https://github.com/tangly1024/NotionNext.git",
"license": "MIT",
"repository": {

4
pages/_app.js
View File

@@ -28,9 +28,9 @@ const MyApp = ({ Component, pageProps }) => {
return (
<GlobalContextProvider>
<Component {...pageProps}/>
<ExternalPlugins {...pageProps} />
<ExternalScript />
<Component {...pageProps} />
<ExternalPlugins {...pageProps} />
</GlobalContextProvider>
)
}

3
pages/sitemap.xml.js
View File

@@ -39,8 +39,9 @@ export const getServerSideProps = async (ctx) => {
}
]
const postFields = allPages?.filter(p => p.status === BLOG.NOTION_PROPERTY_NAME.status_publish)?.map(post => {
const slugWithoutLeadingSlash = post?.slug.startsWith('/') ? post?.slug?.slice(1) : post.slug
return {
loc: `${BLOG.LINK}/${post.slug}`,
loc: `${BLOG.LINK}/${slugWithoutLeadingSlash}`,
lastmod: new Date(post?.publishTime).toISOString().split('T')[0],
changefreq: 'daily',
priority: '0.7'

3
themes/example/components/BlogPostCard.js
View File

@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
import CONFIG from '../config'
import Link from 'next/link'
import TwikooCommentCount from '@/components/TwikooCommentCount'
import LazyImage from '@/components/LazyImage'
const BlogPostCard = ({ post }) => {
const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail
@@ -41,7 +42,7 @@ const BlogPostCard = ({ post }) => {
{showPageCover && (
<div className="md:w-5/12 w-full overflow-hidden p-1">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
<LazyImage src={post?.pageCoverThumbnail} className='h-44 bg-center bg-cover hover:scale-110 duration-200' />
</Link>
</div>
)}

4
themes/fukasawa/components/ArticleDetail.js
View File

@@ -6,6 +6,7 @@ import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import ArticleAround from './ArticleAround'
import { AdSlot } from '@/components/GoogleAdsense'
import LazyImage from '@/components/LazyImage'
/**
*
@@ -23,8 +24,7 @@ export default function ArticleDetail(props) {
<div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
{post?.type && !post?.type !== 'Page' && post?.pageCover && (
<div className="w-full relative md:flex-shrink-0 overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img alt={post.title} src={post?.pageCover} className='object-center w-full' />
<LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
</div>
)}

6
themes/fukasawa/components/BlogCard.js
View File

@@ -3,6 +3,7 @@ import Link from 'next/link'
import TagItemMini from './TagItemMini'
import React from 'react'
import CONFIG_FUKA from '../config'
import LazyImage from '@/components/LazyImage'
const BlogCard = ({ index, post, showSummary, siteInfo }) => {
const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
@@ -26,12 +27,11 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
{showPageCover && (
<div className="flex-grow mb-3 w-full duration-200 cursor-pointer transform overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
<LazyImage
src={post?.pageCoverThumbnail}
alt={post?.title || BLOG.TITLE}
className="object-cover w-full h-full hover:scale-125 transform duration-500"
></img>
/>
</Link>
</div>
)}

4
themes/gitbook/components/InfoCard.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import Router from 'next/router'
import React from 'react'
import SocialButton from './SocialButton'
@@ -8,8 +9,7 @@ const InfoCard = (props) => {
return <div id='info-card' className='py-4'>
<div className='items-center justify-center'>
<div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
<LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
</div>
<div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
<div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>

4
themes/gitbook/components/LogoBar.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import { useGitBookGlobal } from '@/themes/gitbook'
import Link from 'next/link'
@@ -20,8 +21,7 @@ export default function LogoBar(props) {
<i className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
</div>
<Link href='/' className='flex text-md md:text-xl dark:text-gray-200'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
<LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
{siteInfo?.title}
</Link>
</div>

15
themes/heo/components/ArticleRecommend.js
View File

@@ -2,6 +2,7 @@ import Link from 'next/link'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import LazyImage from '@/components/LazyImage'
/**
* 关联推荐文章
@@ -35,8 +36,8 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{recommendPosts.map(post => {
const headerImage = post?.pageCoverThumbnail
? `url("${post.pageCoverThumbnail}")`
: `url("${siteInfo?.pageCover}")`
? post.pageCoverThumbnail
: siteInfo?.pageCover
return (
(<Link
@@ -46,15 +47,13 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
passHref
className="flex h-40 cursor-pointer overflow-hidden rounded-2xl">
<div
className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
style={{ backgroundImage: headerImage }}
>
<div className="flex items-center justify-center bg-black bg-opacity-70 hover:bg-opacity-30 w-full h-full duration-300 ">
<div className="text-lg px-4 font-bold text-white text-center shadow-text">
<div className="h-full w-full relative group">
<div className="flex items-center justify-center w-full h-full duration-300 ">
<div className="z-10 text-lg px-4 font-bold text-white text-center shadow-text select-none">
{post.title}
</div>
</div>
<LazyImage src={headerImage} className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200'/>
</div>
</Link>)

11
themes/heo/components/BlogPostArchive.js
View File

@@ -3,6 +3,7 @@ import Link from 'next/link'
import BLOG from '@/blog.config'
import CONFIG from '../config'
import TagItemMini from './TagItemMini'
import LazyImage from '@/components/LazyImage'
/**
* 博客归档列表
* @param posts 所有文章
@@ -29,13 +30,13 @@ const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
post.pageCoverThumbnail = siteInfo?.pageCover
}
const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
return <div key={post.id} className={'cursor-pointer flex flex-row mb-4 h-20 md:flex-row group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden'}>
return <div key={post.id} className={'cursor-pointer flex flex-row mb-4 h-24 md:flex-row group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden'}>
{/* 图片封面 */}
{showPageCover && (
<div>
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className={'rounded-xl bg-center bg-cover w-40 h-20'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
<LazyImage className={'rounded-xl bg-center bg-cover w-40 h-24'} src={post?.pageCoverThumbnail}/>
</Link>
</div>
)}
@@ -44,7 +45,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
<div className={'flex px-2 flex-col justify-between w-full'}>
<div>
{/* 分类 */}
{post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
{post?.category && <div className={`flex items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
<Link passHref href={`/category/${post.category}`}
className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:text-gray-600 transform">
{post.category}
@@ -61,9 +62,9 @@ const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
</div>
{/* 摘要 */}
<p className="line-clamp-2 replace my-3 2xl:my-1 text-gray-700 dark:text-gray-300 text-sm font-light leading-tight">
{/* <p className="line-clamp-1 replace my-3 2xl:my-0 text-gray-700 dark:text-gray-300 text-xs font-light leading-tight">
{post.summary}
</p>
</p> */}
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>

19
themes/heo/components/BlogPostCard.js
View File

@@ -2,7 +2,7 @@ import Link from 'next/link'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import TagItemMini from './TagItemMini'
// import Image from 'next/image'
import LazyImage from '@/components/LazyImage'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
@@ -13,15 +13,20 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
return (
<div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
<div className={'animate__animated animate__fadeIn animate__fast border bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
<div
data-aos="fade-up"
data-aos-duration="200"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className={'border bg-white dark:bg-[#1e1e1e] flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
{/* 图片封面 */}
{showPageCover && (
<div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className={'h-60 bg-center bg-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
</Link>
</div>
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
<LazyImage priority={index === 0} src={post?.pageCoverThumbnail} alt={post?.title} className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300' />
</div>
</Link>
)}
{/* 文字区块 */}

19
themes/heo/components/BlogPostListPage.js
View File

@@ -18,15 +18,16 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
return <BlogPostListEmpty />
} else {
return (
<div id="container" className='w-full'>
{/* 文章列表 */}
<div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
{posts?.map(post => (
<BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
))}
</div>
{showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
</div>
<div id="container" className='w-full'>
{/* 文章列表 */}
<div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
{posts?.map(post => (
<BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo} />
))}
</div>
{showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
</div>
)
}
}

3
themes/heo/components/FloatTocButton.js
View File

@@ -28,8 +28,7 @@ export default function FloatTocButton(props) {
<div className='fixed top-0 right-0 z-40 '>
{/* 侧边菜单 */}
<div
className={`${tocVisible ? 'shadow-card ' : ' -mr-72 opacity-0'}
w-60 duration-200 fixed right-4 bottom-12 rounded-xl py-2 bg-white dark:bg-gray-900'`}>
className={`${tocVisible ? 'shadow-card ' : ' -mr-72 opacity-0'} dark:bg-black w-60 duration-200 fixed right-4 bottom-12 rounded-xl py-2 bg-white dark:bg-gray-900'`}>
{post && <>
<div className='dark:text-gray-400 text-gray-600'>
<Catalog toc={post.toc} />

18
themes/heo/components/Hero.js
View File

@@ -2,7 +2,7 @@
import BLOG from '@/blog.config'
import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
import LazyImage from '@/components/LazyImage'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useImperativeHandle, useRef, useState } from 'react'
@@ -62,7 +62,7 @@ function Banner(props) {
router.push(randomPost.slug)
}
return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
return <div id='banners' onClick={handleClickBanner} className="hidden xl:flex xl:flex-col group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative overflow-hidden">
<div id='banner-title' className='flex flex-col absolute top-10 left-10'>
<div className='text-4xl font-bold mb-3 dark:text-white'>{CONFIG.HERO_TITLE_1}<br />{CONFIG.HERO_TITLE_2}</div>
@@ -89,18 +89,17 @@ function Banner(props) {
*/
function TagsGroupBar() {
const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
return (
<div className="tags-group-all flex -rotate-[30deg]">
<div className="tags-group-all flex -rotate-[30deg] ">
<div className="tags-group-wrapper flex flex-nowrap absolute top-16">
{groupIcons?.map((g, index) => {
return (<div key={index} className="tags-group-icon-pair ml-6 select-none">
<div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={g.img_1} title={g.title_1} className='w-2/3' />
<LazyImage priority={true} src={g.img_1} title={g.title_1} className='w-2/3 hidden xl:block' />
</div>
<div style={{ background: g.color_2 }} className={'tags-group-icon mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={g.img_2} title={g.title_2} className='w-2/3' />
<LazyImage priority={true} src={g.img_2} title={g.title_2} className='w-2/3 hidden xl:block' />
</div>
</div>)
})}
@@ -160,13 +159,12 @@ function TopGroup(props) {
}
return (
<div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
{/* 制定最新文章 */}
{/* 置顶最新文章 */}
<div id='top-group' className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3 xl:h-[342px]'>
{latestPosts?.map((p, index) => {
return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={index}>
<div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl'>
{/* eslint-disable-next-line */}
<img className='h-24 object-cover' alt={p?.title} src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
<LazyImage priority={index === 0} className='h-24 object-cover' alt={p?.title} src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
<div className='group-hover:text-indigo-600 dark:group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold'>{p?.title}</div>
{/* hover 悬浮的 ‘荐’ 字 */}
<div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600 text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>

4
themes/heo/components/InfoCard.js
View File

@@ -1,5 +1,6 @@
import BLOG from '@/blog.config'
import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
import LazyImage from '@/components/LazyImage'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
@@ -25,8 +26,7 @@ export function InfoCard(props) {
{/* 问候语 */}
<GreetingsWords />
<div className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-5 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={BLOG.AUTHOR} />
<LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={BLOG.AUTHOR} />
</div>
</div>

5
themes/heo/components/LatestPostsGroup.js
View File

@@ -1,5 +1,5 @@
import BLOG from '@/blog.config'
// import Image from 'next/image'
import LazyImage from '@/components/LazyImage'
import Link from 'next/link'
/**
@@ -27,8 +27,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
className={'my-3 flex flex-col w-full'}>
<div className="w-full h-24 md:h-60 overflow-hidden relative rounded-lg mb-2">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={`${headerImage}`} className='object-cover w-full h-full' />
<LazyImage src={`${headerImage}`} className='object-cover w-full h-full' />
</div>
<div

4
themes/heo/components/LatestPostsGroupMini.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import { useGlobal } from '@/lib/global'
// import Image from 'next/image'
import Link from 'next/link'
@@ -40,8 +41,7 @@ export default function LatestPostsGroupMini ({ latestPosts, siteInfo }) {
className={'my-3 flex'}>
<div className="w-20 h-14 overflow-hidden relative">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={`${headerImage}`} className='object-cover w-full h-full rounded-lg'/>
<LazyImage src={`${headerImage}`} className='object-cover w-full h-full rounded-lg'/>
</div>
<div
className={

4
themes/heo/components/Logo.js
View File

@@ -1,5 +1,6 @@
import BLOG from '@/blog.config'
import { Home } from '@/components/HeroIcons'
import LazyImage from '@/components/LazyImage'
import Link from 'next/link'
import React from 'react'
@@ -8,8 +9,7 @@ const Logo = props => {
return (
<Link href='/' passHref legacyBehavior>
<div className='flex flex-nowrap justify-center items-center cursor-pointer font-extrabold'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
<LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
<div id='logo-text' className='group rounded-2xl flex-none relative'>
<div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
{siteInfo?.title || BLOG.TITLE}

2
themes/heo/components/MenuItemDrop.js
View File

@@ -29,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
{link.subMenus.map((sLink, index) => {
return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-700 py-1 pr-6 pl-3'>
return <li key={index} className='cursor-pointer hover:bg-blue-600 hover:text-white text-gray-900 tracking-widest transition-all duration-200 dark:border-gray-700 py-1 pr-6 pl-3'>
<Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>

4
themes/heo/components/PaginationNumber.js
View File

@@ -98,7 +98,7 @@ const PaginationNumber = ({ page, totalPage }) => {
query: router.query.s ? { s: router.query.s } : {}
}}
rel="prev"
className={`${showPrev ? 'block' : 'hidden'} relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
{locale.PAGINATION.PREV}
</Link>
@@ -111,7 +111,7 @@ const PaginationNumber = ({ page, totalPage }) => {
query: router.query.s ? { s: router.query.s } : {}
}}
rel="next"
className={`${+showNext ? 'block' : 'hidden'} relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
{locale.PAGINATION.NEXT}
</Link>
</div>

4
themes/heo/components/PostHeader.js
View File

@@ -4,6 +4,7 @@ import NotionIcon from '@/components/NotionIcon'
import WavesArea from './WavesArea'
import { HashTag } from '@/components/HeroIcons'
import WordCount from '@/components/WordCount'
import LazyImage from '@/components/LazyImage'
export default function PostHeader({ post, siteInfo }) {
if (!post) {
@@ -30,8 +31,7 @@ export default function PostHeader({ post, siteInfo }) {
{/* 文章背景图 */}
<div id='post-cover-wrapper' style={{ filter: 'blur(15px)' }} className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img id='post-cover' className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]' src={headerImage} />
<LazyImage id='post-cover' className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]' src={headerImage} />
</div>
{/* 文章文字描述 */}

2
themes/heo/components/ReadingProgress.js
View File

@@ -13,7 +13,7 @@ export default function ReadingProgress() {
const clientHeight = document.documentElement.clientHeight
const scrollY = window.scrollY || window.pageYOffset
const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100)
const percent = Math.floor((scrollY / (scrollHeight - clientHeight - 20)) * 100)
setScrollPercentage(percent)
}

3
themes/heo/components/SideBar.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import { useRouter } from 'next/router'
import MenuGroupCard from './MenuGroupCard'
import { MenuListSide } from './MenuListSide'
@@ -20,7 +21,7 @@ const SideBar = (props) => {
<div onClick={() => { router.push('/') }}
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
<LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
</div>
<MenuGroupCard {...props} />
</div>

56
themes/heo/index.js
View File

@@ -30,6 +30,7 @@ import { HashTag } from '@/components/HeroIcons'
import LatestPostsGroup from './components/LatestPostsGroup'
import FloatTocButton from './components/FloatTocButton'
import replaceSearchResult from '@/components/Mark'
import LazyImage from '@/components/LazyImage'
/**
* 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -39,7 +40,6 @@ import replaceSearchResult from '@/components/Mark'
*/
const LayoutBase = props => {
const { children, headerSlot, slotTop, slotRight, meta, siteInfo, className } = props
const { onLoading } = useGlobal()
return (
<div id='theme-heo' className='bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col'>
@@ -54,40 +54,17 @@ const LayoutBase = props => {
<main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative md:px-5'}>
<div id="container-inner" className={'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
<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"
className={`w-full h-auto ${className || ''}`}
unmount={false}
>
<div className={`w-full h-auto ${className || ''}`}>
{/* 主区上部嵌入 */}
{slotTop}
{children}
</Transition>
</div>
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
<div>
{/* 主区快右侧 */}
{slotRight}
</div>
</Transition>
</div>
</main>
@@ -233,7 +210,12 @@ const LayoutSlug = props => {
// 右侧栏
const slotRight = <SideRight {...props} />
const headerSlot = <header className='post-bg'>
const headerSlot = <header
data-aos="fade-up"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className='post-bg'>
{/* 顶部导航 */}
<div id='nav-bar-wrapper'><NavBar {...props} /></div>
<PostHeader {...props} />
@@ -246,7 +228,12 @@ const LayoutSlug = props => {
{!lock && <div id="article-wrapper" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
<article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
<article
data-aos="fade-up"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
{/* Notion文章主体 */}
<section className='px-5 justify-center mx-auto'>
{post && <NotionPage post={post} />}
@@ -321,8 +308,7 @@ const Layout404 = props => {
{/* 404卡牌 */}
<div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-3xl'>
{/* 左侧动图 */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
<LazyImage className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></LazyImage>
{/* 右侧文字 */}
<div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
@@ -395,9 +381,9 @@ const LayoutTagIndex = props => {
const { tagOptions } = props
const { locale } = useGlobal()
const headerSlot = <header>
{/* 顶部导航 */}
<div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
</header>
{/* 顶部导航 */}
<div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
</header>
return (
<LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
<div id='tag-outer-wrapper' className='px-5 lg:px-0'>

2
themes/heo/style.js
View File

@@ -12,7 +12,7 @@ const Style = () => {
}
// 公告栏中的字体固定白色
#announcement-content .notion{
#theme-heo #announcement-content .notion{
color: white;
}

77
themes/hexo/components/ArticleRecommend.js
View File

@@ -2,6 +2,7 @@ import Link from 'next/link'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import LazyImage from '@/components/LazyImage'
/**
* 关联推荐文章
@@ -13,53 +14,47 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
if (
!CONFIG.ARTICLE_RECOMMEND ||
!recommendPosts ||
recommendPosts.length === 0
!recommendPosts ||
recommendPosts.length === 0
) {
return <></>
}
return (
<div className="pt-8">
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div className='dark:text-gray-300'>
<i className="mr-2 fas fa-thumbs-up" />
{locale.COMMON.RELATE_POSTS}
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{recommendPosts.map(post => {
const headerImage = post?.pageCoverThumbnail
? `url("${post.pageCoverThumbnail}")`
: `url("${siteInfo?.pageCover}")`
return (
(<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className="flex h-40 cursor-pointer overflow-hidden">
<div
className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
style={{ backgroundImage: headerImage }}
>
<div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
<div className=" text-sm text-white text-center shadow-text">
<div>
<i className="fas fa-calendar-alt mr-1" />
{post.date?.start_date}
</div>
<div className="">{post.title}</div>
</div>
<div className="pt-8">
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div className='dark:text-gray-300'>
<i className="mr-2 fas fa-thumbs-up" />
{locale.COMMON.RELATE_POSTS}
</div>
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{recommendPosts.map(post => {
const headerImage = post?.pageCoverThumbnail
? post.pageCoverThumbnail
: siteInfo?.pageCover
</Link>)
)
})}
</div>
</div>
return (
(<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className="flex h-40 cursor-pointer overflow-hidden">
<div className="h-full w-full relative group">
<div className="flex items-center justify-center w-full h-full duration-300 ">
<div className="z-10 text-lg px-4 font-bold text-white text-center shadow-text select-none">
{post.title}
</div>
</div>
<LazyImage src={headerImage} className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200' />
</div>
</Link>)
)
})}
</div>
</div>
)
}

8
themes/hexo/components/BlogPostCard.js
View File

@@ -3,6 +3,7 @@ import React from 'react'
import CONFIG from '../config'
import { BlogPostCardInfo } from './BlogPostCardInfo'
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
// import Image from 'next/image'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
@@ -16,15 +17,14 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
return (
<div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
<div
<div key={post.id}
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="800"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
id='blog-post-card'
key={post.id}
className={`md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
{/* 文字内容 */}
@@ -34,7 +34,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
{showPageCover && (
<div className="md:w-5/12 overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
<LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500' />
</Link>
</div>
)}

5
themes/hexo/components/Hero.js
View File

@@ -5,6 +5,7 @@ import CONFIG from '../config'
import NavButtonGroup from './NavButtonGroup'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
let wrapperTop = 0
@@ -72,8 +73,8 @@ const Hero = props => {
</div>
</div>
<div id='header-cover' style={{ backgroundImage: `url('${siteInfo?.pageCover}')` }}
className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`} />
<LazyImage id='header-cover' src={siteInfo?.pageCover}
className={`header-cover w-full h-screen object-cover object-center ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`} />
</header>
)

3
themes/hexo/components/InfoCard.js
View File

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
import Card from './Card'
import SocialButton from './SocialButton'
import MenuGroupCard from './MenuGroupCard'
import LazyImage from '@/components/LazyImage'
/**
* 社交信息卡
@@ -21,7 +22,7 @@ export function InfoCard(props) {
}}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
<LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
</div>
<div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
<div className='text-sm text-center'>{BLOG.BIO}</div>

12
themes/hexo/components/LatestPostsGroup.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import { useGlobal } from '@/lib/global'
// import Image from 'next/image'
import Link from 'next/link'
@@ -40,16 +41,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
className={'my-3 flex'}>
<div className="w-20 h-14 overflow-hidden relative">
{/* <Image
src={headerImage}
fill
style={{ objectFit: 'cover' }}
placeholder='blur'
blurDataURL='/bg_image.jpg'
quality={10}
alt={post.title} /> */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={`${headerImage}`} className='object-cover w-full h-full'/>
<LazyImage src={`${headerImage}`} className='object-cover w-full h-full'/>
</div>
<div
className={

11
themes/hexo/components/PostHeader.js
View File

@@ -3,6 +3,7 @@ import TagItemMini from './TagItemMini'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import NotionIcon from '@/components/NotionIcon'
import LazyImage from '@/components/LazyImage'
export default function PostHeader({ post, siteInfo }) {
const { locale } = useGlobal()
@@ -10,14 +11,12 @@ export default function PostHeader({ post, siteInfo }) {
if (!post) {
return <></>
}
const headerImage = post?.pageCover ? `url("${post.pageCover}")` : `url("${siteInfo?.pageCover}")`
const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
return (
<div
id="header"
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10"
style={{ backgroundImage: headerImage }}
>
<div id="header" className="w-full h-96 relative md:flex-shrink-0 z-10" >
<LazyImage priority={true} src={headerImage} className='w-full h-full object-cover object-center absolute top-0'/>
<header id='article-header-cover'
className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">

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

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import { useRouter } from 'next/router'
import MenuGroupCard from './MenuGroupCard'
import { MenuListSide } from './MenuListSide'
@@ -19,8 +20,7 @@ const SideBar = (props) => {
<div>
<div onClick={() => { router.push('/') }}
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
<LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
</div>
<MenuGroupCard {...props} />
</div>

4
themes/hexo/components/SlotBar.js
View File

@@ -10,9 +10,9 @@ export default function SlotBar(props) {
if (tag) {
return <div className="cursor-pointer px-3 py-2 mb-2 font-light hover:text-indigo-700 dark:hover:text-indigo-400 transform dark:text-white">
<Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref
<Link key={tag} href={`/tag/${encodeURIComponent(tag)}`} passHref
className={'cursor-pointer inline-block rounded duration-200 mr-2 py-0.5 px-1 text-xl whitespace-nowrap '}>
<div className='font-light dark:text-gray-400 dark:hover:text-white'> #{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
<div className='font-light dark:text-gray-400 dark:hover:text-white'> #{tag} </div>
</Link>
</div>
} else if (category) {

4
themes/hexo/index.js
View File

@@ -59,9 +59,9 @@ const LayoutBase = props => {
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 -translate-y-16"
enterTo="opacity-100 translate-y-0"
enterTo="opacity-100"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveFrom="opacity-100"
leaveTo="opacity-0 translate-y-16"
unmount={false}
>

9
themes/landing/components/Features.js
View File

@@ -4,6 +4,7 @@
import { useState, useRef, useEffect } from 'react'
import { Transition } from '@headlessui/react'
import CONFIG from '../config'
import LazyImage from '@/components/LazyImage'
// import FeaturesElement from '@/public/images/features-element.png'
export default function Features() {
@@ -113,9 +114,7 @@ export default function Features() {
unmount={false}
>
<div className="relative inline-flex flex-col">
{/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" /> */}
{/* <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
<img src='/images/feature-1.webp'></img>
<LazyImage src='/images/feature-1.webp'/>
</div>
</Transition>
@@ -136,7 +135,7 @@ export default function Features() {
<div className="relative inline-flex flex-col">
{/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
<Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
<img src='/images/feature-2.webp'></img>
<LazyImage src='/images/feature-2.webp'/>
</div>
</Transition>
{/* Item 3 */}
@@ -156,7 +155,7 @@ export default function Features() {
<div className="relative inline-flex flex-col">
{/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
<Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
<img src='/images/feature-3.webp'></img>
<LazyImage src='/images/feature-3.webp'/>
</div>
</Transition>
</div>

4
themes/landing/components/ModalVideo.js
View File

@@ -3,6 +3,7 @@
import { useState, useRef, Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import CONFIG from '../config'
import LazyImage from '@/components/LazyImage'
export default function ModalVideo({
thumb,
@@ -23,8 +24,7 @@ export default function ModalVideo({
<div>
<div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
<div className="flex flex-col justify-center">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
<LazyImage src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
<svg className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto" width="768" height="432" viewBox="0 0 768 432" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="hero-ill-a">

4
themes/landing/components/Testimonials.js
View File

@@ -1,7 +1,7 @@
/* eslint-disable @next/next/no-img-element */
// import Image from 'next/image'
// import TestimonialImage from '@/public/images/testimonial.jpg'
import LazyImage from '@/components/LazyImage'
import CONFIG from '../config'
export default function Testimonials() {
@@ -44,7 +44,7 @@ export default function Testimonials() {
<svg className="absolute top-0 right-0 -mt-3 -mr-8 w-16 h-16 fill-current text-blue-500" viewBox="0 0 64 64" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<path d="M37.89 58.338c-2.648-5.63-3.572-10.045-2.774-13.249.8-3.203 8.711-13.383 23.737-30.538l2.135.532c-6.552 10.033-10.532 17.87-11.939 23.515-.583 2.34.22 6.158 2.41 11.457l-13.57 8.283zm-26.963-6.56c-2.648-5.63-3.572-10.046-2.773-13.25.799-3.203 8.71-13.382 23.736-30.538l2.136.533c-6.552 10.032-10.532 17.87-11.94 23.515-.583 2.339.22 6.158 2.41 11.456l-13.57 8.283z" />
</svg>
<img className="relative rounded-full w-20 h-20 object-cover" src={CONFIG.TESTIMONIALS_AVATAR} alt="Testimonial 01" />
<LazyImage className="relative rounded-full w-20 h-20 object-cover" src={CONFIG.TESTIMONIALS_AVATAR} alt="Testimonial 01" />
</div>
<blockquote className="text-xl font-medium mb-4">
{CONFIG.TESTIMONIALS_WORD}

83
themes/matery/components/ArticleRecommend.js
View File

@@ -2,6 +2,7 @@ import Link from 'next/link'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import LazyImage from '@/components/LazyImage'
/**
* 关联推荐文章
@@ -13,53 +14,53 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
if (
!CONFIG.ARTICLE_RECOMMEND ||
!recommendPosts ||
recommendPosts.length === 0
!recommendPosts ||
recommendPosts.length === 0
) {
return <></>
}
return (
<div className="p-2">
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div>
<i className="mr-2 fas fa-thumbs-up" />
{locale.COMMON.RELATE_POSTS}
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{recommendPosts.map(post => {
const headerImage = post?.pageCoverThumbnail
? `url("${post.pageCoverThumbnail}")`
: `url("${siteInfo?.pageCover}")`
return (
(<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className="flex h-40 cursor-pointer overflow-hidden">
<div
className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
style={{ backgroundImage: headerImage }}
>
<div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
<div className=" text-sm text-white text-center shadow-text">
<div>
<i className="fas fa-calendar-alt mr-1" />
{post.date?.start_date}
</div>
<div className="hover:underline">{post.title}</div>
</div>
<div className="p-2">
<div className="mb-2 px-1 flex flex-nowrap justify-between">
<div>
<i className="mr-2 fas fa-thumbs-up" />
{locale.COMMON.RELATE_POSTS}
</div>
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{recommendPosts.map(post => {
const headerImage = post?.pageCoverThumbnail
? post.pageCoverThumbnail
: siteInfo?.pageCover
</Link>)
)
})}
</div>
</div>
return (
(<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className="flex h-40 cursor-pointer overflow-hidden">
<div className="h-full w-full group" >
<LazyImage src={headerImage} className="h-full w-full object-cover object-center group-hover:scale-110 transform duration-200" />
<div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
<div className="text-sm text-white text-center shadow-text">
<div>
<i className="fas fa-calendar-alt mr-1" />
{post.date?.start_date}
</div>
<div className="hover:underline">{post.title}</div>
</div>
</div>
</div>
</Link>)
)
})}
</div>
</div>
)
}

15
themes/matery/components/BlogPostCard.js
View File

@@ -4,6 +4,7 @@ import React from 'react'
import TagItemMini from './TagItemMini'
import CONFIG from '../config'
import TwikooCommentCount from '@/components/TwikooCommentCount'
import LazyImage from '@/components/LazyImage'
// import Image from 'next/image'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
@@ -21,23 +22,21 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
data-aos-delay={delay}
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="w-full mb-4 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
className="w-full mb-4 overflow-hidden shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
{/* 固定高度 ，空白用图片拉升填充 */}
<div className="flex flex-col h-80 justify-between">
<div className="group flex flex-col h-80 justify-between">
{/* 头部图片 填充卡片 */}
{showPageCover && (
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div
className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
<div className="flex flex-grow w-full relative duration-200 = rounded-t-md cursor-pointer transform overflow-hidden">
<LazyImage
src={post?.pageCoverThumbnail}
alt={post.title}
className="opacity-50 h-full w-full hover:scale-125 rounded-t-md transform object-cover duration-500"
className="h-full w-full group-hover:scale-125 group-hover:brightness-50 brightness-90 rounded-t-md transform object-cover duration-500"
/>
<span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full' > {post.title}</span>
<div className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full shadow-text'>{post.title}</div>
</div>
</Link>
)}

5
themes/matery/components/Hero.js
View File

@@ -4,6 +4,7 @@ import Typed from 'typed.js'
import CONFIG from '../config'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
let wrapperTop = 0
@@ -64,8 +65,8 @@ const Hero = props => {
</div>
</div>
<div id='header-cover' style={{ backgroundImage: `url('${siteInfo?.pageCover}')` }}
className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`} />
<LazyImage priority={true} id='header-cover'src={siteInfo?.pageCover}
className={`header-cover object-center w-full h-screen object-cover ${CONFIG.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`} />
</header>
)

4
themes/matery/components/InfoCard.js
View File

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
import Card from './Card'
import SocialButton from './SocialButton'
import MenuGroupCard from './MenuGroupCard'
import LazyImage from '@/components/LazyImage'
export function InfoCard (props) {
const { className, siteInfo } = props
const router = useRouter()
@@ -13,8 +14,7 @@ export function InfoCard (props) {
router.push('/')
}}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
<LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
</div>
<div className='text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
<div className='text-sm text-center'>{BLOG.BIO}</div>

64
themes/matery/components/LatestPostsGroup.js
View File

@@ -1,64 +0,0 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
/**
* 最新文章列表
* @param posts 所有文章数据
* @param sliceCount 截取展示的数量 默认6
* @constructor
*/
const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
// 获取当前路径
const currentPath = useRouter().asPath
const { locale } = useGlobal()
if (!latestPosts) {
return <></>
}
return <>
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div>
<i className="mr-2 fas fas fa-history" />
{locale.COMMON.LATEST_POSTS}
</div>
</div>
{latestPosts.map(post => {
const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
const headerImage = post?.pageCoverThumbnail
? `url("${post.pageCoverThumbnail}")`
: `url("${siteInfo?.pageCover}")`
return (
(<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={'my-2 flex'}>
<div
className="w-20 h-16 bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: headerImage }}
/>
<div
className={
(selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
'hover:text-white dark:hover:text-indigo-400 cursor-pointer items-center flex'
}
>
<div>
<div className='line-clamp-2'>{post.title}</div>
<div className="text-gray-500">{post.lastEditedTime}</div>
</div>
</div>
</Link>)
)
})}
</>
}
export default LatestPostsGroup

14
themes/matery/components/PostHeader.js
View File

@@ -1,4 +1,4 @@
import Image from 'next/image'
import LazyImage from '@/components/LazyImage'
/**
* 文章背景图
@@ -8,17 +8,11 @@ export default function PostHeader({ post, siteInfo }) {
const title = post?.title
return (
<div id='header' className="flex h-96 justify-center align-middle items-center w-full relative bg-black">
{/* eslint-disable-next-line @next/next/no-img-element */}
{/* <img
src={headerImage}
alt={title}
className="opacity-50 dark:opacity-40 h-full w-full object-cover"
/> */}
<Image alt={title} src={headerImage} fill style={{ objectFit: 'cover' }} className='opacity-50'
placeholder='blur' blurDataURL='/bg_image.jpg' />
<div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
<div className="z-10 leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
{title}
</div>
<LazyImage alt={title} src={headerImage} className='pointer-events-none select-none w-full h-full object-cover opacity-30 absolute'
placeholder='blur' blurDataURL='/bg_image.jpg' />
</div>
)
}

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

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import { MenuListSide } from './MenuListSide'
/**
@@ -15,8 +16,7 @@ const SideBar = (props) => {
<div id='side-bar'>
<div className="mh-48 w-full bg-indigo-700">
<div className='mx-5 pt-6 pb-2'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
<LazyImage src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
<div className='text-white text-xl my-1'>{siteInfo?.title}</div>
<div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
</div>

60
themes/matery/components/SideRight.js
View File

@@ -1,60 +0,0 @@
import Card from './Card'
import CategoryGroup from './CategoryGroup'
import LatestPostsGroup from './LatestPostsGroup'
import TagGroups from './TagGroups'
import Catalog from './Catalog'
import { InfoCard } from './InfoCard'
import { AnalyticsCard } from './AnalyticsCard'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
/**
* Hexo主题右侧栏
* @param {*} props
* @returns
*/
export default function SideRight(props) {
const {
post, currentCategory, categories, latestPosts, tags,
currentTag, showCategory, showTag, slot
} = props
return (
<div className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
<InfoCard {...props} />
{CONFIG.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}
{showCategory && (
<Card>
<div className='ml-2 mb-1 '>
<i className='fas fa-th' /> 分类
</div>
<CategoryGroup
currentCategory={currentCategory}
categories={categories}
/>
</Card>
)}
{showTag && (
<Card>
<TagGroups tags={tags} currentTag={currentTag} />
</Card>
)}
{CONFIG.WIDGET_LATEST_POSTS && latestPosts && latestPosts.length > 0 && <Card>
<LatestPostsGroup {...props} />
</Card>}
{BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <HexoRecentComments/>}
<div className='sticky top-20'>
{post && post.toc && post.toc.length > 1 && <Card>
<Catalog toc={post.toc} />
</Card>}
{slot}
</div>
</div>
)
}

4
themes/medium/components/ArticleInfo.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import formatDate from '@/lib/formatDate'
import Link from 'next/link'
@@ -28,8 +29,7 @@ export default function ArticleInfo(props) {
</div>
<Link href="/about" passHref legacyBehavior>
<div className='flex pt-2'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
<LazyImage src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
<div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
{BLOG.AUTHOR}

4
themes/medium/components/BlogPostCard.js
View File

@@ -7,6 +7,7 @@ import CONFIG from '../config'
import CategoryItem from './CategoryItem'
import TagItemMini from './TagItemMini'
import TwikooCommentCount from '@/components/TwikooCommentCount'
import LazyImage from '@/components/LazyImage'
const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
@@ -30,8 +31,7 @@ const BlogPostCard = ({ post, showSummary }) => {
}>
<div>
{CONFIG.POST_LIST_COVER && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={post.pageCoverThumbnail} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
<LazyImage src={post.pageCoverThumbnail} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
</div>}
{post.title}
</div>

4
themes/medium/components/InfoCard.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import Router from 'next/router'
import React from 'react'
import SocialButton from './SocialButton'
@@ -8,8 +9,7 @@ const InfoCard = (props) => {
return <div id='info-card' className='py-4'>
<div className='items-center justify-center'>
<div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
<LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
</div>
<div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
<div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>

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

@@ -12,6 +12,7 @@ import WordCount from './WordCount'
import NotionPage from '@/components/NotionPage'
import CONFIG from '../config'
import NotionIcon from '@/components/NotionIcon'
import LazyImage from '@/components/LazyImage'
/**
*
@@ -39,8 +40,7 @@ export default function ArticleDetail(props) {
{/* 头图 */}
{CONFIG.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.pageCover && (
<div className="w-full relative md:flex-shrink-0 overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img alt={post.title} src={post?.pageCover} className='object-center w-full' />
<LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
</div>
)}

115
themes/next/components/Header.js
View File

@@ -1,115 +0,0 @@
import { useGlobal } from '@/lib/global'
import { useEffect, useState } from 'react'
import Typed from 'typed.js'
import CONFIG from '../config'
let wrapperTop = 0
let windowTop = 0
let autoScroll = false
/**
*
* @returns 头图
*/
export default function Header(props) {
const { siteInfo } = props
const [typed, changeType] = useState()
useEffect(() => {
if (!typed && window && document.getElementById('typed')) {
changeType(
new Typed('#typed', {
strings: CONFIG.HOME_BANNER_Strings,
typeSpeed: 200,
backSpeed: 100,
backDelay: 400,
showCursor: true,
smartBackspace: true
})
)
}
}, [])
const { isDarkMode } = 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 (!isDarkMode) {
const stickyNavElement = document.getElementById('sticky-nav')
if (window.scrollY < window.innerHeight) {
stickyNavElement.classList.add('dark')
} else {
stickyNavElement.classList.remove('dark')
}
}
}
function updateHeaderHeight() {
setTimeout(() => {
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 relative z-10"
style={{
backgroundImage:
`linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo?.pageCover}")`
}}
>
<div className="absolute flex h-full items-center lg:-mt-14 justify-center w-full text-2xl md:text-4xl 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"
>
<i className='animate-bounce fas fa-angle-down' />
</div>
</header>
)
}

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

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import Router from 'next/router'
import React from 'react'
import SocialButton from './SocialButton'
@@ -8,8 +9,7 @@ const InfoCard = (props) => {
return <>
<div className='flex flex-col items-center justify-center '>
<div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
<LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
</div>
<div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
<div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>

2
themes/next/config.js
View File

@@ -1,6 +1,6 @@
const CONFIG = {
HOME_BANNER: false, // 首页是否显示大图及标语 [true,false]
HOME_BANNER: true, // 首页是否显示大图及标语 [true,false]
HOME_BANNER_Strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
NAV_TYPE: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部并始终显示、固定屏幕顶部且滚动时隐藏，不固定屏幕顶部

3
themes/next/index.js
View File

@@ -11,7 +11,6 @@ import TopNav from './components/TopNav'
import { useGlobal } from '@/lib/global'
import { useEffect, useRef, useState } from 'react'
import BLOG from '@/blog.config'
import Header from './components/Header'
import BlogPostListScroll from './components/BlogPostListScroll'
import BlogPostListPage from './components/BlogPostListPage'
import StickyBar from './components/StickyBar'
@@ -133,7 +132,7 @@ const LayoutBase = (props) => {
* @returns
*/
const LayoutIndex = (props) => {
return <LayoutPostList headerSlot={CONFIG.HOME_BANNER && <Header {...props} />} {...props} />
return <LayoutPostList {...props} />
}
/**

5
themes/nobelium/components/BlogListScroll.js
View File

@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import React from 'react'
import throttle from 'lodash.throttle'
import { deepClone } from '@/lib/utils'
export const BlogListScroll = props => {
const { posts } = props
@@ -11,8 +12,8 @@ export const BlogListScroll = props => {
const [page, updatePage] = React.useState(1)
let hasMore = false
const postsToShow = posts
? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
const postsToShow = posts && Array.isArray(posts)
? deepClone(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
: []
if (posts) {

4
themes/nobelium/components/Nav.js
View File

@@ -7,6 +7,7 @@ import { SvgIcon } from './SvgIcon'
import { MenuItemDrop } from './MenuItemDrop'
import Collapse from '@/components/Collapse'
import { MenuItemCollapse } from './MenuItemCollapse'
import LazyImage from '@/components/LazyImage'
const Nav = props => {
const { navBarTitle, fullWidth, siteInfo } = props
@@ -47,8 +48,7 @@ const Nav = props => {
<div className="h-6 w-6">
{/* <SvgIcon/> */}
{CONFIG.NAV_NOTION_ICON
/* eslint-disable-next-line @next/next/no-img-element */
? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
: <SvgIcon />}
</div>

7
themes/plog/components/BlogPost.js
View File

@@ -2,6 +2,7 @@ import { compressImage } from '@/lib/notion/mapImage'
import Link from 'next/link'
import { usePlogGlobal } from '..'
import { isMobile } from '@/lib/utils'
import LazyImage from '@/components/LazyImage'
/**
* 博客照片卡牌
@@ -32,8 +33,9 @@ const BlogPost = (props) => {
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
key={post?.id} className='cursor-pointer relative'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
<LazyImage src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
<h2 className="text-md absolute left-0 bottom-0 m-4 text-black dark:text-gray-100 text-shadow">
{post?.title}
</h2>
@@ -42,6 +44,7 @@ const BlogPost = (props) => {
{post?.category}
</Link>
</div>}
</article>
)

5
themes/plog/components/LogoBar.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import Link from 'next/link'
import CONFIG from '../config'
import { SvgIcon } from './SvgIcon'
@@ -14,10 +15,8 @@ export default function LogoBar(props) {
return <div className="flex items-center">
<Link href="/" aria-label={BLOG.title}>
<div className="h-6 w-6">
{/* <SvgIcon/> */}
{CONFIG.NAV_NOTION_ICON
/* eslint-disable-next-line @next/next/no-img-element */
? <img src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={BLOG.AUTHOR} />
? <LazyImage src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={BLOG.AUTHOR} />
: <SvgIcon />}
</div>
</Link>

8
themes/plog/components/Modal.js
View File

@@ -4,6 +4,7 @@ import { usePlogGlobal } from '..'
import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
import Link from 'next/link'
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
/**
* 弹出框
@@ -31,23 +32,23 @@ export default function Modal(props) {
// 修改当前显示的遮罩内容
function prev() {
setLoading(true)
const index = posts.findIndex(post => post.slug === modalContent.slug)
if (index === 0) {
setModalContent(posts[posts.length - 1])
} else {
setModalContent(posts[index - 1])
}
setLoading(true)
}
// 下一个
const next = () => {
setLoading(true)
const index = posts.findIndex(post => post.slug === modalContent.slug)
if (index === posts.length - 1) {
setModalContent(posts[0])
} else {
setModalContent(posts[index + 1])
}
setLoading(true)
}
return (
@@ -84,8 +85,7 @@ export default function Modal(props) {
</div>
{/* 添加onLoad事件处理函数 */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={img} ref={imgRef} className={`w-full max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`} onLoad={handleImageLoad} style={{ display: loading ? 'none' : 'block' }} />
<LazyImage onLoad={handleImageLoad} src={img} ref={imgRef} style={{ display: loading ? 'none' : 'block' }} className={`w-full max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`} />
{!loading && (<>
<div className='absolute bottom-0 left-0 m-4 z-20'>

4
themes/plog/components/Nav.js
View File

@@ -7,6 +7,7 @@ import { SvgIcon } from './SvgIcon'
import { MenuItemDrop } from './MenuItemDrop'
import Collapse from '@/components/Collapse'
import { MenuItemCollapse } from './MenuItemCollapse'
import LazyImage from '@/components/LazyImage'
const Header = props => {
const { fullWidth, siteInfo } = props
@@ -22,8 +23,7 @@ const Header = props => {
<div className="h-6 w-6">
{/* <SvgIcon/> */}
{CONFIG.NAV_NOTION_ICON
/* eslint-disable-next-line @next/next/no-img-element */
? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
: <SvgIcon />}
</div>

6
themes/simple/components/Header.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config'
import LazyImage from '@/components/LazyImage'
import Link from 'next/link'
import CONFIG from '../config'
import SocialButton from './SocialButton'
@@ -17,12 +18,9 @@ export const Header = (props) => {
<div className="float-none inline-block py-12">
<Link href='/'>
{/* 可使用一张单图作为logo */}
{/* eslint-disable-next-line @next/next/no-img-element */}
{/* <img className='max-h-48 hover:opacity-60 duration-200 transition-all cursor-pointer' src={CONFIG.LOGO_IMG}/> */}
<div className='flex space-x-6'>
<div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={avatar} className='rounded-full' width={130} height={130} alt={BLOG.AUTHOR} />
<LazyImage src={avatar} className='rounded-full' width={130} height={130} alt={BLOG.AUTHOR} />
</div>
<div className='flex-col flex justify-center'>