mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
theme-heo
This commit is contained in:
tangly1024.com
@@ -26,6 +26,7 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'react/no-unknown-property': 'off', // <style jsx>
|
||||
'react/prop-types': 'off',
|
||||
'space-before-function-paren': 0,
|
||||
'react-hooks/rules-of-hooks': 'error' // Checks rules of Hooks
|
||||
|
||||
54
components/FlipCard.js
Normal file
54
components/FlipCard.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
/**
|
||||
* 翻转组件
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
export default function FlipCard(props) {
|
||||
const [isFlipped, setIsFlipped] = useState(false)
|
||||
|
||||
function handleCardFlip() {
|
||||
setIsFlipped(!isFlipped)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flip-card ${isFlipped ? 'flipped' : ''}`} >
|
||||
<div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>{props.frontContent}</div>
|
||||
<div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>{props.backContent}</div>
|
||||
<style jsx>{`
|
||||
.flip-card {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.flip-card-front,
|
||||
.flip-card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip-card-front {
|
||||
z-index: 2;
|
||||
transform: rotateY(0);
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.flip-card-back {
|
||||
transform: rotateY(180deg);
|
||||
background-color: #888;
|
||||
}
|
||||
|
||||
.flip-card.flipped {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,52 +3,68 @@
|
||||
* @returns
|
||||
*/
|
||||
|
||||
const Moon = () => {
|
||||
export const Moon = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const Sun = () => {
|
||||
export const Sun = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const Home = ({ className }) => {
|
||||
export const Home = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const User = ({ className }) => {
|
||||
export const User = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const ArrowPath = ({ className }) => {
|
||||
export const ArrowPath = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const ChevronLeft = ({ className }) => {
|
||||
export const ChevronLeft = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const ChevronRight = ({ className }) => {
|
||||
export const ChevronRight = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const InformationCircle = ({ className }) => {
|
||||
export const InformationCircle = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export { Moon, Sun, Home, User, ArrowPath, ChevronLeft, ChevronRight, InformationCircle }
|
||||
export const HashTag = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const GlobeAlt = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
export const ArrowRightCircle = ({ className }) => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default {
|
||||
LOCALE: 'en-US',
|
||||
NAV: {
|
||||
INDEX: 'Blog',
|
||||
INDEX: 'Home',
|
||||
RSS: 'RSS',
|
||||
SEARCH: 'Search',
|
||||
ABOUT: 'About',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
}
|
||||
|
||||
|
||||
@@ -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 <div className={className}>
|
||||
<section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-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' />
|
||||
</div>)}
|
||||
</section>
|
||||
</div>
|
||||
return <div >
|
||||
{post && (
|
||||
<div id="announcement-content">
|
||||
<NotionPage post={post} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
} else {
|
||||
return <></>
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className={`${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
|
||||
<div
|
||||
// data-aos="fade-up"
|
||||
// data-aos-easing="ease-in-out"
|
||||
// data-aos-duration="800"
|
||||
// data-aos-once="false"
|
||||
// data-aos-anchor-placement="top-bottom"
|
||||
id='blog-post-card'
|
||||
key={post.id}
|
||||
className={`w-full justify-between flex flex-col lg:h-96 ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? '' : ''}
|
||||
overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
|
||||
<div className={`w-full border justify-between flex flex-col lg:h-96
|
||||
overflow-hidden rounded-xl bg-white `}>
|
||||
|
||||
{/* 图片封面 */}
|
||||
{showPageCover && (
|
||||
|
||||
@@ -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 <div className={`flex flex-1 flex-col justify-between lg:p-6 p-4 ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
|
||||
<div>
|
||||
{/* 标题 */}
|
||||
<Link
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
passHref
|
||||
className={`line-clamp-2 replace cursor-pointer text-2xl ${showPreview ? 'text-center' : ''
|
||||
} leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
|
||||
return <div className={'flex flex-col justify-between lg:p-6 p-4 w-full'}>
|
||||
|
||||
<span className='menu-link '>{post.title}</span>
|
||||
<div>
|
||||
|
||||
</Link>
|
||||
{/* 分类 */}
|
||||
{post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 `}>
|
||||
<Link passHref href={`/category/${post.category}`}
|
||||
className="cursor-pointer font-light text-xs menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
|
||||
{post.category}
|
||||
</Link>
|
||||
</div>}
|
||||
|
||||
{/* 分类 */}
|
||||
{ post?.category && <div
|
||||
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
|
||||
} flex-wrap dark:text-gray-500 text-gray-400 `}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<Link
|
||||
href={`/category/${post.category}`}
|
||||
href={`${BLOG.SUB_PATH}/${post.slug}`}
|
||||
passHref
|
||||
className="cursor-pointer font-light text-sm menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
|
||||
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'}>
|
||||
|
||||
<i className="mr-1 far fa-folder" />
|
||||
{post.category}
|
||||
<span className='menu-link '>{post.title}</span>
|
||||
|
||||
</Link>
|
||||
|
||||
<TwikooCommentCount className='text-sm hover:text-indigo-700 dark:hover:text-indigo-400' post={post}/>
|
||||
</div>}
|
||||
{/* 摘要 */}
|
||||
{(!showPreview || showSummary) && !post.results && (
|
||||
<p className="line-clamp-2 replace my-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-tight">
|
||||
{post.summary}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 摘要 */}
|
||||
{(!showPreview || showSummary) && !post.results && (
|
||||
<p className="line-clamp-2 replace my-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
{post.summary}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 搜索结果 */}
|
||||
{post.results && (
|
||||
<p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
{post.results.map(r => (
|
||||
<span key={r}>{r}</span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
{/* 预览 */}
|
||||
{showPreview && (
|
||||
<div className="overflow-ellipsis truncate">
|
||||
<NotionPage post={post} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* 日期标签 */}
|
||||
<div className="text-gray-400 justify-between flex">
|
||||
{/* 日期 */}
|
||||
<Link
|
||||
href={`/archive#${post?.publishTime?.substr(0, 7)}`}
|
||||
passHref
|
||||
className="font-light menu-link cursor-pointer text-sm leading-4 mr-3">
|
||||
|
||||
<i className="far fa-calendar-alt mr-1" />
|
||||
{post?.publishTime || post.lastEditedTime}
|
||||
|
||||
</Link>
|
||||
{/* 搜索结果 */}
|
||||
{post.results && (
|
||||
<p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
|
||||
{post.results.map(r => (
|
||||
<span key={r}>{r}</span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
|
||||
<div>
|
||||
@@ -88,6 +55,6 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const Card = ({ children, headerSlot, className }) => {
|
||||
return <div className={className}>
|
||||
return <div className={`${className || ''} card border rounded-xl lg:p-6 p-4`}>
|
||||
<>{headerSlot}</>
|
||||
<section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
|
||||
<section>
|
||||
{children}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -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 <div id='category-bar' className="h-14 mb-2 w-full bg-white border flex py-2 px-4 justify-center items-center rounded-xl">
|
||||
{categoryOptions?.map(c => {
|
||||
return (
|
||||
<div key={c.id}>
|
||||
{c.name}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
const { locale } = useGlobal()
|
||||
|
||||
return <div id='category-bar' className="h-12 mb-2 space-x-2 w-full bg-white border
|
||||
flex justify-between py-2 px-4 items-center rounded-xl hover:border hover:border-indigo-600 transition-colors duration-200">
|
||||
|
||||
<div id='category-bar-items' className='flex justify-start space-x-2'>
|
||||
<MenuItem href='/' name={locale.NAV.INDEX} />
|
||||
{categoryOptions?.map((c, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<MenuItem href={`/category/${c.name}`} name={c.name} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div id='category-bar-next' className='flex'>
|
||||
<Link href='/category' className='font-bold transition-colors duration-200 hover:text-indigo-600'>
|
||||
{locale.COMMON.MORE}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 按钮
|
||||
* @param {*} param0
|
||||
* @returns
|
||||
*/
|
||||
const MenuItem = ({ href, name }) => {
|
||||
const router = useRouter()
|
||||
const selected = router.pathname === href
|
||||
return <div className={`duration-200 transition-all font-bold px-2 py-0.5 rounded-md hover:text-white hover:bg-indigo-600 ${selected ? 'text-white bg-indigo-600' : ''}`}>
|
||||
<Link href={href}>{name}</Link>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<Card className={className}>
|
||||
<div
|
||||
className='justify-center items-center flex py-6 dark:text-gray-100 transform duration-200 cursor-pointer'
|
||||
onClick={() => {
|
||||
router.push('/')
|
||||
}}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
|
||||
<Card className='bg-[#4f65f0] text-white flex flex-col w-72'>
|
||||
<div className='flex justify-between'>
|
||||
|
||||
<div className='py-1 px-2 bg-indigo-500 text-sm rounded-lg hover:bg-indigo-50 hover:text-indigo-950 duration-200 transition-colors'>你好！我是</div>
|
||||
|
||||
<div className='justify-center items-center flex dark:text-gray-100 transform duration-200 cursor-pointer'>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={siteInfo?.icon} className='rounded-full' width={28} alt={BLOG.AUTHOR} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className='text-3xl font-extrabold mt-3'>
|
||||
{BLOG.AUTHOR}
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<Announcement post={notice} style={{ color: 'white !important' }} />
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between'>
|
||||
<div className='flex space-x-3 '>
|
||||
<div className='bg-indigo-400 p-2 rounded-full hover:bg-white hover:text-black transition-colors duration-200'><Link href='/about'><GlobeAlt className={'w-6 h-6'} /></Link></div>
|
||||
<div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center hover:bg-white hover:text-black transition-colors duration-200'><Link href='https://github.com/tangly1024/NotionNext'><i className='fab fa-github text-xl'></i></Link></div>
|
||||
</div>
|
||||
<Link href='/about'>
|
||||
<div className='flex items-center hover:bg-white hover:text-black transition-colors duration-200 bg-indigo-400 py-2 px-3 rounded-full space-x-1'>
|
||||
<ArrowRightCircle className={'w-6 h-6 stroke-indigo-400 fill-white'} />
|
||||
<div className='font-bold'>了解更多</div>
|
||||
</div>
|
||||
</Link>
|
||||
</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 />
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -17,29 +17,28 @@ const MenuGroupCard = (props) => {
|
||||
]
|
||||
|
||||
return (
|
||||
<nav id='nav' className='leading-8 flex justify-center dark:text-gray-200 w-full'>
|
||||
{links.map(link => {
|
||||
if (link.show) {
|
||||
return (
|
||||
<Link
|
||||
key={`${link.to}`}
|
||||
title={link.to}
|
||||
href={link.to}
|
||||
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
|
||||
className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'}>
|
||||
<nav id='nav' className='dark:text-gray-200 w-full px-5'>
|
||||
{links.map((link, index) => {
|
||||
if (link.show) {
|
||||
return (
|
||||
<div key={index} className=''>
|
||||
<Link title={link.to}
|
||||
href={link.to}
|
||||
target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
|
||||
className={'w-full flex items-center justify-between py-1 hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600 px-2 cursor-pointer'}>
|
||||
<>
|
||||
<div>{link.name} :</div>
|
||||
<div className='font-semibold'>{link.slot}</div>
|
||||
</>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600'>
|
||||
<div className='text-center'>{link.name}</div>
|
||||
<div className='text-center font-semibold'>{link.slot}</div>
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</nav>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
export default MenuGroupCard
|
||||
|
||||
@@ -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 (
|
||||
<div id='sideRight' className='w-72'>
|
||||
<div id='sideRight' className='w-72 space-y-4'>
|
||||
|
||||
<InfoCard {...props} className='w-72' />
|
||||
|
||||
<Card>
|
||||
<div>Join Us</div>
|
||||
</Card>
|
||||
<div className={'relative h-28 border rounded-xl lg:p-6 p-4 bg-[#4f65f0] text-white flex flex-col'}>
|
||||
|
||||
<Card>
|
||||
<FlipCard
|
||||
className='cursor-pointer'
|
||||
frontContent={
|
||||
<div>
|
||||
<h2 className='font-[1000] text-3xl'>交流频道</h2>
|
||||
<h3 className='pt-2'>加入我们的社群讨论分享</h3>
|
||||
<div className='absolute left-0 top-0 w-full h-full' style={{ background: 'url(https://bu.dusays.com/2023/05/16/64633c4cd36a9.png) center center no-repeat' }}></div>
|
||||
</div>}
|
||||
|
||||
backContent={<div className='font-[1000] text-xl'>
|
||||
<Link href='https://docs.tangly1024.com/article/how-to-question'>
|
||||
点击查看联系方式
|
||||
</Link>
|
||||
</div>}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 标签和成绩 */}
|
||||
<Card className={'sticky top-20 bg-white'}>
|
||||
<TagGroups tags={tagOptions} currentTag={currentTag} />
|
||||
<hr className='mx-1 flex border-dashed relative my-2'/>
|
||||
<MenuGroupCard {...props} />
|
||||
</Card>
|
||||
|
||||
<Announcement post={notice} />
|
||||
|
||||
<div className='sticky top-20'>
|
||||
{post && post.toc && post.toc.length > 1 && <Card>
|
||||
<Catalog toc={post.toc} />
|
||||
|
||||
@@ -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 (
|
||||
<div id='tags-group' className='dark:border-gray-600 space-y-2'>
|
||||
<div className='font-light text-xs ml-2 mb-2'><i className='mr-1 fas fa-tag' />标签</div>
|
||||
<div className='px-4'>
|
||||
{
|
||||
tags.map(tag => {
|
||||
const selected = tag.name === currentTag
|
||||
return <TagItemMini key={tag.name} tag={tag} selected={selected} />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div id='tags-group' className='dark:border-gray-600 space-y-2'>
|
||||
{
|
||||
tags.map(tag => {
|
||||
return <>
|
||||
<Link passHref
|
||||
key={tag}
|
||||
href={`/tag/${encodeURIComponent(tag.name)}`}
|
||||
className={'cursor-pointer inline-block whitespace-nowrap '}>
|
||||
<div className='flex items-center hover:bg-blue-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all'>
|
||||
<div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
|
||||
</div>
|
||||
|
||||
</Link></>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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 `}` }>
|
||||
|
||||
<div className='font-light'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
|
||||
className={'cursor-pointer inline-block hover:text-blue-600 duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }>
|
||||
<div className='font-light flex items-center'><HashTag className='text-gray-500 w-3 h-3'/> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
|
||||
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default TagItemMini
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
`}</style>
|
||||
}
|
||||
|
||||
|
||||
@@ -42,8 +42,8 @@ export const MenuItemCollapse = ({ link }) => {
|
||||
|
||||
{/* 折叠子菜单 */}
|
||||
{hasSubMenu && <Collapse isOpen={isOpen}>
|
||||
{link.subMenus.map(sLink => {
|
||||
return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
|
||||
{link.subMenus.map((sLink, index) => {
|
||||
return <div key={index} className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
|
||||
<Link href={sLink.to}>
|
||||
<span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
|
||||
</Link>
|
||||
|
||||
@@ -49,6 +49,7 @@ const LayoutBase = props => {
|
||||
{/* 网页SEO */}
|
||||
<CommonHead meta={meta} siteInfo={siteInfo} />
|
||||
<Style/>
|
||||
|
||||
{/* 顶部导航 */}
|
||||
<TopNav {...props} />
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
* @returns
|
||||
*/
|
||||
const Style = () => {
|
||||
return (<style jsx>{`
|
||||
return (<style jsx global>{`
|
||||
|
||||
/* 菜单下划线动画 */
|
||||
#theme-hexo .menu-link {
|
||||
@@ -38,6 +38,30 @@ const Style = () => {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 选中字体颜色
|
||||
::selection {
|
||||
background: rgba(45, 170, 219, 0.3);
|
||||
}
|
||||
|
||||
// 自定义滚动条
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #49b1f5;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width:thin;
|
||||
scrollbar-color: #49b1f5 transparent
|
||||
}
|
||||
|
||||
|
||||
`}</style>)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user