最近在使用 Nextjs 完成工作，用的很舒服，遂决定用来重新开发下之前 hexo 弄的主页。

项目在这里 minimal-tailwind-nextjs-blog

技术选择

首先是框架，除了 Nextjs 之外，我平时也很常用的 tailwindcss，可以快速构建网站页面。 经过查找最后决定使用“开箱即用”的 tailwind-nextjs-starter-blog作为基础来重构主页。

设计参考

很喜欢这种干净的页面，但是同时又有不少小设计，作为参考来制作。

开发列表

  • layout 修改
  • 色彩模式
  • i18n 国际化
  • 评论系统
  • rss 生成
  • 音乐播放器
  • 主页的线性动画效果
  • PDF 预览

问题与一些解决方案

favicons 以及 manifest

动效框架

页面的动画效果使用的framer-motion

能打打节省开发动画的时间,并且让动画的过渡更加丝滑。

不得不说和 vue 相比，react 的动画库真的多太多了。

github page 静态部署

首先是项目中关于静态部署的设置，在文档中写的很清楚tailwind-nextjs-starter-blog，设置过就可以 build 了。

已经 build 过后，就会生成网页静态文件，然后在 github 新建一个 YourGitName.github.io 的仓库，将文件上传到仓库中即可。不过手动上传毕竟十分麻烦，可以使用 github action 来自动部署。可以自行参考文档部署。

需要注意的是，github page 使用 jekyll 部署，会自动忽略下划线开头的文件，导致_next 文件夹中的 js css 无法加载，在其中新建一个.nojekyll 即可

meta 信息

tailwind-nextjs-starter-blog 项目本身的 meta 信息就是参考 Hugo 的设置, 可以自行查看文档。

过滤 Post 的修改

在修改 Post 过滤过程中，其实就是 daaft 设置为 true，在 dev 模式还能正常显示，在 build 模式就会消失，如果想要做一些修改 可以搜索一个外部方法 allCoreContent ，这个方法会在 NODE_ENV 为 production 的时候过滤掉 draft 修改。然后做自己的修改即可。

评论系统

tailwind-nextjs-starter-blog 所提供的 comments 组件似乎有一些加载问题，所以最后还是自己解决。

giscus giscus-react

Terminal window
npm i @giscus/react
//作为组件中使用  现在giscus官网获取id 然后将下面替换即可
import Giscus from "@giscus/react";
export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

build 后的中文路径问题

我在 dev 模式中没有问题，但是当我打包 build 后出现路径问题。

app/blog/[...slug]/page.tsx
const isDev = process.env.NODE_ENV === "development";
const isBuild = process.env.NEXT_PUBLIC_IS_BUILD === "true";
export const generateStaticParams = async () => {
  if (isDev) {
    return allBlogs.map((p) => ({
      slug: p.slug.split("/").map((name) => encodeURIComponent(name))
    }));
  } else {
    return allBlogs.map((p) => ({
      slug: p.slug.split("/").map((name) => decodeURI(name))
    }));
  }
};
next.config.js
const isDev = process.env.NODE_ENV === 'development'
const isBuild =process.env.NODE_ENV === 'production' && process.env.NEXT_PUBLIC_IS_BUILD === 'true'
env: {
 NEXT_PUBLIC_IS_BUILD: isBuild.toString(),
},
package.json
"scripts":{
 "build": "cross-env NEXT_PUBLIC_IS_BUILD=true && cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",
}

最后

断断续续花了快 1 周时间才大概整好，其中比较花时间的是音乐播放器的动画效果，我使用 rive，从一开始画图到制作动画，还是很有趣的过程，最后效果也还可以，未来有时间我还会继续优化的。