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
配置项来实现:
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 和其他静态资源。
注意事项
- favicon 是特例,可以直接放在
config
目录下,也可以通过配置指定路径。 - robots.txt 和其他静态文件应该放在
config/public
目录下。 - 只有
.gitkeep
文件会被忽略,其他文件都会被处理。