mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
Merge branch 'main' of https://github.com/tangly1024/NotionNext
This commit is contained in:
tangly1024
@@ -34,6 +34,7 @@ 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
|
||||
// 网站字体
|
||||
FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-sans', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
|
||||
FONT_URL: [
|
||||
|
||||
@@ -13,16 +13,21 @@ class MyDocument extends Document {
|
||||
return (
|
||||
<Html lang={BLOG.LANG}>
|
||||
<Head>
|
||||
<CommonScript />
|
||||
<link rel='icon' href='/favicon.ico' />
|
||||
{/* 预加载字体 */}
|
||||
{BLOG.FONT_AWESOME && <>
|
||||
<link rel='preload' href={BLOG.FONT_AWESOME} as="style" crossOrigin="anonymous" />
|
||||
<link rel="stylesheet" href={BLOG.FONT_AWESOME} crossOrigin="anonymous" referrerpolicy="no-referrer" />
|
||||
</>}
|
||||
{BLOG.FONT_URL?.map((fontUrl, index) => {
|
||||
return <link key={index} rel='preload' href={fontUrl} as='font' type='font/woff2' />
|
||||
})}
|
||||
<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 scroll-smooth`}>
|
||||
|
||||
@@ -2,4 +2,7 @@
|
||||
|
||||
#theme-fukasawa .sideLeft hr{
|
||||
opacity: .04;
|
||||
}
|
||||
}
|
||||
.fa-info:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
|
||||
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
|
||||
@@ -3,6 +3,7 @@ import Logo from './Logo'
|
||||
import throttle from 'lodash.throttle'
|
||||
import RandomPostButton from './RandomPostButton'
|
||||
import SearchButton from './SearchButton'
|
||||
import DarkModeButton from './DarkModeButton'
|
||||
import SlideOver from './SlideOver'
|
||||
import ReadingProgress from './ReadingProgress'
|
||||
import { MenuListTop } from './MenuListTop'
|
||||
@@ -145,6 +146,7 @@ const NavBar = props => {
|
||||
<div className='flex flex-shrink-0 justify-center items-center space-x-1'>
|
||||
<RandomPostButton {...props} />
|
||||
<SearchButton />
|
||||
{!JSON.parse(BLOG.THEME_SWITCH) && <DarkModeButton {...props} />}
|
||||
<ReadingProgress />
|
||||
|
||||
{/* 移动端菜单按钮 */}
|
||||
|
||||
@@ -48,7 +48,7 @@ export default function SideRight(props) {
|
||||
<TouchMeCard />
|
||||
|
||||
{/* 最新文章列表 */}
|
||||
<div className={'border dark:border-gray-700 rounded-xl lg:p-6 p-4 hidden lg:block bg-white'}>
|
||||
<div className={'border dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'}>
|
||||
<LatestPostsGroupMini {...props} />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -101,7 +101,7 @@ const LayoutIndex = props => {
|
||||
* @returns
|
||||
*/
|
||||
const LayoutPostList = props => {
|
||||
const { posts } = props
|
||||
const { posts, topSlot } = props
|
||||
|
||||
// 在列表中进行实时过滤
|
||||
const [filterKey, setFilterKey] = useState('')
|
||||
@@ -118,6 +118,7 @@ const LayoutPostList = props => {
|
||||
|
||||
return (
|
||||
<LayoutBase {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
|
||||
{topSlot}
|
||||
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts} /> : <BlogListScroll {...props} posts={filteredBlogPosts} />}
|
||||
</LayoutBase>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user