init commit

src/components/Comments/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Giscus from "@giscus/react";
+import { useColorMode } from "@docusaurus/theme-common";
+
+export default function Comments(): JSX.Element {
+  const { colorMode } = useColorMode();
+
+  return (
+    <div>
+      <Giscus
+        id="comments"
+        repo="codfrm/blog"
+        repoId="MDEwOlJlcG9zaXRvcnkxOTY2ODAyNzk="
+        category="Blog Message"
+        categoryId="DIC_kwDOC7kaV84CeCC_"
+        mapping="og:title"
+        strict="0"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="top"
+        theme={colorMode === "dark" ? "dark_tritanopia" : "light_tritanopia"}
+        lang="zh-CN"
+        loading="lazy"
+      />
+    </div>
+  );
+}

src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,70 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Easy to Use',
+    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: 'Focus on What Matters',
+    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    description: (
+      <>
+        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        ahead and move your docs into the <code>docs</code> directory.
+      </>
+    ),
+  },
+  {
+    title: 'Powered by React',
+    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
+
+function Feature({title, Svg, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

src/css/custom.css

@@ -0,0 +1,65 @@
+/* @tailwind base; */
+@tailwind components;
+@tailwind utilities;
+
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #4594d5;
+  --ifm-color-primary-dark: #2f87cf;
+  --ifm-color-primary-darker: #2c7fc4;
+  --ifm-color-primary-darkest: #2469a1;
+  --ifm-color-primary-light: #5ca1da;
+  --ifm-color-primary-lighter: #68a8dd;
+  --ifm-color-primary-lightest: #8abce5;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-font-family-base: Roboto, "PingFang SC", "Microsoft Yahei", sans-serif;
+  --ifm-heading-font-family: Roboto, Verdana, "Raleway", "PingFang SC", "Microsoft Yahei", sans-serif;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #4594d5;
+  --ifm-color-primary-dark: #2f87cf;
+  --ifm-color-primary-darker: #2c7fc4;
+  --ifm-color-primary-darkest: #2469a1;
+  --ifm-color-primary-light: #5ca1da;
+  --ifm-color-primary-lighter: #68a8dd;
+  --ifm-color-primary-lightest: #8abce5;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-button-color: #fff;
+}
+
+[data-theme='dark'] .home .bg-dark {
+  background: rgba(75, 85, 99);
+}
+
+
+[data-theme='dark'] .home .bg-light {
+  background: #262b30;
+}
+
+.home .bg-dark {
+  background: #fff;
+}
+
+.home .bg-light {
+  background: rgba(75, 85, 99);
+  color: #fff;
+}
+
+a:hover {
+  color: unset;
+  text-decoration: unset;
+}
+
+.navbar__logo {
+  border-radius: 100%;
+  overflow: hidden;
+}

src/pages/index.module.css

@@ -0,0 +1,40 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hide-zhan:hover .hide-zhan-1 {
+  text-decoration: line-through;
+}
+
+
+.hide-zhan:hover .hide-zhan-2 {
+  display: inline;
+}
+
+.hide-zhan-2 {
+  display: none;
+}
+
+.social a {
+  font-size: 2rem;
+}

src/pages/index.tsx

@@ -0,0 +1,140 @@
+import Layout from "@theme/Layout";
+import clsx from "clsx";
+import styles from "./index.module.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Link from "@docusaurus/Link";
+import LatestDocs from "docusaurus-plugin-docs-info/src/components/LatestDocs";
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header
+      className={clsx("hero", styles.heroBanner) + " flex flex-col gap-2 !pb-0"}
+    >
+      <div className="flex flex-row text-left px-8 items-center">
+        <div className="flex flex-col flex-1">
+          <h1 className="text-4xl mb-8">
+            Hi！我是
+            <span style={{ color: "var(--ifm-color-primary)" }}>王一之</span>
+          </h1>
+          <p className="text-lg">
+            欢迎来到我的个人博客，一个什么都会点的全
+            <span className={styles["hide-zhan"]}>
+              <span className={styles["hide-zhan-1"]}>栈</span>
+              <span className={styles["hide-zhan-2"]}>沾</span>
+            </span>
+            工程师，这里记录了我的一些学习笔记和技术分享。目前主要使用
+            <Link to="https://go.dev/">
+              <code>Golang</code>
+            </Link>
+            与
+            <Link to="https://www.typescriptlang.org/">
+              <code>TypeScript</code>
+            </Link>
+            ✖️
+            <Link to="https://react.dev/">
+              <code>React</code>
+            </Link>
+            进行开发，也会写一些关于
+            <Link to="/ops">
+              <code>运维</code>
+            </Link>
+            、
+            <Link to="/ops">
+              <code>工具分享</code>
+            </Link>
+            之类的文章。
+            <br />
+            平常喜欢做开源项目，目前我正在开发
+            <Link to="https://docs.scriptcat.org" rel="">
+              <code>脚本猫</code>
+            </Link>
+            与运营
+            <Link to="https://bbs.tampermonkey.net.cn/" rel="">
+              <code>油猴中文网</code>
+            </Link>
+            ，你可以在我的
+            <Link to="https://github.com/codfrm">
+              <code>Github</code>
+            </Link>
+            中找到更多关于我的开源项目。
+            <br />
+            <br />
+            博客源码托管在
+            <Link
+              to={
+                "https://github.com/" +
+                siteConfig.organizationName +
+                "/" +
+                siteConfig.projectName
+              }
+              rel=""
+            >
+              <code>GitHub</code>
+            </Link>
+            上，如果觉得还不错，顺手点个 Star 吧！
+          </p>
+          <div className={"flex flex-row gap-3 " + styles.social}>
+            <a href="https://space.bilibili.com/17047572" target="_blank">
+              <Icon icon="ri:bilibili-fill" />
+            </a>
+            <a href="https://github.com/CodFrm" target="_blank">
+              <Icon icon="ri:github-fill" />
+            </a>
+            <a href="mailto:yz@ggnb.top">
+              <Icon icon="ri:mail-fill" />
+            </a>
+          </div>
+          <br />
+          <div className="flex flex-row gap-2 items-center">
+            <Link to="/blog">
+              <button className="button button--primary button--lg">
+                开始阅读
+              </button>
+            </Link>
+            {/* <a
+              href="https://github.com/CodFrm"
+              style={{
+                height: "20px",
+              }}
+            >
+              <img src="https://img.shields.io/github/stars/codfrm/blog?style=social" />
+            </a> */}
+          </div>
+        </div>
+        <div className="flex-1">
+          <img src="/img/home-1.svg" />
+        </div>
+      </div>
+      <div
+        className="flex flex-col gap-3 w-full p-4"
+        style={{
+          background: "var(--ifm-color-emphasis-0)",
+          borderTop: "1px solid var(--ifm-color-emphasis-100)",
+        }}
+      >
+        <h1
+          className="w-full text-2xl"
+          style={{
+            fontWeight: "bold",
+          }}
+        >
+          最新文章
+        </h1>
+        <LatestDocs />
+      </div>
+    </header>
+  );
+}
+
+function Index() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout title="首页" description={siteConfig.tagline}>
+      <HomepageHeader />
+    </Layout>
+  );
+}
+
+export default Index;

src/theme/DocItem/Footer/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Footer from "@theme-original/DocItem/Footer";
+// @ts-ignore
+import Comments from "/src/components/Comments";
+import { useDoc } from "@docusaurus/theme-common/internal";
+
+export default function FooterWrapper(props) {
+  const { metadata } = useDoc();
+  const { comments = true } = metadata.frontMatter;
+
+  return (
+    <>
+      <Footer {...props} />
+      {comments && <Comments />}
+    </>
+  );
+}