搭建个人知识付费应用系统-(5)Header、Footer|搭建个人知识付费应用系统-(5)Header、Footer 样式组件
视频地址： https://www.bilibili.com/vide...
基础样式
如鼠标指针、背景图片等。
鼠标指针
* {
cursor: url('/default.cur'), default;
}a,
a *,
button,
button *,
.btn,
.btn *,
.prose .post-image {
cursor: url('/pointer.cur'), pointer;
}背景图片切换
@layer components {
#background {
@apply fixed inset-0 saturate-150 z-[-1];
background: url('/images/bg.jpg') no-repeat center center fixed;
background-size: cover;
transition: all 0.25s ease-in-out;
transform-style: preserve-3d;
}
#background.dark {
@apply brightness-50 saturate-100;
transform: rotate(-3deg) scale(1.2);
/* scaleX(-1);
*/
}
}Header Link 封装
locale-link:
import {
Link,
type LinkProps,
NavLink,
type NavLinkProps
} from '@remix-run/react';
import { useI18n } from 'remix-i18n';
export function LocaleLink({
to,
children,
...props
}: LinkProps & { to: string }) {
const i18n = useI18n();
const path = `/${i18n.locale()}${to}`;
return (
{children}
);
}export function LocaleNavLink({
to,
children,
...props
}: NavLinkProps & { to: string }) {
const i18n = useI18n();
const path = `/${i18n.locale()}${to}`;
return (
{children}
);
}router-link：
import { type NavLinkProps } from '@remix-run/react';
import clsx from 'classnames';
import { LocaleNavLink } from './locale-link';
export function RouteLink({
children,
to
}: Pick) {
return LocaleNavLink({
to,
className: ({ isActive }) =>
clsx(isActive ? 'glass' : 'btn-ghost', 'btn btn-sm rounded-btn'),
children
});
} 【搭建个人知识付费应用系统-(5)Header、Footer|搭建个人知识付费应用系统-(5)Header、Footer 样式组件】header 组件：
import { useI18n } from 'remix-i18n';
import { LocaleLink } from './atom/locale-link';
import { RouteLink } from './atom/router-link';
import { ToggleLocale } from './atom/toggle-locale';
import { ToggleTheme } from './atom/toggle-theme';
export function Header() {
const i18n = useI18n();
const { t } = i18n;
return (
Willin Wang
{t('nav.home')}
{t('nav.posts')}
{t('nav.projects')}
{t('nav.playground')}
{t('nav.about')} Footer
// import { useMatches } from '@remix-run/react';
// import clsx from 'classnames';
import { useI18n } from 'remix-i18n';
import { LocaleLink } from './atom/locale-link';
import { Github, CSDN, Juejin, SegmentFault, WillinLogo, Zhihu } from './svg';
export function Footer() {
const { t } = useI18n();
// const matches = useMatches();
return (
);
}推荐阅读
- 关于Mac上部署Jenkins的一些个人习惯
- 区块链和比特币的知识科普
- 日课|日课 20171107
- 详介 MQTT 服务器的搭建与客户端连接
- 搭建个人知识付费应用系统-(2)用户|搭建个人知识付费应用系统-(2)用户 Session 管理
- 机器学习基础知识|机器学习之多元线性回归
- 从零搭建 Spring MVC 项目 —— HelloWorld
- 一个人的兵荒马乱
- 从前从前，有个人爱你很久
- 搭建个人知识付费应用系统-(1)框架初始化、用户身份集成