Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
tangly1024 committed Jul 22, 2023
2 parents 20994a9 + 3d2db37 commit 4ed9b87
Show file tree
Hide file tree
Showing 68 changed files with 435 additions and 587 deletions.
2 changes: 1 addition & 1 deletion .env.local
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 3 deletions blog.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down Expand Up @@ -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 '#'
Expand Down
106 changes: 58 additions & 48 deletions components/CommonHead.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}

Expand Down
15 changes: 5 additions & 10 deletions components/ExternalScript.js
Original file line number Diff line number Diff line change
@@ -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')

Expand All @@ -28,12 +28,7 @@ const ExternalScript = () => {
loadExternalResource(url, 'css')
}
}
// 渲染所有字体
BLOG.FONT_URL?.forEach(e => {
loadExternalResource(e, 'css')
})
}, [])

}
return null
}

Expand Down
5 changes: 4 additions & 1 deletion components/GoogleAdsense.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ export default function GoogleAdsense() {

const router = useRouter()
useEffect(() => {
initGoogleAdsense()
// 延迟3秒加载
setTimeout(() => {
initGoogleAdsense()
}, 3000)
}, [router])

return null
Expand Down
104 changes: 104 additions & 0 deletions components/LazyImage.js
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 3 deletions components/NotionIcon.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import LazyImage from './LazyImage'

/**
* notion的图标icon
* 可能是emoji 可能是 svg 也可能是 图片
Expand All @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion lib/sitemap.xml.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions pages/_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ const MyApp = ({ Component, pageProps }) => {

return (
<GlobalContextProvider>
<Component {...pageProps}/>
<ExternalPlugins {...pageProps} />
<ExternalScript />
<Component {...pageProps} />
<ExternalPlugins {...pageProps} />
</GlobalContextProvider>
)
}
Expand Down
3 changes: 2 additions & 1 deletion pages/sitemap.xml.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
3 changes: 2 additions & 1 deletion themes/example/components/BlogPostCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
)}
Expand Down
4 changes: 2 additions & 2 deletions themes/fukasawa/components/ArticleDetail.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

/**
*
Expand All @@ -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>
)}

Expand Down
Loading

0 comments on commit 4ed9b87

Please sign in to comment.