d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-16 07:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

heo-主题

Browse Source
This commit is contained in:
tangly1024.com
2023-07-13 16:54:52 +08:00
parent 408843ccb4
commit 43287cbf74
14 changed files with 306 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/HeroIcons.js
View File

@@ -74,3 +74,9 @@ export const ArrowRightCircle = ({ 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>
}
export const PlusSmall = ({ 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 6v12m6-6H6" />
</svg>
}

2
lib/notion/getNotionData.js
View File

@@ -309,7 +309,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
const customNav = getCustomNav({ allPages: collectionData.filter(post => post?.type === 'Page' && post.status === 'Published') })
// 新的菜单
const customMenu = await getCustomMenu({ collectionData })
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 6 })
const allNavPages = getNavPages({ allPages })
return {

50
themes/heo/components/AnalyticsCard.js
View File

@@ -1,30 +1,28 @@
import Card from './Card'
export function AnalyticsCard (props) {
export function AnalyticsCard(props) {
const { postCount } = props
return <Card>
<div className='ml-2 mb-3 '>
<i className='fas fa-chart-area' /> 统计
</div>
<div className='text-xs font-light justify-center mx-7'>
<div className='inline'>
<div className='flex justify-between'>
<div>文章数:</div>
<div>{postCount}</div>
return <>
<div className='ml-2 mb-3 '>
<i className='fas fa-chart-area' /> 统计
</div>
</div>
<div className='hidden busuanzi_container_page_pv ml-2'>
<div className='flex justify-between'>
<div>访问量:</div>
<div className='busuanzi_value_page_pv' />
<div className='text-xs font-light justify-center mx-7'>
<div className='inline'>
<div className='flex justify-between'>
<div>文章数:</div>
<div>{postCount}</div>
</div>
</div>
<div className='hidden busuanzi_container_page_pv ml-2'>
<div className='flex justify-between'>
<div>访问量:</div>
<div className='busuanzi_value_page_pv' />
</div>
</div>
<div className='hidden busuanzi_container_site_uv ml-2'>
<div className='flex justify-between'>
<div>访客数:</div>
<div className='busuanzi_value_site_uv' />
</div>
</div>
</div>
</div>
<div className='hidden busuanzi_container_site_uv ml-2'>
<div className='flex justify-between'>
<div>访客数:</div>
<div className='busuanzi_value_site_uv' />
</div>
</div>
</div>
</Card>
</>
}

8
themes/heo/components/BlogPostCard.js
View File

@@ -1,5 +1,4 @@
import Link from 'next/link'
import React, { useState } from 'react'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import TagItemMini from './TagItemMini'
@@ -7,20 +6,19 @@ import TagItemMini from './TagItemMini'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
const [onHover, setOnHover] = useState(false)
if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
post.pageCoverThumbnail = siteInfo?.pageCover
}
const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
return (
<div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
<div onMouseEnter={() => setOnHover(true)} onMouseLeave={() => setOnHover(false)} className={'w-full hover:border-indigo-600 duration-300 transition-colors border justify-between flex flex-col lg:h-96 overflow-hidden rounded-xl bg-white '}>
<div className={'group w-full hover:border-indigo-600 duration-300 transition-colors border justify-between flex flex-col lg:h-96 overflow-hidden rounded-xl bg-white '}>
{/* 图片封面 */}
{showPageCover && (
<div className="flex-1 h-60 md:w-5/12 lg:w-full overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className={`h-60 bg-center bg-cover ${onHover ? 'scale-105 brightness-75' : ''} transition-all duration-300`} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
<div className={'h-60 bg-center bg-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
</Link>
</div>
)}
@@ -41,7 +39,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
<Link
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={`${onHover ? 'text-indigo-700 dark:text-indigo-400' : ' text-black dark:text-gray-100'} line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight`}>
className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight'}>
<span className='menu-link '>{post.title}</span>

2
themes/heo/components/BlogPostListPage.js
View File

@@ -20,7 +20,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
return (
<div id="container" className='w-full'>
{/* 文章列表 */}
<div className="lg:grid lg:grid-cols-2 gap-5">
<div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
{posts?.map(post => (
<BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
))}

2
themes/heo/components/Header.js
View File

@@ -45,7 +45,7 @@ const Header = props => {
return (<>
{/* 头条 */}
<nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center top-0 duration-300 transition-all sticky text-black w-full z-20 transform`}>
<div className='w-full max-w-[88rem] mx-auto flex justify-between items-center px-5'>
<div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-5'>
<div className='flex'>
<Logo {...props} />
</div>

137
themes/heo/components/Hero.js
View File

@@ -1,43 +1,124 @@
// import Image from 'next/image'
import BLOG from '@/blog.config'
import { PlusSmall } from '@/components/HeroIcons'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
/**
* 顶部全屏大图
* 顶部英雄区
* 左右布局，
* 左侧：banner组
* 右侧：今日卡牌遮罩
* @returns
*/
const Hero = props => {
return (
<>
<notice className="max-w-[88rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
<div className="bg-white rounded-xl border w-full h-full flex items-center justify-between px-5">
<div>左侧 图表</div>
<div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">这里是公告栏</div>
<div>右侧按钮</div>
return (<hero id="hero" style={{ zIndex: 1 }} className="max-w-[86rem] w-full mx-auto flex relative space-x-6 px-5" >
{/* 左侧banner组 */}
<BannerGroup />
{/* 右侧置顶文章组 */}
<TopGroup {...props} />
</hero>)
}
/**
* 英雄区左侧banner组
* @returns
*/
function BannerGroup() {
return <div id='hero-left' className='flex flex-col flex-1 bg-red-200'>
<div className="h-60 bg-white rounded-xl border my-2"></div>
<div className="h-20 flex flex-nowrap justify-between space-x-3 my-2">
<Link href="/tag/必看精选" className="bg-blue-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out ">
<div className="font-bold text-lg pl-4 relative">
必看精选
<span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
</div>
</notice>
</Link>
<Link href="/tag/热门文章" className="bg-orange-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
<div className="font-bold text-lg pl-4 relative">
热门文章
<span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
</div>
</Link>
<Link href="/tag/实用教程" className="bg-emerald-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
<div className="font-bold text-lg pl-4 relative">
实用教程
<span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
</div>
</Link>
</div>
<hero id="hero" style={{ zIndex: 1 }} className="max-w-[88rem] w-full mx-auto flex relative space-x-3 px-5" >
<div id='hero-left' className='flex flex-col flex-1 bg-red-200'>
<div className="h-60 bg-white rounded-xl border my-2"></div>
<div className="h-20 flex flex-nowrap justify-between space-x-3 my-2">
<div className="bg-white rounded-xl border flex-1">
</div>
}
</div>
<div className="bg-white rounded-xl border flex-1">
</div>
<div className="bg-white rounded-xl border flex-1">
</div>
/**
* 置顶文章区域
*/
function TopGroup(props) {
const { latestPosts, siteInfo } = props
return <div id='hero-right' className='bg-green-200 flex-1 relative'>
<div id='top-group' className='w-full h-full grid grid-cols-3 gap-3 py-2'>
{latestPosts?.map(p => {
return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
<div className='cursor-pointer group relative flex flex-col w-52 overflow-hidden shadow bg-white rounded-xl'>
{/* eslint-disable-next-line */}
<img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
<div className='h-16 line-clamp-2 overflow-hidden p-3 font-semibold'>{p?.title}</div>
<div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>荐</div>
</div>
</div>
<div id='hero-right' className='flex flex-col flex-1 bg-green-200 '>
<div className="my-2 h-full bg-white rounded-xl border "></div>
</Link>
})}
</div>
</div>
</hero>
<TodayCard />
</div>
}
</>
)
/**
* 英雄区右侧，今日卡牌
* @returns
*/
function TodayCard() {
// 卡牌是否盖住下层
const [isCoverUp, setIsCoverUp] = useState(true)
const router = useRouter()
function handleMouseLeave() {
setIsCoverUp(true)
}
function handleClickMore(e) {
e.stopPropagation()
setIsCoverUp(false)
}
/**
* 点击卡片跳转的链接
* @param {*} e
*/
function handleCardClick(e) {
router.push('https://tangly1024.com')
}
return <div id='today-card' className={'overflow-hidden absolute flex flex-1 flex-col h-full top-0 w-full'}>
<div id='card-body' onMouseLeave={handleMouseLeave} onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110'} transition-all duration-150today-card my-2 h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
<div id='today-card-info' className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
<div className='flex flex-col'>
<div className='text-sm font-light'>新版上线</div>
<div className='text-3xl font-extrabold'>NotionNext4.0轻松定制主题</div>
</div>
<div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} cursor-zoom-in flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
<PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
<div id='more' className='select-none'>更多推荐</div>
</div>
</div>
<div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`}style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
</div>
</div>
}
export default Hero

23
themes/heo/components/InfoCard.js
View File

@@ -1,6 +1,8 @@
import BLOG from '@/blog.config'
import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
import Link from 'next/link'
import { useState } from 'react'
import CONFIG from '../config'
import Announcement from './Announcement'
import Card from './Card'
@@ -14,9 +16,7 @@ export function InfoCard(props) {
return (
<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>
<GreetingsWords />
<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} />
@@ -42,6 +42,23 @@ export function InfoCard(props) {
)
}
/**
* 欢迎语
*/
function GreetingsWords() {
const greetings = CONFIG.INFOCARD_GREETINGS
const [greeting, setGreeting] = useState(greetings[0])
// 每次点击，随机获取greetings中的一个
const handleChangeGreeting = () => {
const randomIndex = Math.floor(Math.random() * greetings.length)
setGreeting(greetings[randomIndex])
}
return <div onClick={handleChangeGreeting} className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 text-sm rounded-lg hover:bg-indigo-50 hover:text-indigo-950 duration-200 transition-colors'>
{greeting}
</div>
}
/**
* 了解更多按鈕
* @returns

23
themes/heo/components/Logo.js
View File

@@ -1,17 +1,26 @@
import BLOG from '@/blog.config'
import { Home } from '@/components/HeroIcons'
import Link from 'next/link'
import React from 'react'
const Logo = props => {
const { siteInfo } = props
return (
<Link href='/' passHref legacyBehavior>
<div className='flex justify-center items-center cursor-pointer font-extrabold'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
<div className='text-lg my-auto rounded dark:border-white transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
</div>
</Link>
<Link href='/' passHref legacyBehavior>
<div className='flex justify-center items-center cursor-pointer font-extrabold'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
<div id='logo-text' className='group hover:bg-indigo-600 rounded-2xl'>
<div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200 transition-all '>
{siteInfo?.title || BLOG.TITLE}
</div>
<div className='group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-4 justify-center px-8 py-1 transition-all duration-200'>
<Home className={'w-6 h-6 stroke-white stroke-2'}/>
</div>
</div>
</div>
</Link>
)
}
export default Logo

18
themes/heo/components/NoticeBar.js Normal file
View File

@@ -0,0 +1,18 @@
import { ArrowRightCircle } from '@/components/HeroIcons'
import Link from 'next/link'
/**
* 通知横幅
*/
export function NoticeBar() {
return (
<notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
<Link href='https://tangly1024.com' className="bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
<span className='whitespace-nowrap'>此刻</span>
<div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">欢迎来到我的博客</div>
<div><ArrowRightCircle className={'w-5 h-5'} /></div>
</Link>
</notice>
)
}

2
themes/heo/components/SideRight.js
View File

@@ -7,6 +7,7 @@ import Live2D from '@/components/Live2D'
import MenuGroupCard from './MenuGroupCard'
import FlipCard from '@/components/FlipCard'
import Link from 'next/link'
import { AnalyticsCard } from './AnalyticsCard'
const FaceBookPage = dynamic(
() => {
@@ -63,6 +64,7 @@ export default function SideRight(props) {
<TagGroups tags={tagOptions} currentTag={currentTag} />
<hr className='mx-1 flex border-dashed relative my-2'/>
<MenuGroupCard {...props} />
<AnalyticsCard {...props} />
</Card>
<div className='sticky top-20'>

12
themes/heo/config.js
View File

@@ -1,7 +1,15 @@
const CONFIG = {
HOME_BANNER_ENABLE: true,
// 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
// 欢迎语
INFOCARD_GREETINGS: [
'你好！我是',
'🔍 分享与热心帮助',
'🤝 专修交互与设计',
'🏃 脚踏实地行动派',
'🏠 智能家居小能手',
'🤖️ 数码科技爱好者',
'🧱 团队小组发动机'
],
HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
// 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。

143
themes/heo/index.js
View File

@@ -27,11 +27,12 @@ import ArticleAdjacent from './components/ArticleAdjacent'
import ArticleCopyright from './components/ArticleCopyright'
import ArticleRecommend from './components/ArticleRecommend'
import ShareBar from '@/components/ShareBar'
import TagItemMini from './components/TagItemMini'
import Link from 'next/link'
import CategoryBar from './components/CategoryBar'
import { Transition } from '@headlessui/react'
import { Style } from './style'
import { NoticeBar } from './components/NoticeBar'
import { HashTag } from '@/components/HeroIcons'
/**
* 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -40,7 +41,7 @@ import { Style } from './style'
* @constructor
*/
const LayoutBase = props => {
const { children, headerSlot, slotTop, meta, siteInfo, className } = props
const { children, headerSlot, slotTop, slotRight, meta, siteInfo } = props
const { onLoading } = useGlobal()
// 加载主题样式
@@ -49,10 +50,10 @@ const LayoutBase = props => {
}
return (
<div id='theme-heo' className='bg-[#f7f9fe]'>
<div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col'>
{/* 网页SEO */}
<CommonHead meta={meta} siteInfo={siteInfo} />
<Style/>
<Style />
{/* 顶部导航 */}
<Header {...props} />
@@ -73,30 +74,41 @@ const LayoutBase = props => {
</Transition>
{/* 主区块 */}
<main id="wrapper-outer" className={'w-full max-w-[88rem] mx-auto min-h-screen relative p-5'}>
<div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
<div className={`${className || ''} w-full h-full`}>
<main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative p-5'}>
<div id="container-inner" className={' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{/* 主区上部嵌入 */}
{slotTop}
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{/* 主区上部嵌入 */}
{slotTop}
{children}
</Transition>
</div>
{children}
</Transition>
{/* 右侧栏 */}
<SideRight {...props} />
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{/* 主区快右侧 */}
{slotRight}
</Transition>
</div>
</main>
@@ -113,7 +125,7 @@ const LayoutBase = props => {
* @returns
*/
const LayoutIndex = (props) => {
return <LayoutPostList {...props}/>
return <LayoutPostList {...props} />
}
/**
@@ -122,9 +134,24 @@ const LayoutIndex = (props) => {
* @returns
*/
const LayoutPostList = (props) => {
return <LayoutBase {...props} headerSlot={<Hero {...props} />}>
// 博客列表上方嵌入一个 通知横幅和英雄块
const headerSlot = <>
{/* 通知横幅 */}
<NoticeBar />
<Hero {...props} />
</>
// 右侧栏
const slotRight = <SideRight {...props} />
return <LayoutBase {...props} headerSlot={headerSlot} slotRight={slotRight}>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
{BLOG.POST_LIST_STYLE === 'page'
? <BlogPostListPage {...props} />
: <BlogPostListScroll {...props} />}
</LayoutBase>
}
@@ -295,22 +322,24 @@ const LayoutCategoryIndex = props => {
const { locale } = useGlobal()
return (
<LayoutBase {...props} className='mt-8'>
<Card className="w-full min-h-screen">
<div className="dark:text-gray-200 mb-5 mx-3">
<i className="mr-4 fas fa-th" /> {locale.COMMON.CATEGORY}:
</div>
<div id="category-list" className="duration-200 flex flex-wrap mx-8">
{categoryOptions.map(category => {
return (
<Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
<div className={' duration-300 dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400'}>
<i className="mr-4 fas fa-folder" /> {category.name}({category.count})
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.CATEGORY}
</div>
<div id="category-list" className="duration-200 flex flex-wrap space-x-5 m-10 justify-center">
{categoryOptions.map(category => {
return (
<Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
<div className={'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
<HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
{category.name}
<div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
{category.count}
</div>
</Link>
)
})}
</div>
</Card>
</div>
</Link>
)
})}
</div>
</LayoutBase>
)
}
@@ -325,16 +354,24 @@ const LayoutTagIndex = props => {
const { locale } = useGlobal()
return (
<LayoutBase {...props} className='mt-8'>
<Card className='w-full'>
<div className="dark:text-gray-200 mb-5 ml-4">
<i className="mr-4 fas fa-tag" /> {locale.COMMON.TAGS}:
</div>
<div id="tags-list" className="duration-200 flex flex-wrap ml-8">
{tagOptions.map(tag => <div key={tag.name} className="p-2">
<TagItemMini key={tag.name} tag={tag} />
</div>)}
</div>
</Card>
<div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
{locale.COMMON.TAGS}
</div>
<div id="tag-list" className="duration-200 flex flex-wrap space-x-5 m-10 justify-center">
{tagOptions.map(tag => {
return (
<Link key={tag.name} href={`/tag/${tag.name}`} passHref legacyBehavior>
<div className={'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
<HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
{tag.name}
<div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
{tag.count}
</div>
</div>
</Link>
)
})}
</div>
</LayoutBase>
)
}

5
themes/heo/style.js
View File

@@ -27,6 +27,11 @@ const Style = () => {
height: 8px;
}
.today-card-cover {
-webkit-mask-image: linear-gradient(to top, transparent 5%, black 70%);
mask-image: linear-gradient(to top, transparent 5%, black 70%);
}
`}</style>
}