diff --git a/.eslintrc.js b/.eslintrc.js index 4b95adcd..bab5ea27 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -26,6 +26,7 @@ module.exports = { } }, rules: { + 'react/no-unknown-property': 'off', // + + ) +} diff --git a/components/HeroIcons.js b/components/HeroIcons.js index 61e3ded8..9eb24422 100644 --- a/components/HeroIcons.js +++ b/components/HeroIcons.js @@ -3,52 +3,68 @@ * @returns */ -const Moon = () => { +export const Moon = () => { return - - + + } -const Sun = () => { +export const Sun = () => { return - - + + } -const Home = ({ className }) => { +export const Home = ({ className }) => { return - - + + } -const User = ({ className }) => { +export const User = ({ className }) => { return - - + + } -const ArrowPath = ({ className }) => { +export const ArrowPath = ({ className }) => { return - - + + } -const ChevronLeft = ({ className }) => { +export const ChevronLeft = ({ className }) => { return - - + + } -const ChevronRight = ({ className }) => { +export const ChevronRight = ({ className }) => { return - - + + } -const InformationCircle = ({ className }) => { +export const InformationCircle = ({ className }) => { return - - + + } -export { Moon, Sun, Home, User, ArrowPath, ChevronLeft, ChevronRight, InformationCircle } +export const HashTag = ({ className }) => { + return + + +} + +export const GlobeAlt = ({ className }) => { + return + + +} + +export const ArrowRightCircle = ({ className }) => { + return + + +} diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js index de277434..0108b1b1 100644 --- a/lib/lang/en-US.js +++ b/lib/lang/en-US.js @@ -1,7 +1,7 @@ export default { LOCALE: 'en-US', NAV: { - INDEX: 'Blog', + INDEX: 'Home', RSS: 'RSS', SEARCH: 'Search', ABOUT: 'About', diff --git a/styles/globals.css b/styles/globals.css index ae4d6aca..dbaa8ef2 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,28 +2,6 @@ @tailwind components; @tailwind utilities; -html { - --scrollbarBG: #ffffff00; - --thumbBG: #b8b8b8; -} -body::-webkit-scrollbar { - width: 5px; -} -body { - scrollbar-width: thin; - scrollbar-color: var(--thumbBG) var(--scrollbarBG); -} -body::-webkit-scrollbar-track { - background: var(--scrollbarBG); -} -body::-webkit-scrollbar-thumb { - background-color: var(--thumbBG); -} - -::selection { - background: rgba(45, 170, 219, 0.3); -} - .wrapper { min-height: 100vh; display: flex; @@ -285,57 +263,3 @@ a.avatar-wrapper { .reply-author-name { font-weight: 500; } - -.line-clamp-4 { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; - overflow: hidden; - text-overflow: ellipsis; -} - -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - -.line-clamp-2 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; -} - - -/* fukasawa的首页响应式分栏 */ -#theme-fukasawa .grid-item { - height: auto; - break-inside: avoid-column; - margin-bottom: .5rem; - } - - /* 大屏幕(宽度≥1024px)下显示3列 */ - @media (min-width: 1024px) { - #theme-fukasawa .grid-container { - column-count: 3; - column-gap: .5rem; - } - } - - /* 小屏幕(宽度≥640px)下显示2列 */ - @media (min-width: 640px) and (max-width: 1023px) { - #theme-fukasawa .grid-container { - column-count: 2; - column-gap: .5rem; - } - } - - /* 移动端(宽度<640px)下显示1列 */ - @media (max-width: 639px) { - #theme-fukasawa .grid-container { - column-count: 1; - column-gap: .5rem; - } - } \ No newline at end of file diff --git a/styles/notion.css b/styles/notion.css index 5fd5b4b8..1a98b472 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -1943,10 +1943,6 @@ svg + .notion-page-title-text { display: block !important; } -::selection { - @apply bg-blue-500 text-gray-50 !important; -} - /* https://github.com/kchen0x */ .notion-quote { display: block; diff --git a/themes/fukasawa/style.js b/themes/fukasawa/style.js index 7a59e053..e96d8036 100644 --- a/themes/fukasawa/style.js +++ b/themes/fukasawa/style.js @@ -11,6 +11,37 @@ const Style = () => { text-color: red; } + + /* fukasawa的首页响应式分栏 */ + #theme-fukasawa .grid-item { + height: auto; + break-inside: avoid-column; + margin-bottom: .5rem; + } + + /* 大屏幕(宽度≥1024px)下显示3列 */ + @media (min-width: 1024px) { + #theme-fukasawa .grid-container { + column-count: 3; + column-gap: .5rem; + } + } + + /* 小屏幕(宽度≥640px)下显示2列 */ + @media (min-width: 640px) and (max-width: 1023px) { + #theme-fukasawa .grid-container { + column-count: 2; + column-gap: .5rem; + } + } + + /* 移动端(宽度<640px)下显示1列 */ + @media (max-width: 639px) { + #theme-fukasawa .grid-container { + column-count: 1; + column-gap: .5rem; + } + } `} } diff --git a/themes/heo/components/Announcement.js b/themes/heo/components/Announcement.js index 695c26a4..6c3feb2a 100644 --- a/themes/heo/components/Announcement.js +++ b/themes/heo/components/Announcement.js @@ -1,19 +1,16 @@ -import { useGlobal } from '@/lib/global' import dynamic from 'next/dynamic' const NotionPage = dynamic(() => import('@/components/NotionPage')) const Announcement = ({ post, className }) => { - const { locale } = useGlobal() if (post?.blockMap) { - return
-
-
{locale.COMMON.ANNOUNCEMENT}
- {post && (
- -
)} -
-
+ return
+ {post && ( +
+ +
+ )} +
} else { return <> } diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js index c9d4497a..da681845 100644 --- a/themes/heo/components/BlogPostCard.js +++ b/themes/heo/components/BlogPostCard.js @@ -8,23 +8,14 @@ import BLOG from '@/blog.config' const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) { - post.pageCover = siteInfo?.pageCoverThumbnail + post.pageCoverThumbnail = siteInfo?.pageCover } const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview - // const delay = (index % 2) * 200 - + console.log(post, post.pageCoverThumbnail) return (
-
+
{/* 图片封面 */} {showPageCover && ( diff --git a/themes/heo/components/BlogPostCardInfo.js b/themes/heo/components/BlogPostCardInfo.js index 54668297..4d233072 100644 --- a/themes/heo/components/BlogPostCardInfo.js +++ b/themes/heo/components/BlogPostCardInfo.js @@ -1,7 +1,5 @@ -import NotionPage from '@/components/NotionPage' import Link from 'next/link' import TagItemMini from './TagItemMini' -import TwikooCommentCount from '@/components/TwikooCommentCount' import BLOG from '@/blog.config' /** @@ -10,74 +8,43 @@ import BLOG from '@/blog.config' * @returns */ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => { - return
-
- {/* 标题 */} - + return
- {post.title} +
- + {/* 分类 */} + {post?.category &&
+ + {post.category} + +
} - {/* 分类 */} - { post?.category &&
+ {/* 标题 */} + className={'line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight text-black dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400'}> - - {post.category} + {post.title} - -
} + {/* 摘要 */} + {(!showPreview || showSummary) && !post.results && ( +

+ {post.summary} +

+ )} - {/* 摘要 */} - {(!showPreview || showSummary) && !post.results && ( -

- {post.summary} -

- )} - - {/* 搜索结果 */} - {post.results && ( -

- {post.results.map(r => ( - {r} - ))} -

- )} - {/* 预览 */} - {showPreview && ( -
- -
- )} - -
- -
- {/* 日期标签 */} -
- {/* 日期 */} - - - - {post?.publishTime || post.lastEditedTime} - - + {/* 搜索结果 */} + {post.results && ( +

+ {post.results.map(r => ( + {r} + ))} +

+ )}
@@ -88,6 +55,6 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
-
-
+ +
} diff --git a/themes/heo/components/Card.js b/themes/heo/components/Card.js index c2db0e49..2107391b 100644 --- a/themes/heo/components/Card.js +++ b/themes/heo/components/Card.js @@ -1,7 +1,7 @@ const Card = ({ children, headerSlot, className }) => { - return
+ return
<>{headerSlot} -
+
{children}
diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js index 41022122..031ea6c3 100644 --- a/themes/heo/components/CategoryBar.js +++ b/themes/heo/components/CategoryBar.js @@ -1,3 +1,6 @@ +import { useGlobal } from '@/lib/global' +import Link from 'next/link' +import { useRouter } from 'next/router' /** * 博客列表上方嵌入条 @@ -6,14 +9,39 @@ */ export default function CategoryBar(props) { const { categoryOptions } = props - console.log(categoryOptions) - return
- {categoryOptions?.map(c => { - return ( -
- {c.name} -
- ) - })} -
+ const { locale } = useGlobal() + + return
+ +
+ + {categoryOptions?.map((c, index) => { + return ( +
+ +
+ ) + })} +
+ +
+ + {locale.COMMON.MORE} + +
+
+} + +/** + * 按钮 + * @param {*} param0 + * @returns + */ +const MenuItem = ({ href, name }) => { + const router = useRouter() + const selected = router.pathname === href + return
+ {name} +
} diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js index 1185e030..17ad8ece 100644 --- a/themes/heo/components/InfoCard.js +++ b/themes/heo/components/InfoCard.js @@ -1,8 +1,8 @@ import BLOG from '@/blog.config' -import { useRouter } from 'next/router' +import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons' +import Link from 'next/link' +import Announcement from './Announcement' import Card from './Card' -import SocialButton from './SocialButton' -import MenuGroupCard from './MenuGroupCard' /** * 社交信息卡 @@ -10,23 +10,39 @@ import MenuGroupCard from './MenuGroupCard' * @returns */ export function InfoCard(props) { - const { className, siteInfo } = props - const router = useRouter() + const { siteInfo, notice } = props return ( - -
{ - router.push('/') - }} - > - {/* eslint-disable-next-line @next/next/no-img-element */} - {BLOG.AUTHOR} + +
+ +
你好!我是
+ +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {BLOG.AUTHOR} +
+
+ +

+ {BLOG.AUTHOR} +

+ +
+ +
+ +
+
+
+
+
+ +
+ +
了解更多
+
+
-
{BLOG.AUTHOR}
-
{BLOG.BIO}
- -
) } diff --git a/themes/heo/components/MenuGroupCard.js b/themes/heo/components/MenuGroupCard.js index 25dba50c..89591369 100644 --- a/themes/heo/components/MenuGroupCard.js +++ b/themes/heo/components/MenuGroupCard.js @@ -17,29 +17,28 @@ const MenuGroupCard = (props) => { ] return ( - ) } export default MenuGroupCard diff --git a/themes/heo/components/SideRight.js b/themes/heo/components/SideRight.js index a08409e9..b929b934 100644 --- a/themes/heo/components/SideRight.js +++ b/themes/heo/components/SideRight.js @@ -3,8 +3,10 @@ import TagGroups from './TagGroups' import Catalog from './Catalog' import { InfoCard } from './InfoCard' import dynamic from 'next/dynamic' -import Announcement from './Announcement' import Live2D from '@/components/Live2D' +import MenuGroupCard from './MenuGroupCard' +import FlipCard from '@/components/FlipCard' +import Link from 'next/link' const FaceBookPage = dynamic( () => { @@ -27,25 +29,42 @@ const FaceBookPage = dynamic( export default function SideRight(props) { const { post, tagOptions, - currentTag, rightAreaSlot, notice + currentTag, rightAreaSlot } = props console.log('props', props) return ( -
+
- -
Join Us
-
+
- + +

交流频道

+

加入我们的社群讨论分享

+
+
} + + backContent={
+ + 点击查看联系方式 + +
} + /> + +
+ + {/* 标签和成绩 */} + +
+
- -
{post && post.toc && post.toc.length > 1 && diff --git a/themes/heo/components/TagGroups.js b/themes/heo/components/TagGroups.js index 793ef429..f431c998 100644 --- a/themes/heo/components/TagGroups.js +++ b/themes/heo/components/TagGroups.js @@ -1,4 +1,4 @@ -import TagItemMini from './TagItemMini' +import Link from 'next/link' /** * 标签组 @@ -10,17 +10,22 @@ import TagItemMini from './TagItemMini' const TagGroups = ({ tags, currentTag }) => { if (!tags) return <> return ( -
-
标签
-
- { - tags.map(tag => { - const selected = tag.name === currentTag - return - }) - } -
-
+
+ { + tags.map(tag => { + return <> + +
+
{tag.name}
{tag.count ? {tag.count} : <>} +
+ + + }) + } +
) } diff --git a/themes/heo/components/TagItemMini.js b/themes/heo/components/TagItemMini.js index 32221ea4..d7b12d7b 100644 --- a/themes/heo/components/TagItemMini.js +++ b/themes/heo/components/TagItemMini.js @@ -1,3 +1,4 @@ +import { HashTag } from '@/components/HeroIcons' import Link from 'next/link' const TagItemMini = ({ tag, selected = false }) => { @@ -6,16 +7,11 @@ const TagItemMini = ({ tag, selected = false }) => { key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref - className={`cursor-pointer inline-block rounded hover:bg-indigo-400 dark:hover:text-white hover:text-white duration-200 - mr-2 py-0.5 px-1 text-xs whitespace-nowrap - ${selected - ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-indigo-900' - : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background `}` }> - -
{selected && } {tag.name + (tag.count ? `(${tag.count})` : '')}
+ className={'cursor-pointer inline-block hover:text-blue-600 duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }> +
{tag.name + (tag.count ? `(${tag.count})` : '')}
- ); + ) } export default TagItemMini diff --git a/themes/heo/style.js b/themes/heo/style.js index 7a59e053..a02cc7d9 100644 --- a/themes/heo/style.js +++ b/themes/heo/style.js @@ -11,6 +11,22 @@ const Style = () => { text-color: red; } + // 公告栏中的字体固定白色 + #announcement-content .notion{ + color: white; + } + + ::-webkit-scrollbar-thumb { + background: rgba(60, 60, 67, 0.4); + border-radius: 8px; + cursor: pointer; + } + + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + `} } diff --git a/themes/hexo/components/MenuItemCollapse.js b/themes/hexo/components/MenuItemCollapse.js index 3ec10f5e..a05c627f 100644 --- a/themes/hexo/components/MenuItemCollapse.js +++ b/themes/hexo/components/MenuItemCollapse.js @@ -42,8 +42,8 @@ export const MenuItemCollapse = ({ link }) => { {/* 折叠子菜单 */} {hasSubMenu && - {link.subMenus.map(sLink => { - return
+ {link.subMenus.map((sLink, index) => { + return
{link?.icon && } {sLink.title} diff --git a/themes/hexo/index.js b/themes/hexo/index.js index 77690dcd..d42831eb 100644 --- a/themes/hexo/index.js +++ b/themes/hexo/index.js @@ -49,6 +49,7 @@ const LayoutBase = props => { {/* 网页SEO */} ) }