mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
Merge branch 'main' into feat/algolia
This commit is contained in:
tangly1024.com
@@ -1,2 +1,2 @@
|
||||
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
|
||||
NEXT_PUBLIC_VERSION=4.0.0
|
||||
NEXT_PUBLIC_VERSION=4.0.5
|
||||
@@ -26,6 +26,7 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'react/no-unknown-property': 'off', // <style jsx>
|
||||
'react/prop-types': 'off',
|
||||
'space-before-function-paren': 0,
|
||||
'react-hooks/rules-of-hooks': 'error' // Checks rules of Hooks
|
||||
|
||||
@@ -34,26 +34,31 @@ const BLOG = {
|
||||
|
||||
NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理，如果不懂得什么是反向代理，请勿修改此项
|
||||
|
||||
// 网站字体
|
||||
BLOG_FAVICON: process.env.NEXT_PUBLIC_FAVICON || '/favicon.ico', // blog favicon 配置, 默认使用 /public/favicon.ico，支持在线图片，如 https://img.imesong.com/favicon.png
|
||||
|
||||
// START ************网站字体*****************
|
||||
|
||||
FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-sans', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
|
||||
// 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
|
||||
FONT_URL: [
|
||||
// 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
|
||||
// 'https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css'
|
||||
'https://fonts.googleapis.com/css?family=Bitter&display=swap',
|
||||
'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
|
||||
'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
|
||||
],
|
||||
// 无衬线字体 例如'"LXGW WenKai"'
|
||||
FONT_SANS: [
|
||||
// 无衬线字体 例如'LXGW WenKai'
|
||||
// '"LXGW WenKai"',
|
||||
'"PingFang SC"',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Hiragino Sans GB"',
|
||||
'"Microsoft YaHei"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
'"Segoe UI"',
|
||||
'"Noto Sans SC"',
|
||||
'HarmonyOS_Regular',
|
||||
'"Microsoft YaHei"',
|
||||
'"Helvetica Neue"',
|
||||
'Helvetica',
|
||||
'"Source Han Sans SC"',
|
||||
@@ -61,8 +66,9 @@ const BLOG = {
|
||||
'sans-serif',
|
||||
'"Apple Color Emoji"'
|
||||
],
|
||||
// 衬线字体 例如'"LXGW WenKai"'
|
||||
FONT_SERIF: [
|
||||
// 衬线字体 例如'LXGW WenKai'
|
||||
// '"LXGW WenKai"',
|
||||
'Bitter',
|
||||
'"Noto Serif SC"',
|
||||
'SimSun',
|
||||
@@ -73,7 +79,11 @@ 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
|
||||
|
||||
// END ************网站字体*****************
|
||||
|
||||
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']
|
||||
@@ -101,7 +111,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 '#'
|
||||
@@ -117,7 +127,7 @@ const BLOG = {
|
||||
// 支援類似 WP 可自訂文章連結格式的功能：https://wordpress.org/documentation/article/customize-permalinks/，目前只先實作 %year%/%month%/%day%
|
||||
// 例：如想連結改成前綴 article + 時間戳記，可變更為： 'article/%year%/%month%/%day%'
|
||||
|
||||
POST_LIST_STYLE: process.env.NEXT_PUBLIC_PPOST_LIST_STYLE || 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
|
||||
POST_LIST_STYLE: process.env.NEXT_PUBLIC_POST_LIST_STYLE || 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
|
||||
POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', // 是否在列表加载文章预览
|
||||
POST_PREVIEW_LINES: 12, // 预览博客行数
|
||||
POST_RECOMMEND_COUNT: 6, // 推荐文章数量
|
||||
@@ -134,6 +144,7 @@ const BLOG = {
|
||||
|
||||
POST_DISABLE_GALLERY_CLICK: process.env.NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK || false, // 画册视图禁止点击，方便在友链页面的画册插入链接
|
||||
|
||||
// ********动态特效相关********
|
||||
// 鼠标点击烟花特效
|
||||
FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
|
||||
// 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
|
||||
@@ -146,18 +157,18 @@ const BLOG = {
|
||||
|
||||
// 樱花飘落特效
|
||||
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
|
||||
|
||||
// 漂浮线段特效
|
||||
NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关
|
||||
|
||||
// 动态彩带特效
|
||||
FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
|
||||
// 静态彩带特效
|
||||
RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 开关
|
||||
|
||||
// 星空雨特效 黑夜模式才会生效
|
||||
STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
|
||||
|
||||
// ********挂件组件相关********
|
||||
// Chatbase
|
||||
CHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null, // 是否显示chatbase机器人 https://www.chatbase.co/
|
||||
// 悬浮挂件
|
||||
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
|
||||
WIDGET_PET_LINK:
|
||||
@@ -200,6 +211,7 @@ const BLOG = {
|
||||
MUSIC_PLAYER_METING_LRC_TYPE:
|
||||
process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE || '1', // 可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）
|
||||
|
||||
// ********挂件组件相关********
|
||||
// ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
|
||||
|
||||
// twikoo
|
||||
@@ -297,11 +309,18 @@ const BLOG = {
|
||||
SEO_GOOGLE_SITE_VERIFICATION:
|
||||
process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
|
||||
|
||||
SEO_BAIDU_SITE_VERIFICATION:
|
||||
process.env.NEXT_PUBLIC_SEO_BAIDU_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
|
||||
|
||||
// <---- 站点统计
|
||||
|
||||
// 谷歌广告
|
||||
ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
|
||||
ADSENSE_GOOGLE_TEST: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_TEST || false, // 谷歌广告ID测试模式，这种模式获取假的测试广告，用于开发 https://www.tangly1024.com/article/local-dev-google-adsense
|
||||
ADSENSE_GOOGLE_SLOT_IN_ARTICLE: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_IN_ARTICLE || '3806269138', // Google AdScene>广告>按单元广告>新建文章内嵌广告 粘贴html代码中的data-ad-slot值
|
||||
ADSENSE_GOOGLE_SLOT_FLOW: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_FLOW || '1510444138', // Google AdScene>广告>按单元广告>新建信息流广告
|
||||
ADSENSE_GOOGLE_SLOT_NATIVE: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_NATIVE || '4980048999', // Google AdScene>广告>按单元广告>新建原生广告
|
||||
ADSENSE_GOOGLE_SLOT_AUTO: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_AUTO || '8807314373', // Google AdScene>广告>按单元广告>新建展示广告 （自动广告）
|
||||
|
||||
// 自定义配置notion数据库字段名
|
||||
NOTION_PROPERTY_NAME: {
|
||||
@@ -342,6 +361,7 @@ const BLOG = {
|
||||
process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
|
||||
|
||||
// 网站图片
|
||||
IMG_LAZY_LOAD_PLACEHOLDER: process.env.NEXT_PUBLIC_IMG_LAZY_LOAD_PLACEHOLDER || 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', // 懒加载占位图片地址，支持base64或url
|
||||
IMG_URL_TYPE: process.env.NEXT_PUBLIC_IMG_TYPE || 'Notion', // 此配置已失效，请勿使用；AMAZON方案不再支持，仅支持Notion方案。 ['Notion','AMAZON'] 站点图片前缀 默认 Notion:(https://notion.so/images/xx) ， AMAZON(https://s3.us-west-2.amazonaws.com/xxx)
|
||||
IMG_SHADOW: process.env.NEXT_PUBLIC_IMG_SHADOW || false, // 文章图片是否自动添加阴影
|
||||
|
||||
|
||||
19
components/ChatBase.js
Normal file
19
components/ChatBase.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import BLOG from '@/blog.config'
|
||||
|
||||
/**
|
||||
* 这是一个嵌入组件，可以在任意位置全屏显示您的chat-base对话框
|
||||
* 暂时没有页面引用
|
||||
* 因为您可以直接用内嵌网页的方式放入您的notion中 https://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}
|
||||
*/
|
||||
export default function ChatBase() {
|
||||
if (!BLOG.CHATBASE_ID) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return <iframe
|
||||
src={`https://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}`}
|
||||
width="100%"
|
||||
style={{ height: '100%', minHeight: '700px' }}
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
}
|
||||
@@ -84,7 +84,7 @@ const Collapse = props => {
|
||||
}, [props.isOpen])
|
||||
|
||||
return (
|
||||
<div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className} overflow-hidden duration-200 `}>
|
||||
<div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className || ''} overflow-hidden duration-200 `}>
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -54,7 +54,12 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
|
||||
ssr: false
|
||||
})
|
||||
|
||||
const Comment = ({ frontMatter }) => {
|
||||
/**
|
||||
* 评论组件
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
const Comment = ({ frontMatter, className }) => {
|
||||
const router = useRouter()
|
||||
|
||||
if (isBrowser() && ('giscus' in router.query || router.query.target === 'comment')) {
|
||||
@@ -70,7 +75,7 @@ const Comment = ({ frontMatter }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
|
||||
<div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
|
||||
<Tabs>
|
||||
|
||||
{BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
|
||||
|
||||
@@ -16,55 +16,57 @@ 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}
|
||||
/>
|
||||
)}
|
||||
<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.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`} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{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 && 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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,18 @@ import BLOG from '@/blog.config'
|
||||
*/
|
||||
const CommonScript = () => {
|
||||
return (<>
|
||||
|
||||
{BLOG.CHATBASE_ID && (<>
|
||||
<script id={BLOG.CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer/>
|
||||
<script async dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
window.chatbaseConfig = {
|
||||
chatbotId: "${BLOG.CHATBASE_ID}",
|
||||
}
|
||||
`
|
||||
}}/>
|
||||
</>)}
|
||||
|
||||
{BLOG.COMMENT_DAO_VOICE_ID && (<>
|
||||
{/* DaoVoice 反馈 */}
|
||||
<script async dangerouslySetInnerHTML={{
|
||||
@@ -26,10 +38,6 @@ const CommonScript = () => {
|
||||
/>
|
||||
</>)}
|
||||
|
||||
{/* GoogleAdsense 本地开发请加入 data-adbreak-test="on" */}
|
||||
{BLOG.ADSENSE_GOOGLE_ID && <script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`}
|
||||
crossOrigin="anonymous" />}
|
||||
|
||||
{BLOG.COMMENT_CUSDIS_APP_ID && <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />}
|
||||
|
||||
{BLOG.COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`} />}
|
||||
|
||||
158
components/CustomContextMenu.js
Normal file
158
components/CustomContextMenu.js
Normal file
@@ -0,0 +1,158 @@
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { saveDarkModeToCookies, THEMES } from '@/themes/theme'
|
||||
|
||||
/**
|
||||
* 自定义右键菜单
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export default function CustomContextMenu(props) {
|
||||
const [position, setPosition] = useState({ x: '0px', y: '0px' })
|
||||
const [show, setShow] = useState(false)
|
||||
const { isDarkMode, updateDarkMode, locale } = useGlobal()
|
||||
const menuRef = useRef(null)
|
||||
|
||||
const { latestPosts } = props
|
||||
const router = useRouter()
|
||||
function handleJumpToRandomPost() {
|
||||
const randomIndex = Math.floor(Math.random() * latestPosts.length)
|
||||
const randomPost = latestPosts[randomIndex]
|
||||
router.push(randomPost.slug)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleContextMenu = (event) => {
|
||||
event.preventDefault()
|
||||
setPosition({ y: `${event.clientY}px`, x: `${event.clientX}px` })
|
||||
setShow(true)
|
||||
}
|
||||
|
||||
const handleClick = (event) => {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
||||
setShow(false)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('contextmenu', handleContextMenu)
|
||||
window.addEventListener('click', handleClick)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('contextmenu', handleContextMenu)
|
||||
window.removeEventListener('click', handleClick)
|
||||
}
|
||||
}, [])
|
||||
|
||||
function handleBack() {
|
||||
window.history.back()
|
||||
}
|
||||
|
||||
function handleForward() {
|
||||
window.history.forward()
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
function handleScrollTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
setShow(false)
|
||||
}
|
||||
|
||||
function handleCopyLink() {
|
||||
const url = window.location.href
|
||||
navigator.clipboard.writeText(url)
|
||||
.then(() => {
|
||||
console.log('页面地址已复制')
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('复制页面地址失败:', error)
|
||||
})
|
||||
setShow(false)
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题
|
||||
*/
|
||||
function handeChangeTheme() {
|
||||
const randomTheme = THEMES[Math.floor(Math.random() * THEMES.length)] // 从THEMES数组中 随机取一个主题
|
||||
const query = router.query
|
||||
query.theme = randomTheme
|
||||
router.push({ pathname: router.pathname, query })
|
||||
}
|
||||
|
||||
function handleChangeDarkMode() {
|
||||
const newStatus = !isDarkMode
|
||||
saveDarkModeToCookies(newStatus)
|
||||
updateDarkMode(newStatus)
|
||||
const htmlElement = document.getElementsByTagName('html')[0]
|
||||
htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
|
||||
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
style={{ top: position.y, left: position.x }}
|
||||
className={`${show ? '' : 'invisible opacity-0'} select-none transition-opacity duration-200 fixed z-50`}
|
||||
>
|
||||
|
||||
{/* 菜单内容 */}
|
||||
<div className='rounded-xl w-52 dark:hover:border-yellow-600 bg-white dark:bg-[#040404] dark:text-gray-200 dark:border-gray-600 p-3 border drop-shadow-lg flex-col duration-300 transition-colors'>
|
||||
{/* 顶部导航按钮 */}
|
||||
<div className='flex justify-between'>
|
||||
<i onClick={handleBack} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-left"></i>
|
||||
<i onClick={handleForward} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-right"></i>
|
||||
<i onClick={handleRefresh} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-rotate-right"></i>
|
||||
<i onClick={handleScrollTop} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-up"></i>
|
||||
</div>
|
||||
|
||||
<hr className='my-2 border-dashed' />
|
||||
|
||||
{/* 跳转导航按钮 */}
|
||||
<div className='w-full px-2'>
|
||||
|
||||
<div onClick={handleJumpToRandomPost} title={locale.MENU.WALK_AROUND} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
|
||||
<i className="fa-solid fa-podcast mr-2" />
|
||||
<div className='whitespace-nowrap'>{locale.MENU.WALK_AROUND}</div>
|
||||
</div>
|
||||
|
||||
<Link href='/category' title={locale.MENU.CATEGORY} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
|
||||
<i className="fa-solid fa-square-minus mr-2" />
|
||||
<div className='whitespace-nowrap'>{locale.MENU.CATEGORY}</div>
|
||||
</Link>
|
||||
|
||||
<Link href='/tag' title={locale.MENU.TAGS} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
|
||||
<i className="fa-solid fa-tag mr-2" />
|
||||
<div className='whitespace-nowrap'>{locale.MENU.TAGS}</div>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
<hr className='my-2 border-dashed' />
|
||||
|
||||
{/* 功能按钮 */}
|
||||
<div className='w-full px-2'>
|
||||
|
||||
<div onClick={handleCopyLink} title={locale.MENU.COPY_URL} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
|
||||
<i className="fa-solid fa-arrow-up-right-from-square mr-2" />
|
||||
<div className='whitespace-nowrap'>{locale.MENU.COPY_URL}</div>
|
||||
</div>
|
||||
|
||||
<div onClick={handleChangeDarkMode} title={isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
|
||||
{isDarkMode ? <i className="fa-regular fa-sun mr-2" /> : <i className="fa-regular fa-moon mr-2" />}
|
||||
<div className='whitespace-nowrap'> {isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}</div>
|
||||
</div>
|
||||
<div onClick={handeChangeTheme} title={locale.MENU.THEME_SWITCH} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
|
||||
<i className="fa-solid fa-palette mr-2" />
|
||||
<div className='whitespace-nowrap'>{locale.MENU.THEME_SWITCH}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
@@ -1,9 +1,26 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { saveDarkModeToCookies } from '@/themes/theme'
|
||||
import { Moon, Sun } from './HeroIcons'
|
||||
import { useImperativeHandle } from 'react'
|
||||
|
||||
/**
|
||||
* 深色模式按钮
|
||||
*/
|
||||
const DarkModeButton = (props) => {
|
||||
const { cRef, className } = props
|
||||
const { isDarkMode, updateDarkMode } = useGlobal()
|
||||
|
||||
/**
|
||||
* 对外暴露方法
|
||||
*/
|
||||
useImperativeHandle(cRef, () => {
|
||||
return {
|
||||
handleChangeDarkMode: () => {
|
||||
handleChangeDarkMode()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 用户手动设置主题
|
||||
const handleChangeDarkMode = () => {
|
||||
const newStatus = !isDarkMode
|
||||
@@ -14,7 +31,7 @@ const DarkModeButton = (props) => {
|
||||
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
return <div onClick={handleChangeDarkMode} className={`${props.className ? props.className : ''} flex justify-center dark:text-gray-200 text-gray-800`}>
|
||||
return <div onClick={handleChangeDarkMode} className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
|
||||
<div id='darkModeButton' className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'> {isDarkMode ? <Sun /> : <Moon />}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@ const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
|
||||
const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
|
||||
const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
|
||||
const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
|
||||
const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
|
||||
|
||||
/**
|
||||
* 各种第三方组件
|
||||
@@ -53,6 +54,7 @@ const ExternalPlugin = (props) => {
|
||||
{JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
|
||||
{JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
|
||||
{JSON.parse(BLOG.RIBBON) && <Ribbon />}
|
||||
{JSON.parse(BLOG.CUSTOM_RIGHT_CLICK_CONTEXT_MENU) && <CustomContextMenu {...props} />}
|
||||
<VConsole/>
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
56
components/FlipCard.js
Normal file
56
components/FlipCard.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
/**
|
||||
* 翻转组件
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export default function FlipCard(props) {
|
||||
const [isFlipped, setIsFlipped] = useState(false)
|
||||
|
||||
function handleCardFlip() {
|
||||
setIsFlipped(!isFlipped)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flip-card ${isFlipped ? 'flipped' : ''}`} >
|
||||
<div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>
|
||||
{props.frontContent}
|
||||
</div>
|
||||
<div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>
|
||||
{props.backContent}
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.flip-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.flip-card-front,
|
||||
.flip-card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip-card-front {
|
||||
z-index: 2;
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
.flip-card-back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-card.flipped {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { loadExternalResource } from '@/lib/utils'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
@@ -8,25 +9,35 @@ import { useEffect } from 'react'
|
||||
*/
|
||||
export default function GoogleAdsense() {
|
||||
const initGoogleAdsense = () => {
|
||||
setTimeout(() => {
|
||||
const ads = document.getElementsByClassName('adsbygoogle')
|
||||
const adsbygoogle = window.adsbygoogle
|
||||
if (ads.length > 0) {
|
||||
for (let i = 0; i <= ads.length; i++) {
|
||||
try {
|
||||
adsbygoogle.push(ads[i])
|
||||
console.log('adsbygoogle', i, ads[i], adsbygoogle)
|
||||
} catch (e) {
|
||||
// GoogleAdsense 本地开发请加入 data-adbreak-test="on"
|
||||
// {BLOG.ADSENSE_GOOGLE_ID && <script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`}
|
||||
// crossOrigin="anonymous" />}
|
||||
|
||||
loadExternalResource(`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`, 'js').then(url => {
|
||||
setTimeout(() => {
|
||||
const ads = document.getElementsByClassName('adsbygoogle')
|
||||
const adsbygoogle = window.adsbygoogle
|
||||
console.log('google-ads', adsbygoogle)
|
||||
if (ads.length > 0) {
|
||||
for (let i = 0; i <= ads.length; i++) {
|
||||
try {
|
||||
adsbygoogle.push(ads[i])
|
||||
console.log('adsbygoogle', i, ads[i], adsbygoogle)
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
initGoogleAdsense()
|
||||
// 延迟3秒加载
|
||||
setTimeout(() => {
|
||||
initGoogleAdsense()
|
||||
}, 3000)
|
||||
}, [router])
|
||||
|
||||
return null
|
||||
@@ -50,7 +61,7 @@ const AdSlot = ({ type = 'show' }) => {
|
||||
data-ad-format="fluid"
|
||||
data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
|
||||
data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
|
||||
data-ad-slot="3806269138"></ins>
|
||||
data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_IN_ARTICLE}></ins>
|
||||
}
|
||||
|
||||
// 信息流广告
|
||||
@@ -61,7 +72,7 @@ const AdSlot = ({ type = 'show' }) => {
|
||||
style={{ display: 'block' }}
|
||||
data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
|
||||
data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
|
||||
data-ad-slot="1510444138"></ins>
|
||||
data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_FLOW}></ins>
|
||||
}
|
||||
|
||||
// 原生广告
|
||||
@@ -71,7 +82,7 @@ const AdSlot = ({ type = 'show' }) => {
|
||||
data-ad-format="autorelaxed"
|
||||
data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
|
||||
data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
|
||||
data-ad-slot="4980048999"></ins>
|
||||
data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_NATIVE}></ins>
|
||||
}
|
||||
|
||||
// 展示广告
|
||||
@@ -79,7 +90,7 @@ const AdSlot = ({ type = 'show' }) => {
|
||||
style={{ display: 'block' }}
|
||||
data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
|
||||
data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
|
||||
data-ad-slot="8807314373"
|
||||
data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_AUTO}
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
}
|
||||
|
||||
@@ -3,52 +3,98 @@
|
||||
* @returns
|
||||
*/
|
||||
|
||||
const Moon = () => {
|
||||
export const Moon = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const Sun = () => {
|
||||
export const Sun = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const Home = ({ className }) => {
|
||||
export const Home = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const User = ({ className }) => {
|
||||
export const User = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const ArrowPath = ({ className }) => {
|
||||
export const ArrowPath = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const ChevronLeft = ({ className }) => {
|
||||
export const ChevronLeft = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const ChevronRight = ({ className }) => {
|
||||
export const ChevronRight = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const InformationCircle = ({ className }) => {
|
||||
export const ChevronDoubleLeft = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export { Moon, Sun, Home, User, ArrowPath, ChevronLeft, ChevronRight, InformationCircle }
|
||||
export const ChevronDoubleRight = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const InformationCircle = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const HashTag = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const GlobeAlt = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const ArrowRightCircle = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const PlusSmall = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const ArrowSmallRight = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const ArrowSmallUp = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
95
components/LazyImage.js
Normal file
95
components/LazyImage.js
Normal file
@@ -0,0 +1,95 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import Head from 'next/head'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
|
||||
/**
|
||||
* 图片懒加载
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function LazyImage({
|
||||
priority,
|
||||
id,
|
||||
src,
|
||||
alt,
|
||||
placeholderSrc = BLOG.IMG_LAZY_LOAD_PLACEHOLDER,
|
||||
className,
|
||||
width,
|
||||
height,
|
||||
title,
|
||||
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 (title) {
|
||||
imgProps.title = title
|
||||
}
|
||||
|
||||
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>}
|
||||
</>)
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
|
||||
/**
|
||||
* 加载文件时的全局遮罩
|
||||
* @returns
|
||||
*/
|
||||
const LoadingCover = (props) => {
|
||||
const { onReading } = props
|
||||
|
||||
return <div className={`${onReading ? 'opacity-30' : 'opacity-0'} bg-black text-white shadow-text w-screen h-screen flex justify-center items-center
|
||||
transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
|
||||
<i className='text-3xl mr-5 fas fa-spinner animate-spin' />
|
||||
</div>
|
||||
}
|
||||
export default LoadingCover
|
||||
31
components/Mark.js
Normal file
31
components/Mark.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { loadExternalResource } from '@/lib/utils'
|
||||
|
||||
/**
|
||||
* 将搜索结果的关键词高亮
|
||||
*/
|
||||
export default async function replaceSearchResult({ doms, search, target }) {
|
||||
if (!doms || !search || !target) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const url = await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js', 'js')
|
||||
console.log('markjs 加载成功', url, window.Mark)
|
||||
console.log('------', doms)
|
||||
|
||||
const Mark = window.Mark
|
||||
if (doms instanceof HTMLCollection) {
|
||||
for (const container of doms) {
|
||||
const re = new RegExp(search, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, target)
|
||||
}
|
||||
} else {
|
||||
const re = new RegExp(search, 'gim')
|
||||
const instance = new Mark(doms)
|
||||
instance.markRegExp(re, target)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('markjs 加载失败', error)
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -5,9 +5,9 @@ import React, { useEffect, useRef } from 'react'
|
||||
// import { Code } from 'react-notion-x/build/third-party/code'
|
||||
import TweetEmbed from 'react-tweet-embed'
|
||||
|
||||
import BLOG from '@/blog.config'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import { mapImgUrl } from '@/lib/notion/mapImage'
|
||||
import BLOG from '@/blog.config'
|
||||
import { isBrowser } from '@/lib/utils'
|
||||
|
||||
const Code = dynamic(() =>
|
||||
@@ -86,7 +86,7 @@ const NotionPage = ({ post, className }) => {
|
||||
return <>{post?.summary || ''}</>
|
||||
}
|
||||
|
||||
return <div id='notion-article' className={`mx-auto ${className || ''}`}>
|
||||
return <div id='notion-article' className={`mx-auto overflow-x-hidden ${className || ''}`}>
|
||||
<NotionRenderer
|
||||
recordMap={post.blockMap}
|
||||
mapPageUrl={mapPageUrl}
|
||||
|
||||
@@ -119,13 +119,13 @@ const renderMermaid = async() => {
|
||||
}
|
||||
}
|
||||
})
|
||||
if (document.querySelector('#container-inner')) {
|
||||
observer.observe(document.querySelector('#container-inner'), { attributes: true, subtree: true })
|
||||
if (document.querySelector('#notion-article')) {
|
||||
observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
|
||||
}
|
||||
}
|
||||
|
||||
function renderPrismMac() {
|
||||
const container = document?.getElementById('container-inner')
|
||||
const container = document?.getElementById('notion-article')
|
||||
|
||||
// Add line numbers
|
||||
if (BLOG.CODE_LINE_NUMBERS === 'true') {
|
||||
@@ -182,11 +182,11 @@ const fixCodeLineStyle = () => {
|
||||
}
|
||||
}
|
||||
})
|
||||
observer.observe(document.querySelector('#container'), { attributes: true, subtree: true })
|
||||
observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
|
||||
setTimeout(() => {
|
||||
const preCodes = document.querySelectorAll('pre.notion-code')
|
||||
for (const preCode of preCodes) {
|
||||
console.log('code', preCode)
|
||||
// console.log('code', preCode)
|
||||
Prism.plugins.lineNumbers.resize(preCode)
|
||||
}
|
||||
}, 10)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import QRCode from 'qrcode.react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { useState } from 'react'
|
||||
|
||||
import {
|
||||
@@ -49,6 +49,13 @@ import {
|
||||
HatenaIcon
|
||||
} from 'react-share'
|
||||
|
||||
const QRCode = dynamic(
|
||||
() => {
|
||||
return import('qrcode.react')
|
||||
},
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
/**
|
||||
* @author https://github.com/txs
|
||||
* @param {*} param0
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { Draggable } from './Draggable'
|
||||
import { THEMES } from '@/themes/theme'
|
||||
import { useRouter } from 'next/router'
|
||||
import DarkModeButton from './DarkModeButton'
|
||||
/**
|
||||
*
|
||||
* @returns 主题切换
|
||||
@@ -10,28 +11,40 @@ import { useRouter } from 'next/router'
|
||||
const ThemeSwitch = () => {
|
||||
const { theme } = useGlobal()
|
||||
const router = useRouter()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
// 修改当前路径url中的 theme 参数
|
||||
// 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
|
||||
const onSelectChange = (e) => {
|
||||
setIsLoading(true)
|
||||
const newTheme = e.target.value
|
||||
const query = router.query
|
||||
query.theme = newTheme
|
||||
router.push({ pathname: router.pathname, query })
|
||||
router.push({ pathname: router.pathname, query }).then(() => {
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (<>
|
||||
<Draggable>
|
||||
<div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
|
||||
<div className="py-2 flex items-center text-sm px-2">
|
||||
<select value={theme} onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
|
||||
{THEMES?.map(t => {
|
||||
return <option key={t} value={t}>{t}</option>
|
||||
})}
|
||||
</select>
|
||||
<i className='fas fa-palette pl-1' />
|
||||
<div id="draggableBox" style={{ left: '10px', top: '80vh' }} className="fixed z-50 dark:text-white bg-gray-50 dark:bg-black rounded-2xl drop-shadow-lg">
|
||||
<div className="p-3 w-full flex items-center text-sm group duration-200 transition-all">
|
||||
<DarkModeButton className='mr-2' />
|
||||
<div className='w-0 group-hover:w-20 transition-all duration-200 overflow-hidden'>
|
||||
<select value={theme} onChange={onSelectChange} name="themes" className='appearance-none outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
|
||||
{THEMES?.map(t => {
|
||||
return <option key={t} value={t}>{t}</option>
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
<i className="fa-solid fa-palette pl-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
{/* 切换主题加载时的全屏遮罩 */}
|
||||
<div className={`${isLoading ? 'opacity-50 ' : 'opacity-0'} w-screen h-screen bg-black text-white shadow-text flex justify-center items-center
|
||||
transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
|
||||
<i className='text-3xl mr-5 fas fa-spinner animate-spin' />
|
||||
</div>
|
||||
</Draggable>
|
||||
</>
|
||||
)
|
||||
|
||||
67
components/WordCount.js
Normal file
67
components/WordCount.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
/**
|
||||
* 字数统计
|
||||
* @returns
|
||||
*/
|
||||
export default function WordCount() {
|
||||
const { locale } = useGlobal()
|
||||
useEffect(() => {
|
||||
countWords()
|
||||
})
|
||||
|
||||
return <span id='wordCountWrapper' className='flex gap-3 font-light'>
|
||||
<span className='flex whitespace-nowrap items-center'>
|
||||
<i className='pl-1 pr-2 fas fa-file-word' />
|
||||
<span id='wordCount'>0</span>
|
||||
</span>
|
||||
<span className='flex whitespace-nowrap items-center'>
|
||||
<i className='mr-1 fas fa-clock' />
|
||||
<span></span>
|
||||
<span id='readTime'>0</span> {locale.COMMON.MINUTE}
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新字数统计和阅读时间
|
||||
*/
|
||||
function countWords() {
|
||||
const articleText = deleteHtmlTag(document.getElementById('notion-article')?.innerHTML)
|
||||
const wordCount = fnGetCpmisWords(articleText)
|
||||
// 阅读速度 300-500每分钟
|
||||
document.getElementById('wordCount').innerHTML = wordCount
|
||||
document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1
|
||||
const wordCountWrapper = document.getElementById('wordCountWrapper')
|
||||
wordCountWrapper.classList.remove('hidden')
|
||||
}
|
||||
|
||||
// 去除html标签
|
||||
function deleteHtmlTag(str) {
|
||||
if (!str) {
|
||||
return ''
|
||||
}
|
||||
str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和 之类的特殊符合
|
||||
return str
|
||||
}
|
||||
|
||||
// 用word方式计算正文字数
|
||||
function fnGetCpmisWords(str) {
|
||||
if (!str) {
|
||||
return 0
|
||||
}
|
||||
let sLen = 0
|
||||
try {
|
||||
// eslint-disable-next-line no-irregular-whitespace
|
||||
str = str.replace(/(\r\n+|\s+| +)/g, '龘')
|
||||
// eslint-disable-next-line no-control-regex
|
||||
str = str.replace(/[\x00-\xff]/g, 'm')
|
||||
str = str.replace(/m+/g, '*')
|
||||
str = str.replace(/龘+/g, '')
|
||||
sLen = str.length
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
return sLen
|
||||
}
|
||||
@@ -21,24 +21,11 @@ export function GlobalContextProvider({ children }) {
|
||||
const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
|
||||
const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
|
||||
const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
|
||||
// const [onReading, setOnReading] = useState(false) // 网页资源加载
|
||||
|
||||
useEffect(() => {
|
||||
initLocale(lang, locale, updateLang, updateLocale)
|
||||
initDarkMode(isDarkMode, updateDarkMode)
|
||||
initTheme()
|
||||
if (isBrowser()) {
|
||||
// 监听用户刷新页面
|
||||
const handleBeforeUnload = (event) => {
|
||||
// setOnReading(true)
|
||||
}
|
||||
// 监听页面元素加载完
|
||||
// setOnReading(false)
|
||||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||
return () => {
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
@@ -72,7 +59,8 @@ export function GlobalContextProvider({ children }) {
|
||||
const currentIndex = THEMES.indexOf(theme)
|
||||
const newIndex = currentIndex < THEMES.length - 1 ? currentIndex + 1 : 0
|
||||
const newTheme = THEMES[newIndex]
|
||||
const query = { ...router.query, theme: newTheme }
|
||||
const query = router.query
|
||||
query.theme = newTheme
|
||||
router.push({ pathname: router.pathname, query })
|
||||
return newTheme
|
||||
}
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
export default {
|
||||
LOCALE: 'en-US',
|
||||
MENU: {
|
||||
WALK_AROUND: 'Walk Around',
|
||||
CATEGORY: 'Category',
|
||||
TAGS: 'Tags',
|
||||
COPY_URL: 'Copy URL',
|
||||
DARK_MODE: 'Dark Mode',
|
||||
LIGHT_MODE: 'Light Mode',
|
||||
THEME_SWITCH: 'Theme Switch'
|
||||
},
|
||||
NAV: {
|
||||
INDEX: 'Blog',
|
||||
INDEX: 'Home',
|
||||
RSS: 'RSS',
|
||||
SEARCH: 'Search',
|
||||
ABOUT: 'About',
|
||||
@@ -35,6 +44,7 @@ export default {
|
||||
SUBMIT: 'Submit',
|
||||
POST_TIME: 'Post on',
|
||||
LAST_EDITED_TIME: 'Last edited',
|
||||
COMMENTS: 'Comments',
|
||||
RECENT_COMMENTS: 'Recent Comments',
|
||||
DEBUG_OPEN: 'Debug',
|
||||
DEBUG_CLOSE: 'Close',
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
export default {
|
||||
LOCALE: 'zh-CN',
|
||||
MENU: {
|
||||
WALK_AROUND: '随便逛逛',
|
||||
CATEGORY: '博客分类',
|
||||
TAGS: '博客标签',
|
||||
COPY_URL: '复制地址',
|
||||
DARK_MODE: '深色模式',
|
||||
LIGHT_MODE: '浅色模式',
|
||||
THEME_SWITCH: '主题切换'
|
||||
},
|
||||
NAV: {
|
||||
INDEX: '首页',
|
||||
RSS: '订阅',
|
||||
@@ -12,7 +21,7 @@ export default {
|
||||
COMMON: {
|
||||
MORE: '更多',
|
||||
NO_MORE: '没有更多了',
|
||||
LATEST_POSTS: '最新文章',
|
||||
LATEST_POSTS: '最新发布',
|
||||
TAGS: '标签',
|
||||
NO_TAG: 'NoTag',
|
||||
CATEGORY: '分类',
|
||||
@@ -37,6 +46,7 @@ export default {
|
||||
SUBMIT: '提交',
|
||||
POST_TIME: '发布于',
|
||||
LAST_EDITED_TIME: '最后更新',
|
||||
COMMENTS: '评论',
|
||||
RECENT_COMMENTS: '最新评论',
|
||||
DEBUG_OPEN: '开启调试',
|
||||
DEBUG_CLOSE: '关闭调试',
|
||||
@@ -47,8 +57,8 @@ export default {
|
||||
WORD_COUNT: '字数'
|
||||
},
|
||||
PAGINATION: {
|
||||
PREV: '上一页',
|
||||
NEXT: '下一页'
|
||||
PREV: '上页',
|
||||
NEXT: '下页'
|
||||
},
|
||||
SEARCH: {
|
||||
ARTICLES: '搜索文章',
|
||||
|
||||
@@ -309,7 +309,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
|
||||
const customNav = getCustomNav({ allPages: collectionData.filter(post => post?.type === 'Page' && post.status === 'Published') })
|
||||
// 新的菜单
|
||||
const customMenu = await getCustomMenu({ collectionData })
|
||||
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
|
||||
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 6 })
|
||||
const allNavPages = getNavPages({ allPages })
|
||||
|
||||
return {
|
||||
|
||||
@@ -100,7 +100,6 @@ export default async function getPageProperties(id, block, schema, authToken, ta
|
||||
properties.to = properties.slug ?? null
|
||||
properties.name = properties.title ?? ''
|
||||
}
|
||||
properties.password = properties.password ? md5(properties.slug + properties.password) : ''
|
||||
|
||||
// 开启伪静态路径
|
||||
if (JSON.parse(BLOG.PSEUDO_STATIC)) {
|
||||
@@ -108,6 +107,7 @@ export default async function getPageProperties(id, block, schema, authToken, ta
|
||||
properties.slug += '.html'
|
||||
}
|
||||
}
|
||||
properties.password = properties.password ? md5(properties.slug + properties.password) : ''
|
||||
return properties
|
||||
}
|
||||
|
||||
|
||||
@@ -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'
|
||||
})
|
||||
|
||||
@@ -98,6 +98,12 @@ module.exports = withBundleAnalyzer({
|
||||
experimental: {
|
||||
scrollRestoration: true
|
||||
},
|
||||
exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {
|
||||
// 导出时 忽略/pages/sitemap.xml.js ， 否则报错getServerSideProps
|
||||
const pages = { ...defaultPathMap }
|
||||
delete pages['/sitemap.xml']
|
||||
return pages
|
||||
},
|
||||
publicRuntimeConfig: { // 这里的配置既可以服务端获取到，也可以在浏览器端获取到
|
||||
NODE_ENV_API: process.env.NODE_ENV_API || 'prod',
|
||||
THEMES: themes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "notion-next",
|
||||
"version": "4.0.0",
|
||||
"version": "4.0.5",
|
||||
"homepage": "https://github.com/tangly1024/NotionNext.git",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
@@ -26,7 +26,6 @@
|
||||
"@next/bundle-analyzer": "^12.1.1",
|
||||
"@vercel/analytics": "^1.0.0",
|
||||
"algoliasearch": "^4.18.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"animejs": "^3.2.1",
|
||||
"aos": "^3.0.0-beta.6",
|
||||
"axios": ">=0.21.1",
|
||||
@@ -36,7 +35,6 @@
|
||||
"js-md5": "^0.7.3",
|
||||
"localStorage": "^1.0.4",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"mark.js": "^8.11.1",
|
||||
"memory-cache": "^0.2.0",
|
||||
"mongodb": "^4.6.0",
|
||||
"next": "13.3.1",
|
||||
|
||||
122
pages/[prefix]/[slug].js
Normal file
122
pages/[prefix]/[slug].js
Normal file
@@ -0,0 +1,122 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { getPostBlocks } from '@/lib/notion'
|
||||
import { getGlobalData } from '@/lib/notion/getNotionData'
|
||||
import { idToUuid } from 'notion-utils'
|
||||
import { getNotion } from '@/lib/notion/getNotion'
|
||||
import Slug from '.'
|
||||
|
||||
/**
|
||||
* 根据notion的slug访问页面
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const PrefixSlug = props => {
|
||||
return <Slug {...props}/>
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
if (!BLOG.isProd) {
|
||||
return {
|
||||
paths: [],
|
||||
fallback: true
|
||||
}
|
||||
}
|
||||
|
||||
const from = 'slug-paths'
|
||||
const { allPages } = await getGlobalData({ from })
|
||||
return {
|
||||
paths: allPages?.filter(row => row.slug.indexOf('/') > 0).map(row => ({ params: { prefix: row.slug.split('/')[0], slug: row.slug.split('/')[1] } })),
|
||||
fallback: true
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticProps({ params: { prefix, slug } }) {
|
||||
let fullSlug = prefix + '/' + slug
|
||||
if (JSON.parse(BLOG.PSEUDO_STATIC)) {
|
||||
if (!fullSlug.endsWith('.html')) {
|
||||
fullSlug += '.html'
|
||||
}
|
||||
}
|
||||
const from = `slug-props-${fullSlug}`
|
||||
const props = await getGlobalData({ from })
|
||||
// 在列表内查找文章
|
||||
props.post = props?.allPages?.find((p) => {
|
||||
return p.slug === fullSlug || p.id === idToUuid(fullSlug)
|
||||
})
|
||||
|
||||
// 处理非列表内文章的内信息
|
||||
if (!props?.post) {
|
||||
const pageId = slug.slice(-1)[0]
|
||||
if (pageId.length >= 32) {
|
||||
const post = await getNotion(pageId)
|
||||
props.post = post
|
||||
}
|
||||
}
|
||||
|
||||
// 无法获取文章
|
||||
if (!props?.post) {
|
||||
props.post = null
|
||||
return { props, revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) }
|
||||
}
|
||||
|
||||
// 文章内容加载
|
||||
if (!props?.posts?.blockMap) {
|
||||
props.post.blockMap = await getPostBlocks(props.post.id, from)
|
||||
}
|
||||
|
||||
// 推荐关联文章处理
|
||||
const allPosts = props.allPages.filter(page => page.type === 'Post' && page.status === 'Published')
|
||||
if (allPosts && allPosts.length > 0) {
|
||||
const index = allPosts.indexOf(props.post)
|
||||
props.prev = allPosts.slice(index - 1, index)[0] ?? allPosts.slice(-1)[0]
|
||||
props.next = allPosts.slice(index + 1, index + 2)[0] ?? allPosts[0]
|
||||
props.recommendPosts = getRecommendPost(props.post, allPosts, BLOG.POST_RECOMMEND_COUNT)
|
||||
} else {
|
||||
props.prev = null
|
||||
props.next = null
|
||||
props.recommendPosts = []
|
||||
}
|
||||
|
||||
delete props.allPages
|
||||
return {
|
||||
props,
|
||||
revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文章的关联推荐文章列表，目前根据标签关联性筛选
|
||||
* @param post
|
||||
* @param {*} allPosts
|
||||
* @param {*} count
|
||||
* @returns
|
||||
*/
|
||||
function getRecommendPost(post, allPosts, count = 6) {
|
||||
let recommendPosts = []
|
||||
const postIds = []
|
||||
const currentTags = post?.tags || []
|
||||
for (let i = 0; i < allPosts.length; i++) {
|
||||
const p = allPosts[i]
|
||||
if (p.id === post.id || p.type.indexOf('Post') < 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
for (let j = 0; j < currentTags.length; j++) {
|
||||
const t = currentTags[j]
|
||||
if (postIds.indexOf(p.id) > -1) {
|
||||
continue
|
||||
}
|
||||
if (p.tags && p.tags.indexOf(t) > -1) {
|
||||
recommendPosts.push(p)
|
||||
postIds.push(p.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (recommendPosts.length > count) {
|
||||
recommendPosts = recommendPosts.slice(0, count)
|
||||
}
|
||||
return recommendPosts
|
||||
}
|
||||
|
||||
export default PrefixSlug
|
||||
@@ -90,13 +90,14 @@ export async function getStaticPaths() {
|
||||
const from = 'slug-paths'
|
||||
const { allPages } = await getGlobalData({ from })
|
||||
return {
|
||||
paths: allPages?.map(row => ({ params: { slug: [row.slug] } })),
|
||||
paths: allPages?.filter(row => row.slug.indexOf('/') < 0).map(row => ({ params: { prefix: row.slug } })),
|
||||
fallback: true
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticProps({ params: { slug } }) {
|
||||
let fullSlug = slug.join('/')
|
||||
export async function getStaticProps({ params: { prefix } }) {
|
||||
// let fullSlug = slug.join('/')
|
||||
let fullSlug = prefix
|
||||
if (JSON.parse(BLOG.PSEUDO_STATIC)) {
|
||||
if (!fullSlug.endsWith('.html')) {
|
||||
fullSlug += '.html'
|
||||
@@ -111,7 +112,7 @@ export async function getStaticProps({ params: { slug } }) {
|
||||
|
||||
// 处理非列表内文章的内信息
|
||||
if (!props?.post) {
|
||||
const pageId = slug.slice(-1)[0]
|
||||
const pageId = prefix.slice(-1)[0]
|
||||
if (pageId.length >= 32) {
|
||||
const post = await getNotion(pageId)
|
||||
props.post = post
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect } from 'react'
|
||||
|
||||
// import 'animate.css'
|
||||
import '@/styles/animate.css' // @see https://animate.style/
|
||||
import '@/styles/globals.css'
|
||||
import '@/styles/nprogress.css'
|
||||
import '@/styles/utility-patterns.css'
|
||||
@@ -28,9 +28,9 @@ const MyApp = ({ Component, pageProps }) => {
|
||||
|
||||
return (
|
||||
<GlobalContextProvider>
|
||||
<Component {...pageProps}/>
|
||||
<ExternalPlugins {...pageProps} />
|
||||
<ExternalScript />
|
||||
<Component {...pageProps} />
|
||||
<ExternalPlugins {...pageProps} />
|
||||
</GlobalContextProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,11 +13,24 @@ class MyDocument extends Document {
|
||||
return (
|
||||
<Html lang={BLOG.LANG}>
|
||||
<Head>
|
||||
<link rel='icon' href='/favicon.ico' />
|
||||
<CommonScript />
|
||||
<link rel='icon' href= {`${BLOG.BLOG_FAVICON}`} />
|
||||
<CommonScript />
|
||||
{/* 预加载字体 */}
|
||||
{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) => {
|
||||
if (fontUrl.endsWith('.css')) {
|
||||
return <link key={index} rel="stylesheet" href={fontUrl} />
|
||||
} else {
|
||||
return <link key={index} rel="preload" href={fontUrl} as="font" type="font/woff2" />
|
||||
}
|
||||
})}
|
||||
</Head>
|
||||
|
||||
<body className={`${BLOG.FONT_STYLE} font-light bg-day dark:bg-night`}>
|
||||
<body className={`${BLOG.FONT_STYLE} font-light scroll-smooth`}>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -2,4 +2,7 @@
|
||||
|
||||
#theme-fukasawa .sideLeft hr{
|
||||
opacity: .04;
|
||||
}
|
||||
}
|
||||
.fa-info:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
/* fukasawa的主题相关 */
|
||||
@@ -1,30 +0,0 @@
|
||||
/* 菜单下划线动画 */
|
||||
#theme-hexo .menu-link {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#928CEE, #928CEE);
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
background-size: 0 2px;
|
||||
transition: background-size 100ms ease-in-out;
|
||||
}
|
||||
|
||||
#theme-hexo .menu-link:hover {
|
||||
background-size: 100% 2px;
|
||||
color: #928CEE;
|
||||
}
|
||||
|
||||
/* 设置了从上到下的渐变黑色 */
|
||||
#theme-hexo .header-cover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
|
||||
}
|
||||
|
||||
/* Custem */
|
||||
.tk-footer{
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
|
||||
/* 设置了从上到下的渐变黑色 */
|
||||
#theme-matery .header-cover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
#theme-simple #announcement-content {
|
||||
/* background-color: #f6f6f6; */
|
||||
}
|
||||
|
||||
#theme-simple .blog-item-title {
|
||||
color: #276077;
|
||||
}
|
||||
|
||||
.dark #theme-simple .blog-item-title {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.notion {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/* 菜单下划线动画 */
|
||||
#theme-simple .menu-link {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#dd3333, #dd3333);
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
background-size: 0 2px;
|
||||
transition: background-size 100ms ease-in-out;
|
||||
}
|
||||
|
||||
#theme-simple .menu-link:hover {
|
||||
background-size: 100% 2px;
|
||||
color: #dd3333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
503
styles/animate.css
vendored
Normal file
503
styles/animate.css
vendored
Normal file
@@ -0,0 +1,503 @@
|
||||
@charset "UTF-8";/*!
|
||||
* animate.css - https://animate.style/
|
||||
* Version - 4.1.1
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
|
||||
* 这里做了精减，后续不再使用animate.css，因为占用体积太大，不如手写动画
|
||||
* Copyright (c) 2020 Animate.css
|
||||
*/
|
||||
:root {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: var(--animate-duration);
|
||||
animation-duration: var(--animate-duration);
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
|
||||
.animate__animated.animate__faster {
|
||||
-webkit-animation-duration: calc(1s / 2);
|
||||
animation-duration: calc(1s / 2);
|
||||
-webkit-animation-duration: calc(var(--animate-duration) / 2);
|
||||
animation-duration: calc(var(--animate-duration) / 2);
|
||||
}
|
||||
.animate__animated.animate__fast {
|
||||
-webkit-animation-duration: calc(1s * 0.8);
|
||||
animation-duration: calc(1s * 0.8);
|
||||
-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
|
||||
animation-duration: calc(var(--animate-duration) * 0.8);
|
||||
}
|
||||
|
||||
|
||||
@media print, (prefers-reduced-motion: reduce) {
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
-webkit-transition-duration: 1ms !important;
|
||||
transition-duration: 1ms !important;
|
||||
-webkit-animation-iteration-count: 1 !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
|
||||
.animate__animated[class*='Out'] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes shakeX {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes shakeX {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__shakeX {
|
||||
-webkit-animation-name: shakeX;
|
||||
animation-name: shakeX;
|
||||
}
|
||||
@-webkit-keyframes shakeY {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(0, -10px, 0);
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(0, 10px, 0);
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
@keyframes shakeY {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(0, -10px, 0);
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(0, 10px, 0);
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
.animate__shakeY {
|
||||
-webkit-animation-name: shakeY;
|
||||
animation-name: shakeY;
|
||||
}
|
||||
@-webkit-keyframes headShake {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes headShake {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.animate__headShake {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-name: headShake;
|
||||
animation-name: headShake;
|
||||
}
|
||||
|
||||
|
||||
@keyframes jello {
|
||||
from,
|
||||
11.1%,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
22.2% {
|
||||
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||
transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||
}
|
||||
|
||||
33.3% {
|
||||
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
||||
transform: skewX(6.25deg) skewY(6.25deg);
|
||||
}
|
||||
|
||||
44.4% {
|
||||
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||
transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||
}
|
||||
|
||||
55.5% {
|
||||
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||
transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||
}
|
||||
|
||||
66.6% {
|
||||
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||
}
|
||||
|
||||
77.7% {
|
||||
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||
transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||
}
|
||||
|
||||
88.8% {
|
||||
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||
}
|
||||
}
|
||||
.animate__jello {
|
||||
-webkit-animation-name: jello;
|
||||
animation-name: jello;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
}
|
||||
|
||||
90% {
|
||||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
}
|
||||
|
||||
90% {
|
||||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__bounceInRight {
|
||||
-webkit-animation-name: bounceInRight;
|
||||
animation-name: bounceInRight;
|
||||
}
|
||||
|
||||
|
||||
/* Fading entrances */
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.animate__fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
|
||||
/* Fading exits */
|
||||
/* 删除 */
|
||||
|
||||
/* Flippers */
|
||||
/* 删除 */
|
||||
|
||||
/* Lightspeed */
|
||||
/* 删除 */
|
||||
|
||||
/* Rotating exits */
|
||||
/* 删除 */
|
||||
|
||||
/* Zooming entrances */
|
||||
/* 删除 */
|
||||
|
||||
/* Sliding entrances */
|
||||
|
||||
@-webkit-keyframes slideInLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideInLeft {
|
||||
-webkit-animation-name: slideInLeft;
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
@-webkit-keyframes slideInRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideInRight {
|
||||
-webkit-animation-name: slideInRight;
|
||||
animation-name: slideInRight;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideOutLeft {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft;
|
||||
}
|
||||
@-webkit-keyframes slideOutRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideOutRight {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight;
|
||||
}
|
||||
@@ -2,28 +2,6 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
--scrollbarBG: #ffffff00;
|
||||
--thumbBG: #b8b8b8;
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
body {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
|
||||
}
|
||||
body::-webkit-scrollbar-track {
|
||||
background: var(--scrollbarBG);
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: var(--thumbBG);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(45, 170, 219, 0.3);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
@@ -285,57 +263,3 @@ a.avatar-wrapper {
|
||||
.reply-author-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.line-clamp-4 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
|
||||
/* fukasawa的首页响应式分栏 */
|
||||
#theme-fukasawa .grid-item {
|
||||
height: auto;
|
||||
break-inside: avoid-column;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* 大屏幕（宽度≥1024px）下显示3列 */
|
||||
@media (min-width: 1024px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 3;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕（宽度≥640px）下显示2列 */
|
||||
@media (min-width: 640px) and (max-width: 1023px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 2;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端（宽度<640px）下显示1列 */
|
||||
@media (max-width: 639px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 1;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
@@ -443,6 +443,7 @@ summary > .notion-h {
|
||||
|
||||
.notion-h:hover .notion-hash-link {
|
||||
opacity: 1;
|
||||
@apply dark:fill-gray-200
|
||||
}
|
||||
|
||||
.notion-hash-link {
|
||||
@@ -1392,6 +1393,10 @@ code[class*='language-'] {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.katex-display>.katex>.katex-html>.tag {
|
||||
position: inherit !important;
|
||||
}
|
||||
|
||||
.notion-page-title {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
@@ -1943,10 +1948,6 @@ svg + .notion-page-title-text {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-blue-500 text-gray-50 !important;
|
||||
}
|
||||
|
||||
/* https://github.com/kchen0x */
|
||||
.notion-quote {
|
||||
display: block;
|
||||
@@ -2049,4 +2050,9 @@ code.language-mermaid {
|
||||
|
||||
.notion-simple-table td{
|
||||
border: 1px solid var(#eee) !important
|
||||
}
|
||||
}
|
||||
|
||||
/* 竖屏视频高度bug */
|
||||
figure.notion-asset-wrapper.notion-asset-wrapper-video>div {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -19,13 +19,14 @@ import NotionPage from '@/components/NotionPage'
|
||||
import Comment from '@/components/Comment'
|
||||
import ShareBar from '@/components/ShareBar'
|
||||
import SearchInput from './components/SearchInput'
|
||||
import Mark from 'mark.js'
|
||||
import replaceSearchResult from '@/components/Mark'
|
||||
import { isBrowser } from '@/lib/utils'
|
||||
import BlogListGroupByDate from './components/BlogListGroupByDate'
|
||||
import CategoryItem from './components/CategoryItem'
|
||||
import TagItem from './components/TagItem'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import { Style } from './style'
|
||||
|
||||
/**
|
||||
* 基础布局框架
|
||||
@@ -50,6 +51,7 @@ const LayoutBase = props => {
|
||||
<div id='theme-example' className='dark:text-gray-300 bg-white dark:bg-black'>
|
||||
{/* 网页SEO信息 */}
|
||||
<CommonHead meta={meta} />
|
||||
<Style/>
|
||||
|
||||
{/* 页头 */}
|
||||
<Header {...props} />
|
||||
@@ -173,21 +175,20 @@ const LayoutSearch = props => {
|
||||
const slotTop = <div className='pb-12'><SearchInput {...props} /></div>
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (isBrowser()) {
|
||||
// 高亮搜索到的结果
|
||||
const container = document.getElementById('posts-wrapper')
|
||||
console.log('container', container, keyword)
|
||||
if (keyword && container) {
|
||||
const re = new RegExp(keyword, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
if (isBrowser()) {
|
||||
// 高亮搜索到的结果
|
||||
const container = document.getElementById('posts-wrapper')
|
||||
if (keyword && container) {
|
||||
replaceSearchResult({
|
||||
doms: container,
|
||||
search: keyword,
|
||||
target: {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}, [router])
|
||||
|
||||
return <LayoutPostList slotTop={slotTop} {...props} />
|
||||
|
||||
17
themes/example/style.js
Normal file
17
themes/example/style.js
Normal file
@@ -0,0 +1,17 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
/**
|
||||
* 此处样式只对当前主题生效
|
||||
* 此处不支持tailwindCSS的 @apply 语法
|
||||
* @returns
|
||||
*/
|
||||
const Style = () => {
|
||||
return <style jsx global>{`
|
||||
// 底色
|
||||
.dark body{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
`}</style>
|
||||
}
|
||||
|
||||
export { Style }
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -30,7 +30,7 @@ const SocialButton = () => {
|
||||
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
|
||||
<i className='fas fa-envelope transform hover:scale-125 duration-150'/>
|
||||
</a>}
|
||||
{BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
|
||||
{JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
|
||||
<i className='fas fa-rss transform hover:scale-125 duration-150'/>
|
||||
</a>}
|
||||
{BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
|
||||
|
||||
@@ -5,7 +5,7 @@ import CommonHead from '@/components/CommonHead'
|
||||
import TopNav from './components/TopNav'
|
||||
import AsideLeft from './components/AsideLeft'
|
||||
import BLOG from '@/blog.config'
|
||||
import { isBrowser, loadExternalResource } from '@/lib/utils'
|
||||
import { isBrowser } from '@/lib/utils'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import BlogListPage from './components/BlogListPage'
|
||||
import BlogListScroll from './components/BlogListScroll'
|
||||
@@ -19,9 +19,10 @@ import Link from 'next/link'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import dynamic from 'next/dynamic'
|
||||
import { AdSlot } from '@/components/GoogleAdsense'
|
||||
import { Style } from './style'
|
||||
import replaceSearchResult from '@/components/Mark'
|
||||
|
||||
const Live2D = dynamic(() => import('@/components/Live2D'))
|
||||
const Mark = dynamic(() => import('mark.js'))
|
||||
|
||||
// 主题全局状态
|
||||
const ThemeGlobalFukasawa = createContext()
|
||||
@@ -61,15 +62,12 @@ const LayoutBase = (props) => {
|
||||
}
|
||||
}, [isCollapsed])
|
||||
|
||||
if (isBrowser()) {
|
||||
loadExternalResource('/css/theme-fukasawa.css', 'css')
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeGlobalFukasawa.Provider value={{ isCollapsed, setIsCollapse }}>
|
||||
|
||||
<div id='theme-fukasawa'>
|
||||
<CommonHead meta={meta} />
|
||||
<Style/>
|
||||
|
||||
<TopNav {...props} />
|
||||
|
||||
@@ -150,17 +148,16 @@ const LayoutSearch = props => {
|
||||
const { keyword } = props
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const container = isBrowser() && document.getElementById('posts-wrapper')
|
||||
if (container && container.innerHTML) {
|
||||
const re = new RegExp(keyword, 'gim')
|
||||
const instance = new Mark(container)
|
||||
instance.markRegExp(re, {
|
||||
if (isBrowser()) {
|
||||
replaceSearchResult({
|
||||
doms: document.getElementById('posts-wrapper'),
|
||||
search: keyword,
|
||||
target: {
|
||||
element: 'span',
|
||||
className: 'text-red-500 border-b border-dashed'
|
||||
})
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [router])
|
||||
return <LayoutPostList {...props} />
|
||||
}
|
||||
|
||||
50
themes/fukasawa/style.js
Normal file
50
themes/fukasawa/style.js
Normal file
@@ -0,0 +1,50 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
/**
|
||||
* 此处样式只对当前主题生效
|
||||
* 此处不支持tailwindCSS的 @apply 语法
|
||||
* @returns
|
||||
*/
|
||||
const Style = () => {
|
||||
return <style jsx global>{`
|
||||
// 底色
|
||||
body{
|
||||
background-color: #eeedee;
|
||||
}
|
||||
.dark body{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* fukasawa的首页响应式分栏 */
|
||||
#theme-fukasawa .grid-item {
|
||||
height: auto;
|
||||
break-inside: avoid-column;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* 大屏幕（宽度≥1024px）下显示3列 */
|
||||
@media (min-width: 1024px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 3;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕（宽度≥640px）下显示2列 */
|
||||
@media (min-width: 640px) and (max-width: 1023px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 2;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端（宽度<640px）下显示1列 */
|
||||
@media (max-width: 639px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 1;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
}
|
||||
|
||||
export { Style }
|
||||
@@ -8,7 +8,7 @@ const BlogPostCard = ({ post, className }) => {
|
||||
const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
|
||||
return (
|
||||
<div key={post.id} className={`${className} py-1 cursor-pointer px-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600 ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
|
||||
<div className="flex flex-col w-full">
|
||||
<div className="flex flex-col w-full select-none">
|
||||
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
|
||||
{post.title}
|
||||
</Link>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import { useGitBookGlobal } from '@/themes/gitbook'
|
||||
|
||||
/**
|
||||
* 移动端悬浮目录按钮
|
||||
*/
|
||||
export default function FloatTocButton () {
|
||||
const { tocVisible, changeTocVisible } = useGitBookGlobal()
|
||||
|
||||
@@ -14,7 +17,7 @@ export default function FloatTocButton () {
|
||||
}
|
||||
>
|
||||
<a
|
||||
id="darkModeButton"
|
||||
id="toc-button"
|
||||
className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -21,7 +21,7 @@ const NavPostItem = (props) => {
|
||||
return <>
|
||||
<div
|
||||
onClick={toggleOpenSubMenu}
|
||||
className='flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
|
||||
className='select-none flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
|
||||
<span>{group?.category}</span>
|
||||
<div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ const SocialButton = () => {
|
||||
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
|
||||
<i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
|
||||
</a>}
|
||||
{BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
|
||||
{JSON.parse(BLOG.ENABLE_RSS) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
|
||||
<i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
|
||||
</a>}
|
||||
</div>
|
||||
|
||||
@@ -30,6 +30,7 @@ import TocDrawer from './components/TocDrawer'
|
||||
import NotionPage from '@/components/NotionPage'
|
||||
import { ArticleLock } from './components/ArticleLock'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import { Style } from './style'
|
||||
|
||||
// 主题全局变量
|
||||
const ThemeGlobalGitbook = createContext()
|
||||
@@ -58,6 +59,7 @@ const LayoutBase = (props) => {
|
||||
return (
|
||||
<ThemeGlobalGitbook.Provider value={{ tocVisible, changeTocVisible, filteredPostGroups, setFilteredPostGroups, allNavPages, pageNavVisible, changePageNavVisible }}>
|
||||
<CommonHead meta={meta} />
|
||||
<Style/>
|
||||
|
||||
<div id='theme-gitbook' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
|
||||
{/* 顶部导航栏 */}
|
||||
@@ -76,7 +78,7 @@ const LayoutBase = (props) => {
|
||||
</div>
|
||||
|
||||
<div className='w-72 fixed left-0 bottom-0 z-20 bg-white'>
|
||||
<Footer {...props}/>
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -170,7 +172,7 @@ const LayoutIndex = (props) => {
|
||||
const article = document.getElementById('notion-article')
|
||||
if (!article) {
|
||||
console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG.INDEX_PAGE)
|
||||
const containerInner = document.getElementById('container-inner')
|
||||
const containerInner = document.querySelector('#theme-gitbook #container-inner')
|
||||
const newHTML = `<h1 class="text-3xl pt-12 dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${CONFIG.INDEX_PAGE}的文章</div></blockquote>`
|
||||
containerInner?.insertAdjacentHTML('afterbegin', newHTML)
|
||||
}
|
||||
@@ -179,7 +181,7 @@ const LayoutIndex = (props) => {
|
||||
})
|
||||
}, [])
|
||||
|
||||
return <LayoutBase {...props}/>
|
||||
return <LayoutBase {...props} />
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -189,7 +191,7 @@ const LayoutIndex = (props) => {
|
||||
* @returns
|
||||
*/
|
||||
const LayoutPostList = (props) => {
|
||||
return <LayoutBase {...props}/>
|
||||
return <LayoutBase {...props} />
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -213,9 +215,6 @@ const LayoutSlug = (props) => {
|
||||
{/* Notion文章主体 */}
|
||||
{post && (<section id="article-wrapper" className="px-1">
|
||||
<NotionPage post={post} />
|
||||
</section>)}
|
||||
|
||||
<section>
|
||||
|
||||
{/* 分享 */}
|
||||
<ShareBar post={post} />
|
||||
@@ -232,7 +231,7 @@ const LayoutSlug = (props) => {
|
||||
<AdSlot />
|
||||
|
||||
<Comment frontMatter={post} />
|
||||
</section>
|
||||
</section>)}
|
||||
|
||||
<TocDrawer {...props} />
|
||||
</div>}
|
||||
|
||||
18
themes/gitbook/style.js
Normal file
18
themes/gitbook/style.js
Normal file
@@ -0,0 +1,18 @@
|
||||
/* eslint-disable react/no-unknown-property */
|
||||
/**
|
||||
* 此处样式只对当前主题生效
|
||||
* 此处不支持tailwindCSS的 @apply 语法
|
||||
* @returns
|
||||
*/
|
||||
const Style = () => {
|
||||
return <style jsx global>{`
|
||||
|
||||
// 底色
|
||||
.dark body{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
`}</style>
|
||||
}
|
||||
|
||||
export { Style }
|
||||
43
themes/heo/components/AnalyticsCard.js
Normal file
43
themes/heo/components/AnalyticsCard.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import CONFIG from '../config'
|
||||
|
||||
/**
|
||||
* 博客统计卡牌
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export function AnalyticsCard(props) {
|
||||
const targetDate = new Date(CONFIG.SITE_CREATE_TIME)
|
||||
const today = new Date()
|
||||
const diffTime = today.getTime() - targetDate.getTime() // 获取两个日期之间的毫秒数差值
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 将毫秒数差值转换为天数差值
|
||||
|
||||
const { postCount } = props
|
||||
return <>
|
||||
<div className='text-md flex flex-col space-y-1 justify-center px-3'>
|
||||
<div className='inline'>
|
||||
<div className='flex justify-between'>
|
||||
<div>文章数:</div>
|
||||
<div>{postCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='inline'>
|
||||
<div className='flex justify-between'>
|
||||
<div>建站天数:</div>
|
||||
<div>{diffDays} 天</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='hidden busuanzi_container_page_pv'>
|
||||
<div className='flex justify-between'>
|
||||
<div>访问量:</div>
|
||||
<div className='busuanzi_value_page_pv' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='hidden busuanzi_container_site_uv'>
|
||||
<div className='flex justify-between'>
|
||||
<div>访客数:</div>
|
||||
<div className='busuanzi_value_site_uv' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
18
themes/heo/components/Announcement.js
Normal file
18
themes/heo/components/Announcement.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const NotionPage = dynamic(() => import('@/components/NotionPage'))
|
||||
|
||||
const Announcement = ({ post, className }) => {
|
||||
if (post?.blockMap) {
|
||||
return <div >
|
||||
{post && (
|
||||
<div id="announcement-content">
|
||||
<NotionPage post={post} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
} else {
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
export default Announcement
|
||||
86
themes/heo/components/ArticleAdjacent.js
Normal file
86
themes/heo/components/ArticleAdjacent.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
import CONFIG from '../config'
|
||||
|
||||
/**
|
||||
* 上一篇，下一篇文章
|
||||
* @param {prev,next} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function ArticleAdjacent({ prev, next }) {
|
||||
const [isScrollEnd, setIsScrollEnd] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
setIsScrollEnd(false)
|
||||
}, [router])
|
||||
|
||||
useEffect(() => {
|
||||
// 文章是否已经到了底部
|
||||
const targetElement = document.getElementById('article-end')
|
||||
|
||||
const handleIntersect = (entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsScrollEnd(true)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const options = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(handleIntersect, options)
|
||||
observer.observe(targetElement)
|
||||
|
||||
return () => {
|
||||
observer.disconnect()
|
||||
}
|
||||
}, [])
|
||||
|
||||
if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return (
|
||||
<div id='article-end'>
|
||||
{/* 移动端 */}
|
||||
<section className='lg:hidden pt-8 text-gray-800 items-center text-xs md:text-sm flex flex-col m-1 '>
|
||||
<Link
|
||||
href={`/${prev.slug}`}
|
||||
passHref
|
||||
className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-t-xl dark:bg-[#1e1e1e] border dark:border-gray-600 border-b-0 items-center dark:text-white flex flex-col w-full h-18 duration-200'
|
||||
>
|
||||
<div className='flex justify-start items-center w-full'>上一篇</div>
|
||||
<div className='flex justify-center items-center text-lg font-bold'>{prev.title}</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${next.slug}`}
|
||||
passHref
|
||||
className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-b-xl dark:bg-[#1e1e1e] border dark:border-gray-600 items-center dark:text-white flex flex-col w-full h-18 duration-200'
|
||||
>
|
||||
<div className='flex justify-start items-center w-full'>下一篇</div>
|
||||
<div className='flex justify-center items-center text-lg font-bold'>{next.title}</div>
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* 桌面端 */}
|
||||
|
||||
<div id='pc-next-post' className={`hidden md:block fixed z-20 right-16 bottom-4 duration-200 transition-all ${isScrollEnd ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
|
||||
<Link
|
||||
href={`/${next.slug}`}
|
||||
className='cursor-pointer duration transition-all h-24 dark:bg-[#1e1e1e] border dark:border-gray-600 p-3 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:text-white hover:font-bold hover:bg-gray-400 rounded-lg flex flex-col justify-between'
|
||||
>
|
||||
<div className='text-xs'>下一篇</div>
|
||||
<hr />
|
||||
<div>{next?.title}</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
41
themes/heo/components/ArticleCopyright.js
Normal file
41
themes/heo/components/ArticleCopyright.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
import CONFIG from '../config'
|
||||
|
||||
export default function ArticleCopyright () {
|
||||
if (!CONFIG.ARTICLE_COPYRIGHT) {
|
||||
return <></>
|
||||
}
|
||||
const router = useRouter()
|
||||
const [path, setPath] = useState(BLOG.LINK + router.asPath)
|
||||
useEffect(() => {
|
||||
setPath(window.location.href)
|
||||
})
|
||||
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<section className="dark:text-gray-300 mt-6 mx-1 ">
|
||||
<ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500">
|
||||
<li>
|
||||
<strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
|
||||
<Link href={'/about'} className="hover:underline">
|
||||
{BLOG.AUTHOR}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<strong className='mr-2'>{locale.COMMON.URL}:</strong>
|
||||
<a className="whitespace-normal break-words hover:underline" href={path}>
|
||||
{path}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<strong className='mr-2'>{locale.COMMON.COPYRIGHT}:</strong>
|
||||
{locale.COMMON.COPYRIGHT_NOTICE}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
51
themes/heo/components/ArticleLock.js
Normal file
51
themes/heo/components/ArticleLock.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
/**
|
||||
* 加密文章校验组件
|
||||
* @param {password, validPassword} props
|
||||
* @param password 正确的密码
|
||||
* @param validPassword(bool) 回调函数，校验正确回调入参为true
|
||||
* @returns
|
||||
*/
|
||||
export const ArticleLock = props => {
|
||||
const { validPassword } = props
|
||||
const { locale } = useGlobal()
|
||||
const submitPassword = () => {
|
||||
const p = document.getElementById('password')
|
||||
if (!validPassword(p?.value)) {
|
||||
const tips = document.getElementById('tips')
|
||||
if (tips) {
|
||||
tips.innerHTML = ''
|
||||
tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
const passwordInputRef = useRef(null)
|
||||
useEffect(() => {
|
||||
// 选中密码输入框并将其聚焦
|
||||
passwordInputRef.current.focus()
|
||||
}, [])
|
||||
|
||||
return <div id='container' className='w-full flex justify-center items-center h-96 '>
|
||||
<div className='text-center space-y-3'>
|
||||
<div className='font-bold dark:text-gray-300 text-black'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
|
||||
<div className='flex mx-4'>
|
||||
<input id="password" type='password'
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
submitPassword()
|
||||
}
|
||||
}}
|
||||
ref={passwordInputRef} // 绑定ref到passwordInputRef变量
|
||||
className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 bg-gray-100 dark:bg-gray-500'>
|
||||
</input>
|
||||
<div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
|
||||
<i className={'duration-200 cursor-pointer fas fa-key'} > {locale.COMMON.SUBMIT}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id='tips'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
65
themes/heo/components/ArticleRecommend.js
Normal file
65
themes/heo/components/ArticleRecommend.js
Normal file
@@ -0,0 +1,65 @@
|
||||
import Link from 'next/link'
|
||||
import CONFIG from '../config'
|
||||
import BLOG from '@/blog.config'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import LazyImage from '@/components/LazyImage'
|
||||
|
||||
/**
|
||||
* 关联推荐文章
|
||||
* @param {prev,next} param0
|
||||
* @returns
|
||||
*/
|
||||
export default function ArticleRecommend({ recommendPosts, siteInfo }) {
|
||||
const { locale } = useGlobal()
|
||||
|
||||
if (
|
||||
!CONFIG.ARTICLE_RECOMMEND ||
|
||||
!recommendPosts ||
|
||||
recommendPosts.length === 0
|
||||
) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-8 hidden md:block">
|
||||
|
||||
{/* 推荐文章 */}
|
||||
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
|
||||
<div className='dark:text-gray-300 text-lg font-bold'>
|
||||
<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
|
||||
? post.pageCoverThumbnail
|
||||
: 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 rounded-2xl">
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
87
themes/heo/components/BlogPostArchive.js
Normal file
87
themes/heo/components/BlogPostArchive.js
Normal file
@@ -0,0 +1,87 @@
|
||||
import React from 'react'
|
||||
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 所有文章
|
||||
* @param archiveTitle 归档标题
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
|
||||
if (!posts || posts.length === 0) {
|
||||
return <></>
|
||||
} else {
|
||||
return (
|
||||
<div className=''>
|
||||
<div
|
||||
className="pb-4 dark:text-gray-300"
|
||||
id={archiveTitle}
|
||||
>
|
||||
{archiveTitle}
|
||||
</div>
|
||||
<ul>
|
||||
{posts?.map(post => {
|
||||
const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
|
||||
if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
|
||||
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-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>
|
||||
<LazyImage className={'rounded-xl bg-center bg-cover w-40 h-24'} src={post?.pageCoverThumbnail}/>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 文字区块 */}
|
||||
<div className={'flex px-2 flex-col justify-between w-full'}>
|
||||
<div>
|
||||
{/* 分类 */}
|
||||
{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}
|
||||
</Link>
|
||||
</div>}
|
||||
|
||||
{/* 标题 */}
|
||||
<Link
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
passHref
|
||||
className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 dark:group-hover:text-yellow-600 line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
|
||||
<span className='menu-link '>{post.title}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 摘要 */}
|
||||
{/* <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> */}
|
||||
|
||||
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
|
||||
<div>
|
||||
{' '}
|
||||
{post.tagItems?.map(tag => (
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default BlogPostArchive
|
||||
85
themes/heo/components/BlogPostCard.js
Normal file
85
themes/heo/components/BlogPostCard.js
Normal file
@@ -0,0 +1,85 @@
|
||||
import Link from 'next/link'
|
||||
import CONFIG from '../config'
|
||||
import BLOG from '@/blog.config'
|
||||
import TagItemMini from './TagItemMini'
|
||||
import LazyImage from '@/components/LazyImage'
|
||||
|
||||
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
|
||||
if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
|
||||
post.pageCoverThumbnail = siteInfo?.pageCover
|
||||
}
|
||||
const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
|
||||
return (
|
||||
<div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
|
||||
|
||||
<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 && (
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* 文字区块 */}
|
||||
<div className={'flex p-6 2xl:p-4 flex-col justify-between h-48 md:h-full 2xl:h-48 w-full md:w-7/12 2xl: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 `}>
|
||||
<Link passHref href={`/category/${post.category}`}
|
||||
className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-yellow-700 dark:text-gray-600 transform">
|
||||
{post.category}
|
||||
</Link>
|
||||
</div>}
|
||||
|
||||
{/* 标题 */}
|
||||
<Link
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
passHref
|
||||
className={' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100 line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
|
||||
<span className='menu-link '>{post.title}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 摘要 */}
|
||||
{(!showPreview || showSummary) && !post.results && (
|
||||
<p className="line-clamp-2 replace my-3 2xl:my-1 text-gray-700 dark:text-gray-300 text-sm font-light leading-tight">
|
||||
{post.summary}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 搜索结果 */}
|
||||
{post.results && (
|
||||
<p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
{post.results.map((r, index) => (
|
||||
<span key={index}>{r}</span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
|
||||
<div>
|
||||
{' '}
|
||||
{post.tagItems?.map(tag => (
|
||||
<TagItemMini key={tag.name} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogPostCard
|
||||
14
themes/heo/components/BlogPostListEmpty.js
Normal file
14
themes/heo/components/BlogPostListEmpty.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
|
||||
/**
|
||||
* 空白博客 列表
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const BlogPostListEmpty = ({ currentSearch }) => {
|
||||
const { locale } = useGlobal()
|
||||
return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
|
||||
<div className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_MORE} {(currentSearch && <div>{currentSearch}</div>)}</div>
|
||||
</div>
|
||||
}
|
||||
export default BlogPostListEmpty
|
||||
35
themes/heo/components/BlogPostListPage.js
Normal file
35
themes/heo/components/BlogPostListPage.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import BlogPostCard from './BlogPostCard'
|
||||
import PaginationNumber from './PaginationNumber'
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostListEmpty from './BlogPostListEmpty'
|
||||
|
||||
/**
|
||||
* 文章列表分页表格
|
||||
* @param page 当前页
|
||||
* @param posts 所有文章
|
||||
* @param tags 所有标签
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
|
||||
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
|
||||
const showPagination = postCount >= BLOG.POSTS_PER_PAGE
|
||||
if (!posts || posts.length === 0 || page > totalPage) {
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default BlogPostListPage
|
||||
76
themes/heo/components/BlogPostListScroll.js
Normal file
76
themes/heo/components/BlogPostListScroll.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostCard from './BlogPostCard'
|
||||
import BlogPostListEmpty from './BlogPostListEmpty'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import CONFIG from '../config'
|
||||
import { getListByPage } from '@/lib/utils'
|
||||
|
||||
/**
|
||||
* 博客列表滚动分页
|
||||
* @param posts 所有文章
|
||||
* @param tags 所有标签
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
|
||||
const postsPerPage = BLOG.POSTS_PER_PAGE
|
||||
const [page, updatePage] = useState(1)
|
||||
const postsToShow = getListByPage(posts, page, postsPerPage)
|
||||
|
||||
let hasMore = false
|
||||
if (posts) {
|
||||
const totalCount = posts.length
|
||||
hasMore = page * postsPerPage < totalCount
|
||||
}
|
||||
|
||||
const handleGetMore = () => {
|
||||
if (!hasMore) return
|
||||
updatePage(page + 1)
|
||||
}
|
||||
|
||||
// 监听滚动自动分页加载
|
||||
const scrollTrigger = () => {
|
||||
requestAnimationFrame(() => {
|
||||
const scrollS = window.scrollY + window.outerHeight
|
||||
const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
|
||||
if (scrollS > clientHeight + 100) {
|
||||
handleGetMore()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 监听滚动
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', scrollTrigger)
|
||||
return () => {
|
||||
window.removeEventListener('scroll', scrollTrigger)
|
||||
}
|
||||
})
|
||||
|
||||
const targetRef = useRef(null)
|
||||
const { locale } = useGlobal()
|
||||
|
||||
if (!postsToShow || postsToShow.length === 0) {
|
||||
return <BlogPostListEmpty currentSearch={currentSearch} />
|
||||
} else {
|
||||
return <div id='container' ref={targetRef} className='w-full'>
|
||||
|
||||
{/* 文章列表 */}
|
||||
<div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
|
||||
{postsToShow.map(post => (
|
||||
<BlogPostCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 更多按钮 */}
|
||||
<div>
|
||||
<div onClick={() => { handleGetMore() }}
|
||||
className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'
|
||||
> {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`} </div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
export default BlogPostListScroll
|
||||
9
themes/heo/components/Card.js
Normal file
9
themes/heo/components/Card.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const Card = ({ children, headerSlot, className }) => {
|
||||
return <div className={`${className || ''} card border dark:border-gray-700 rounded-xl lg:p-6 p-4`}>
|
||||
<>{headerSlot}</>
|
||||
<section>
|
||||
{children}
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
export default Card
|
||||
90
themes/heo/components/Catalog.js
Normal file
90
themes/heo/components/Catalog.js
Normal file
@@ -0,0 +1,90 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import throttle from 'lodash.throttle'
|
||||
import { uuidToId } from 'notion-utils'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
|
||||
/**
|
||||
* 目录导航组件
|
||||
* @param toc
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const Catalog = ({ toc }) => {
|
||||
const { locale } = useGlobal()
|
||||
// 监听滚动事件
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', actionSectionScrollSpy)
|
||||
actionSectionScrollSpy()
|
||||
return () => {
|
||||
window.removeEventListener('scroll', actionSectionScrollSpy)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 目录自动滚动
|
||||
const tRef = useRef(null)
|
||||
const tocIds = []
|
||||
|
||||
// 同步选中目录事件
|
||||
const [activeSection, setActiveSection] = useState(null)
|
||||
|
||||
const actionSectionScrollSpy = useCallback(throttle(() => {
|
||||
const sections = document.getElementsByClassName('notion-h')
|
||||
let prevBBox = null
|
||||
let currentSectionId = activeSection
|
||||
for (let i = 0; i < sections.length; ++i) {
|
||||
const section = sections[i]
|
||||
if (!section || !(section instanceof Element)) continue
|
||||
if (!currentSectionId) {
|
||||
currentSectionId = section.getAttribute('data-id')
|
||||
}
|
||||
const bbox = section.getBoundingClientRect()
|
||||
const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
|
||||
const offset = Math.max(150, prevHeight / 4)
|
||||
// GetBoundingClientRect returns values relative to viewport
|
||||
if (bbox.top - offset < 0) {
|
||||
currentSectionId = section.getAttribute('data-id')
|
||||
prevBBox = bbox
|
||||
continue
|
||||
}
|
||||
// No need to continue loop, if last element has been detected
|
||||
break
|
||||
}
|
||||
setActiveSection(currentSectionId)
|
||||
const index = tocIds.indexOf(currentSectionId) || 0
|
||||
tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
|
||||
}, 200))
|
||||
|
||||
// 无目录就直接返回空
|
||||
if (!toc || toc.length < 1) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return <div className='px-3 py-1 dark:text-white text-black'>
|
||||
<div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
|
||||
<div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
|
||||
<nav className='h-full'>
|
||||
{toc.map((tocItem) => {
|
||||
const id = uuidToId(tocItem.id)
|
||||
tocIds.push(id)
|
||||
return (
|
||||
<a
|
||||
key={id}
|
||||
href={`#${id}`}
|
||||
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
|
||||
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
|
||||
>
|
||||
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
|
||||
className={`${activeSection === id && ' font-bold text-indigo-600'}`}
|
||||
>
|
||||
{tocItem.text}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Catalog
|
||||
61
themes/heo/components/CategoryBar.js
Normal file
61
themes/heo/components/CategoryBar.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import { ChevronDoubleLeft, ChevronDoubleRight } from '@/components/HeroIcons'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useRef, useState } from 'react'
|
||||
|
||||
/**
|
||||
* 博客列表上方嵌入条
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export default function CategoryBar(props) {
|
||||
const { categoryOptions, border = true } = props
|
||||
const { locale } = useGlobal()
|
||||
const [scrollRight, setScrollRight] = useState(false)
|
||||
// 创建一个ref引用
|
||||
const categoryBarItemsRef = useRef(null)
|
||||
|
||||
// 点击#right时，滚动#category-bar-items到最右边
|
||||
const handleToggleScroll = () => {
|
||||
if (categoryBarItemsRef.current) {
|
||||
const { scrollWidth, clientWidth } = categoryBarItemsRef.current
|
||||
if (scrollRight) {
|
||||
categoryBarItemsRef.current.scrollLeft = 0
|
||||
} else {
|
||||
categoryBarItemsRef.current.scrollLeft = scrollWidth - clientWidth
|
||||
}
|
||||
setScrollRight(!scrollRight)
|
||||
}
|
||||
}
|
||||
return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]
|
||||
${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
|
||||
|
||||
<div id='category-bar-items' ref={categoryBarItemsRef} className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
|
||||
<MenuItem href='/' name={locale.NAV.INDEX} />
|
||||
{categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
|
||||
</div>
|
||||
|
||||
<div id='category-bar-next' className='flex items-center justify-center'>
|
||||
<div id='right' className='cursor-pointer mx-2' onClick={handleToggleScroll}>
|
||||
{scrollRight ? <ChevronDoubleLeft className={'w-5 h-5'} /> : <ChevronDoubleRight className={'w-5 h-5'} /> }
|
||||
</div>
|
||||
<Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
|
||||
{locale.MENU.CATEGORY}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 按钮
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
const MenuItem = ({ href, name }) => {
|
||||
const router = useRouter()
|
||||
const selected = router.pathname === href
|
||||
return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
|
||||
<Link href={href}>{name}</Link>
|
||||
</div>
|
||||
}
|
||||
31
themes/heo/components/CategoryGroup.js
Normal file
31
themes/heo/components/CategoryGroup.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
const CategoryGroup = ({ currentCategory, categories }) => {
|
||||
if (!categories) {
|
||||
return <></>
|
||||
}
|
||||
return <>
|
||||
<div id='category-list' className='dark:border-gray-700 flex flex-wrap mx-4'>
|
||||
{categories.map(category => {
|
||||
const selected = currentCategory === category.name
|
||||
return (
|
||||
<Link
|
||||
key={category.name}
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
className={(selected
|
||||
? 'hover:text-white dark:hover:text-white bg-indigo-600 text-white '
|
||||
: 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-indigo-600') +
|
||||
' text-sm w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'}>
|
||||
|
||||
<div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
|
||||
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
export default CategoryGroup
|
||||
38
themes/heo/components/DarkModeButton.js
Normal file
38
themes/heo/components/DarkModeButton.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { saveDarkModeToCookies } from '@/themes/theme'
|
||||
import { Moon, Sun } from '@/components/HeroIcons'
|
||||
import { useImperativeHandle } from 'react'
|
||||
|
||||
/**
|
||||
* 深色模式按钮
|
||||
*/
|
||||
const DarkModeButton = (props) => {
|
||||
const { cRef, className } = props
|
||||
const { isDarkMode, updateDarkMode } = useGlobal()
|
||||
|
||||
/**
|
||||
* 对外暴露方法
|
||||
*/
|
||||
useImperativeHandle(cRef, () => {
|
||||
return {
|
||||
handleChangeDarkMode: () => {
|
||||
handleChangeDarkMode()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 用户手动设置主题
|
||||
const handleChangeDarkMode = () => {
|
||||
const newStatus = !isDarkMode
|
||||
saveDarkModeToCookies(newStatus)
|
||||
updateDarkMode(newStatus)
|
||||
const htmlElement = document.getElementsByTagName('html')[0]
|
||||
htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
|
||||
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
return <div onClick={handleChangeDarkMode} className={`${className || ''} cursor-pointer hover: scale-100 hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all`}>
|
||||
<div id='darkModeButton' className=' cursor-pointer hover: scale-50 w-10 h-10 '> {isDarkMode ? <Sun /> : <Moon />}</div>
|
||||
</div>
|
||||
}
|
||||
export default DarkModeButton
|
||||
31
themes/heo/components/FloatDarkModeButton.js
Normal file
31
themes/heo/components/FloatDarkModeButton.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { saveDarkModeToCookies } from '@/themes/theme'
|
||||
import CONFIG from '../config'
|
||||
|
||||
export default function FloatDarkModeButton () {
|
||||
const { isDarkMode, updateDarkMode } = useGlobal()
|
||||
|
||||
if (!CONFIG.WIDGET_DARK_MODE) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
// 用户手动设置主题
|
||||
const handleChangeDarkMode = () => {
|
||||
const newStatus = !isDarkMode
|
||||
saveDarkModeToCookies(newStatus)
|
||||
updateDarkMode(newStatus)
|
||||
const htmlElement = document.getElementsByTagName('html')[0]
|
||||
htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
|
||||
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleChangeDarkMode}
|
||||
className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
|
||||
}
|
||||
>
|
||||
<i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
44
themes/heo/components/FloatTocButton.js
Normal file
44
themes/heo/components/FloatTocButton.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useState } from 'react'
|
||||
import Catalog from './Catalog'
|
||||
|
||||
/**
|
||||
* 移动端悬浮目录按钮
|
||||
*/
|
||||
export default function FloatTocButton(props) {
|
||||
const [tocVisible, changeTocVisible] = useState(false)
|
||||
|
||||
const { post } = props
|
||||
|
||||
const toggleToc = () => {
|
||||
changeTocVisible(!tocVisible)
|
||||
}
|
||||
|
||||
// 没有目录就隐藏该按钮
|
||||
if (!post || !post.toc || post.toc.length < 1) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return (<div className='fixed lg:hidden right-4 bottom-24'>
|
||||
{/* 按钮 */}
|
||||
<div onClick={toggleToc} className={'w-11 h-11 select-none hover:scale-110 transform duration-200 text-black dark:text-gray-200 rounded-full bg-white drop-shadow-lg flex justify-center items-center dark:bg-hexo-black-gray py-2 px-2'}>
|
||||
<button id="toc-button" className={'fa-list-ol cursor-pointer fas'} />
|
||||
</div>
|
||||
|
||||
{/* 目录Modal */}
|
||||
<div className='fixed top-0 right-0 z-40 '>
|
||||
{/* 侧边菜单 */}
|
||||
<div
|
||||
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} />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* 背景蒙版 */}
|
||||
<div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
|
||||
onClick={toggleToc} />
|
||||
</div>)
|
||||
}
|
||||
58
themes/heo/components/Footer.js
Normal file
58
themes/heo/components/Footer.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from 'react'
|
||||
import BLOG from '@/blog.config'
|
||||
import SocialButton from './SocialButton'
|
||||
import { AdSlot } from '@/components/GoogleAdsense'
|
||||
// import DarkModeButton from '@/components/DarkModeButton'
|
||||
|
||||
const Footer = ({ title }) => {
|
||||
const d = new Date()
|
||||
const currentYear = d.getFullYear()
|
||||
const copyrightDate = (function () {
|
||||
if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
|
||||
return BLOG.SINCE + '-' + currentYear
|
||||
}
|
||||
return currentYear
|
||||
})()
|
||||
|
||||
return (
|
||||
<footer
|
||||
className='relative z-10 flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm'
|
||||
>
|
||||
|
||||
{/* 颜色过度区 */}
|
||||
<div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 社交按钮 */}
|
||||
<div className='w-full h-24'>
|
||||
<SocialButton />
|
||||
</div>
|
||||
|
||||
<AdSlot type='native'/>
|
||||
<br />
|
||||
|
||||
{/* 底部页面信息 */}
|
||||
<div id='footer-bottom' className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>
|
||||
|
||||
<div id='footer-bottom-left'>
|
||||
NotionNext {BLOG.VERSION} <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
|
||||
</div>
|
||||
|
||||
<div id='footer-bottom-right'>
|
||||
{BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a></>}
|
||||
|
||||
<span className='hidden busuanzi_container_site_pv'>
|
||||
<i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span> </span>
|
||||
<span className='pl-2 hidden busuanzi_container_site_uv'>
|
||||
<i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
|
||||
|
||||
{/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {BLOG.BIO && <>|</>} {BLOG.BIO}</h1> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer >
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
236
themes/heo/components/Hero.js
Normal file
236
themes/heo/components/Hero.js
Normal file
@@ -0,0 +1,236 @@
|
||||
// import Image from 'next/image'
|
||||
|
||||
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'
|
||||
import CONFIG from '../config'
|
||||
|
||||
/**
|
||||
* 顶部英雄区
|
||||
* 左右布局，
|
||||
* 左侧：banner组
|
||||
* 右侧：今日卡牌遮罩
|
||||
* @returns
|
||||
*/
|
||||
const Hero = props => {
|
||||
return (
|
||||
<div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
|
||||
|
||||
<div id="hero" style={{ zIndex: 1 }} className={'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3'} >
|
||||
|
||||
{/* 左侧banner组 */}
|
||||
<BannerGroup {...props} />
|
||||
|
||||
{/* 右侧置顶文章组 */}
|
||||
<TopGroup {...props} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 英雄区左侧banner组
|
||||
* @returns
|
||||
*/
|
||||
function BannerGroup(props) {
|
||||
return (
|
||||
// 左侧英雄区
|
||||
<div id='bannerGroup' className='flex flex-col justify-between flex-1 mr-2 max-w-[42rem]'>
|
||||
{/* 动图 */}
|
||||
<Banner {...props} />
|
||||
{/* 导航分类 */}
|
||||
<GroupMenu />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 英雄区左上角banner动图
|
||||
* @returns
|
||||
*/
|
||||
function Banner(props) {
|
||||
const router = useRouter()
|
||||
const { latestPosts } = props
|
||||
// 跳转到任意文章
|
||||
function handleClickBanner() {
|
||||
const randomIndex = Math.floor(Math.random() * latestPosts.length)
|
||||
const randomPost = latestPosts[randomIndex]
|
||||
router.push(randomPost.slug)
|
||||
}
|
||||
|
||||
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>
|
||||
<div className='text-xs text-gray-600 dark:text-gray-200'>{CONFIG.HERO_TITLE_3}</div>
|
||||
</div>
|
||||
|
||||
{/* 斜向滚动的图标 */}
|
||||
<TagsGroupBar />
|
||||
|
||||
{/* 遮罩 */}
|
||||
<div id='banner-cover' style={{ backdropFilter: 'blur(15px)' }} className={'opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'}>
|
||||
<div className='ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in'>
|
||||
<div className='text-7xl text-white font-extrabold'>随便逛逛</div>
|
||||
<div className='-ml-3 text-gray-300'><ArrowSmallRight className={'w-24 h-24 stroke-2'} /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 图标滚动标签组
|
||||
* 英雄区左上角banner条中斜向滚动的图标
|
||||
*/
|
||||
function TagsGroupBar() {
|
||||
const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
|
||||
|
||||
return (
|
||||
<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'}>
|
||||
<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'}>
|
||||
<LazyImage priority={true} src={g.img_2} title={g.title_2} className='w-2/3 hidden xl:block' />
|
||||
</div>
|
||||
</div>)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 英雄区左下角3个指定分类按钮
|
||||
* @returns
|
||||
*/
|
||||
function GroupMenu() {
|
||||
return (
|
||||
<div className="h-[165px] select-none xl:h-20 flex flex-col w-48 justify-between xl:space-y-0 xl:flex-row xl:w-full xl:flex-nowrap xl:space-x-3">
|
||||
<Link href={CONFIG.HERO_CATEGORY_1?.url} className="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
|
||||
<div className="font-bold text-lg pl-5 relative -mt-2">
|
||||
{CONFIG.HERO_CATEGORY_1?.title}
|
||||
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
|
||||
</div>
|
||||
<div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
|
||||
<i className="fa-solid fa-star text-4xl"></i>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href={CONFIG.HERO_CATEGORY_2?.url} className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
|
||||
<div className="font-bold text-lg pl-5 relative -mt-2">
|
||||
{CONFIG.HERO_CATEGORY_2?.title}
|
||||
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
|
||||
</div>
|
||||
<div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
|
||||
<i className="fa-solid fa-fire-flame-curved text-4xl"></i>
|
||||
</div>
|
||||
</Link>
|
||||
{/* 第三个标签在小屏上不显示 */}
|
||||
<Link href={CONFIG.HERO_CATEGORY_3?.url} className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
|
||||
<div className="font-bold text-lg pl-5 relative -mt-2">
|
||||
{CONFIG.HERO_CATEGORY_3?.title}
|
||||
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
|
||||
</div>
|
||||
<div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
|
||||
<i className="fa-solid fa-book-bookmark text-4xl "></i>
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 置顶文章区域
|
||||
*/
|
||||
function TopGroup(props) {
|
||||
const { latestPosts, siteInfo } = props
|
||||
const todayCardRef = useRef()
|
||||
function handleMouseLeave() {
|
||||
todayCardRef.current.coverUp()
|
||||
}
|
||||
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'>
|
||||
<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'>
|
||||
荐
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
})}
|
||||
</div>
|
||||
<TodayCard cRef={todayCardRef} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 英雄区右侧，今日卡牌
|
||||
* @returns
|
||||
*/
|
||||
function TodayCard({ cRef }) {
|
||||
const router = useRouter()
|
||||
// 卡牌是否盖住下层
|
||||
const [isCoverUp, setIsCoverUp] = useState(true)
|
||||
|
||||
/**
|
||||
* 外部可以调用此方法
|
||||
*/
|
||||
useImperativeHandle(cRef, () => {
|
||||
return {
|
||||
coverUp: () => {
|
||||
setIsCoverUp(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 点击更多
|
||||
* @param {*} e
|
||||
*/
|
||||
function handleClickMore(e) {
|
||||
e.stopPropagation()
|
||||
setIsCoverUp(false)
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击卡片跳转的链接
|
||||
* @param {*} e
|
||||
*/
|
||||
function handleCardClick(e) {
|
||||
router.push(CONFIG.HERO_TITLE_LINK)
|
||||
}
|
||||
|
||||
return <div id='today-card' className={`${isCoverUp ? ' ' : 'pointer-events-none'} overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}>
|
||||
<div id='card-body' onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110 pointer-events-none'} shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
|
||||
<div id='today-card-info' className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
|
||||
<div className='flex flex-col'>
|
||||
<div className='text-xs font-light'>{CONFIG.HERO_TITLE_4}</div>
|
||||
<div className='text-3xl font-bold'>{CONFIG.HERO_TITLE_5}</div>
|
||||
</div>
|
||||
<div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
|
||||
<PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
|
||||
<div id='more' className='select-none'>更多推荐</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`} style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Hero
|
||||
47
themes/heo/components/HexoRecentComments.js
Normal file
47
themes/heo/components/HexoRecentComments.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import React from 'react'
|
||||
import BLOG from '@/blog.config'
|
||||
import Card from '@/themes/hexo/components/Card'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import Link from 'next/link'
|
||||
import { RecentComments } from '@waline/client'
|
||||
|
||||
/**
|
||||
* @see https://waline.js.org/guide/get-started.html
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const HexoRecentComments = (props) => {
|
||||
const [comments, updateComments] = React.useState([])
|
||||
const { locale } = useGlobal()
|
||||
const [onLoading, changeLoading] = React.useState(true)
|
||||
React.useEffect(() => {
|
||||
RecentComments({
|
||||
serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
|
||||
count: 5
|
||||
}).then(({ comments }) => {
|
||||
changeLoading(false)
|
||||
updateComments(comments)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Card >
|
||||
<div className=" mb-2 px-1 justify-between">
|
||||
<i className="mr-2 fas fas fa-comment" />
|
||||
{locale.COMMON.RECENT_COMMENTS}
|
||||
</div>
|
||||
|
||||
{onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
|
||||
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
|
||||
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
|
||||
<div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
|
||||
<div className='dark:text-gray-400 text-gray-400 text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'>
|
||||
<Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link>
|
||||
</div>
|
||||
</div>)}
|
||||
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default HexoRecentComments
|
||||
87
themes/heo/components/InfoCard.js
Normal file
87
themes/heo/components/InfoCard.js
Normal file
@@ -0,0 +1,87 @@
|
||||
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'
|
||||
import CONFIG from '../config'
|
||||
import Announcement from './Announcement'
|
||||
import Card from './Card'
|
||||
|
||||
/**
|
||||
* 社交信息卡
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export function InfoCard(props) {
|
||||
const { siteInfo, notice } = props
|
||||
const router = useRouter()
|
||||
// 在文章详情页特殊处理
|
||||
const isSlugPage = router.pathname === '/[...slug]'
|
||||
|
||||
return (
|
||||
<Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
|
||||
{/* 信息卡牌第一行 */}
|
||||
<div className='flex justify-between'>
|
||||
{/* 问候语 */}
|
||||
<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`}>
|
||||
<LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={BLOG.AUTHOR} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className='text-3xl font-extrabold mt-3'>
|
||||
{BLOG.AUTHOR}
|
||||
</h2>
|
||||
|
||||
{/* 公告栏 */}
|
||||
<div>
|
||||
<Announcement post={notice} style={{ color: 'white !important' }} />
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between'>
|
||||
<div className='flex space-x-3 hover:text-black dark:hover:text-white'>
|
||||
{/* 两个社交按钮 */}
|
||||
<div className='bg-indigo-400 p-2 rounded-full transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
|
||||
<Link href='/about'><GlobeAlt className={'w-6 h-6'} /></Link>
|
||||
</div>
|
||||
<div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
|
||||
<Link href={CONFIG.INFO_CARD_URL}><i className='fab fa-github text-xl' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<MoreButton />
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 欢迎语
|
||||
*/
|
||||
function GreetingsWords() {
|
||||
const greetings = CONFIG.INFOCARD_GREETINGS
|
||||
const [greeting, setGreeting] = useState(greetings[0])
|
||||
// 每次点击，随机获取greetings中的一个
|
||||
const handleChangeGreeting = () => {
|
||||
const randomIndex = Math.floor(Math.random() * greetings.length)
|
||||
setGreeting(greetings[randomIndex])
|
||||
}
|
||||
|
||||
return <div onClick={handleChangeGreeting} className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50 hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg duration-200 transition-colors'>
|
||||
{greeting}
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 了解更多按鈕
|
||||
* @returns
|
||||
*/
|
||||
function MoreButton() {
|
||||
return <Link href='/about'>
|
||||
<div className={'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'}>
|
||||
<ArrowRightCircle className={'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'} />
|
||||
<div className='font-bold'>了解更多</div>
|
||||
</div>
|
||||
</Link>
|
||||
}
|
||||
29
themes/heo/components/JumpToCommentButton.js
Normal file
29
themes/heo/components/JumpToCommentButton.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
import CONFIG from '../config'
|
||||
|
||||
/**
|
||||
* 跳转到评论区
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const JumpToCommentButton = () => {
|
||||
if (!CONFIG.WIDGET_TO_COMMENT) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
function navToComment() {
|
||||
if (document.getElementById('comment')) {
|
||||
window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
|
||||
}
|
||||
// 兼容性不好
|
||||
// const commentElement = document.getElementById('comment')
|
||||
// if (commentElement) {
|
||||
// commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
}
|
||||
|
||||
return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
|
||||
<i className='fas fa-comment text-xs' />
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default JumpToCommentButton
|
||||
25
themes/heo/components/JumpToTopButton.js
Normal file
25
themes/heo/components/JumpToTopButton.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import React from 'react'
|
||||
import CONFIG from '../config'
|
||||
|
||||
/**
|
||||
* 跳转到网页顶部
|
||||
* 当屏幕下滑500像素后会出现该控件
|
||||
* @param targetRef 关联高度的目标html标签
|
||||
* @param showPercent 是否显示百分比
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const JumpToTopButton = ({ showPercent = true, percent }) => {
|
||||
const { locale } = useGlobal()
|
||||
|
||||
if (!CONFIG.WIDGET_TO_TOP) {
|
||||
return <></>
|
||||
}
|
||||
return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
|
||||
<div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-xs' /></div>
|
||||
{showPercent && (<div className='text-xs hidden lg:block'>{percent}</div>)}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default JumpToTopButton
|
||||
49
themes/heo/components/LatestPostsGroup.js
Normal file
49
themes/heo/components/LatestPostsGroup.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import LazyImage from '@/components/LazyImage'
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* 最新文章列表
|
||||
* @param posts 所有文章数据
|
||||
* @param sliceCount 截取展示的数量 默认6
|
||||
* @constructor
|
||||
*/
|
||||
const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
|
||||
// 获取当前路径
|
||||
|
||||
if (!latestPosts) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return <div className='grid grid-cols-2 gap-4'>
|
||||
{latestPosts.map(post => {
|
||||
const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
|
||||
|
||||
return (
|
||||
(<Link key={post.id} passHref
|
||||
title={post.title}
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
|
||||
className={'my-3 flex flex-col w-full'}>
|
||||
|
||||
<div className="w-full h-24 md:h-60 overflow-hidden relative rounded-lg mb-2">
|
||||
<LazyImage src={`${headerImage}`} className='object-cover w-full h-full' />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
' font-bold overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
|
||||
' hover:text-indigo-400 cursor-pointer'
|
||||
}
|
||||
>
|
||||
|
||||
<div className='line-clamp-2 menu-link'>{post.title}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</Link>)
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
export default LatestPostsGroup
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user