HelloWorld | LongSang01

创建于 2025-06-13

初始化

还是这个 Nextra 看起来舒服，rouge 的代码高亮太简陋了，最后还是选择了静态部署。

部署过程参照官方文档

头像

用非常赖子的方式实现了首页的头像渲染

index.mdx


<div className="content">
  <div className="text">
 
头像来自于 [幸运 ☆ 星 25 话 31:55](https://www.bilibili.com/bangumi/play/ep278737)
 
丢点东西到 GitHub 上来
 
  </div>
  <img
    src="/images/Izumi.png"
    alt="Izumi"
    className="profile-img"
  />
</div>
 
<style>{`
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
 
  .profile-img {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    object-fit: cover;
  }
 
  /* 手机端样式 */
  @media (max-width: 768px) {
    .content {
      flex-direction: column;
      align-items: center;
    }
 
    .profile-img {
      width: 80%;
      height: auto;
      margin-top: 1rem;
    }
  }
`}</style>

页面布局配置

/app/layout.jsx


import { Footer, Layout, Navbar } from "nextra-theme-docs";
import { Head, Search } from "nextra/components";
import { getPageMap } from "nextra/page-map";
import "nextra-theme-docs/style.css";
 
export const metadata = {
  title: {
    template: "%s | LongSang01",
  },
};
 
const navbar = (
  <Navbar
    logo={
      <>
        <img
          src="/favicon.ico"
          style={{ width: "24px", height: "24px", marginRight: "8px" }} // 根据需要调整大小和间距
        />
        <span>Life.RunTime()</span>
      </>
    }
    projectLink="https://github.com/LongSang01/longsang01.github.io"
  />
);
const footer = (
  <Footer>
    <span>
      <a href="https://nextra.site/" target="_blank">
        Power By Nextra
      </a>
      <br />
      2025 - {new Date().getFullYear()} ©{" "}
      <a href="https://github.com/LongSang01/" target="_blank">
        LongSang01
      </a>
    </span>
  </Footer>
);
 
export default async function RootLayout({ children }) {
  return (
    <html lang="zh-CN" dir="/" suppressHydrationWarning>
      <Head>
        {/* Your additional tags should be passed as `children` of `<Head>` element */}
      </Head>
      <body>
        <Layout
          navbar={navbar}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/LongSang01/longsang01.github.io/"
          footer={footer}
          editLink={null}
          feedback={{ content: "" }}
          search={<Search placeholder={"搜索"} />}
          toc={{ title: "此页面", backToTop: "回到顶部" }}
          // ... Your additional layout options
        >
          {children}
        </Layout>
      </body>
    </html>
  );
}

部署到 GitHub Pages

next.config.mjs


import nextra from "nextra";
 
const withNextra = nextra({
  // ... Other Nextra config options
  defaultShowCopyCode: true,
});
 
// You can include other Next.js configuration options here, in addition to Nextra settings:
export default withNextra({
  distDir: "build", //导出目录
  output: "export", //配置静态导出
  trailingSlash: true, //配置输出时导出路由 html
  images: {
    unoptimized: true, //关闭图像优化
  },
});

next.js 编译后静态资源在 /_next
需要添加 .nojekyll 让 github 不使用 jekyll, 不然默认不会加载.和_开头的文件
在 public 目录下创建 .nojekyll
即可在每次构建后自动添加该文件

提交编译后的 build 目录即可