Skip to content

techLaoLi/nextjs-website

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1,118 Commits
.devcontainer
.devcontainer
 
 
.github
.github
 
 
.husky
.husky
 
 
.vscode
.vscode
 
 
.yarn/releases
.yarn/releases
 
 
app
app
 
 
components
components
 
 
css
css
 
 
data
data
 
 
faq
faq
 
 
layouts
layouts
 
 
public/static
public/static
 
 
scripts
scripts
 
 
.env.example
.env.example
 
 
.gitattributes
.gitattributes
 
 
.gitignore
.gitignore
 
 
.yarnrc.yml
.yarnrc.yml
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
contentlayer.config.ts
contentlayer.config.ts
 
 
eslint.config.mjs
eslint.config.mjs
 
 
jsconfig.json
jsconfig.json
 
 
next-env.d.ts
next-env.d.ts
 
 
next.config.js
next.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
prettier.config.js
prettier.config.js
 
 
tsconfig.json
tsconfig.json
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

tailwind-nextjs-banner

老李的个人博客（Tailwind Nextjs 启动博客）

Deploy with Vercel

这是一个基于 Next.js 和 Tailwind CSS 的博客启动模板。第 2 版基于 Next App 目录，使用 React Server Component 并使用 Contentlayer 来管理 markdown 内容。

这可能是功能最丰富的 Next.js markdown 博客模板。易于配置和定制，是替代现有的 Jekyll 和 Hugo 个人博客的完美选择。

请查看下面的文档开始使用。

V2 版本示例

使用该模板？请随意创建 PR 并将您的博客添加到此列表中。

功能特性

  • 使用 Typescript 的 Next.js
  • Contentlayer 管理内容逻辑
  • 使用 Tailwind 3.0 和主色调属性轻松定制样式
  • MDX - 在 markdown 文档中编写 JSX！
  • 接近完美的 lighthouse 分数 - Lighthouse 报告
  • 轻量级，首次加载 JS 仅 85kB
  • 移动端友好视图
  • 浅色和深色主题
  • 使用 next/font 进行字体优化
  • 与 pliny 集成，提供：
    • 多种分析选项，包括 Umami、Plausible、Simple Analytics、Posthog 和 Google Analytics
    • 通过 Giscus、Utterances 或 Disqus 进行评论
    • 新闻通讯 API 和组件，支持 Mailchimp、Buttondown、Convertkit、Klaviyo、Revue、Emailoctopus 和 Beehiiv
    • 使用 Kbar 或 Algolia 进行命令面板搜索
  • 通过 rehype-prism-plus 实现服务器端语法高亮，支持行号和行高亮
  • 通过 KaTeX 支持数学公式显示
  • 通过 rehype-citation 支持引用和参考文献
  • 通过 remark-github-blockquote-alert 支持 Github alerts
  • 通过 next/image 实现自动图像优化
  • 支持标签 - 每个唯一标签都将拥有自己的页面
  • 支持多个作者
  • 3 种不同的博客布局
  • 2 种不同的博客列表布局
  • 支持博客文章的嵌套路由
  • 项目页面
  • 预配置的安全头
  • SEO 友好，包含 RSS 订阅、站点地图等！

示例文章

快速入门指南

  1. 克隆仓库
npx degit 'timlrx/tailwind-nextjs-starter-blog'
  1. 个性化 siteMetadata.js（站点相关信息）
  2. 如果要使用其他分析提供商或 giscus 以外的评论解决方案，请修改 next.config.js 中的内容安全策略。
  3. 个性化 authors/default.md（主要作者）
  4. 修改 projectsData.ts
  5. 修改 headerNavLinks.ts 以自定义导航链接
  6. 添加博客文章
  7. 部署到 Vercel

安装

yarn

请注意，如果您使用的是 Windows，可能需要运行：

$env:PWD = $(Get-Location).Path

开发

首先，运行开发服务器：

yarn dev

在浏览器中打开 http://localhost:3000 查看结果。

编辑 app 中的布局或 data 中的内容。通过实时重载，页面会在您编辑时自动更新。

扩展/自定义

data/siteMetadata.js - 包含大部分应为用户需求修改的站点相关信息。

data/authors/default.md - 默认作者信息（必需）。可以在 data/authors 中添加额外的作者文件。

data/projectsData.js - 用于在项目页面生成样式卡片的数据。

