URL管理

相关源文件

• README.md
• content/assets/cover/money.jpg
• content/collections/js/data-structures.yaml
• content/languages/css.yaml
• content/languages/html.yaml
• content/languages/javascript.yaml
• content/languages/react.yaml
• content/redirects.yaml
• content/snippets/css/s/engraved-embossed-text.md
• content/snippets/css/s/gradient-text.md
• content/snippets/css/s/isometric-card.md
• content/snippets/css/s/squiggle-link-hover-effect.md
• content/snippets/js/s/count-grouped-elements.md
• content/snippets/js/s/get-vertical-offset.md
• content/snippets/js/s/modeling-money-currency-exchange-rates.md
• content/snippets/js/s/sort-array-of-objects.md

在 30 Seconds of Code 仓库中，URL 管理负责定义网站的 URL 结构、将内容映射到 URL 以及处理重定向。该系统确保用户可以通过一致、可预测的 URL 访问内容，并且通过重定向使旧的 URL 保持有效。

URL 结构

该网站使用结构化的 URL 模式，遵循分层组织，以帮助用户导航内容并理解不同资源之间的关系。

URL 模式

URL 结构遵循这些一致的模式

URL模式	描述	示例
/	网站根目录/主页	https://30secondsofcode.org/
/language/p/page	特定语言的内容页面	/js/p/1
/language/s/snippet-slug	单个代码片段	/js/s/array-min-max
/language/collection/page	特定语言的集合	/js/array-methods/1
/collections/p/page	所有集合的分页	/collections/p/1
/snippets/p/page	所有代码片段的分页	/snippets/p/1

其中

• language 是语言的简写代码（例如 js、css、python）
• page 是分页的页码（从 1 开始）
• snippet-slug 是代码片段的唯一标识符
• collection 是相关代码片段集合的 slug

来源: content/redirects.yaml1-1026 README.md7-10

重定向系统

重定向系统确保用户即使在使用过时的 URL、缩短的 URL 或替代 URL 模式时也能访问内容。这对于在网站发展过程中保持向后兼容性至关重要。

重定向流程

重定向类型

重定向系统支持几种类型的重定向，如 redirects.yaml 文件中定义的那些

1. 简单重定向：从一个路径直接映射到另一个路径

2. 语言重定向：指向特定语言页面的快捷方式

3. 路径参数重定向：使用 :splat 语法保留路径组件

4. 集合快捷方式：从集合简写重定向到完整路径

5. 内容类型重定向：在不丢失路径的情况下更改内容类型

重定向系统通常使用状态码 301! 表示永久重定向，感叹号可确保客户端缓存，而 200 则用于从同一逻辑资源提供替代内容。

来源: content/redirects.yaml1-1026

与内容系统的集成

URL 管理系统与内容管理系统集成，以将 URL 映射到内容并为内容项生成 URL。

URL 到内容的映射

内容 URL 生成

在显示内容时，系统必须生成用于导航、代码片段链接、集合链接等的 URL。不同内容类型的 URL 结构是一致的，并遵循 URL 结构部分中描述的模式。

对于代码片段，URL 是根据语言和 slug 生成的

• /[language]/s/[slug]

对于集合，URL 是根据语言和集合 slug 生成的

• /[language]/[collection-slug]

对于分页列表，URL 格式包含页码

• /[language]/p/[page]
• /collections/p/[page]
• /snippets/p/[page]

来源: content/redirects.yaml1-1026 README.md7-10

特殊 URL 模式

URL 管理系统处理几种对网站功能至关重要的特殊 URL 模式

分页 URL

分页通过 /p/[page] 模式处理，该模式在多种情况下使用

• /snippets/p/[page] - 全局代码片段分页
• /collections/p/[page] - 全局集合分页
• /[language]/p/[page] - 特定语言分页

内容类型标识符

内容类型通过 URL 模式进行标识

• /s/ 前缀表示代码片段
• /c/ 前缀（在某些重定向中）表示集合
• /t/ 前缀（在某些重定向中）表示标签

旧版 URL 支持

该系统通过重定向支持众多旧版 URL 模式，确保来自外部站点或旧文档的链接继续有效。值得注意的例子包括

• /tag/* 重定向到语言页面
• /articles/* 重定向到代码片段页面
• /list/* 重定向到代码片段页面

来源: content/redirects.yaml1-1026

URL 管理与网站导航

URL 结构旨在促进用户通过网站层次结构的直观导航。

这种分层结构允许用户

1. 通过全局列表浏览所有内容
2. 专注于特定语言
3. 浏览特定语言内的集合
4. 直接或通过集合访问单个代码片段

URL 管理系统确保这些导航路径反映在 URL 结构中，使网站对用户而言更加直观和可预测。

来源: README.md7-10 content/redirects.yaml1-1026

总结

30 Seconds of Code 中的 URL 管理系统是用户界面 URL 与内部内容结构之间的桥梁。它提供了

1. 所有网站内容的一致、分层的 URL 模式
2. 用于向后兼容的全面重定向系统
3. 与内容系统的集成，用于将 URL 映射到内容
4. 对分页和内容类型标识符等特殊 URL 模式的支持

该系统对于维护良好的用户体验、支持 SEO 以及确保内容随着时间的推移保持可访问性至关重要。