如何使用 ManifestStaticFilesStorage 从哈希中排除路径

Question

我参与了一个使用白噪声来提供静态文件的应用程序。它被配置为使用CompressedManifestStaticFilesStoragewhich 依次使用ManifestStaticFilesStorage.

我所说的静态文件是指我们提供的静态文件，以及第三方的传单等库。

该类ManifestStaticFilesStorage由 Django 提供，将重命名文件名以包含哈希值。用于缓存清除。它过滤资源并更改对文件的未散列引用以包含散列。

这又破坏了传单中的一个功能：

_detectIconPath: function () {
    var el = DomUtil.create('div',  'leaflet-default-icon-path', document.body);
    var path = DomUtil.getStyle(el, 'background-image') ||
               DomUtil.getStyle(el, 'backgroundImage'); // IE8

    document.body.removeChild(el);

    return path.indexOf('url') === 0 ?
        path.replace(/^url\([\"\']?/, '').replace(/marker-icon\.png[\"\']?\)$/, '') : '';
}

问题是 的值path看起来像：

url("https://example.org/static/path/leaflet/dist/images/marker-icon.2273e3d8ad92.png")

由于文件名不匹配，第二次替换不会执行任何操作。这又将返回：

https://example.org/static/path/leaflet/dist/images/marker-icon.2273e3d8ad92.png")

当传单尝试将文件名附加到这个“目录”时，我们得到：

https://example.org/static/path/leaflet/dist/images/marker-icon.2273e3d8ad92.png")marker-icon.png

这显然是错误的。

那么解决办法是什么呢？我被告知我们不应该尝试对第三方包的文件名进行哈希处理，否则可能会出现其他损坏。但是，我没有看到任何选项来ManifestStaticFilesStorage排除某些目录被散列。

我创建了以下课程来尝试解决此问题。我在设置中引用此类而不是CompressedManifestStaticFilesStorage.

class MyStorage(CompressedManifestStaticFilesStorage):
    """ This class overrides the built in class and turns off file name hashing for selected directories. """

    def _nonhashed_name_func(self, name, hashed_files=None):
        name = posixpath.normpath(name)
        cleaned_name = self.clean_name(name)
        return cleaned_name

    def _url(self, hashed_name_func, name, force=False, hashed_files=None):
        split = name.split("/")
        if split[0] in ['bower_components', 'node_modules']:
            hashed_name_func = self._nonhashed_name_func
        return super()._url(hashed_name_func=hashed_name_func, name=name, force=force, hashed_files=hashed_files)

然而，这似乎是一个有点不优雅的解决方案。这里有人有更好的建议吗？

Answer 1

我发现这个页面在 Angular2 的上下文中描述了类似的问题：

https://www.npmjs.com/package/@asymmetrik/angular2-leaflet#a-note-about-markers

在传单的具体情况下，解决方案似乎是覆盖默认图标路径。当我使用vue2-leaflet时，可以使用以下命令来完成：

<v-icondefault :image-path="path"></v-icondefault>

根据源代码提供的示例。