skip to content
rainbow ゆめこ

Modern.js 静态文件

/ 3 min read

用了才觉着nextjs的好,一堆定制化设计,加上案例少,ai基本都整不明白,还要手动查文档。

在 Modern.js 项目中,静态文件的处理有特定的规则和目录结构。本教程将介绍如何正确配置两种常见的静态文件:robots.txt 和 favicon。

目录结构

Modern.js 的静态文件主要放在以下位置:

项目根目录/
├── config/ # 配置目录
│ ├── favicon.ico # favicon 文件可以直接放在 config 目录下
│ └── public/ # 公共静态资源目录
│ └── robots.txt # robots.txt 应该放在 config/public 目录下
├── modern.config.ts # Modern.js 配置文件
└── ...

favicon 配置

favicon 是网站的图标,在 Modern.js 中有三种配置方式:

1. 直接放在 config 目录下

Modern.js 会自动查找 config 目录下的 favicon 文件:

支持的扩展名包括:.ico.png.jpg.jpeg.svg 等。

2. 在配置文件中指定路径

你可以在 modern.config.ts 中通过 html.favicon 配置项指定 favicon 的路径:

3. 放在 config/public 目录下

你也可以将 favicon 放在 config/public 目录下,它会被自动识别并处理。

robots.txt 配置

robots.txt 是告诉搜索引擎爬虫哪些页面可以抓取,哪些不可以抓取的文件。

1. 文件位置

与大多数框架不同,Modern.js 中的 robots.txt 不应该放在项目根目录的 public 文件夹下,而是应该放在 config/public 目录下:

Modern.js 会查找 configDir/public 目录(默认为 config/public)下的静态文件,而不是项目根目录下的 public 目录。

2. 自定义访问路径

如果你需要自定义 robots.txt 的访问路径,可以在 modern.config.ts 中通过 server.publicRoutes 配置项来实现:

modern.config.ts
import { defineConfig } from '@modern-js/app-tools';
export default defineConfig({
server: {
publicRoutes: {
'robots.txt': '/custom/path/robots.txt', // 自定义路径
},
},
});

这样,config/public/robots.txt 文件将被映射到 /custom/path/robots.txt 路径。

静态资源处理机制

Modern.js 的静态资源中间件会处理这些文件: static.ts:115-122

这段代码显示了 Modern.js 如何处理静态文件,包括 favicon 和其他静态资源。

注意事项

  1. favicon 是特例,可以直接放在 config 目录下,也可以通过配置指定路径。
  2. robots.txt 和其他静态文件应该放在 config/public 目录下。
  3. 只有 .gitkeep 文件会被忽略,其他文件都会被处理。