Skip to content

Commit 5c1ce60

Browse files
tangly1024tangly1024
committed
next 主题边距调整
1 parent 41acdc0 commit 5c1ce60

File tree

2 files changed

+159
-133
lines changed

2 files changed

+159
-133
lines changed

‎themes/next/components/ArticleDetail.js

+136-106
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import BlogAround from './BlogAround'
21
import Comment from '@/components/Comment'
3-
import RecommendPosts from './RecommendPosts'
2+
import LazyImage from '@/components/LazyImage'
3+
import NotionIcon from '@/components/NotionIcon'
4+
import NotionPage from '@/components/NotionPage'
45
import ShareBar from '@/components/ShareBar'
5-
import TagItem from './TagItem'
6+
import WWAds from '@/components/WWAds'
7+
import { siteConfig } from '@/lib/config'
68
import { useGlobal } from '@/lib/global'
9+
import { formatDateFmt } from '@/lib/utils/formatDate'
710
import Link from 'next/link'
811
import { useRouter } from 'next/router'
12+
import CONFIG from '../config'
913
import ArticleCopyright from './ArticleCopyright'
14+
import BlogAround from './BlogAround'
15+
import RecommendPosts from './RecommendPosts'
16+
import TagItem from './TagItem'
1017
import WordCount from './WordCount'
11-
import NotionPage from '@/components/NotionPage'
12-
import CONFIG from '../config'
13-
import NotionIcon from '@/components/NotionIcon'
14-
import LazyImage from '@/components/LazyImage'
15-
import { formatDateFmt } from '@/lib/utils/formatDate'
16-
import { siteConfig } from '@/lib/config'
17-
import WWAds from '@/components/WWAds'
1818

