d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-15 23:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

漂浮线段特效

Browse Source
This commit is contained in:
Vixcity
2023-01-30 15:06:41 +08:00
parent 7bfc5610b6
commit f1f9f28a3a
20 changed files with 153 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
blog.config.js
View File

@@ -1,25 +1,25 @@
// 注: process.env.XX是Vercel的环境变量，配置方式见：https://docs.tangly1024.com/zh/features/personality
const BLOG = {
// Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || 'fb7bf0cd0563410e862e5ee67b8a8d33',
NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
PSEUDO_STATIC: false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。
THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example'] @see https://preview.tangly1024.com
THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
LANG: 'zh-CN', // e.g 'zh-CN','en-US' see /lib/lang.js for more.
SINCE: 2022, // e.g if leave this empty, current year will be used.
APPEARANCE: 'auto', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
SINCE: 2021, // e.g if leave this empty, current year will be used.
APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
AUTHOR: 'Vixcity', // 作者
AUTHOR: 'tangly1024', // 作者
BIO: '一个普通的干饭人🍚', // 作者简介
LINK: 'https://bolg.vixcitycc.top/', // 网站地址
LINK: 'https://tangly1024.com', // 网站地址
KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
// 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
CONTACT_EMAIL: '2091283625@qq.com', // 邮箱
CONTACT_EMAIL: 'mail@tangly1024.com', // 邮箱
CONTACT_WEIBO: '', // 你的微博个人主页
CONTACT_TWITTER: '', // 你的twitter个人主页
CONTACT_GITHUB: 'https://github.com/Vixcity', // 你的github个人主页
CONTACT_TELEGRAM: '', // 你的telegram 地址 例如 https://t.me/tangly_1024
CONTACT_GITHUB: 'https://github.com/tangly1024', // 你的github个人主页
CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024
CONTACT_LINKEDIN: '', // 你的linkedIn 首页
// 网站默认使用PingFangSC及NotoSansSC，
@@ -56,35 +56,30 @@ const BLOG = {
POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', // 是否在列表加载文章预览
POST_PREVIEW_LINES: 12, // 预览博客行数
POST_RECOMMEND_COUNT: 6, // 推荐文章数量
POSTS_PER_PAGE: 10, // post counts per page
POSTS_SORT_BY: 'date', // 排序方式 'date'按时间,'notion'由notion控制
POSTS_PER_PAGE: 12, // post counts per page
POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制
PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
// 鼠标点击烟花特效
FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || true, // 开关
FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
// 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
FIREWORKS_COLOR: ['255, 20, 97', '24, 255, 146', '90, 135, 255', '251, 243, 140'],
// 樱花飘落特效
SAKURA: process.env.NEXT_PUBLIC_SAKURA || true, // 开关
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
// 漂浮线段特效
NEST: process.env.NEXT_PUBLIC_NEST || true, // 开关
// 星空雨特效 黑夜模式才会生效
STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || true, // 开关
STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
// 悬浮挂件
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
// 好看的主题
// https://cdn.jsdelivr.net/npm/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
// https://cdn.jsdelivr.net/npm/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
// https://cdn.jsdelivr.net/npm/live2d-widget-model-nito@1.0.5/assets/nito.model.json
// https://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
// https://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
// https://cdn.jsdelivr.net/npm/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
// https://cdn.jsdelivr.net/npm/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
WIDGET_PET_SWITCH_THEME: false, // 点击宠物挂件切换博客主题
WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
// 音乐播放插件
MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
@@ -191,9 +186,9 @@ const BLOG = {
// 作废配置
AVATAR: '/avatar.png', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png
TITLE: process.env.NEXT_PUBLIC_TITLE || 'VIXCITY BLOG', // 站点标题 ，被notion中的页面标题覆盖
TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
HOME_BANNER_IMAGE: './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件
DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '我的小破博客', // 站点描述，被notion中的页面描述覆盖
DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
// 开发相关
NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public

113
components/Nest.js Normal file
View File

@@ -0,0 +1,113 @@
/* eslint-disable */
import React from 'react'
export const Nest = () => {
React.useEffect(() => {
createNest()
}, [])
}
/**
* 创建连接点
* @param config
*/
function createNest() {
const e = document.getElementById('__next')
if(!e) return
function n(e, n, t) {
return e.getAttribute(n) || t
}
function t() {
;(u = i.width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth),
(d = i.height =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight)
}
function o() {
c.clearRect(0, 0, u, d)
const e = [s].concat(x)
let n, t, i, l, r, w
x.forEach(function (o) {
for (
o.x += o.xa,
o.y += o.ya,
o.xa *= o.x > u || o.x < 0 ? -1 : 1,
o.ya *= o.y > d || o.y < 0 ? -1 : 1,
c.fillRect(o.x - 0.5, o.y - 0.5, 1, 1),
t = 0;
t < e.length;
t++
)
(n = e[t]),
o !== n &&
null !== n.x &&
null !== n.y &&
((l = o.x - n.x),
(r = o.y - n.y),
(w = l * l + r * r),
w < n.max &&
(n === s &&
w >= n.max / 2 &&
((o.x -= 0.03 * l), (o.y -= 0.03 * r)),
(i = (n.max - w) / n.max),
c.beginPath(),
(c.lineWidth = i / 2),
(c.strokeStyle = 'rgba(' + a.c + ',' + (i + 0.2) + ')'),
c.moveTo(o.x, o.y),
c.lineTo(n.x, n.y),
c.stroke()))
e.splice(e.indexOf(o), 1)
}),
m(o)
}
var i = document.createElement('canvas')
i.id = 'canvasNestCreated'
var a = (function () {
const t = e
return {
z: n(t, 'zIndex', 0),
o: n(t, 'opacity', 0.7),
c: n(t, 'color', '0,0,0'),
n: n(t, 'count', 99)
}
})(),
c = i.getContext('2d')
let u, d
var m =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (e) {
window.setTimeout(e, 1e3 / 45)
}
const l = Math.random
var r,
s = { x: null, y: null, max: 2e4 }
;(i.style.cssText =
'position:fixed;top:0;left:0;z-index:' + a.z + ';opacity:' + a.o),
(r = 'body'), e.appendChild(i),
t(),
(window.onresize = t),
(window.onmousemove = function (e) {
;(e = e || window.event), (s.x = e.clientX), (s.y = e.clientY)
}),
(window.onmouseout = function () {
;(s.x = null), (s.y = null)
})
for (var x = [], w = 0; a.n > w; w++) {
const e = l() * u,
n = l() * d,
t = 2 * l() - 1,
o = 2 * l() - 1
x.push({ x: e, y: n, xa: t, ya: o, max: 6e3 })
}
setTimeout(function () {
o()
}, 100)
}

5
components/Sakura.js
View File

@@ -1,15 +1,10 @@
/* eslint-disable */
/**
* https://codepen.io/juliangarnier/pen/gmOwJX
* custom by hexo-theme-yun @YunYouJun
*/
import React from 'react'
export const Sakura = () => {
React.useEffect(() => {
createSakura({})
}, [])
// return <canvas id="fireworks" className="fireworks"></canvas>
}
/**

4
components/StarrySky.js
View File

@@ -1,8 +1,4 @@
/* eslint-disable */
/**
* https://codepen.io/juliangarnier/pen/gmOwJX
* custom by hexo-theme-yun @YunYouJun
*/
import React from 'react'
export const StarrySky = () => {

2
pages/_app.js
View File

@@ -25,6 +25,7 @@ import { GlobalContextProvider } from '@/lib/global'
import { DebugPanel } from '@/components/DebugPanel'
import { ThemeSwitch } from '@/components/ThemeSwitch'
import { Fireworks } from '@/components/Fireworks'
import { Nest } from '@/components/Nest'
import { Sakura } from '@/components/Sakura'
import { StarrySky } from '@/components/StarrySky'
import MusicPlayer from '@/components/MusicPlayer'
@@ -53,6 +54,7 @@ const MyApp = ({ Component, pageProps }) => {
{JSON.parse(BLOG.SAKURA) && <Sakura />}
{JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
{JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
{JSON.parse(BLOG.NEST) && <Nest />}
</>
// 默认Webfont: 请在font.js文件中检查font-family 新版改从npm本地导入；

4
themes/example/LayoutBase.js
View File

@@ -25,7 +25,8 @@ const LayoutBase = props => {
<Nav {...props} />
{/* 主体 */}
<div id='container-inner' className="w-full">
<div id='wrapper'>
<div id='container-inner' className="w-full relative z-10">
<Title {...props} />
@@ -38,6 +39,7 @@ const LayoutBase = props => {
</div>
</div>
</div>
<Footer {...props} />

2
themes/example/components/Header.js
View File

@@ -8,7 +8,7 @@ export const Header = (props) => {
const { siteInfo } = props
return (
<header className="w-full px-6 bg-white dark:bg-black">
<header className="w-full px-6 bg-white dark:bg-black relative z-10">
<div className="container mx-auto max-w-4xl md:flex justify-between items-center">
<Link
href='/'

2
themes/fukasawa/LayoutBase.js
View File

@@ -31,7 +31,7 @@ const LayoutBase = (props) => {
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
<AsideLeft {...props} slot={leftAreaSlot}/>
<main id='wrapper' className='relative flex w-full py-8 justify-center'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
<div> {headerSlot} </div>
<div>{children}</div>
</div>

2
themes/fukasawa/components/AsideLeft.js
View File

@@ -11,7 +11,7 @@ import DarkModeButton from '@/components/DarkModeButton'
function AsideLeft (props) {
const { tags, currentTag, categories, currentCategory, post, slot, siteInfo } = props
const router = useRouter()
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block'>
return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block relative z-10'>
<Logo {...props}/>
<section className='flex flex-col text-gray-600'>

2
themes/hexo/LayoutBase.js
View File

@@ -76,7 +76,7 @@ const LayoutBase = props => {
<main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
<div
id="container-inner"
className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center'}
className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'}
>
<div className="w-full max-w-4xl overflow-x-hidden scroll-hidden">
{onLoading ? <LoadingCover /> : children}

2
themes/hexo/components/Header.js
View File

@@ -78,7 +78,7 @@ const Header = props => {
return (
<header
id="header"
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white relative z-10"
style={{
backgroundImage:
`linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`

2
themes/hexo/components/HeaderArticle.js
View File

@@ -19,7 +19,7 @@ export default function HeaderArticle({ post, siteInfo }) {
return (
<div
id="header"
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn relative"
style={{ backgroundImage: headerImage }}
>
<header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">

2
themes/matery/LayoutBase.js
View File

@@ -59,7 +59,7 @@ const LayoutBase = props => {
{headerSlot}
<main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24 relative">
<div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center">
<div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
{onLoading ? <LoadingCover /> : children}
</div>
</main>

2
themes/matery/components/Header.js
View File

@@ -79,7 +79,7 @@ const Header = props => {
return (
<header
id="header"
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white relative z-10"
style={{
backgroundImage:
`linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`

4
themes/medium/LayoutBase.js
View File

@@ -31,7 +31,7 @@ const LayoutBase = props => {
{/* 桌面端左侧菜单 */}
{/* <LeftMenuBar/> */}
<div id='container-inner' className='w-full'>
<div id='container-inner' className='w-full relative z-10'>
{/* 移动端顶部菜单 */}
<TopNavBar {...props}/>
<div className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
@@ -41,7 +41,7 @@ const LayoutBase = props => {
</div>
{/* 桌面端右侧 */}
<div className='hidden xl:block border-l dark:border-transparent w-96'>
<div className='hidden xl:block border-l dark:border-transparent w-96 relative z-10'>
<div className='py-14 px-6 sticky top-0'>
<Tabs>
{slotRight}

2
themes/medium/components/Footer.js
View File

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
return (
<footer
className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6 relative'
>
<DarkModeButton/>
<i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>

2
themes/next/LayoutBase.js
View File

@@ -79,7 +79,7 @@ const LayoutBase = (props) => {
<main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-center flex-1 pb-12'}>
{/* 左侧栏样式 */}
<SideAreaLeft slot={leftAreaSlot} targetRef={targetRef} {...props}/>
<section id='container-inner' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-40' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>
<section id='container-inner' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-40' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`} ref={targetRef}>
{onLoading ? <LoadingCover/> : <> {children}</> }
</section>
{/* 右侧栏样式 */}

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

@@ -93,7 +93,7 @@ export default function Header(props) {
return (
<header
id="header"
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black relative z-10"
style={{
backgroundImage:
`linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo?.pageCover}")`

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

@@ -23,7 +23,7 @@ const SideAreaLeft = props => {
const { post, slot, postCount } = props
const { locale } = useGlobal()
const showToc = post && post.toc && post.toc.length > 1
return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60'}>
return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-10 relative'}>
<section
data-aos="fade-down"

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

@@ -24,7 +24,7 @@ const SideAreaRight = (props) => {
const { tags, currentTag, slot, categories, currentCategory } = props
const { locale } = useGlobal()
const router = useRouter()
return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' hidden 2xl:block flex-col w-60'}>
return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' hidden 2xl:block flex-col w-60 relative z-10'}>
{CONFIG_NEXT.RIGHT_AD && <Card className='mb-2'>
{/* 展示广告 */}