自用 Next.js 博客程序放出

date
Aug 16, 2022
slug
nextjs-blog-release
status
Published
tags
代码
summary
这几天沉迷 WOT,又是快一个月没更。想起来之前发现 GitHub 上各种比我水的 Next.js 博客程序,干脆把我的也发出来接受民众拷打吧。
type
Post
这几天沉迷 WOT,又是快一个月没更。想起来之前发现 GitHub 上各种比我水的 Next.js 博客程序,干脆把我的也发出来接受民众拷打吧。

只能说仅供参考,不建议用。 这一个月没研究连我写了什么都不清楚了,刚好复习下。
本质和 Hexo 是一个用法。没有后台还是数据库什么的。
复制了接近 600 篇文章,生成速度大概27秒左右,应该不算太慢。貌似是有缓存功能,第二次生成速度会快点,这个不太清楚了。
写的很水,真的很水。

特色

  • 独立页面(如关于页)
  • 归档、链接页面
  • 不算完善的深色模式
  • 支持 Markdown 编写文章,文章内图片及链接兼容了 next/imagenext/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.jsfooter.js。 主要页面放在了 src/pages 这些页面都会被 layout.js 包裹。
修改样式则直接对文件里的 Tailwind CSS 下手即可。

部署

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

© Cesirdy 2022

粤ICP备2022045639号又拍云