本仓库是 hugo-ladder-theme 的 Nextjs 实现。
这是一个 Nextjs 博客模板,下面介绍这个模板的一些基本用法。
npm install
npm run dev
Clone 或者 fork 到本地,按照下面的方式修改配置,然后在 Vercel 选择该仓库进行部署。
部署的配置所有选择默认即可,不需要进行特殊配置。
如果你需要使用 edge 或者 fluid compute,请自行修改代码或者 vercel 配置。
这个仓库的博客文件需要放在 src/content/blog
目录下,可以是 markdown 文件,也可以是 mdx 文件。
有以下这些元数据需要用户自行根据需要进行配置:
title
: 博客标题date
: 博客发布日期updated
: 博客更新日期keywords
: 博客关键词,优化 SEOfeatured
: 是否放在首页summary
: 博客摘要博客的所有配置都集中在 src/lib/config.ts
文件中,这样做的好处是:
site: {
title: "你的博客标题",
name: "你的博客名称",
description: "博客描述",
keywords: ["关键词1", "关键词2"],
url: "https://你的域名.com",
baseUrl: "https://你的域名.com",
image: "https://你的域名.com/og-image.png",
favicon: {
ico: "/favicon.ico",
png: "/favicon.png",
svg: "/favicon.svg",
appleTouchIcon: "/favicon.png",
},
manifest: "/site.webmanifest",
}
这些配置用于:
author: {
name: "你的名字",
email: "你的邮箱",
bio: "个人简介",
}
作者信息会用于:
social: {
github: "https://github.com/你的用户名",
x: "https://x.com/你的用户名",
xiaohongshu: "https://www.xiaohongshu.com/user/profile/你的ID",
wechat: "你的微信二维码图片链接",
buyMeACoffee: "https://www.buymeacoffee.com/你的用户名",
}
这些链接会显示在:
giscus: {
repo: "你的GitHub仓库名",
repoId: "仓库ID",
categoryId: "分类ID",
}
使用 Giscus 作为评论系统,需要:
navigation: {
main: [
{
title: "文章",
href: "/blog",
},
// 可以添加更多导航项
],
}
这里配置网站的导航菜单,支持:
seo: {
metadataBase: new URL("https://你的域名.com"),
alternates: {
canonical: './',
},
openGraph: {
type: "website" as const,
locale: "zh_CN",
},
twitter: {
card: "summary_large_image" as const,
creator: "@你的推特用户名",
},
}
这些配置用于:
rss: {
title: "你的博客标题",
description: "博客描述",
feedLinks: {
rss2: "/rss.xml",
json: "/feed.json",
atom: "/atom.xml",
},
}
这些配置用于生成:
src/lib/config.ts
文件注意事项:
修改 scripts/generate-rss.js 文件中的配置,然后运行:
npm run generate-rss
修改 scripts/generate-sitemap.js 文件中的配置,然后运行:
npm run generate-sitemap