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

优化主题hexo样式，修复几处问题，包括移动端分类按钮尺寸过小的问题，移除多出hr分割线美化暗色模式下视觉效果等

Browse Source
This commit is contained in:
emengweb
2023-04-24 10:51:56 +00:00
parent 67072250d8
commit 84fe9e5e63
13 changed files with 37 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/hexo/LayoutSlug.js
View File

@@ -74,7 +74,7 @@ export const LayoutSlug = props => {
</article>
<hr className='border-dashed' />
<div className='pt-4 border-dashed'></div>
{/* 评论互动 */}
<div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">

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

@@ -10,7 +10,7 @@ const Announcement = ({ post, 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">
<div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
{post && (<div id="announcement-content">
<NotionPage post={post} className='text-center ' />
<NotionPage post={post} className='' />
</div>)}
</section>
</div>

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

@@ -11,7 +11,7 @@ export default function ArticleAdjacent ({ prev, next }) {
return <></>
}
return (
<section className='text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
<section className='pt-8 text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
<Link
href={`/${prev.slug}`}
passHref

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

@@ -27,7 +27,7 @@ export default function ArticleCopyright () {
</li>
<li>
<strong className='mr-2'>{locale.COMMON.URL}:</strong>
<a className="hover:underline" href={path}>
<a className="whitespace-normal break-words hover:underline" href={path}>
{path}
</a>
</li>

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

@@ -30,8 +30,8 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{recommendPosts.map(post => {
const headerImage = post?.page_cover
? `url("${post.page_cover}")`
: `url("${siteInfo?.pageCover}")`
? `url("${post.page_cover}&w=240")`
: `url("${siteInfo?.pageCover}&w=240")`
return (
(<Link

5
themes/hexo/components/Footer.js
View File

@@ -26,9 +26,8 @@ const Footer = ({ title }) => {
<i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span> </span>
<span className='pl-2 hidden busuanzi_container_site_uv'>
<i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
<br/>
<h1>{title}</h1>
<span className='text-xs '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span><br/>
<h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} | {BLOG.BIO}</h1>
<p className='text-xs pt-2 text-light-500 dark:text-gray-500'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</p></span><br/>
</footer>
)

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

@@ -7,7 +7,7 @@ import throttle from 'lodash.throttle'
let wrapperTop = 0
let windowTop = 0
let autoScroll = false
let autoScroll = true
const enableAutoScroll = false // 是否开启自动吸附滚动
/**
@@ -85,12 +85,12 @@ const Header = props => {
return (
<header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
<div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
<div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}&w=1920')` }}
className={`header-cover bg-center w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
<div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-lg'>
<div className='font-black text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center font-medium shadow-text text-lg'>
<span id='typed' />
</div>
@@ -103,7 +103,8 @@ const Header = props => {
onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
>
<i className='animate-bounce fas fa-angle-down' />
<div class="opacity-70 animate-bounce text-xs">点此继续</div>
<i className='opacity-70 animate-bounce fas fa-angle-down' />
</div>
</header>
)

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

@@ -1,4 +1,5 @@
import Link from 'next/link'
import TagItemMini from './TagItemMini'
import { useGlobal } from '@/lib/global'
import formatDate from '@/lib/formatDate'
import BLOG from '@/blog.config'
@@ -9,7 +10,7 @@ export default function HeaderArticle({ post, siteInfo }) {
if (!post) {
return <></>
}
const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")`
const headerImage = post?.page_cover ? `url("${post.page_cover}&w=1600")` : `url("${siteInfo?.pageCover}&w=1600")`
const date = formatDate(
post?.date?.start_date || post?.createdTime,
@@ -31,11 +32,11 @@ export default function HeaderArticle({ post, siteInfo }) {
<div className='mt-24'>
{/* 文章Title */}
<div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
<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 flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
<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'>
{post.category && <>
<Link href={`/category/${post.category}`} passHref legacyBehavior>
@@ -46,7 +47,7 @@ export default function HeaderArticle({ post, siteInfo }) {
</Link>
</>}
</div>
<div className='flex justify-center'>
<div className='flex justify-center dark:text-gray-200'>
{post?.type !== 'Page' && (
<>
<Link
@@ -63,11 +64,22 @@ export default function HeaderArticle({ post, siteInfo }) {
{locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
</div>
</div>
{BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
<span className="mr-2 busuanzi_value_page_pv" />
{locale.COMMON.VIEWS}
</div>}
</section>
<div className='my-3'>
{post.tagItems && (
<div className="flex justify-center flex-nowrap overflow-x-auto">
{post.tagItems.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
)}
</div>
</div>
</header>
</div>

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

@@ -8,7 +8,7 @@ export function InfoCard (props) {
const router = useRouter()
return <Card className={className}>
<div
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'
className='justify-center items-center flex py-6 dark:text-gray-100 transform duration-200 cursor-pointer'
onClick={() => {
router.push('/')
}}
@@ -16,7 +16,7 @@ export function InfoCard (props) {
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
</div>
<div className='text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
<div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
<div className='text-sm text-center'>{BLOG.BIO}</div>
<MenuGroupCard {...props}/>
<SocialButton />

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

@@ -7,7 +7,7 @@ const Logo = props => {
return (
<Link href='/' passHref legacyBehavior>
<div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
<div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
<div className='font-medium text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
</div>
</Link>
);

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

@@ -14,7 +14,7 @@ const NavButtonGroup = (props) => {
}
return (
<nav id='home-nav-button' className={'md:h-52 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
<nav id='home-nav-button' className={'w-full md:h-52 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
{categoryOptions.map(category => {
return (
<Link
@@ -22,7 +22,7 @@ const NavButtonGroup = (props) => {
title={`${category.name}`}
href={`/category/${category.name}`}
passHref
className='text-center w-full md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 font-bold hover:scale-110 transform'>
className='text-center w-full sm:w-4/5 md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 font-bold hover:scale-105 transform'>
{category.name}
</Link>
)

1
themes/hexo/components/SideBar.js
View File

@@ -25,7 +25,6 @@ const SideBar = (props) => {
<MenuGroupCard {...props} />
</div>
</div>
<hr className=' border-dashed'/>
<MenuListSide {...props} />
</div>
)

4
themes/hexo/config_hexo.js
View File

@@ -1,9 +1,9 @@
const CONFIG_HEXO = {
HOME_BANNER_ENABLE: true,
HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
HOME_BANNER_GREETINGS: ['AI CAN MAKE Document', 'AI CAN MAKE Brainstorm', 'AI CAN MAKE Picture', 'AI CAN MAKE MORE', 'MAKE GREAT THING With AI 🎉'], // 首页大图标语文字
HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
HOME_NAV_BACKGROUND_IMG_FIXED: true, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动
HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂； false则随鼠标滚动
// 菜单配置
MENU_INDEX: true, // 显示首页