Skip to content

Commit

Permalink
refactor: 在前台 Layout 组件中抽离一些组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mereithhh
Mereithhh committed Sep 6, 2022
1 parent ac1eb31 commit 445c00b
Show file tree
Hide file tree
Showing 5 changed files with 212 additions and 169 deletions.
46 changes: 46 additions & 0 deletions packages/website/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import RunningTime from "../RunningTime";
import Viewer from "../Viewer";

export default function (props: {
ipcNumber: string;
ipcHref: string;
since: string;
version: string;
}) {
return (
<>
<footer className="text-center text-sm space-y-1 mt-8 md:mt-12 dark:text-dark">
{Boolean(props.ipcNumber) && props.ipcNumber != "" && (
<p className="">
ICP 编号:{" "}
<a
href={props.ipcHref}
target="_blank"
className="hover:text-gray-900 hover:underline-offset-2 hover:underline dark:hover:text-dark-hover transition"
>
{props.ipcNumber}
</a>
</p>
)}
<RunningTime since={props.since}></RunningTime>
<p className="">
Powered By{" "}
<a
href="https://vanblog.mereith.com"
target={"_blank"}
className="hover:text-gray-900 hover:underline-offset-4 hover:underline dark:hover:text-dark-hover transition"
>
VanBlog <span>{props.version}</span>
</a>
</p>

<p className="select-none">
© {new Date(props.since).getFullYear()} - {new Date().getFullYear()}
</p>
<p className="select-none">
<Viewer></Viewer>
</p>
</footer>
</>
);
}
202 changes: 34 additions & 168 deletions packages/website/components/Layout/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import Head from "next/head";

