自用 Next.js 博客程序放出

这几天沉迷 WOT，又是快一个月没更。想起来之前发现 GitHub 上各种比我水的 Next.js 博客程序，干脆把我的也发出来接受民众拷打吧。

只能说仅供参考，不建议用。 这一个月没研究连我写了什么都不清楚了，刚好复习下。

本质和 Hexo 是一个用法。没有后台还是数据库什么的。

复制了接近 600 篇文章，生成速度大概27秒左右，应该不算太慢。貌似是有缓存功能，第二次生成速度会快点，这个不太清楚了。

写的很水，真的很水。

GitHub: Cesirdy/next-blog

特色

• 独立页面（如关于页）
• 归档、链接页面
• 不算完善的深色模式
• 支持 Markdown 编写文章，文章内图片及链接兼容了 next/image 和 next/link
• 文章内目录
• 文章排版使用了 typo.css 并做了一定修改
• Tailwind CSS
• Disqus 评论，但是 DisqusJS
• Sitemap（借助插件）和 RSS（脚本生成）

文件结构

├─public
│  └─img
│      ├─pages
│      │  └─页面id
│      │         图片.png
│      └─posts
│         ├─文章id 1
│         │      图片名.png
│         ├─文章id 2
│         │      图片名1.jpg
│         │      图片名2.png           
├─scripts
│      g-rss.js
│      new-post.js
└─src
   ├─components
   ├─lib
   ├─pages 
   ├─sources
   │  ├─pages
   │  │      页面id.md
   │  └─posts
   │         文章id 1.md
   │         文章id 2.md
   └─styles

写文章

终端输入 npm run new 文章id 就会在 src/sources/posts 下生成一个 文章id.md。

摘要则是写在第一条分割线与第二条分割线之间，详情参考 GitHub 仓库里的示例文章。

如需插入图片，则在 public/img/posts 下新建一个名为 文章id 的文件夹，在里面放入图片。如放入了 abc.png，则文章内输入 ![alt](abc.png)。暂时没有外链引入方式。

文章内链接如果指向站内则会自动使用 next/link。

新建页面则是在 pages 文件夹进行，其余操作类似。

配置

在根目录下编写 next.config.js，基本已经注释上了。

评论则是修改 src/components/comment.js，这个怎么改就参考 DisqusJS 的 readme 吧。

Sitemap 配置需要修改 next-sitemap.config.js，RSS 生成配置则修改 scripts/g-rss.js。

样式

没有主题功能，都是直接写死在上面的，如果要改只能挨个改。

src/components/layout.js 是基本结构，包含了头部、顶栏导航和页脚。主要页面会生成在中间。 顶栏导航和页脚则分别对应同目录下的 nav.js 和 footer.js。 主要页面放在了 src/pages 这些页面都会被 layout.js 包裹。

修改样式则直接对文件里的 Tailwind CSS 下手即可。

部署

这部分建议参考 Next.js 官方文档的部署教程。