基础路径

通常情况下，网站都位于顶层。这意味着如果您有一个根文件 index.html，并且您的网站托管在域名 https://mysite.com 下，那么可以通过访问 https://mysite.com/index.html 来访问该HTML文件。

然而，在某些情况下，您的网站可能托管在一个子文件夹下，例如 https://example.com/products/myproduct/，这种情况下，您网站的根 index.html 文件将位于 https://example.com/products/myproduct/index.html。

Kobweb 需要知道这种子文件夹结构，以便在其路由逻辑中考虑到这一点。这可以在您项目的 .kobweb/conf.yaml 文件中通过 site 部分下的 basePath 值来指定：

site:
  title: "..."
  basePath: "..."

其中 basePath 的值是URL的源部分和您网站根目录之间的部分。例如，如果您的网站根目录在 https://example.com/products/myproduct/，那么 basePath 的值应该是 products/myproduct。

一旦您在 conf.yaml 文件中设置了 basePath，通常可以在设计网站时不用显式提到它，因为 Kobweb 提供了能够处理基础路径的组件。例如，Link("/docs/manuals/v123.pdf") 会自动解析为 https://example.com/products/myproduct/docs/manuals/v123.pdf。

当然，您可能会发现自己在使用一些不支持基础路径的外部 Kobweb 代码。如果您需要在自己的代码中显式访问基础路径值，可以使用 BasePath.value 属性或调用 BasePath.prepend 伴生方法。

// Video 元素来自 Compose HTML，它不支持基础路径。
// 因此，我们需要手动将基础路径添加到视频源中。
Video(attrs = {
    width(320)
    height(240)
}) {
    Source(attrs = {
        attr("type", "video/mp4")
        attr("src", BasePath.prependTo("/videos/demo.mp4"))
    })
 }
 

Finally, you may find yourself declaring head elements in your build script with paths in them. Such declarations are not base-path aware, so you need to manually intercept them yourself.

The kobweb.index block exposes a basePath property that you can use for this purpose.

For example, let's say you've downloaded a script file called analytics.js that you've put into your src/jsMain/resources/public directory, and you've also set the basePath for your site.

kobweb {
    app {
        index {
            head.add {
                script { src = basePath.prependTo("/analytics.js")}
            }
        }
    }
}