Skip to main content

底部分页导航

在src\css\custom.css中添加以下代码:

a:hover {
color: #72a1ed;
}

/* 分页导航 */
.pagination-nav__link {
border: 1px solid #00000000;
padding: 0.5rem;
margin: 0 0.5rem;
transition: all 0.3s ease-in-out;
}

.pagination-nav__link:hover {
border: 1px solid #72a1ed;
transform: scaleX(0.9); /* 缩小宽度到 90% */
}

.pagination-nav__label:hover {
transform: scale(1.1); /* 将元素缩小到原始大小的 80% */
transition: transform 0.3s ease; /* 平滑过渡效果 */
display: inline-block; /* 确保元素在缩放时不会破坏布局 */
}

.pagination-nav {
border: solid #d8d8d8;
border-width: 2px 0 0;
margin: 2em 0;
padding-top: 0.5rem;
}

.pagination-nav__sublabel {
/* 上一页下一页文字颜色 */
color: #72a1ed;
}

上一页和下一个hover背景颜色

  • src\theme\PaginatorNavLink\index.tsx
export default function PaginatorNavLink(props: Props): JSX.Element {
const { permalink, title, subLabel, isNext } = props
return (
<Link
className={cn(
// 上一页和下一个hover背景颜色
'pagination-nav__link border-2 border-link hover:bg-[#00000000]',
isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
)}
to={permalink}
>
{subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
<div className="pagination-nav__label">{title}</div>
</Link>
)
}