/ddcode.site

我的作品集是用 Tailwind CSS、Nextjs 和 MDX 构建的。记录个人的一些笔记,包括但不限于Java、PHP、Flutter、学习和项目🔥

Primary LanguageJavaScript

tailwind-nextjs-banner

Tailwind Nextjs Starter Blog

GitHub Repo stars GitHub forks Twitter URL Sponsor

Deploy with Vercel

This is a Next.js, Tailwind CSS blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Check out the documentation below to get started.

Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.

Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!

特征

https://github.com/timlrx/tailwind-nextjs-starter-blog#features

快速入门指南

https://github.com/timlrx/tailwind-nextjs-starter-blog#quick-start-guide

安装

npm install

Development

First, run the development server:

npm start

or

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

扩展/自定义

https://github.com/timlrx/tailwind-nextjs-starter-blog#extend--customize

目前支持 7 个字段

title (required)
date (required)
tags (required, can be empty array)
lastmod (optional)
draft (optional)
summary (optional)
images (optional, if none provided defaults to socialBanner in siteMetadata config)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

这是一个帖子的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
---

撰写

运行 node ./scripts/compose.js 以引导新帖子。

按照交互式提示生成带有预先填写的前端内容的帖子。

Deploy

https://github.com/timlrx/tailwind-nextjs-starter-blog#deploy