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

修改hexo卡片元素位置和间隙

Browse Source
This commit is contained in:
emengweb
2023-04-25 11:53:44 +00:00
parent 29fa0a8b6a
commit 7bd8337019
12 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/hexo/LayoutBase.js
View File

@@ -33,7 +33,7 @@ const FacebookPage = dynamic(
* @constructor
*/
const LayoutBase = props => {
const { children, headerSlot, floatSlot, meta, siteInfo } = props
const { children, headerSlot, floatSlot, meta, siteInfo, showTag } = props
const [showFloatButton, switchShow] = useState(false)
// const [percent, changePercent] = useState(0) // 页面阅读百分比
const rightAreaSlot = (

4
themes/hexo/components/Announcement.js
View File

@@ -7,10 +7,10 @@ const Announcement = ({ post, className }) => {
const { locale } = useGlobal()
if (post?.blockMap) {
return <div className={className}>
<section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray">
<section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray">
<div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
{post && (<div id="announcement-content">
<NotionPage post={post} className='' />
<NotionPage post={post} className='text-center' />
</div>)}
</section>
</div>

17
themes/hexo/components/ArticleRecommend.js
View File

@@ -2,6 +2,7 @@ import Link from 'next/link'
import CONFIG_HEXO from '../config_hexo'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import TagItemMini from './TagItemMini'
/**
* 关联推荐文章
@@ -20,7 +21,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
}
return (
<div className="p-2">
<div className="pt-8">
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div className='dark:text-gray-300'>
<i className="mr-2 fas fa-thumbs-up" />
@@ -46,12 +47,16 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
style={{ backgroundImage: headerImage }}
>
<div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
<div className=" text-sm text-white text-center shadow-text">
<div>
<i className="fas fa-calendar-alt mr-1" />
{post.date?.start_date}
<div className=" text-md text-white text-center shadow-text">
<div className="px-4 font-normal hover:underline">{post.title}</div>
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}
{post.tagItems.map(tag => (
<div className='font-light'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
))}
</div>
</div>
<div className="hover:underline">{post.title}</div>
</div>
</div>
</div>

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

@@ -36,7 +36,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
{showPageCover && (
<div className="md:w-5/12 overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
<div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}&w=800')` }} />
</Link>
</div>
)}

24
themes/hexo/components/BlogPostCardInfo.js
View File

@@ -17,24 +17,24 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
} leading-tight text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
} leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
{post.title}
</Link>
{/* 日期 */}
{/* 分类 */}
<div
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
} flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
>
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
href={`/category/${post.category}`}
passHref
className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
<i className="far fa-calendar-alt mr-1" />
{post.date?.start_date || post.lastEditedTime}
<i className="mr-1 far fa-folder" />
{post.category}
</Link>
</div>
@@ -64,17 +64,19 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
</div>
<div>
{/* 分类标签 */}
{/* 日期标签 */}
<div className="text-gray-400 justify-between flex">
{/* 日期 */}
<Link
href={`/category/${post.category}`}
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
<i className="mr-1 far fa-folder" />
{post.category}
<i className="far fa-calendar-alt mr-1" />
{post.date?.start_date || post.lastEditedTime}
</Link>
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}

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

@@ -1,7 +1,7 @@
const Card = ({ children, headerSlot, className }) => {
return <div className={className}>
<>{headerSlot}</>
<section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
<section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
{children}
</section>
</div>

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

@@ -61,7 +61,7 @@ const Catalog = ({ toc }) => {
return <></>
}
return <div className='px-3'>
return <div className='px-3 py-1'>
<div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
<div className='w-full py-3'>
<Progress />
@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
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-400 underline'}`}
className={`${activeSection === id && ' font-bold text-indigo-600'}`}
>
{tocItem.text}
</span>

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

@@ -3,6 +3,7 @@ import TagItemMini from './TagItemMini'
import { useGlobal } from '@/lib/global'
import formatDate from '@/lib/formatDate'
import BLOG from '@/blog.config'
import NotionIcon from '@/components/NotionIcon'
export default function HeaderArticle({ post, siteInfo }) {
const { locale } = useGlobal()
@@ -30,24 +31,25 @@ export default function HeaderArticle({ post, siteInfo }) {
data-aos-anchor-placement="top-bottom"
className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
<div className='mt-24'>
{/* 文章Title */}
<div className="font-bold text-4xl shadow-text-md flex justify-center text-center text-white dark:text-white ">
{post.title}
</div>
<section className="flex-wrap shadow-text-md flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
<div className='dark:text-gray-200'>
<div className='mt-10'>
<div className='mb-3 flex justify-center'>
{post.category && <>
<Link href={`/category/${post.category}`} passHref legacyBehavior>
<div className="cursor-pointer mr-2 dark:hover:text-white hover:underline">
<i className="mr-1 fas fa-folder-open" />
<div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium text-5xl shadow-text-md text-white">
{post.category}
</div>
</Link>
</>}
</div>
<div className='flex justify-center dark:text-gray-200'>
{/* 文章Title */}
<div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
<NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
</div>
<section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
<div className='flex justify-center dark:text-gray-200 text-opacity-70'>
{post?.type !== 'Page' && (
<>
<Link
@@ -71,7 +73,7 @@ export default function HeaderArticle({ post, siteInfo }) {
</div>}
</section>
<div className='my-3'>
<div className='mt-4 mb-1'>
{post.tagItems && (
<div className="flex justify-center flex-nowrap overflow-x-auto">
{post.tagItems.map(tag => (

6
themes/hexo/components/LatestPostsGroup.js
View File

@@ -37,9 +37,9 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={'my-2 flex'}>
className={'my-3 flex'}>
<div className="w-20 h-16 overflow-hidden relative">
<div className="w-20 h-14 overflow-hidden relative">
{/* <Image
src={headerImage}
fill
@@ -49,7 +49,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
quality={10}
alt={post.title} /> */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={headerImage} className='object-cover w-full h-full'/>
<img src={`${headerImage}&w=120`} className='object-cover w-full h-full'/>
</div>
<div
className={

4
themes/hexo/components/Progress.js
View File

@@ -28,9 +28,9 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, [])
return (
<div className="h-4 w-full shadow-2xl bg-gray-400 ">
<div className="h-4 w-full shadow-2xl bg-gray-700 rounded-sm">
<div
className="h-4 bg-indigo-400 duration-200"
className="h-4 bg-indigo-600 duration-200 rounded-sm"
style={{ width: `${percent}%` }}
>
{showPercent && (

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

@@ -39,7 +39,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
<div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
<div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-hexo-black-gray shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
{children}
</div>

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

@@ -25,7 +25,7 @@ const TocDrawer = ({ post, cRef }) => {
<div
className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
' shadow-card animate__animated animate__faster' +
' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-600'}>
' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-900'}>
{post && <>
<div className='dark:text-gray-400 text-gray-600'>
<Catalog toc={post.toc}/>