xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 08:41:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add footer

Browse Source 
* modify mdx layout
This commit is contained in:
Defectink
2022-03-23 17:15:02 +08:00
parent 332cc905df
commit 717eee7d0a
5 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/Footer.tsx Normal file
View File

@ -0,0 +1,18 @@
import { FC } from 'react';
const nowDay = new Date().getFullYear();
const Footer: FC = () => {
return (
<>
<footer className="px-10">
<div className="h-[2px] bg-slate-500"></div>
<div className="py-4">
&copy; 2022-{nowDay} Powered by Next.js 💙 xfy
</div>
</footer>
</>
);
};
export default Footer;

15
layouts/MDXLayout.tsx
View File

@ -1,12 +1,19 @@
import { FC } from 'react';
import MainLayout from 'layouts/MainLayout';
import dynamic from 'next/dynamic';
const MDXLayout: FC = ({ children }) => {
const Footer = dynamic(() => import('components/Footer'));
const HeadBar = dynamic(() => import('components/NavBar'));
const MainLayout: FC = ({ children }) => {
return (
<>
<MainLayout>{children}</MainLayout>
<HeadBar />
<main id="article">{children}</main>
<Footer />
</>
);
};
export default MDXLayout;
export default MainLayout;

7
layouts/MainLayout.tsx
View File

@ -1,5 +1,8 @@
import { FC } from 'react';
import HeadBar from 'components/NavBar';
import dynamic from 'next/dynamic';
const Footer = dynamic(() => import('components/Footer'));
const HeadBar = dynamic(() => import('components/NavBar'));
const MainLayout: FC = ({ children }) => {
return (
@ -7,6 +10,8 @@ const MainLayout: FC = ({ children }) => {
<HeadBar />
<main>{children}</main>
<Footer />
</>
);
};

8
pages/index.tsx
View File

@ -4,13 +4,15 @@ import type { NextPageWithLayout } from 'types';
const Home: NextPageWithLayout = () => {
return (
<div className="text-lg text-red-700">
<>
<Head>
<title>RUA - HOME</title>
</Head>
<div>hi</div>
</div>
<main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
<div>Hi there,👋 Im a next.js app.</div>
</main>
</>
);
};

2
pages/p/first-post.mdx
View File

@ -6,6 +6,8 @@ tags: ['functions', 'JavaScript']
import Layout from 'layouts/MDXLayout.tsx';
# Hello world
## Hello
This is my first post.