import BackToTopBtn from "../BackToTop";
import NavBar from "../NavBar";
import Viewer from "../Viewer";
import { slide as Menu } from "react-burger-menu";
import { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import BaiduAnalysis from "../BaiduAnalysis";
import GaAnalysis from "../gaAnalysis";
import { LayoutProps } from "../../utils/getLayoutProps";
import RunningTime from "../RunningTime";
import ImageProvider from "../ImageProvider";
import { RealThemeType, ThemeContext } from "../../utils/themeContext";
import { decodeTheme } from "../../utils/theme";
import CustomLayout from "../CustomLayout";
import { Toaster } from "react-hot-toast";
import Footer from "../Footer";
import NavBarMobile from "../NavBarMobile";
import LayoutBody from "../LayoutBody";
export default function (props: {
option: LayoutProps;
title: string;
Expand Down Expand Up @@ -46,28 +44,24 @@ export default function (props: {
document.body.style.overflow = "auto";
};
}, [props]);
const renderLinks = useCallback(() => {
const arr: any[] = [];
props.option.links.forEach((item) => {
arr.push(
<li
className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2"
key={item.name}
>
<a
className="w-full inline-block px-4 "
target="_blank"
href={item.value}
>
{item.name}
</a>
</li>
);
});
return arr;
}, [props]);
return (
<>
<Head>
<title>{props.title}</title>
<link rel="icon" href={props.option.favicon}></link>
<meta name="description" content={props.option.description}></meta>
<meta name="robots" content="index, follow"></meta>
</Head>
<BackToTopBtn></BackToTopBtn>
{props.option.baiduAnalysisID != "" &&
process.env.NODE_ENV != "development" && (
<BaiduAnalysis id={props.option.baiduAnalysisID}></BaiduAnalysis>
)}

{props.option.gaAnalysisID != "" &&
process.env.NODE_ENV != "development" && (
<GaAnalysis id={props.option.gaAnalysisID}></GaAnalysis>
)}
<ThemeContext.Provider
value={{
setTheme,
Expand All @@ -76,16 +70,6 @@ export default function (props: {
>
<Toaster />
<ImageProvider>
{props.option.baiduAnalysisID != "" &&
process.env.NODE_ENV != "development" && (
<BaiduAnalysis id={props.option.baiduAnalysisID}></BaiduAnalysis>
)}

{props.option.gaAnalysisID != "" &&
process.env.NODE_ENV != "development" && (
<GaAnalysis id={props.option.gaAnalysisID}></GaAnalysis>
)}

<NavBar
showRSS={props.option.showRSS}
defaultTheme={props.option.defaultTheme}
Expand All @@ -102,140 +86,22 @@ export default function (props: {
logoDark={props.option.logoDark}
showFriends={props.option.showFriends}
></NavBar>
<BackToTopBtn></BackToTopBtn>
<div>
<Menu
id="nav-mobile"
disableAutoFocus={true}
customCrossIcon={false}
customBurgerIcon={false}
isOpen={isOpen}
onStateChange={(state) => {
if (state.isOpen) {
// 要打开
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
<NavBarMobile
isOpen={isOpen}
setIsOpen={setIsOpen}
showAdminButton={props.option.showAdminButton}
showFriends={props.option.showFriends}
links={props.option.links}
/>

setIsOpen(state.isOpen);
}}
>
<ul
onClick={() => {
document.body.style.overflow = "auto";
setIsOpen(false);
}}
className=" sm:flex h-full items-center text-sm text-gray-600 hidden divide-y divide-dashed dark:text-dark "
>
<li className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2">
<Link href={"/"}>
<a className="w-full inline-block px-4 ">主页</a>
</Link>
</li>
<li className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2">
<Link href={"/tag"}>
<a className="w-full inline-block px-4 ">标签</a>
</Link>
</li>
<li className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2">
<Link href={"/category"}>
<a className="w-full inline-block px-4 ">分类</a>
</Link>
</li>
<li className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2">
<Link href={"/timeline"}>
<a className="w-full inline-block px-4 ">时间线</a>
</Link>
</li>
{props.option.showFriends == "true" && (
<li className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2">
<Link href={"/link"}>
<a className="w-full inline-block px-4 ">友链</a>
</Link>
</li>
)}
{props.option.showAdminButton == "true" && (
<li
className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2"
key={"rss-phone-nav-btn"}
>
<a
className="w-full inline-block px-4 "
target="_blank"
href={"/admin"}
>
{"后台"}
</a>
</li>
)}
<li className="side-bar-item dark:border-dark-2 dark:hover:bg-dark-2">
<Link href={"/about"}>
<a className="w-full inline-block px-4 ">关于</a>
</Link>
</li>
{renderLinks()}
</ul>
</Menu>
</div>
<div className=" mx-auto lg:px-6 md:py-4 py-2 px-2 md:px-4 text-gray-700 ">
<Head>
<title>{props.title}</title>
<link rel="icon" href={props.option.favicon}></link>
<meta
name="description"
content={props.option.description}
></meta>
<meta name="robots" content="index, follow"></meta>
</Head>

{
<div className="flex mx-auto justify-center">
<div className="flex-shrink flex-grow md:max-w-3xl xl:max-w-4xl w-full">
{props.children}
</div>
<div
className={`hidden lg:block flex-shrink-0 flex-grow-0 ${
Boolean(props.sideBar) ? "w-52" : ""
}`}
>
{props.sideBar}
</div>
</div>
}
<footer className="text-center text-sm space-y-1 mt-8 md:mt-12 dark:text-dark">
{Boolean(props.option.ipcNumber) && props.option.ipcNumber != "" && (
<p className="">
ICP 编号:{" "}
<a
href={props.option.ipcHref}
target="_blank"
className="hover:text-gray-900 hover:underline-offset-2 hover:underline dark:hover:text-dark-hover transition"
>
{props.option.ipcNumber}
</a>
</p>
)}
<RunningTime since={props.option.since}></RunningTime>
<p className="">
Powered By{" "}
<a
href="https://vanblog.mereith.com"
target={"_blank"}
className="hover:text-gray-900 hover:underline-offset-4 hover:underline dark:hover:text-dark-hover transition"
>
VanBlog <span>{props.option.version}</span>
</a>
</p>

<p className="select-none">
© {new Date(props.option.since).getFullYear()} -{" "}
{new Date().getFullYear()}
</p>
<p className="select-none">
<Viewer></Viewer>
</p>
</footer>
<LayoutBody children={props.children} sideBar={props.sideBar} />
<Footer
ipcHref={props.option.ipcHref}
ipcNumber={props.option.ipcNumber}
since={props.option.since}
version={props.option.version}
/>
</div>
</ImageProvider>
</ThemeContext.Provider>
Expand Down
21 changes: 21 additions & 0 deletions packages/website/components/LayoutBody/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
export default function (props: {
children: any;
sideBar: any;
}) {
return (
<>
<div className="flex mx-auto justify-center">
<div className="flex-shrink flex-grow md:max-w-3xl xl:max-w-4xl w-full">
{props.children}
</div>
<div
className={`hidden lg:block flex-shrink-0 flex-grow-0 ${
Boolean(props.sideBar) ? "w-52" : ""
}`}
>
{props.sideBar}
</div>
</div>
</>
);
}
Loading

0 comments on commit 445c00b

Please sign in to comment.