Nextjs Blog Template | Ladder Theme | Blog

本仓库是 hugo-ladder-theme 的 Nextjs 实现。

这是一个 Nextjs 博客模板，下面介绍这个模板的一些基本用法。

如何本地进行开发？

npm install


npm run dev

如何部署

Clone 或者 fork 到本地，按照下面的方式修改配置，然后在 Vercel 选择该仓库进行部署。

部署的配置所有选择默认即可，不需要进行特殊配置。

如果你需要使用 edge 或者 fluid compute，请自行修改代码或者 vercel 配置。

博客配置

1. 如何编写博客

这个仓库的博客文件需要放在 src/content/blog 目录下，可以是 markdown 文件，也可以是 mdx 文件。

有以下这些元数据需要用户自行根据需要进行配置：

• title: 博客标题
• date: 博客发布日期
• updated: 博客更新日期
• keywords: 博客关键词，优化 SEO
• featured: 是否放在首页
• summary: 博客摘要

2. 博客配置

博客的所有配置都集中在 src/lib/config.ts 文件中，这样做的好处是：

1. 集中管理：所有配置都在一个文件中，方便维护和修改
2. 类型安全：使用 TypeScript 可以获得类型检查和自动补全
3. 复用性：避免重复的配置散落在各个文件中
4. 一致性：确保所有地方使用相同的配置值

2.1 站点基本配置

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",
}

这些配置用于：

• 网站的基本信息展示
• SEO 优化
• 浏览器标签页图标
• 社交媒体分享预览

2.2 作者信息配置

author: {
  name: "你的名字",
  email: "你的邮箱",
  bio: "个人简介",
}

作者信息会用于：

• 首页展示
• RSS 订阅源信息
• 博客文章的作者信息

2.3 社交媒体配置

social: {
  github: "https://github.com/你的用户名",
  x: "https://x.com/你的用户名",
  xiaohongshu: "https://www.xiaohongshu.com/user/profile/你的ID",
  wechat: "你的微信二维码图片链接",
  buyMeACoffee: "https://www.buymeacoffee.com/你的用户名",
}

这些链接会显示在：

• 首页的社交媒体链接区域
• 导航栏的社交媒体图标

2.4 评论系统配置

giscus: {
  repo: "你的GitHub仓库名",
  repoId: "仓库ID",
  categoryId: "分类ID",
}

使用 Giscus 作为评论系统，需要：

1. 在 GitHub 上安装 Giscus 应用
2. 在你的仓库中启用 Discussions
3. 获取配置信息并填入这里

2.5 导航菜单配置

navigation: {
  main: [
    { 
      title: "文章", 
      href: "/blog",
    },
    // 可以添加更多导航项
  ],
}

这里配置网站的导航菜单，支持：

• 普通链接
• 带子菜单的下拉菜单

2.6 SEO 配置

seo: {
  metadataBase: new URL("https://你的域名.com"),
  alternates: {
    canonical: './',
  },
  openGraph: {
    type: "website" as const,
    locale: "zh_CN",
  },
  twitter: {
    card: "summary_large_image" as const,
    creator: "@你的推特用户名",
  },
}

这些配置用于：

• 搜索引擎优化
• 社交媒体分享卡片
• 网站元数据

2.7 RSS 订阅配置

rss: {
  title: "你的博客标题",
  description: "博客描述",
  feedLinks: {
    rss2: "/rss.xml",
    json: "/feed.json",
    atom: "/atom.xml",
  },
}

这些配置用于生成：

• RSS 2.0 订阅源
• JSON Feed
• Atom 订阅源

3. 如何修改配置

1. 打开 src/lib/config.ts 文件
2. 根据你的需求修改相应的配置项
3. 保存文件后，Next.js 会自动重新构建并应用新的配置

注意事项：

• 确保所有 URL 都是有效的
• 图片链接应该是可访问的
• 社交媒体链接要填写完整的 URL
• 配置修改后，建议检查网站的：
  • 首页展示
  • 导航菜单
  • SEO 信息
  • 社交媒体分享效果
  • RSS 订阅源

4. 如何生成 RSS 订阅源

修改 scripts/generate-rss.js 文件中的配置，然后运行：

npm run generate-rss

5. 如何生成 Sitemap

修改 scripts/generate-sitemap.js 文件中的配置，然后运行：

npm run generate-sitemap