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

优化样式动画，支持全局自定义右键菜单，修复少量bug

Browse Source
This commit is contained in:
tangly1024.com
2023-07-19 11:39:14 +08:00
parent b6af2e4464
commit bcaa949b93
15 changed files with 146 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
blog.config.js
View File

@@ -75,6 +75,8 @@ const BLOG = {
],
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
CUSTOM_RIGHT_CLICK_CONTEXT_MENU: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || true, // 自定义右键菜单，覆盖系统菜单
// 自定义外部脚本，外部样式
CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']

29
themes/heo/components/CustomContextMenu.js → components/CustomContextMenu.js
View File

@@ -2,7 +2,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState, useRef } from 'react'
import { useGlobal } from '@/lib/global'
import { saveDarkModeToCookies } from '@/themes/theme'
import { saveDarkModeToCookies, THEMES } from '@/themes/theme'
/**
* 自定义右键菜单
@@ -74,6 +74,16 @@ export default function CustomContextMenu(props) {
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)
@@ -111,12 +121,12 @@ export default function CustomContextMenu(props) {
</div>
<Link href='/category' title={'博客分类'} 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 class="fa-solid fa-square-minus mr-2" />
<i className="fa-solid fa-square-minus mr-2" />
<div className='whitespace-nowrap'> 博客分类</div>
</Link>
<Link href='/tag' title={'文章标签'} 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 class="fa-solid fa-tag mr-2" />
<i className="fa-solid fa-tag mr-2" />
<div className='whitespace-nowrap'> 文章标签</div>
</Link>
@@ -128,18 +138,21 @@ export default function CustomContextMenu(props) {
<div className='w-full px-2'>
<div onClick={handleCopyLink} title={'复制地址'} 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 class="fa-solid fa-arrow-up-right-from-square mr-2" />
<i className="fa-solid fa-arrow-up-right-from-square mr-2" />
<div className='whitespace-nowrap'> 复制地址</div>
</div>
<div onClick={handleChangeDarkMode} title={'深色模式'} 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 class="fa-regular fa-moon mr-2" />
<div className='whitespace-nowrap'> 深色模式</div>
{isDarkMode ? <i className="fa-regular fa-sun mr-2" /> : <i className="fa-regular fa-moon mr-2" />}
<div className='whitespace-nowrap'> {isDarkMode ? '浅色模式' : '深色模式'}</div>
</div>
<div onClick={handeChangeTheme} title={'切换主题'} 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'> 切换主题</div>
</div>
</div>
</div>
</div>
</div >
)
}

2
components/ExternalPlugins.js
View File

@@ -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/>
</>
}

20
components/ThemeSwitch.js
View File

@@ -23,15 +23,17 @@ const ThemeSwitch = () => {
return (<>
<Draggable>
<div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-2xl shadow-card">
<div className="p-3 flex items-center text-sm">
<DarkModeButton className='mr-2'/>
<select value={theme} onChange={onSelectChange} name="cars" 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>
<i class="fa-solid fa-paintbrush pl-2"></i>
<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>
</Draggable>

2
pages/_app.js
View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react'
// import 'animate.css'
import 'animate.css'
import '@/styles/globals.css'
import '@/styles/nprogress.css'
import '@/styles/utility-patterns.css'

2
themes/gitbook/index.js
View File

@@ -172,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)
}

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

@@ -12,7 +12,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
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 className={'bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl '}>
<div className={'animate__animated animate__fadeIn animate__fast border bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl'}>
{/* 图片封面 */}
{showPageCover && (

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

@@ -1,7 +1,6 @@
import React, { useRef } from 'react'
import throttle from 'lodash.throttle'
import { uuidToId } from 'notion-utils'
import Progress from './Progress'
import { useGlobal } from '@/lib/global'
/**
@@ -63,9 +62,6 @@ const Catalog = ({ toc }) => {
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='w-full py-3'>
<Progress />
</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) => {

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

@@ -20,7 +20,7 @@ export default function FloatTocButton(props) {
return (<div className='fixed lg:hidden right-4 bottom-24'>
{/* 按钮 */}
<div onClick={toggleToc} className={'select-none hover:scale-110 transform duration-200 text-black dark:text-gray-200 w-10 h-10 rounded-full bg-white drop-shadow-lg flex justify-center items-center dark:bg-hexo-black-gray py-2 px-2'}>
<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>

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

@@ -2,12 +2,11 @@
import BLOG from '@/blog.config'
import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useImperativeHandle, useRef, useState } from 'react'
import CONFIG from '../config'
import { useGlobal } from '@/lib/global'
import { Transition } from '@headlessui/react'
/**
* 顶部英雄区
@@ -17,28 +16,18 @@ import { Transition } from '@headlessui/react'
* @returns
*/
const Hero = props => {
const { onLoading } = useGlobal()
return (
<div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 -translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-16"
unmount={false}
>
<hero id="hero" style={{ zIndex: 1 }} className="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} />
</hero>
</Transition>
<hero 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} />
</hero>
</div>
)
}
@@ -76,7 +65,7 @@ function Banner(props) {
return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
<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-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>
@@ -103,19 +92,17 @@ function TagsGroupBar() {
return (
<div className="tags-group-all flex -rotate-[30deg]">
<div className="tags-group-wrapper flex flex-nowrap absolute top-16">
{groupIcons?.map(g => {
return (<>
<div className="tags-group-icon-pair ml-6 select-none">
<div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={g.img_1} title={g.title_1} className='w-2/3' />
</div>
<div style={{ background: g.color_2 }} className={'tags-group-icon mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={g.img_2} title={g.title_2} className='w-2/3' />
</div>
{groupIcons?.map((g, index) => {
return (<div key={index} className="tags-group-icon-pair ml-6 select-none">
<div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={g.img_1} title={g.title_1} className='w-2/3' />
</div>
</>)
<div style={{ background: g.color_2 }} className={'tags-group-icon mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={g.img_2} title={g.title_2} className='w-2/3' />
</div>
</div>)
})}
</div>
</div>
@@ -135,26 +122,26 @@ function GroupMenu() {
<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 class="fa-solid fa-star text-4xl"></i>
<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}
{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 class="fa-solid fa-fire-flame-curved text-4xl"></i>
<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}
{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 class="fa-solid fa-book-bookmark text-4xl "></i>
<i className="fa-solid fa-book-bookmark text-4xl "></i>
</div>
</Link>
@@ -204,8 +191,8 @@ function TodayCard({ cRef }) {
const [isCoverUp, setIsCoverUp] = useState(true)
/**
* 外部可以调用此方法
*/
* 外部可以调用此方法
*/
useImperativeHandle(cRef, () => {
return {
coverUp: () => {
@@ -215,18 +202,18 @@ function TodayCard({ cRef }) {
})
/**
* 点击更多
* @param {*} e
*/
* 点击更多
* @param {*} e
*/
function handleClickMore(e) {
e.stopPropagation()
setIsCoverUp(false)
}
/**
* 点击卡片跳转的链接
* @param {*} e
*/
* 点击卡片跳转的链接
* @param {*} e
*/
function handleCardClick(e) {
router.push('https://tangly1024.com')
}

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

@@ -26,7 +26,7 @@ export const MenuItemCollapse = ({ link }) => {
}
return <>
<div className='w-full px-2 py-3 border rounded-xl text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
<div className='select-none w-full px-2 py-2 border rounded-xl text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
{!hasSubMenu && <Link
href={link?.to}
className="font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
@@ -36,7 +36,7 @@ export const MenuItemCollapse = ({ link }) => {
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1">
<span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
<i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
<i className={`select-none px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
</div>}
</div>

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

@@ -15,7 +15,7 @@ export function NoticeBar() {
return (
<notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
<div className="group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700 duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
<div className="animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700 duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
<span className='whitespace-nowrap'>此刻</span>
<div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
<Swipe items={notices} />

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

@@ -12,17 +12,16 @@ const TagGroups = ({ tags, className }) => {
return (
<div id='tags-group' className='dark:border-gray-700 space-y-2'>
{
tags.map(tag => {
return <>
<Link passHref
key={tag}
href={`/tag/${encodeURIComponent(tag.name)}`}
className={'cursor-pointer inline-block whitespace-nowrap'}>
<div className={`${className || ''} flex items-center hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all`}>
<div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
</div>
tags.map((tag, index) => {
return <Link passHref
key={index}
href={`/tag/${encodeURIComponent(tag.name)}`}
className={'cursor-pointer inline-block whitespace-nowrap'}>
<div className={`${className || ''} flex items-center hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all`}>
<div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
</div>
</Link></>
</Link>
})
}
</div>

112
themes/heo/index.js
View File

@@ -31,7 +31,6 @@ import { NoticeBar } from './components/NoticeBar'
import { HashTag } from '@/components/HeroIcons'
import LatestPostsGroup from './components/LatestPostsGroup'
import FloatTocButton from './components/FloatTocButton'
import CustomContextMenu from './components/CustomContextMenu'
/**
* 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -71,7 +70,7 @@ const LayoutBase = props => {
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100"
leaveTo="opacity-0 -translate-y-16"
className={`w-full h-auto px-5 lg:px-0 ${className || ''}`}
className={`w-full h-auto ${className || ''}`}
unmount={false}
>
{/* 主区上部嵌入 */}
@@ -98,9 +97,6 @@ const LayoutBase = props => {
</div>
</main>
{/* 自定义右键菜单 */}
<CustomContextMenu {...props}/>
{/* 页脚 */}
<Footer title={siteInfo?.title || BLOG.TITLE} />
</div>
@@ -126,9 +122,11 @@ const LayoutIndex = (props) => {
const slotRight = <SideRight {...props} />
return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
<div id='post-outer-wrapper' className='px-5 lg:px-0'>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>
</LayoutBase>
}
@@ -146,9 +144,11 @@ const LayoutPostList = (props) => {
</header>
return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
<div id='post-outer-wrapper' className='px-5 lg:px-0'>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</div>
</LayoutBase>
}
@@ -187,9 +187,11 @@ const LayoutSearch = props => {
return (
<LayoutBase {...props} currentSearch={currentSearch} headerSlot={headerSlot}>
{!currentSearch
? <SearchNav {...props} />
: <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />} </div>}
<div id='post-outer-wrapper' className='px-5 lg:px-0'>
{!currentSearch
? <SearchNav {...props} />
: <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />} </div>}
</div>
</LayoutBase>
)
}
@@ -261,7 +263,7 @@ const LayoutSlug = props => {
{/* 分享 */}
<ShareBar post={post} />
{post?.type === 'Post' && <>
{post?.type === 'Post' && <div className='px-5'>
{/* 版权 */}
<ArticleCopyright {...props} />
@@ -269,20 +271,20 @@ const LayoutSlug = props => {
<ArticleRecommend {...props} />
{/* 上一篇\下一篇文章 */}
<ArticleAdjacent {...props} />
</>}
</div>}
</article>
<div className='pt-4 border-dashed'></div>
<hr className='my-4 border-dashed' />
{/* 评论互动 */}
<div className="duration-200 overflow-x-auto px-3">
<div className="duration-200 overflow-x-auto px-5">
<div className='text-2xl dark:text-white'><i className='fas fa-comment mr-1' />{locale.COMMON.COMMENTS}</div>
<Comment frontMatter={post} className='' />
</div>
</div>}
</div>
<FloatTocButton {...props}/>
<FloatTocButton {...props} />
</LayoutBase>
)
@@ -326,7 +328,7 @@ const Layout404 = props => {
>
{/* 404卡牌 */}
<div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-2xl'>
<div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-3xl'>
{/* 左侧动图 */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
@@ -350,8 +352,6 @@ const Layout404 = props => {
</div>
</main>
{/* 自定义右键菜单 */}
<CustomContextMenu {...props}/>
</div>
)
}
@@ -371,23 +371,25 @@ const LayoutCategoryIndex = props => {
return (
<LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.CATEGORY}
</div>
<div id="category-list" className="duration-200 flex flex-wrap space-x-5 m-10 justify-center">
{categoryOptions.map(category => {
return (
<Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
<div className={'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
<HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
{category.name}
<div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
{category.count}
<div id='category-outer-wrapper' className='px-5 lg:px-0'>
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.CATEGORY}
</div>
<div id="category-list" className="duration-200 flex flex-wrap m-10 justify-center">
{categoryOptions.map(category => {
return (
<Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
<div className={'group mr-5 mb-5 flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
<HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
{category.name}
<div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
{category.count}
</div>
</div>
</div>
</Link>
)
})}
</Link>
)
})}
</div>
</div>
</LayoutBase>
)
@@ -403,23 +405,25 @@ const LayoutTagIndex = props => {
const { locale } = useGlobal()
return (
<LayoutBase {...props} className='mt-8'>
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.TAGS}
</div>
<div id="tag-list" className="duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center">
{tagOptions.map(tag => {
return (
<Link key={tag.name} href={`/tag/${tag.name}`} passHref legacyBehavior>
<div className={'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
<HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
{tag.name}
<div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
{tag.count}
<div id='tag-outer-wrapper' className='px-5 lg:px-0'>
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.TAGS}
</div>
<div id="tag-list" className="duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center">
{tagOptions.map(tag => {
return (
<Link key={tag.name} href={`/tag/${tag.name}`} passHref legacyBehavior>
<div className={'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
<HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
{tag.name}
<div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
{tag.count}
</div>
</div>
</div>
</Link>
)
})}
</Link>
)
})}
</div>
</div>
</LayoutBase>
)

2
themes/hexo/index.js
View File

@@ -69,7 +69,7 @@ const LayoutBase = props => {
</Transition>
{/* 主区块 */}
<main id="wrapper" className={`${CONFIG.HOME_BANNER_ENABLE ? '' : 'pt-16'} bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative`}>
<main id="wrapper" className={`${CONFIG.HOME_BANNER_ENABLE ? '' : 'pt-16'} overflow-x-hidden bg-hexo-background-gray dark:bg-black 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' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
<div className={`${className || ''} w-full max-w-4xl h-full `}>