init finish

components/Copyright.js

@@ -0,0 +1,5 @@
+function Copyright({ Component, pageProps }) {
+  return "©";
+}
+
+export default Copyright;

components/Footer.js

@@ -0,0 +1,15 @@
+import Link from "next/link";
+
+import styles from '../styles/Footer.module.css';
+
+export default function Footer() {
+  return (
+    <>
+      <footer className={styles.footer}>
+        <small>
+          ©2022-2023 Social OJO. All Rights Reserved.
+        </small>
+      </footer>
+    </>
+  );
+}

components/Header.js

@@ -0,0 +1,33 @@
+import styles from "../styles/Header.module.css";
+import Link from "next/link";
+
+// images
+import headerBackground from "../public/typhoon.png";
+
+export default function Header({ titleText }) {
+  return (
+    <>
+      <nav className={styles.toolbar}>
+        <strong>
+          <Link href="/">Social OJO</Link>
+        </strong>
+        <div className={styles.nav}>
+          <span>
+            <Link href="/">主页</Link>
+          </span>
+          <span>
+            <Link href="/posts/init">关于</Link>
+          </span>
+        </div>
+      </nav>
+      <h1 className={styles.title}>{titleText || "Social OJO"}</h1>
+      <header
+        className={styles.header}
+        style={{
+          backgroundImage: `url('${headerBackground.src}')`,
+        }}
+      >
+      </header>
+    </>
+  );
+}