https://image.wenhaofree.com/2025/01/default-post.webp

如何在Docusaurus中引入TailwindCSS

WenHao 发布于 2023-10-26 收录于技术教程

https://farer.org/2021/10/08/docusaurus-with-tailwindcss/

最近在重新撸我们 Kratos 文档的 landing page 。我们的文档站用了 facebook 开源的 Docusaurus 作为文档平台，这里写样式想偷懒用一下 TailwindCSS，就需要把 Tailwind 集成到现有的 Docusaurus 项目中，我在官方仓库中找到了这个 issue ，稍做调整后用在了我们自己的项目里，该方法在 2.0.0-beta6 可用。 Docusaurus 是基于 React 的项目，它的 landing page 是一个独立的 component，另外想修改其它组件，比如 navbar 或者 footer，可以参考 Swizzling theme components 把相应的组件代码暴露出来以便修改。我们这次主要想实现的是，能够使用 tailwind 定义我们新组件的样式，并且不与 docusaurus 自带的样式冲突。

首页 | N-Tool在线工具工具集合网站

WenHao 发布于 2023-10-25 收录于技术教程

https://n-tool.com/index.html

主页
全部
资源类
开发类
文本类
图像类
代码类
运维类
学术类
查询类

开发者导航 Web开发各类常用网站 13.33k [资源类] https://n-tool.com/t/guide/ 二维码生成在线生成美化的二维码 12.42k [图像类] https://n-tool.com/t/qrcode/ 二维码扫描在线解析上传的二维码 12.07k [图像类] https://n-tool.com/t/qrscan/ 世界时钟查询全球5000+城市时间 11.95k [查询类] https://n-tool.com/t/timezone/ Base64转换文本/图片Base64编解码 11.94k [开发类] https://n-tool.com/t/base64/ CSS编辑在线格式化/压缩CSS 11.94k [代码类] https://n-tool.com/t/css/ Java工具一键格式化你的Java代码 11.84k [代码类] https://n-tool.com/t/java/ XML工具一键格式化/压缩XML代码 11.82k [开发类] https://n-tool.com/t/xml/ JSON工具 JSON格式化/压缩/转义/比对 11.8k [开发类] https://n-tool.com/t/json/ 进制转换在线2~36进制转换器 11.79k [开发类] https://n-tool.com/t/base/ Web安全色全浏览器通用安全色列表 11.78k [资源类] https://n-tool.com/t/webcolor/ 占位图生成生成任意尺寸占位图，填补空缺 11.78k [图像类] https://n-tool.com/t/tempimg/ HTTP码表 HTTP状态码详解/对照表 11.76k [资源类] https://n-tool.com/t/httpcode/ 常用端口参考 TCP/UDP常用端口及详细信息 11.75k [资源类] https://n-tool.com/t/ports/ ASCII对照表常用ASCII码对照表/转换工具 11.73k [资源类] https://n-tool.com/t/ascii/ 文本对比文本/代码差异对比工具 11.73k [文本类] https://n-tool.com/t/compare/ PHP工具在线格式化/压缩PHP代码 11.72k [代码类] https://n-tool.com/t/php/ 在线图片编辑各格式图片压缩/调整大小 11.72k [图像类] https://n-tool.com/t/compress/ SQL工具多种SQL数据库格式化/压缩 11.72k [代码类] https://n-tool.com/t/sql/ JS工具在线格式化/压缩JavaScript 11.67k [代码类] https://n-tool.com/t/js/ favicon生成生成高清favicon.ico图标 11.65k [图像类] https://n-tool.com/t/favicon/ UA分析根据User-Agent分析访客 11.64k [运维类] https://n-tool.com/t/ua/ 常用颜色表常用色调分类大全 11.63k [资源类] https://n-tool.com/t/colors/ UNIX时间戳取当前时间戳/日期格式互转 11.61k [开发类] https://n-tool.com/t/unixtime/ URL编码/解码在线文本urlencode/urldecode 11.59k [代码类] https://n-tool.com/t/urlcode/ SVG绘制在线SVG调色/绘制/编辑器 11.58k [开发类] https://n-tool.com/t/svg-edit/ HTML工具在线格式化/压缩HTML 11.58k [代码类] https://n-tool.com/t/html/ MIME对照表文件MIME拓展类型查询 11.57k [资源类] https://n-tool.com/t/mime/ RGB/HEX工具在线RGB/HEX格式颜色转换 11.55k [开发类] https://n-tool.com/t/rgba/ 正则测试在线正则表达式测试工具 11.54k

next js的Image组件说明

WenHao 发布于 2023-10-19 收录于技术教程

Next.js的Image组件是一个内置的组件，用于优化图像加载。它提供了懒加载、自动格式转换和响应式加载等功能。

以下是一个基本的使用示例：

import Image from 'next/image'

function MyComponent() {
  return (
    <Image
      src="/path/to/image.jpg" // 图像的源路径
      alt="Description" // 图像的描述
      width={500} // 图像的宽度
      height={300} // 图像的高度
    />
  )
}

优点：

next js之_app&_document

WenHao 发布于 2023-10-19 收录于技术教程

_app.js说明

在Next.js中，_app.js和_document.js是两个特殊的文件，它们允许你控制你的应用的外部行为和文档结构。