data/headerNavLinks.js - 导航链接。

data/logo.svg - 替换为您自己的 logo。

data/blog - 替换为您自己的博客文章。

public/static - 存储图像和 favicon 等资产。

tailwind.config.js 和 css/tailwind.css - tailwind 配置和样式表，可以修改以更改网站的整体外观和感觉。

css/prism.css - 控制与代码块相关的样式。可以随意自定义并使用您喜欢的 prismjs 主题，例如 prism themes。

contentlayer.config.ts - Contentlayer 的配置，包括内容源定义和使用的 MDX 插件。更多信息请参见 Contentlayer 文档。

components/MDXComponents.js - 通过在此处指定，传递您自己的 JSX 代码或 React 组件。然后可以直接在 .mdx 或 .md 文件中使用它们。默认情况下，传递了一个自定义链接、next/image 组件、目录组件和新闻通讯表单。请注意，组件应该默认导出以避免 Next.js 的现有问题。

layouts - 页面中使用的主要模板：

  • 目前有 3 种文章布局可用：PostLayout、PostSimple 和 PostBanner。PostLayout 是默认的两列布局，包含元信息和作者信息。PostSimple 是 PostLayout 的简化版本，而 PostBanner 具有横幅图像。
  • 有 2 种博客列表布局：ListLayout，这是模板第 1 版中使用的布局，带有搜索栏；ListLayoutWithTags，目前在第 2 版中使用，省略了搜索栏但包含带有标签信息的侧边栏。

app - 路由到的页面。更多信息请阅读 Next.js 文档。

next.config.js - 与 Next.js 相关的配置。如果要从其他域加载脚本、图像等，需要调整内容安全策略。

文章

内容使用 Contentlayer 建模，它允许您定义自己的内容模式并使用它生成类型化的内容对象。更多信息请参见 Contentlayer 文档。

Frontmatter

Frontmatter 遵循 Hugo 的标准。

请参考 contentlayer.config.ts 获取最新支持字段列表。支持以下字段：

title (必填)
date (必填)
tags (可选)
lastmod (可选)
draft (可选)
summary (可选)
images (可选)
authors (可选列表，应与 `data/authors` 中的文件名对应。如果未指定则使用 `default`)
layout (可选列表，应与 `data/layouts` 中的文件名对应)
canonicalUrl (可选，SEO 的文章规范 URL)

以下是文章 frontmatter 的示例：

---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

部署

GitHub Pages

已提供 pages.yml 工作流。只需在以下位置选择"GitHub Actions"：Settings > Pages > Build and deployment > Source。

Vercel

部署模板的最简单方法是部署到 Vercel。更多详情请查看 Next.js 部署文档。

Netlify

Netlify 的 Next.js 运行时配置可在您的网站上启用关键的 Next.js 功能，而无需额外配置。Netlify 生成无服务器函数来处理 Next.js 功能，如服务器端渲染 (SSR) 页面、增量静态再生 (ISR)、next/images 等。

有关建议的配置值和更多详细信息，请参见 Netlify 上的 Next.js。

静态托管服务（GitHub Pages / S3 / Firebase 等）

运行：

$ EXPORT=1 UNOPTIMIZED=1 yarn build

然后，部署生成的 out 文件夹或在本地运行 npx serve out。

Important

如果使用 URL 基础路径部署，如 https://example.org/myblog，您需要在构建命令中添加额外的 BASE_PATH shell 变量：

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> 在您的代码中，${process.env.BASE_PATH || ''}/robots.txt 将在 out 构建中打印 "/myblog/robots.txt"（或者如果 yarn dev，即在 localhost:3000 上只打印 /robots.txt）

Tip

作为 UNOPTIMIZED=1 的替代方案，要继续使用 next/image，您可以使用替代的图像优化提供商，如 Imgix、Cloudinary 或 Akamai。有关更多详细信息，请参见 图像优化文档。

考虑移除无法在静态构建中使用的以下功能：

  1. 从 next.config.js 中注释掉 headers()。
  2. 移除 api 文件夹和调用服务器端函数的组件，如新闻通讯组件。技术上不是必需的，站点将成功构建，但 API 无法使用，因为它们是服务器端函数。

常见问题解答

About

一个自己的个人博客网站

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Sponsor this project

 
Learn more about GitHub Sponsors

Packages

No packages published

Contributors 180
+ 166 contributors

Languages