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

Merge pull request #1479 from LooseLi/next-style

Browse Source 
Next style
This commit is contained in:
tangly1024
2023-09-02 12:52:21 +08:00
committed by GitHub
parent 62546f405e 5d6de069f3
commit 2a630573bc
5 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -26,6 +26,7 @@ module.exports = {
}
},
rules: {
semi: 0,
'react/no-unknown-property': 'off', // <style jsx>
'react/prop-types': 'off',
'space-before-function-paren': 0,

4
themes/next/components/ArticleDetail.js
View File

@@ -34,7 +34,7 @@ export default function ArticleDetail(props) {
data-aos-duration="300"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
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"
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"
>
{showArticleInfo && <header>
@@ -78,7 +78,7 @@ export default function ArticleDetail(props) {
</header>}
{/* Notion内容主体 */}
<article className='px-1 max-w-3xl mx-auto'>
<article className='mx-auto'>
{post && (<NotionPage post={post} />)}
</article>

12
themes/next/components/BlogPostCard.js
View File

@@ -28,10 +28,10 @@ const BlogPostCard = ({ post, showSummary }) => {
data-aos-duration="500"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : ''
className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
<NotionIcon icon={post.pageIcon} /> {post.title}
<NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
</Link>
@@ -48,10 +48,10 @@ const BlogPostCard = ({ post, showSummary }) => {
<Link
href={`/category/${post.category}`}
passHref
className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm hover:underline transform">
className="hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer font-light text-sm transform">
<i className="mr-1 fas fa-folder" />
{post.category}
<span className='menu-link'>{post.category}</span>
</Link>
<span className="mx-2">|</span>
@@ -60,8 +60,8 @@ const BlogPostCard = ({ post, showSummary }) => {
<Link
href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
passHref
className="hover:text-blue-500 dark:hover:text-blue-400 font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
{post.date?.start_date}
className="hover:text-blue-500 dark:hover:text-blue-400 font-light cursor-pointer text-sm leading-4 mr-3">
<span className='menu-link'>{post.date?.start_date}</span>
</Link>
</div>
<TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>

2
themes/next/components/SideAreaRight.js
View File

@@ -62,7 +62,7 @@ const SideAreaRight = (props) => {
passHref
className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fas fa-angle-right' />
{locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
</Link>
</div>

18
themes/next/style.js
View File

@@ -15,6 +15,24 @@ const Style = () => {
background-color: black;
}
.article-padding {
padding: 40px;
}
// 菜单下划线动画
#theme-next .menu-link {
text-decoration: none;
background-image: linear-gradient(#4e80ee, #4e80ee);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0 2px;
transition: background-size 100ms ease-in-out;
}
#theme-next .menu-link:hover {
background-size: 100% 2px;
color: #4e80ee;
}
`}</style>
}