_app.js: 这个文件用于初始化所有页面。你可以在这个文件中导入全局CSS，或者添加全局的布局，状态管理等。例如：

import '../styles/global.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

在这个例子中，我们导入了一个全局的CSS文件，并且渲染了每个页面的组件。

next js之pages目录路由说明

WenHao 发布于 2023-10-19 收录于技术教程

Next.js使用一个名为pages的特殊目录。这个目录用于自动路由。每一个在pages目录下的.js、.jsx、.ts或.tsx文件都会自动成为一个可访问的路由。以下是一个示例：

next js之目录结构说明

WenHao 发布于 2023-10-19 收录于技术教程

Next.js 项目结构

本页面提供 Next.js 项目的文件和文件夹结构概述。它涵盖了顶层文件和文件夹、配置文件以及应用程序和页面目录中的路由约定。

顶层文件夹

文件夹名	说明
app	应用程序路由
pages	页面路由
public	静态资源文件夹
src	可选的应用程序源代码文件夹

顶层文件

文件名	说明
Next.js	Next.js 运行时文件
next.config.js	Next.js 的配置文件
package.json	项目依赖和脚本
instrumentation.ts	OpenTelemetry 和 Instrumentation 文件
middleware.ts	Next.js 请求中间件
.env	环境变量
.env.local	本地环境变量
.env.production	生产环境变量
.env.development	开发环境变量
.eslintrc.json	ESLint 的配置文件
.gitignore	Git 忽略的文件和文件夹
next-env.d.ts	Next.js 的 TypeScript 声明文件
tsconfig.json	TypeScript 的配置文件
jsconfig.json	JavaScript 的配置文件

app 路由约定

路由文件

文件名	扩展名	说明
layout	.js .jsx .tsx	布局
page	.js .jsx .tsx	页面
loading	.js .jsx .tsx	加载界面
not-found	.js .jsx .tsx	未找到界面
error	.js .jsx .tsx	错误界面
global-error	.js .jsx .tsx	全局错误界面
route	.js .ts	API 端点
template	.js .jsx .tsx	重新渲染的布局
default	.js .jsx .tsx	并行路由回退页面

嵌套路由

使用文件夹表示路由片段

动态路由

[folder] 表示动态路由片段
[…folder] 表示匹配所有路由片段
[[…folder]] 表示可选匹配所有路由片段

路由组和私有文件夹

(folder) 表示路由组，不影响路由
_folder 表示私有文件夹，不参与路由

并行和拦截路由

@folder 表示命名插槽
(.)folder 表示拦截同级路由
(..)folder 表示拦截上一级路由
(..)(..)folder 表示拦截上两级路由
(…)folder 表示从根目录拦截

元数据文件约定

App 图标

favicon.ico 表示网站图标文件
icon.ico .jpg .jpeg .png .svg 表示应用程序图标文件
icon.js .ts .tsx 表示生成的应用程序图标文件
apple-icon.jpg .jpeg .png 表示苹果应用程序图标文件
apple-icon.js .ts .tsx 表示生成的苹果应用程序图标文件

Open Graph 和 Twitter 图像

opengraph-image.jpg .jpeg .png .gif 表示 Open Graph 图像文件
opengraph-image.js .ts .tsx 表示生成的 Open Graph 图像文件
twitter-image.jpg .jpeg .png .gif 表示 Twitter 图像文件
twitter-image.js .ts .tsx 表示生成的 Twitter 图像文件

SEO

sitemap.xml 表示网站地图文件
sitemap.js .ts 表示生成的网站地图文件
robots.txt 表示 Robots 文件
robots.js .ts 表示生成的 Robots 文件

pages 路由约定

特殊文件

_app.js .jsx .tsx 表示自定义 App
_document.js .jsx .tsx 表示自定义 Document
_error.js .jsx .tsx 表示自定义错误页面
404.js .jsx .tsx 表示404错误页面
500.js .jsx .tsx 表示500错误页面

路由

使用文件夹和文件的命名约定来表示路由

以上是 Next.js 项目结构的概述。

next js之入门安装教程

WenHao 发布于 2023-10-19 收录于技术教程

自动安装

我们建议使用 create-next-app 来开始一个新的 Next.js 应用，它会自动为您设置好一切。要创建一个项目，请运行：

npx create-next-app@latest

安装过程中，您将看到以下提示：

next js之入门教程

WenHao 发布于 2023-10-19 收录于技术教程

项目创建:

安装配置:

我们建议使用 create-next-app创建新的 Next.js 应用程序，它会自动为你设置所有内容。创建项目，请运行：

npx create-next-app@latest
# or
yarn create next-app

如果你希望使用 TypeScript 开发项目，可以通过 --typescript 参数创建 TypeScript 项目：

next js之页面路由

WenHao 发布于 2023-10-19 收录于技术教程

定义路由

我们建议在继续之前阅读路由基础知识页面。

本页面将指导您如何在 Next.js 应用程序中定义和组织路由。

创建路由

Next.js 使用基于文件系统的路由器，其中使用文件夹来定义路由。

next js中next.config.js说明

WenHao 发布于 2023-10-19 收录于技术教程

next.config.js是Next.js项目中的一个配置文件，它允许你对Next.js的默认配置进行自定义。以下是一个如何在next.config.js中配置开发环境和生产环境的示例：