如何在Gramex子文件夹URL中正确关联静态文件

方法1：动态计算相对基准路径 #

在Tornado模板中，根据当前请求的URL层级动态生成基准路径，自动适配不同访问层级：

修改template.html：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  {% set path_segments = request.path.strip('/').split('/') %}
  {% set tmpl_index = path_segments.index('tmpl') if 'tmpl' in path_segments else 0 %}
  {% set base = '.' + '/..' * (len(path_segments) - tmpl_index - 1) %}
  <link rel="stylesheet" href="{{ base }}/style.scss" />
</head>

原理 #

• 拆分当前请求的URL路径为片段，定位tmpl目录所在的层级
• 根据当前路径与tmpl目录的层级差，生成对应数量的../，将相对路径基准拉回tmpl目录
• 无论访问/tmpl、/tmpl/1还是/tmpl/1/1，style.scss都会从正确的目录加载

方法2：使用HTML <base>标签 #

通过<base>标签统一设置页面所有相对路径的基准，一次适配所有资源：

修改template.html：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  {% set path_segments = request.path.strip('/').split('/') %}
  {% set tmpl_index = path_segments.index('tmpl') if 'tmpl' in path_segments else 0 %}
  {% set base_path = '.' + '/..' * (len(path_segments) - tmpl_index - 1) %}
  <base href="{{ base_path }}/" />
  <link rel="stylesheet" href="style.scss" />
</head>

原理 #

• <base>标签会让页面内所有相对路径都以其href值为基准
• 动态计算的base_path确保基准始终指向tmpl目录，后续所有资源的相对路径无需单独调整

方法3：利用Gramex上下文变量传递基准路径 #

通过Gramex内置变量传递基准路径，避免手动计算层级：

1. 修改gramex.yaml的handler配置，添加context传递基准URL：

url:
  endpoint:
    pattern: /$YAMLURL/tmpl/?([^/]*)?/?([0-9]+)?
    handler: FileHandler
    kwargs:
      path: $YAMLPATH/template.html
      template: true
      context:
        base_url: $YAMLURL/tmpl

2. 修改template.html中的资源链接：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="{{ base_url }}/style.scss" />
</head>

原理 #

• $YAMLURL是Gramex内置变量，指向当前配置文件所在的URL路径
• 通过context将基准路径传递到模板，生成的路径会自动适配站点结构，无需硬编码绝对路径

内容的提问来源于stack exchange，提问作者shraddheya shrivastava