mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
Add dark mode
* add dark mode switch button * modify footer * fix nav menu opening issue * add paging number * remove post card a link focus shadow * add _document * remove archive card border on last child * add post image zoom margin on desktop * add post index image * remove TOC scroll bar on firefox
This commit is contained in:
DefectingCat
@ -1,6 +1,10 @@
|
||||
{
|
||||
"extends": ["next", "prettier"],
|
||||
"rules": {
|
||||
"react-hooks/rules-of-hooks": "off"
|
||||
"react-hooks/rules-of-hooks": "off",
|
||||
"no-unused-vars": [
|
||||
"warn",
|
||||
{ "vars": "all", "args": "after-used", "ignoreRestSiblings": false }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
38
Chakra.tsx
Normal file
38
Chakra.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import {
|
||||
ChakraProvider,
|
||||
cookieStorageManager,
|
||||
localStorageManager,
|
||||
} from '@chakra-ui/react';
|
||||
import { GetServerSidePropsContext } from 'next';
|
||||
import { ReactNode } from 'react';
|
||||
import theme from './lib/theme';
|
||||
|
||||
interface ChakraProps {
|
||||
cookies?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const Chakra = ({ children, cookies }: ChakraProps) => {
|
||||
return (
|
||||
<ChakraProvider
|
||||
colorModeManager={
|
||||
cookies ? cookieStorageManager(cookies) : localStorageManager
|
||||
}
|
||||
theme={theme}
|
||||
>
|
||||
{children}
|
||||
</ChakraProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export type ServerSideProps<T> = { props: T } | Promise<{ props: T }>;
|
||||
|
||||
export function getServerSideProps({
|
||||
req,
|
||||
}: GetServerSidePropsContext): ServerSideProps<{ cookies?: string }> {
|
||||
return {
|
||||
props: {
|
||||
cookies: req.headers.cookie ?? '',
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,23 +1,24 @@
|
||||
:root {
|
||||
--blcqd-bg-color: #f8f8f8;
|
||||
--text-color: var(--chakra-colors-gray-600);
|
||||
--heading-color: #464b1f;
|
||||
--block-bg: linear-gradient(#fbebef, #dff0f5);
|
||||
--block-bg-color: #f8f8f8;
|
||||
--code-bg: var(--chakra-colors-gray-100);
|
||||
--code-border-color: #e7eaed;
|
||||
|
||||
--shadow-color: #c3c5c7;
|
||||
--checkbox-color: #f8a9b5;
|
||||
--checked-font-color: #eee;
|
||||
--bg-color: #ffffff; /*改变背景色*/
|
||||
--text-color: #333333; /*改变文字颜色*/
|
||||
--md-char-color: #c7c5c5; /*改变元字符的颜色，例如 markdown 中的“*”*/
|
||||
--meta-content-color: #c7c5c5; /*改变元内容的颜色，例如 markdown 中的图像文本和链接地址*/
|
||||
|
||||
--primary-color: #428bca; /*主按钮的颜色*/
|
||||
--primary-btn-border-color: #285e8e;
|
||||
--primary-btn-text-color: #fff;
|
||||
|
||||
--window-border: 1px solid #eee; /*边栏等的边框*/
|
||||
|
||||
--active-file-bg-color: #eee; /*文件树或文件列表中当前项的背景色*/
|
||||
--active-file-text-color: inherit;
|
||||
--active-file-border-color: #777;
|
||||
|
||||
--side-bar-bg-color: var(--bg-color); /*改变边栏颜色*/
|
||||
--item-hover-bg-color: rgba(
|
||||
229,
|
||||
@ -29,6 +30,16 @@
|
||||
--monospace: monospace; /*代码的等宽字体*/
|
||||
}
|
||||
|
||||
/* With Chakra dark mode */
|
||||
body.chakra-ui-dark {
|
||||
--text-color: var(--chakra-colors-whiteAlpha-800);
|
||||
--heading-color: var(--chakra-colors-whiteAlpha-800);
|
||||
--block-bg: linear-gradient(#c395a1, #8e9fa3);
|
||||
--block-bg-color: #888888;
|
||||
--code-bg: var(--chakra-colors-gray-500);
|
||||
--code-border-color: #919191;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: unset;
|
||||
background: rgba(33, 150, 243, 0.2);
|
||||
@ -46,7 +57,6 @@
|
||||
src: url('ava-diana/Quicksand/Quicksand-Bold.ttf');
|
||||
} */
|
||||
|
||||
html， body,
|
||||
#write {
|
||||
/* font-family: "Quicksand",'Arial Hebrew Scholar'; */
|
||||
font-size: 16px;
|
||||
@ -68,7 +78,7 @@ html， body,
|
||||
margin: 16px;
|
||||
max-height: 40rem;
|
||||
overflow: auto;
|
||||
scrollbar-width: 0;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
#table-of-contents + ul li {
|
||||
list-style-type: none;
|
||||
@ -137,7 +147,7 @@ html， body,
|
||||
text-transform: uppercase;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
color: #464b1f;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
#write h2 {
|
||||
@ -147,7 +157,7 @@ html， body,
|
||||
line-height: 2rem;
|
||||
margin: 1.5rem 0;
|
||||
/*text-transform: uppercase;*/
|
||||
color: #464b1f;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
#write h3 {
|
||||
@ -157,7 +167,7 @@ html， body,
|
||||
line-height: 3rem;
|
||||
/*text-transform: uppercase;*/
|
||||
/* margin-left: 1rem; */
|
||||
color: #464b1f;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
#write h4 {
|
||||
@ -168,13 +178,13 @@ html， body,
|
||||
/*text-transform: uppercase;*/
|
||||
margin-top: 1rem;
|
||||
/* margin-left: 3rem; */
|
||||
color: #464b1f;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
#write h5 {
|
||||
font-size: 1.15rem;
|
||||
/*text-transform: uppercase;*/
|
||||
color: #464b1f;
|
||||
color: var(--heading-color);
|
||||
/* margin-left: 3.5rem; */
|
||||
}
|
||||
|
||||
@ -182,7 +192,7 @@ html， body,
|
||||
font-size: 1rem;
|
||||
/*text-transform: uppercase;*/
|
||||
/* margin-left: 4rem; */
|
||||
color: #464b1f;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
#write p {
|
||||
@ -199,7 +209,7 @@ html， body,
|
||||
width: calc(0.1rem + 2.43px);
|
||||
height: 100%;
|
||||
transform: translateX(calc(-0.05rem - 1.215px));
|
||||
background-image: linear-gradient(#fbebef, #dff0f5);
|
||||
background-image: var(--block-bg);
|
||||
border-radius: calc(0.5rem + 0.25%) 0 0 calc(0.5rem + 0.25%);
|
||||
z-index: 1;
|
||||
}
|
||||
@ -217,7 +227,7 @@ html， body,
|
||||
padding: 1rem calc(0.5rem + 5.13px);
|
||||
/*border-left: solid .5rem var(--select-text-bg-color);*/
|
||||
/*border-radius: .5rem 1rem 1rem .5rem;*/
|
||||
background-color: var(--blcqd-bg-color);
|
||||
background-color: var(--block-bg-color);
|
||||
line-height: 1.6;
|
||||
/*box-shadow: 3px 3px 3px 1px var(--shadow-color);*/
|
||||
border-radius: 0 calc(0.5rem + 0.25%) calc(0.5rem + 0.25%) 0;
|
||||
@ -529,24 +539,17 @@ div.cm-s-inner span.CodeMirror-matchingbracket {
|
||||
|
||||
#write pre code {
|
||||
padding: 6px 10px;
|
||||
background-color: var(--chakra-colors-gray-100);
|
||||
background-color: var(--code-bg);
|
||||
}
|
||||
|
||||
.md-fences,
|
||||
#write code,
|
||||
#write tt {
|
||||
border: 1px solid #e7eaed;
|
||||
border: 1px solid var(--code-border-color);
|
||||
border-radius: 6px;
|
||||
padding: 0 4px;
|
||||
font-size: 0.9em;
|
||||
background-color: var(--chakra-colors-gray-200);
|
||||
}
|
||||
|
||||
.md-fences {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 6px;
|
||||
background-color: var(--code-bg);
|
||||
}
|
||||
|
||||
/*mathjax-block*/
|
||||
|
||||
@ -5,6 +5,7 @@ import Date from './DateFormater';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { setFromPath } from '../features/router/routerSlice';
|
||||
import { useRouter } from 'next/router';
|
||||
import useGetColors from '../lib/hooks/useGetColors';
|
||||
|
||||
interface Props {
|
||||
post: AllPostsData;
|
||||
@ -14,6 +15,8 @@ const ArchiveCard: FC<Props> = ({ post }) => {
|
||||
const dispatch = useDispatch();
|
||||
const router = useRouter();
|
||||
|
||||
const { borderColor, headingColor } = useGetColors();
|
||||
|
||||
const goToPost: MouseEventHandler<HTMLAnchorElement> = (e) => {
|
||||
e.preventDefault();
|
||||
dispatch(setFromPath(location.pathname));
|
||||
@ -22,18 +25,25 @@ const ArchiveCard: FC<Props> = ({ post }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box as="article" w={['full', 'full', '55rem']}>
|
||||
<Link href={`/posts/${post.url}`} onClick={goToPost}>
|
||||
<Box
|
||||
as="article"
|
||||
w={['full', 'full', '55rem']}
|
||||
borderBottom="1px"
|
||||
borderColor={borderColor}
|
||||
>
|
||||
<Link
|
||||
href={`/posts/${post.url}`}
|
||||
onClick={goToPost}
|
||||
_focus={{ boxShadow: 'unset' }}
|
||||
>
|
||||
<Flex
|
||||
p="1.25rem"
|
||||
key={post.url}
|
||||
cursor="pointer"
|
||||
borderBottom="1px"
|
||||
borderColor="gray.300"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Box>
|
||||
<Heading mb="0.6rem" fontSize="lg">
|
||||
<Heading mb="0.6rem" fontSize="lg" color={headingColor}>
|
||||
{post.title}
|
||||
</Heading>
|
||||
<Date dateString={post.date} />
|
||||
|
||||
@ -10,7 +10,7 @@ const Footer: FC = () => {
|
||||
©{new Date().getFullYear()} 小肥羊
|
||||
</Text>
|
||||
<Text color={'gray.400'} fontSize="small">
|
||||
Powered by Next.js ❤️
|
||||
Powered by Next.js ❤️ Chakra UI
|
||||
</Text>
|
||||
</Flex>
|
||||
</>
|
||||
|
||||
@ -9,11 +9,14 @@ import {
|
||||
useDisclosure,
|
||||
Collapse,
|
||||
useMediaQuery,
|
||||
useColorMode,
|
||||
Button,
|
||||
} from '@chakra-ui/react';
|
||||
import UseAnimations from 'react-useanimations';
|
||||
import menu2 from 'react-useanimations/lib/menu2';
|
||||
import { FiHome, FiArchive, FiUser } from 'react-icons/fi';
|
||||
import { FiHome, FiArchive, FiUser, FiSun, FiMoon } from 'react-icons/fi';
|
||||
import Link from 'next/link';
|
||||
import useGetColors from '../lib/hooks/useGetColors';
|
||||
|
||||
const menu = [
|
||||
{
|
||||
@ -38,17 +41,21 @@ const menu = [
|
||||
|
||||
const NavBar: FC = () => {
|
||||
const [isLargerThan768] = useMediaQuery('(min-width: 768px)');
|
||||
const { isOpen, onToggle } = useDisclosure();
|
||||
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
|
||||
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
|
||||
const { boxBg, bioColor, textColor, headingColor } = useGetColors();
|
||||
|
||||
useEffect(() => {
|
||||
isLargerThan768 ? onToggle() : void 0;
|
||||
if (!isOpen && isLargerThan768) onToggle();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isLargerThan768]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
color={'gray.700'}
|
||||
color={textColor}
|
||||
w={[null, null, '120px']}
|
||||
p={['3rem 1rem 1rem 1rem', null, 'unset']}
|
||||
position={'relative'}
|
||||
@ -72,7 +79,7 @@ const NavBar: FC = () => {
|
||||
bottom={0}
|
||||
right={0}
|
||||
rounded={'full'}
|
||||
bg="white"
|
||||
bg={boxBg}
|
||||
h="40px"
|
||||
w="40px"
|
||||
justify="center"
|
||||
@ -82,21 +89,36 @@ const NavBar: FC = () => {
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Heading size={'lg'} mt="0.8rem" mb="0.5rem">
|
||||
肥羊
|
||||
</Heading>
|
||||
<Text color={'gray.400'}>This is bio.</Text>
|
||||
<Flex
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
mt="0.8rem"
|
||||
mb="0.5rem"
|
||||
>
|
||||
<Heading color={headingColor} size={'lg'}>
|
||||
肥羊
|
||||
</Heading>
|
||||
<Button
|
||||
background="transparent"
|
||||
fontSize={['18', null, '22']}
|
||||
onClick={toggleColorMode}
|
||||
>
|
||||
{colorMode === 'light' ? <Icon as={FiSun} /> : <Icon as={FiMoon} />}
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<Text color={bioColor}>一条咸鱼.</Text>
|
||||
|
||||
{/* Menu */}
|
||||
<Box mx={['-2rem', '-4rem', 'unset']}>
|
||||
<Collapse in={isOpen} animateOpacity>
|
||||
<Flex
|
||||
as="nav"
|
||||
mt={['1.5rem', null, '2.5rem']}
|
||||
mt={['1.5rem', null]}
|
||||
flexFlow={['column']}
|
||||
py={['1rem', null, 'unset']}
|
||||
px={['2rem', '4rem', 'unset']}
|
||||
bg={['white', null, 'unset']}
|
||||
bg={[boxBg, null, 'unset']}
|
||||
shadow={['card', null, 'unset']}
|
||||
>
|
||||
{menu.map((item) => {
|
||||
@ -107,7 +129,6 @@ const NavBar: FC = () => {
|
||||
alignItems="center"
|
||||
justifyContent={['unset', null, 'space-between']}
|
||||
fontSize={['18', null, '22']}
|
||||
color="gray.600"
|
||||
my={['0.5rem', null, '0.5rem']}
|
||||
cursor="pointer"
|
||||
>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { FC } from 'react';
|
||||
import { Button, Flex } from '@chakra-ui/react';
|
||||
import { Button, Flex, Text } from '@chakra-ui/react';
|
||||
import useGetColors from '../lib/hooks/useGetColors';
|
||||
|
||||
interface Props {
|
||||
allPages: number;
|
||||
@ -11,6 +12,8 @@ const paging: FC<Props> = ({ allPages, num }) => {
|
||||
const router = useRouter();
|
||||
const startIndex = Number(num);
|
||||
|
||||
const { textColor } = useGetColors();
|
||||
|
||||
const goPrev = () => {
|
||||
startIndex == 2 ? router.push('/') : router.push(`/page/${startIndex - 1}`);
|
||||
};
|
||||
@ -20,7 +23,7 @@ const paging: FC<Props> = ({ allPages, num }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex>
|
||||
<Flex alignItems="center">
|
||||
{startIndex > 1 ? (
|
||||
<Button onClick={goPrev} mr={'auto'} size="lg">
|
||||
上一页
|
||||
@ -29,6 +32,10 @@ const paging: FC<Props> = ({ allPages, num }) => {
|
||||
void 0
|
||||
)}
|
||||
|
||||
<Text fontSize="xl" fontWeight="bold" color={textColor}>
|
||||
{num} / {allPages}
|
||||
</Text>
|
||||
|
||||
{startIndex != allPages ? (
|
||||
<Button onClick={goNext} ml={'auto'} size="lg">
|
||||
下一页
|
||||
|
||||
@ -7,6 +7,7 @@ import { FiCalendar, FiTag } from 'react-icons/fi';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { setFromPath } from '../features/router/routerSlice';
|
||||
import { useRouter } from 'next/router';
|
||||
import useGetColors from '../lib/hooks/useGetColors';
|
||||
|
||||
interface Props {
|
||||
post: AllPostsData;
|
||||
@ -22,18 +23,24 @@ const PostCard: FC<Props> = ({ post }) => {
|
||||
router.push(`/posts/${post.url}`);
|
||||
};
|
||||
|
||||
const { boxBg, textColor, headingColor } = useGetColors();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
as="article"
|
||||
maxW={['full', 'full', '55rem']}
|
||||
borderRadius="10px"
|
||||
bg="white"
|
||||
bg={boxBg}
|
||||
overflow="hidden"
|
||||
boxShadow="card"
|
||||
mb="2.5rem"
|
||||
>
|
||||
<Link href={`/posts/${post.url}`} onClick={goToPost}>
|
||||
<Link
|
||||
href={`/posts/${post.url}`}
|
||||
onClick={goToPost}
|
||||
_focus={{ boxShadow: 'unset' }}
|
||||
>
|
||||
<Image
|
||||
src={post.index_img}
|
||||
maxH="18rem"
|
||||
@ -46,14 +53,18 @@ const PostCard: FC<Props> = ({ post }) => {
|
||||
|
||||
<Box p="1.75rem" key={post.url}>
|
||||
{/* Title */}
|
||||
<Link href={`/posts/${post.url}`} onClick={goToPost}>
|
||||
<Heading mb="0.6rem" fontSize="22">
|
||||
<Link
|
||||
href={`/posts/${post.url}`}
|
||||
onClick={goToPost}
|
||||
_focus={{ boxShadow: 'unset' }}
|
||||
>
|
||||
<Heading color={headingColor} mb="0.6rem" fontSize="22">
|
||||
{post.title}
|
||||
</Heading>
|
||||
</Link>
|
||||
|
||||
{/* Description */}
|
||||
<Text mb="0.6rem" color="gray.600">
|
||||
<Text mb="0.6rem" color={textColor}>
|
||||
{post.desc}
|
||||
</Text>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { Button, useClipboard } from '@chakra-ui/react';
|
||||
import { Button, useClipboard, useColorModeValue } from '@chakra-ui/react';
|
||||
import { FC, MouseEventHandler, useEffect, useState } from 'react';
|
||||
|
||||
const CopyButton: FC = ({ children }) => {
|
||||
const copyButtonTheme = useColorModeValue('teal', 'pink');
|
||||
|
||||
// Copy code
|
||||
const [codeContent, setCodeContent] = useState('');
|
||||
const { hasCopied, onCopy } = useClipboard(codeContent);
|
||||
@ -22,7 +24,7 @@ const CopyButton: FC = ({ children }) => {
|
||||
<pre>
|
||||
<Button
|
||||
size="xs"
|
||||
colorScheme="teal"
|
||||
colorScheme={copyButtonTheme}
|
||||
position="absolute"
|
||||
top="5px"
|
||||
right="5px"
|
||||
|
||||
@ -5,10 +5,13 @@ import Footer from '../components/Footer';
|
||||
import { BackTop } from 'antd';
|
||||
import UseAnimations from 'react-useanimations';
|
||||
import arrowUp from 'react-useanimations/lib/arrowUp';
|
||||
import useGetColors from '../lib/hooks/useGetColors';
|
||||
|
||||
const HomeLayout: FC = ({ children }) => {
|
||||
const wrapperRef = useRef(null);
|
||||
|
||||
const { boxBg } = useGetColors();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
@ -42,7 +45,7 @@ const HomeLayout: FC = ({ children }) => {
|
||||
target={() => (wrapperRef.current ? wrapperRef.current : document.body)}
|
||||
>
|
||||
<Flex
|
||||
bg="white"
|
||||
bg={boxBg}
|
||||
w="40px"
|
||||
h="40px"
|
||||
justify="center"
|
||||
|
||||
35
lib/hooks/useGetColors.ts
Normal file
35
lib/hooks/useGetColors.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { useColorModeValue } from '@chakra-ui/react';
|
||||
|
||||
interface UseGetColors {
|
||||
boxBg: string;
|
||||
textColor: string;
|
||||
bioColor: string;
|
||||
headingColor: string;
|
||||
giscusColor: 'light' | 'dark';
|
||||
borderColor: string;
|
||||
}
|
||||
|
||||
const useGetColors = (): UseGetColors => {
|
||||
const boxBg = useColorModeValue('white', 'gray.700');
|
||||
const textColor = useColorModeValue('gray.600', 'whiteAlpha.900');
|
||||
const bioColor = useColorModeValue('gray.400', 'whiteAlpha.600');
|
||||
const headingColor = useColorModeValue(
|
||||
'rgba(0, 0, 0, 0.85)',
|
||||
'whiteAlpha.800'
|
||||
);
|
||||
const borderColor = useColorModeValue('gray.500', 'whiteAlpha.300');
|
||||
|
||||
// comment
|
||||
const giscusColor = useColorModeValue('light', 'dark');
|
||||
|
||||
return {
|
||||
boxBg,
|
||||
textColor,
|
||||
bioColor,
|
||||
headingColor,
|
||||
giscusColor,
|
||||
borderColor,
|
||||
};
|
||||
};
|
||||
|
||||
export default useGetColors;
|
||||
42
lib/theme.ts
Normal file
42
lib/theme.ts
Normal file
@ -0,0 +1,42 @@
|
||||
// 1. import `extendTheme` function
|
||||
import { extendTheme } from '@chakra-ui/react';
|
||||
|
||||
// 2. Add your color mode config
|
||||
|
||||
// 3. extend the theme
|
||||
const theme = extendTheme({
|
||||
initialColorMode: 'system',
|
||||
useSystemColorMode: false,
|
||||
colors: {
|
||||
home: {
|
||||
bg: '#f5f5fa',
|
||||
},
|
||||
},
|
||||
shadows: {
|
||||
card: '0px 4px 8px rgba(0, 0, 0, 0.04),0px 0px 2px rgba(0, 0, 0, 0.06),0px 0px 1px rgba(0, 0, 0, 0.04)',
|
||||
},
|
||||
fonts: {
|
||||
body: "-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif",
|
||||
},
|
||||
styles: {
|
||||
global: (props: any) => ({
|
||||
'html, body': {
|
||||
bg: props.colorMode === 'dark' ? 'gray.800' : 'home.bg',
|
||||
},
|
||||
'img, #write iframe': {
|
||||
filter:
|
||||
props.colorMode === 'dark'
|
||||
? 'saturate(105%) contrast(110%) brightness(75%)'
|
||||
: 'unset',
|
||||
transitionProperty: 'filter',
|
||||
transitionDuration: 'var(--chakra-transition-duration-normal)',
|
||||
},
|
||||
div: {
|
||||
transitionProperty: 'background-color',
|
||||
transitionDuration: 'var(--chakra-transition-duration-normal)',
|
||||
},
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
@ -2,28 +2,16 @@ import '../styles/globals.css';
|
||||
import type { ReactElement, ReactNode } from 'react';
|
||||
import type { NextPage } from 'next';
|
||||
import type { AppProps } from 'next/app';
|
||||
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { store } from '../app/store';
|
||||
import 'antd/dist/antd.css';
|
||||
import '../assets/css/rua.css';
|
||||
import Head from 'next/head';
|
||||
|
||||
const theme = extendTheme({
|
||||
colors: {
|
||||
home: {
|
||||
bg: '#f5f5fa',
|
||||
},
|
||||
},
|
||||
shadows: {
|
||||
card: '0px 4px 8px rgba(0, 0, 0, 0.04),0px 0px 2px rgba(0, 0, 0, 0.06),0px 0px 1px rgba(0, 0, 0, 0.04)',
|
||||
},
|
||||
fonts: {
|
||||
body: "-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif",
|
||||
},
|
||||
});
|
||||
import { Chakra } from '../Chakra';
|
||||
|
||||
type NextPageWithLayout = NextPage & {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
getLayout?: (page: ReactElement) => ReactNode;
|
||||
};
|
||||
|
||||
@ -42,11 +30,13 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
|
||||
</Head>
|
||||
|
||||
<Provider store={store}>
|
||||
<ChakraProvider theme={theme}>
|
||||
<Chakra cookies={pageProps.cookies}>
|
||||
{getLayout(<Component {...pageProps} />)}
|
||||
</ChakraProvider>
|
||||
</Chakra>
|
||||
</Provider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default MyApp;
|
||||
|
||||
export { getServerSideProps } from '../Chakra';
|
||||
|
||||
19
pages/_document.tsx
Normal file
19
pages/_document.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { ColorModeScript } from '@chakra-ui/react';
|
||||
import NextDocument, { Html, Head, Main, NextScript } from 'next/document';
|
||||
import theme from '../lib/theme';
|
||||
|
||||
export default class Document extends NextDocument {
|
||||
render() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body>
|
||||
{/* 👇 Here's the script */}
|
||||
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -2,8 +2,11 @@ import { Box } from '@chakra-ui/react';
|
||||
import Head from 'next/head';
|
||||
import { ReactElement } from 'react';
|
||||
import HomeLayout from '../layouts/HomeLayout';
|
||||
import useGetColors from '../lib/hooks/useGetColors';
|
||||
|
||||
const about = () => {
|
||||
const { boxBg } = useGetColors();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@ -14,8 +17,8 @@ const about = () => {
|
||||
w={['full', 'full', '55rem']}
|
||||
borderRadius="10px"
|
||||
shadow="lg"
|
||||
bg="white"
|
||||
overflow="hidden"
|
||||
bg={boxBg}
|
||||
p={['1rem', '1rem', '1.5rem']}
|
||||
>
|
||||
施工中...
|
||||
|
||||
3
pages/archive.module.css
Normal file
3
pages/archive.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.archive-wrapper article:last-child {
|
||||
border: unset;
|
||||
}
|
||||
@ -5,6 +5,8 @@ import { ReactElement } from 'react';
|
||||
import HomeLayout from '../layouts/HomeLayout';
|
||||
import { getArchiveData, getSortedPostsData } from '../lib/posts';
|
||||
import ArchiveCard from '../components/ArchiveCard';
|
||||
import useGetColors from '../lib/hooks/useGetColors';
|
||||
import style from './archive.module.css';
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const allPostsData = await getSortedPostsData();
|
||||
@ -20,6 +22,8 @@ const archive = ({
|
||||
archiveData,
|
||||
archiveKeys,
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
const { boxBg } = useGetColors();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@ -34,10 +38,11 @@ const archive = ({
|
||||
</Text>
|
||||
<Box
|
||||
borderRadius="10px"
|
||||
bg="white"
|
||||
bg={boxBg}
|
||||
overflow="hidden"
|
||||
boxShadow="card"
|
||||
mt="0.5rem"
|
||||
className={style['archive-wrapper']}
|
||||
>
|
||||
{archiveData[year].map((post) => (
|
||||
<ArchiveCard post={post} key={post.id} />
|
||||
|
||||
@ -20,8 +20,10 @@ import {
|
||||
Link,
|
||||
Button,
|
||||
Tag,
|
||||
useMediaQuery,
|
||||
} from '@chakra-ui/react';
|
||||
import 'highlight.js/styles/github.css';
|
||||
// import 'highlight.js/styles/github-dark.css';
|
||||
import xml from 'highlight.js/lib/languages/xml';
|
||||
import bash from 'highlight.js/lib/languages/bash';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
@ -35,6 +37,7 @@ import { RootState } from '../../app/store';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { cleanFromPath } from '../../features/router/routerSlice';
|
||||
import CopyButton from '../../components/post/CopyButton';
|
||||
import useGetColors from '../../lib/hooks/useGetColors';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const paths = await getAllPostSlugs();
|
||||
@ -63,6 +66,10 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
router.push(fromPath || '/');
|
||||
};
|
||||
|
||||
const { boxBg, headingColor, giscusColor } = useGetColors();
|
||||
|
||||
const [isLargerThan768] = useMediaQuery('(min-width: 768px)');
|
||||
|
||||
const processedContent = unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkToc, {
|
||||
@ -82,7 +89,7 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
components: {
|
||||
img: (props: any) => {
|
||||
return (
|
||||
<Zoom wrapElement="a">
|
||||
<Zoom wrapElement="a" zoomMargin={isLargerThan768 ? 300 : 0}>
|
||||
<Image borderRadius="10px" src={props.src} alt="" />
|
||||
</Zoom>
|
||||
);
|
||||
@ -150,7 +157,7 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
borderRadius="10px"
|
||||
mt={['1rem', '1rem', '3rem']}
|
||||
shadow="lg"
|
||||
bg="white"
|
||||
bg={boxBg}
|
||||
overflow="hidden"
|
||||
flex="1"
|
||||
>
|
||||
@ -168,7 +175,7 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
{/* Post heading */}
|
||||
<Box as="article" p={['1rem', '1rem', '2rem']}>
|
||||
<Box as="header">
|
||||
<Heading as="h1" mb="1rem">
|
||||
<Heading as="h1" mb="1rem" color={headingColor}>
|
||||
{postData.title}
|
||||
</Heading>
|
||||
|
||||
@ -209,7 +216,7 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
mapping="title"
|
||||
reactionsEnabled="1"
|
||||
emitMetadata="0"
|
||||
theme="preferred_color_scheme"
|
||||
theme={giscusColor}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
116
public/images/为React造一个迷你路由器/react-router.svg
Normal file
116
public/images/为React造一个迷你路由器/react-router.svg
Normal file
@ -0,0 +1,116 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #222;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #61dafb;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #404040;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #60d8f8;
|
||||
}
|
||||
|
||||
.cls-5 {
|
||||
fill: #60d8f9;
|
||||
}
|
||||
|
||||
.cls-6 {
|
||||
fill: #5ed4f4;
|
||||
}
|
||||
|
||||
.cls-7 {
|
||||
fill: #5fd5f5;
|
||||
}
|
||||
|
||||
.cls-8 {
|
||||
fill: #232424;
|
||||
}
|
||||
|
||||
.cls-9 {
|
||||
fill: #232323;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1"
|
||||
d="M959.42,854.91q-297.4,0-594.81.09c-3.73,0-4.61-.8-4.61-4.58q.17-310.36,0-620.72c0-3.57.52-4.7,4.49-4.7q595.56.17,1191.13,0c3.57,0,4.36.7,4.35,4.33q-.17,310.62,0,621.22c0,4.09-1.29,4.43-4.77,4.42Q1257.33,854.86,959.42,854.91Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-2"
|
||||
d="M1069.77,482.17c0,18.23-12.62,31.66-33.15,34.91-5.74.91-11.6,1-17.38,1.72-13.09,1.59-19.28,7.33-21.75,20.24-1.84,9.63-3,19.39-8.29,28.06-7.75,12.62-21.76,19.36-35.67,16.73a34.05,34.05,0,0,1-27.7-28.54c-2.2-14.23,5.08-28.21,18.3-35.31,7.21-3.88,15-5.28,23-5.86a90.07,90.07,0,0,0,15.34-2c8.16-2,13.22-7,15.24-15.35a58,58,0,0,0-.86-29.55c-2.58-9.41-8.8-14.65-18.24-16.16-10-1.6-20.19-1.14-30-4.77-14.52-5.39-24-18.94-23.19-34.29a34.08,34.08,0,0,1,63.88-14.29c3.73,6.66,5.52,13.86,6.56,21.34,2.88,20.72,6.47,24.29,27.34,26.54,7.45.8,14.94,1.16,22.1,3.58C1060.32,454.26,1069.76,467,1069.77,482.17Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M919,482.27c0,19.16-14.4,33.74-33.32,33.75-18.42,0-33.44-15.07-33.65-33.78-.19-18.11,15.55-34.18,33.48-34.2C904.42,448,919,463,919,482.27Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M806.24,584A33.34,33.34,0,0,1,773,550.53c0-19.06,15.35-34.6,34.11-34.49,17.69.1,32.9,15.9,32.87,34.15C840,569.54,825.5,584.06,806.24,584Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M1109.29,584c-18.84,0-33.35-14.69-33.32-33.73,0-18.63,15-34.11,33.27-34.26S1143,531.76,1143,550.47A33.36,33.36,0,0,1,1109.29,584Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-2"
|
||||
d="M978.12,669.4c11,6.59,13.07,18.38,19.47,28.55-7.53,0-14-.05-20.41,0-2.19,0-2.71-1.54-3.47-3-2.89-5.43-5.75-10.89-8.69-16.29a26.34,26.34,0,0,0-3-4.55,5.53,5.53,0,0,0-5.84-2c-2.35.75-1.13,3.14-1.17,4.76q-.24,9,0,18c0,2.4-.76,3.4-3.13,3.09a4.17,4.17,0,0,0-.5,0c-5.14-.12-11.83,1.67-15-.89-3.35-2.71-1-9.68-1.06-14.77-.14-14.48.06-29-.12-43.45,0-3.7.65-5.28,4.86-5.15,11.48.37,23-.11,34.45.38,14.17.6,21.85,13.33,15.92,25.71C988,664.77,983.82,667.59,978.12,669.4Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-2"
|
||||
d="M1295.94,669.63c8.72,4.3,11.2,12.43,15,19.58,4.56,8.7,4.39,8-5.34,9-9.55,1-15.23-2.14-18.27-11.19-1.25-3.73-3.69-7.07-5.6-10.58a8,8,0,0,0-4.31-4c-2.8-1-4.73-.85-4.57,3.11.25,6.15-.07,12.32.13,18.48.09,2.93-.55,4.23-3.81,4-4.31-.29-8.66-.15-13,0-2.13,0-3-.73-3-2.88q.08-29.22,0-58.46c0-2.19.93-2.88,3-2.86,12.32.12,24.66-.15,37,.34,9.63.39,15.45,5.81,16.64,14.21C1311.27,658.55,1307.23,664.93,1295.94,669.63Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M649.73,669.74c8.52,6.15,11.47,15.55,15.85,24,1.54,3,.77,4.38-2.64,4.18-.16,0-.33,0-.5,0-19.42-.64-14.32,3.85-24-14.22-1.73-3.22-3.16-6.64-5.68-9.35-1.38-1.48-3.16-2.77-5.29-1.93-2,.77-1.43,2.82-1.45,4.41-.06,5.49-.15,11,0,16.47.1,3.48-1.36,4.8-4.75,4.65-3.66-.16-7.33-.11-11,0-2.89.07-4.26-1.06-4.25-4.09q.08-28,0-55.91c0-2.3.66-4,3.33-3.93,13,.3,26-1.16,38.86.8,8.48,1.29,12.42,5.45,13.91,13.4s-1.36,14.8-7.89,18.91C652.91,668,651.47,668.75,649.73,669.74Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-2"
|
||||
d="M1061.93,665.52c.22,27.79-26.42,43.19-50.88,29.41-10.9-6.14-16.28-19.87-14-35.86,1.83-13.19,9.69-22.53,22.22-25.09,13.62-2.77,26.63-1.88,36.36,10C1059.92,649.22,1061.85,656.29,1061.93,665.52Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-2"
|
||||
d="M1127.63,656.12c0,5.66.21,11.32,0,17-.7,15.85-10.1,25.15-25.88,25.84a62.73,62.73,0,0,1-15.41-1c-9-1.82-14.74-7.23-17.52-15.86a35.75,35.75,0,0,1-1.69-10.81c-.06-11.15.05-22.3-.09-33.45,0-2.91.64-4.28,3.86-4.08a97.56,97.56,0,0,0,12,0c3.22-.2,3.87,1.16,3.85,4.06-.06,12.15-.13,24.3.24,36.43.2,6.52,4.41,9.88,10.85,9.71s10.13-4,10.27-11.55c.2-10.15.07-20.3.08-30.45,0-8.14,0-8.14,8.14-8.14,11.44,0,11.44,0,11.44,11.33v11Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-2"
|
||||
d="M1194,666.05c0-9.32.1-18.64-.06-27.95-.05-3.07.6-4.41,4.07-4.37,14.81.18,29.62.15,44.43,0,3,0,4.07.8,4,3.91-.34,12,1.4,9.44-9.18,9.68-6.66.15-13.32.23-20,0-4.51-.18-3.59,2.78-3.61,5.29s-.82,5.4,3.67,5.23c7.65-.29,15.31,0,23-.13,2.81-.05,3.67.9,3.75,3.72.26,9.39.37,9.39-9.09,9.39-5.66,0-11.32.21-17-.08-3.61-.18-4.51,1.17-4.4,4.56.33,9.84-1.08,8,8.2,8.14,7,.12,14,.16,21,0,3.31-.09,4.66.76,4.65,4.41,0,10.16.13,10.16-10.18,10.16-12.81,0-25.63-.19-38.43.11-4.13.09-5-1.29-4.88-5.07C1194.13,684,1194,675,1194,666.05Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M674,665.68c0-8.83.13-17.66-.06-26.48-.08-3.85,1.23-5.33,5.19-5.28q21,.24,42,0c3.67,0,5.25,1.31,4.92,5a26.7,26.7,0,0,0,0,4c.22,3.63-1.48,5.1-5.07,5.05-7.33-.1-14.66.08-22-.06-3.77-.07-6,.84-5.94,5.25.05,4.24,2.34,4.9,5.8,4.85,6.49-.1,13,.17,19.49-.08,5.34-.22,4.73,3.27,4.79,6.64.07,3.53.22,6.71-5,6.48-6.48-.29-13,0-19.48-.1-3.49-.08-5.81.49-5.64,4.81.15,4-.43,8,5.35,8.07q8.25.06,16.49.08h4.5c6.95,0,10.3,5.57,7.4,12.2-.77,1.76-2.22,1.84-3.72,1.84-15,0-30,0-45,0-3.5,0-4.09-1.93-4.07-4.81C674.05,684,674,674.84,674,665.68Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M764.12,634c11.63.1,9.68-1.3,13.78,9.89,5.83,15.94,11.85,31.81,17.79,47.7,2.31,6.16,2.19,6.35-4.27,6.37a48.84,48.84,0,0,0-5,0c-5.59.57-10.27,0-11-7.09-.25-2.38-2.23-3-4.48-3a96.37,96.37,0,0,1-10.48,0c-5.48-.51-9.53.48-10.06,7-.17,2.06-1.69,3.1-3.88,3.08-4.32,0-8.65,0-13,0-3.23,0-3.57-1.65-2.6-4.23q10.6-28.28,21.17-56.58a4.23,4.23,0,0,1,4.49-3.14C759.12,634.05,761.62,634,764.12,634Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M828,699c-16.14,0-25.75-5.5-30.34-19.28-3.71-11.14-3.53-22.67,2.69-33.24,6.94-11.78,18.33-14.06,30.69-13.38,9.9.54,18,4.42,22.5,14,2.29,4.89,1.82,6-3.38,7.16-1.46.34-3,.59-4.36,1.07-3.86,1.3-6.55,1.55-9.37-2.92-4.53-7.16-15.17-6-18.9,1.65-3.88,7.93-3.49,16.24-.12,24.19,1.72,4.06,5.24,6.07,10.07,5.89,5.22-.2,8.87-2.7,10.2-7.29,1.44-4.94,4.11-4.75,7.79-3.42.94.33,1.91.59,2.86.9,8.55,2.76,9.23,4.42,4.59,12.2C847.33,695.88,838.62,699.34,828,699Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-3"
|
||||
d="M885.75,634c8,0,16,.13,24-.06,3.76-.08,5.44,1.06,5.36,5.1-.22,12.48,1,10.78-10.5,10.92a21.29,21.29,0,0,1-3,0c-4.43-.54-5.79,1.44-5.72,5.75.22,12-.09,24,.16,36,.1,4.62-1.12,6.48-6.11,6.42-13.91-.18-13.91,0-13.91-14,0-9.5-.19-19,.07-28.48.13-4.45-1.53-6-5.83-5.68-3.14.25-6.33,0-9.49.05-3.41.1-4.77-1.52-4.76-4.85.08-13.06-.92-11,10.24-11.1C872.76,633.91,879.26,634,885.75,634Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-2"
|
||||
d="M1160.51,633.81c8.49,0,17,.09,25.48,0,2.89,0,4,.65,4.11,3.84.26,12,.38,12-11.53,12-8.49,0-8.49,0-8.49,8.42,0,11.66-.21,23.32.11,35,.12,4.32-1.29,5.49-5.33,5.08a50.43,50.43,0,0,0-10,0c-3.66.35-4.36-1.18-4.32-4.52.18-13.15,0-26.31.14-39.46,0-3.45-1-4.8-4.5-4.54s-7.33,0-11,0c-8.69,0-3.28-6.51-4.3-9.89-.8-2.69-1.35-6.28,4.13-6C1143.5,634.14,1152,633.81,1160.51,633.81Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-4"
|
||||
d="M620.63,619.23c2.25-3.54,2.66-6.65,3.51-9.59.51-1.75.78-3.87,3.24-3.73,2.1.13,2.38,2,2.7,3.64,1.07,5.54,1.67,11.19,3.7,16.51a2.48,2.48,0,0,1-1.71,3.55c-1.87.54-2.63-.9-3-2.47-.7-2.72-1.37-5.46-2.36-9.38-1.22,3.49-2,6-2.95,8.43a3.9,3.9,0,0,1-3.2,2.83c-2,.19-2.25-1.59-2.7-3-.71-2.2-1.37-4.4-2.14-6.86-1.57,2.4-1.51,4.92-2.1,7.26-.36,1.43-.72,3.13-2.75,2.92s-2.32-1.86-2-3.37c1.29-5.83,2.72-11.62,4.13-17.42a2.74,2.74,0,0,1,2.81-2.34,3,3,0,0,1,2.61,2.65C619.08,612,619.75,615.17,620.63,619.23Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-5"
|
||||
d="M669.52,621.81a54.35,54.35,0,0,0-.27-12.76c-.2-1.41,0-2.78,1.64-3.14,2-.42,2.85,1.06,2.89,2.58.17,6,.31,12,.08,17.91-.13,3.32-2.41,3.15-4.57,1.7-2.92-2-5-4.77-7.33-7.38l-5.26-6c0,4.57.11,7.92-.05,11.25-.08,1.57-.23,3.7-2.5,3.58s-2.13-2-2.13-3.77q0-8-.16-15.92c0-1.69-.27-3.41,1.89-4.05,1.89-.56,2.69.83,3.57,2C660.83,612.61,664.22,617.5,669.52,621.81Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-6"
|
||||
d="M680.15,618.24c.07-3.43,1.58-7-3.64-8.19-2-.48-1-3.17.93-3.51a28.8,28.8,0,0,1,11.86.56,2,2,0,0,1-.61,4c-4.58-.89-3.66,2.33-3.73,4.82,0,1.5,0,3,0,4.5,0,2.05-.26,4.12,2.93,3.73a2.36,2.36,0,0,1,2.87,2.13c.12,1.68-1.37,2.23-2.69,2.33-3.31.24-6.64.28-10,.4a2.22,2.22,0,0,1-2.38-1.42c-.34-.89.1-2.14.68-2.17C681.94,625.05,679.89,621,680.15,618.24Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-7"
|
||||
d="M641.68,629c-1.49,0-3,0-4.47,0-1.06,0-2-.32-2.24-1.51s.14-2.24,1.27-2.34c3.84-.35,3-3.15,3.11-5.51a44.1,44.1,0,0,1,.2-4.46c.3-2.26.74-4.37-2.7-4.41a2,2,0,0,1-1.93-2.41c.15-1.41,1.24-1.89,2.47-2a40.51,40.51,0,0,1,10.88.64,1.89,1.89,0,0,1,1.7,2.07c0,1.15-.8,2.09-1.82,2-5.08-.67-4,2.91-4.08,5.71,0,1.49.09,3,0,4.47-.16,2,.4,3.11,2.69,2.9,1.6-.14,3.2.37,3.19,2.28s-1.78,2.15-3.27,2.25c-1.65.1-3.31,0-5,0Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-8"
|
||||
d="M961.66,646.49c2.29.26,4.46.34,6.56.79,2.85.61,4,2.75,4.17,5.5s-1,4.9-3.66,5.9c-3.84,1.42-7.86,1.17-11.86,1.14-1.57,0-2-.9-2-2.25,0-2.83-.33-5.7.08-8.47C955.68,644.47,959.61,647.8,961.66,646.49Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-8"
|
||||
d="M1272.85,653.57c.18-7.4-1.3-6.9,6.78-6.89a39.56,39.56,0,0,1,6,.44c3.07.49,4.6,2.53,4.76,5.54s-1,5.15-4,6.15a24.68,24.68,0,0,1-11.36.9C1270.63,659.08,1274,655.27,1272.85,653.57Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-9"
|
||||
d="M633.71,647c6.71,0,9.31,1.77,9.29,6.21,0,4.91-3.2,6.5-11.11,6.9-5.72.29-6.11-2.67-5.94-7C626.19,647,626.06,646.93,633.71,647Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-1"
|
||||
d="M1042.32,664.32c-.11,4.44-.13,7.42-1,10.34-1.76,6.27-5.54,9.35-11.77,9.44s-10.82-3.14-12.44-9.34a34.25,34.25,0,0,1-.3-16.29c1.57-7,5.78-10.73,12.34-10.72s11,3.68,12.5,10.59A42.66,42.66,0,0,1,1042.32,664.32Z"
|
||||
transform="translate(-360 -225)" />
|
||||
<path class="cls-1"
|
||||
d="M764.07,653.2c2.33,5.47,3.63,11.27,5.22,17,.61,2.19-.55,3.2-2.44,3.46s-3.65.16-5.48.26c-3.34.19-4.56-1-3.4-4.46,1.76-5.33,3.19-10.77,4.77-16.16Z"
|
||||
transform="translate(-360 -225)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
@ -4,6 +4,7 @@ date: 2021-08-23 17:28:49
|
||||
tags: [JavaScript, React]
|
||||
categories: 实践
|
||||
url: create-tiny-router-for-react
|
||||
index_img: /images/为React造一个迷你路由器/react-router.svg
|
||||
---
|
||||
|
||||
路由不仅仅只是网络的代名词，它更像是一种表达路径的概念。与网络中的路由相似，前端中的页面路由也是带领我们前往指定的地方。
|
||||
|
||||
@ -2,10 +2,6 @@ html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Microsoft Yahei',
|
||||
'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui,
|
||||
'Hiragino Sans GB', sans-serif;
|
||||
background-color: var(--chakra-colors-home-bg) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
Reference in New Issue
Block a user