1919
/**
2020
*
@@ -35,105 +35,135 @@ export default function ArticleDetail(props) {
3535
}
3636

3737
return (
38-
<div id="article-wrapper"
39-
className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
40-
<div itemScope itemType="https://schema.org/Movie"
41-
className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-hexo-black-gray article-padding"
42-
>
43-
44-
{showArticleInfo && <header {...aosProps}>
45-
{/* 头图 */}
46-
{siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) && post?.type && !post?.type !== 'Page' && post?.pageCover && (
47-
<div className="w-full relative md:flex-shrink-0 overflow-hidden">
48-
<LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
49-
</div>
50-
)}
51-
52-
{/* title */}
53-
<div className=" text-center font-bold text-3xl text-black dark:text-white font-serif pt-6">
54-
{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
55-
</div>
56-
57-
{/* meta */}
58-
<section className="mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm">
59-
<div className='flex flex-wrap justify-center'>
60-
{post?.type !== 'Page' && (<>
61-
<Link
62-
href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
63-
passHref
64-
legacyBehavior>
65-
<div className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
66-
<i className='far fa-calendar mr-1' /> {post?.publishDay}
67-
</div>
68-
</Link>
69-
<span className='mr-2'> | <i className='far fa-calendar-check mr-2' />{post.lastEditedDay} </span>
70-
71-
<div className="hidden busuanzi_container_page_pv font-light mr-2">
72-
<i className='mr-1 fas fa-eye' />
73-
<span className="mr-2 busuanzi_value_page_pv" />
74-
</div>
75-
76-
</>)}
77-
</div>
78-
79-
<WordCount />
80-
</section>
81-
82-
</header>}
83-
84-
{/* Notion内容主体 */}
85-
<article className='mx-auto'>
86-
<WWAds className="w-full" orientation="horizontal" />
87-
{post && (<NotionPage post={post} />)}
88-
<WWAds className="w-full" orientation="horizontal" />
89-
</article>
90-
91-
{showArticleInfo && <>
92-
93-
{/* 分享 */}
94-
<ShareBar post={post} />
95-
96-
{/* 版权声明 */}
97-
{post?.type === 'Post' && <ArticleCopyright author={siteConfig('AUTHOR')} url={url} />}
98-
99-
{/* 推荐文章 */}
100-
{post?.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
101-
102-
<section className="flex justify-between">
103-
{/* 分类 */}
104-
{post.category && <>
105-
<div className="cursor-pointer my-auto text-md mr-2 hover:text-black dark:hover:text-white border-b dark:text-gray-500 border-dashed">
106-
<Link href={`/category/${post.category}`} legacyBehavior>
107-
<a><i className="mr-1 far fa-folder-open" /> {post.category}</a>
108-
</Link>
109-
</div>
110-
</>}
111-
112-
{/* 标签列表 */}
113-
{post?.type === 'Post' && (
114-
<>
115-
{post.tagItems && (
116-
<div className="flex items-center flex-nowrap leading-8 p-1 py-4 overflow-x-auto">
117-
<div className="hidden md:block dark:text-gray-300 whitespace-nowrap">
118-
{locale.COMMON.TAGS}:&nbsp;
119-
</div>
120-
{post.tagItems.map(tag => (
121-
<TagItem key={tag.name} tag={tag} />
122-
))}
123-
</div>
124-
)}
125-
</>
126-
)}
127-
</section>
128-
{post?.type === 'Post' && <BlogAround prev={prev} next={next} />}
129-
</>}
130-
131-
{/* 评论互动 */}
132-
<div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
133-
<Comment frontMatter={post} />
38+
<div
39+
id='article-wrapper'
40+
className='shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full '>
41+
<div
42+
itemScope
43+
itemType='https://schema.org/Movie'
44+
className='overflow-y-hidden py-10 px-4 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
45+
{showArticleInfo && (
46+
<header {...aosProps}>
47+
{/* 头图 */}
48+
{siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) &&
49+
post?.type &&
50+
!post?.type !== 'Page' &&
51+
post?.pageCover && (
52+
<div className='w-full relative md:flex-shrink-0 overflow-hidden'>
53+
<LazyImage
54+
alt={post.title}
55+
src={post?.pageCover}
56+
className='object-center w-full'
57+
/>
13458
</div>
59+
)}
60+
61+
{/* title */}
62+
<div className=' text-center font-bold text-3xl text-black dark:text-white font-serif pt-6'>
63+
{siteConfig('POST_TITLE_ICON') && (
64+
<NotionIcon icon={post.pageIcon} />
65+
)}
66+
{post.title}
13567
</div>
13668

69+
{/* meta */}
70+
<section className='mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm'>
71+
<div className='flex flex-wrap justify-center'>
72+
{post?.type !== 'Page' && (
73+
<>
74+
<Link
75+
href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
76+
passHref
77+
legacyBehavior>
78+
<div className='pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed'>
79+
<i className='far fa-calendar mr-1' />{' '}
80+
{post?.publishDay}
81+
</div>
82+
</Link>
83+
<span className='mr-2'>
84+
{' '}
85+
| <i className='far fa-calendar-check mr-2' />
86+
{post.lastEditedDay}{' '}
87+
</span>
88+
89+
<div className='hidden busuanzi_container_page_pv font-light mr-2'>
90+
<i className='mr-1 fas fa-eye' />
91+
<span className='mr-2 busuanzi_value_page_pv' />
92+
</div>
93+
</>
94+
)}
95+
</div>
96+
97+
<WordCount />
98+
</section>
99+
</header>
100+
)}
101+
102+
{/* Notion内容主体 */}
103+
<article className='mx-auto'>
104+
<WWAds className='w-full' orientation='horizontal' />
105+
{post && <NotionPage post={post} />}
106+
<WWAds className='w-full' orientation='horizontal' />
107+
</article>
108+
109+
{showArticleInfo && (
110+
<>
111+
{/* 分享 */}
112+
<ShareBar post={post} />
113+
114+
{/* 版权声明 */}
115+
{post?.type === 'Post' && (
116+
<ArticleCopyright author={siteConfig('AUTHOR')} url={url} />
117+
)}
118+
119+
{/* 推荐文章 */}
120+
{post?.type === 'Post' && (
121+
<RecommendPosts
122+
currentPost={post}
123+
recommendPosts={recommendPosts}
124+
/>
125+
)}
126+
127+
<section className='flex justify-between'>
128+
{/* 分类 */}
129+
{post.category && (
130+
<>
131+
<div className='cursor-pointer my-auto text-md mr-2 hover:text-black dark:hover:text-white border-b dark:text-gray-500 border-dashed'>
132+
<Link href={`/category/${post.category}`} legacyBehavior>
133+
<a>
134+
<i className='mr-1 far fa-folder-open' />{' '}
135+
{post.category}
136+
</a>
137+
</Link>
138+
</div>
139+
</>
140+
)}
141+
142+
{/* 标签列表 */}
143+
{post?.type === 'Post' && (
144+
<>
145+
{post.tagItems && (
146+
<div className='flex items-center flex-nowrap leading-8 p-1 py-4 overflow-x-auto'>
147+
<div className='hidden md:block dark:text-gray-300 whitespace-nowrap'>
148+
{locale.COMMON.TAGS}:&nbsp;
149+
</div>
150+
{post.tagItems.map(tag => (
151+
<TagItem key={tag.name} tag={tag} />
152+
))}
153+
</div>
154+
)}
155+
</>
156+
)}
157+
</section>
158+
{post?.type === 'Post' && <BlogAround prev={prev} next={next} />}
159+
</>
160+
)}
161+
162+
{/* 评论互动 */}
163+
<div className='duration-200 w-full dark:border-gray-700 bg-white dark:bg-hexo-black-gray'>
164+
<Comment frontMatter={post} />
137165
</div>
166+
</div>
167+
</div>
138168
)
139169
}

‎themes/next/style.js

+23-27
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,31 @@
55
* @returns
66
*/
77
const Style = () => {
8-
return <style jsx global>{`
9-
10-
// 底色
11-
body{
12-
background-color: #eeedee
13-
}
14-
.dark body{
8+
return (
9+
<style jsx global>{`
10+
// 底色
11+
body {
12+
background-color: #eeedee;
13+
}
14+
.dark body {
1515
background-color: black;
16-
}
17-
18-
.article-padding {
19-
padding: 40px;
20-
}
21-
22-
// 菜单下划线动画
23-
#theme-next .menu-link {
24-
text-decoration: none;
25-
background-image: linear-gradient(#4e80ee, #4e80ee);
26-
background-repeat: no-repeat;
27-
background-position: bottom center;
28-
background-size: 0 2px;
29-
transition: background-size 100ms ease-in-out;
30-
}
31-
#theme-next .menu-link:hover {
32-
background-size: 100% 2px;
33-
color: #4e80ee;
34-
}
16+
}
3517
36-
`}</style>
18+
// 菜单下划线动画
19+
#theme-next .menu-link {
20+
text-decoration: none;
21+
background-image: linear-gradient(#4e80ee, #4e80ee);
22+
background-repeat: no-repeat;
23+
background-position: bottom center;
24+
background-size: 0 2px;
25+
transition: background-size 100ms ease-in-out;
26+
}
27+
#theme-next .menu-link:hover {
28+
background-size: 100% 2px;
29+
color: #4e80ee;
30+
}
31+
`}</style>
32+
)
3733
}
3834

3935
export { Style }

0 commit comments

Comments
 (0)