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

heo 主题一点细节

Browse Source
This commit is contained in:
tangly1024.com
2024-05-29 11:49:31 +08:00
parent 0f9de3aa38
commit 2372ddef4e
4 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
themes/heo/components/PaginationNumber.js
View File

@@ -56,7 +56,7 @@ const PaginationNumber = ({ page, totalPage }) => {
}}
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
<div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
<div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 rounded-lg cursor-pointer group'>
<i className='fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
<div className='absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0'>
{locale.PAGINATION.PREV}
@@ -69,7 +69,7 @@ const PaginationNumber = ({ page, totalPage }) => {
{pages}
{/* 跳转页码 */}
<div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600 dark:bg-[#1e1e1e] h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
<div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600 dark:bg-[#1e1e1e] h-10 border dark:border-gray-600 flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
<input
value={value}
className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
@@ -90,7 +90,7 @@ const PaginationNumber = ({ page, totalPage }) => {
}}
rel='next'
className={`${+showNext ? 'block' : 'invisible'} `}>
<div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
<div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 rounded-lg cursor-pointer group'>
<i className='fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
<div className='absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2'>
{locale.PAGINATION.NEXT}

14
themes/heo/components/PostHeader.js
View File

@@ -12,7 +12,7 @@ import WavesArea from './WavesArea'
* @param {*} param0
* @returns
*/
export default function PostHeader({ post, siteInfo }) {
export default function PostHeader({ post, siteInfo, isDarkMode }) {
if (!post) {
return <></>
}
@@ -31,19 +31,21 @@ export default function PostHeader({ post, siteInfo }) {
height: 100%;
top: 0;
left: 0;
box-shadow: 110px -130px 300px 60px #0060e0 inset;
box-shadow: 110px -130px 500px 100px ${isDarkMode
? '#CA8A04'
: '#0060e0'} inset;
}
`}</style>
<div
style={{ backdropFilter: 'blur(15px)' }}
className={
'bg-[#0060e0] absolute top-0 w-full h-full py-10 flex justify-center items-center'
}>
className={`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} absolute top-0 w-full h-full py-10 flex justify-center items-center`}>
{/* 文章背景图 */}
<div
id='post-cover-wrapper'
style={{ filter: 'blur(15px)' }}
style={{
filter: 'blur(15px)'
}}
className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'>
<LazyImage
id='post-cover'

7
themes/heo/components/SideRight.js
View File

@@ -50,7 +50,7 @@ export default function SideRight(props) {
{/* 最新文章列表 */}
<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'
'border hover:border-indigo-600 dark:hover:border-yellow-600 duration-200 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>
@@ -61,7 +61,10 @@ export default function SideRight(props) {
<Live2D />
{/* 标签和成绩 */}
<Card className={'bg-white dark:bg-[#1e1e1e] dark:text-white'}>
<Card
className={
'bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 duration-200'
}>
<TagGroups tags={sortedTags} currentTag={currentTag} />
<hr className='mx-1 flex border-dashed relative my-4' />
<AnalyticsCard {...props} />

4
themes/heo/index.js
View File

@@ -52,7 +52,7 @@ const LayoutBase = props => {
const { children, slotTop, className } = props
// 全屏模式下的最大宽度
const { fullWidth } = useGlobal()
const { fullWidth, isDarkMode } = useGlobal()
const router = useRouter()
const headerSlot = (
@@ -67,7 +67,7 @@ const LayoutBase = props => {
<Hero {...props} />
</>
) : null}
{fullWidth ? null : <PostHeader {...props} />}
{fullWidth ? null : <PostHeader {...props} isDarkMode={isDarkMode} />}
</header>
)